/* ==========================================================================
   BURLONI B-TECH — COMPONENTES
   Todos os estados (rest / hover / focus / active / disabled) definidos.
   Estado faltando é o detalhe nº1 que denuncia site amador.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTÃO
   -------------------------------------------------------------------------- */

.btn {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding-inline: var(--sp-5);
  border-radius: var(--r-md);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
  transition:
    background-color var(--d-state) var(--e-snap),
    border-color     var(--d-state) var(--e-snap),
    box-shadow       var(--d-state) var(--e-snap),
    transform        var(--d-tap)   var(--e-snap);
}
.btn:active { transform: translateY(1px) scale(.995); }

/* Primário: cobalto chapado + branco (contraste ~4.8:1 em 16px/600) */
.btn--primary {
  background: var(--c-cobalt);
  color: #FFFFFF;
  box-shadow: var(--sh-cobalt);
}
.btn--primary:hover {
  background: var(--c-cobalt-hi);
  box-shadow: 0 16px 40px -14px rgba(31,111,235,.8);
}
/* Varredura de luz no hover: micro-interação de 1 pseudo-elemento,
   custo zero de layout, e é o que dá sensação de material caro. */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 600ms var(--e-out);
  z-index: -1;
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover {
  border-color: var(--c-line-strong);
  background: var(--a-white-06);
}

.btn--lg { --btn-h: 60px; font-size: 1.0625rem; padding-inline: var(--sp-6); }
.btn--sm { --btn-h: 40px; font-size: var(--t-sm); padding-inline: var(--sp-5); }
.btn--block { width: 100%; }
/* Pill: para o botão nascer dentro de um contêiner arredondado (o header).
   Raio de 5px dentro de um pill de 999px lê como peça de outro kit. */
.btn--pill { border-radius: var(--r-pill); }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45;
  pointer-events: none;
  box-shadow: none;
}

/* Legenda secundária dentro do botão (ex.: "Preto · G") */
.btn__meta {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  opacity: .78;
}

/* --------------------------------------------------------------------------
   NAVBAR
   -------------------------------------------------------------------------- */

/* HEADER PILL — barra flutuante arredondada, destacada das bordas.
   O contêiner externo não tem fundo: quem desenha é o pill interno, para
   que a página apareça em volta dele. */
.nav {
  position: fixed;
  top: calc(var(--h-topbar) + var(--sp-3));
  left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--sp-gutter);
  /* Só o pill captura clique: o resto da faixa deixa passar para a página */
  pointer-events: none;
  transition: top 320ms var(--e-out);
}
/* Quando a barra de promoção recolhe, o pill sobe para o lugar dela */
.nav.is-solid { top: var(--sp-3); }

.nav__inner {
  pointer-events: auto;
  width: 100%;
  max-width: 64rem;
  height: var(--h-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  /* Inset simétrico: o botão tem 40px numa barra de 56px, logo sobram 8px
     acima e abaixo. A folga da direita acompanha esse mesmo 8px, e a da
     esquerda é maior porque ali não há botão — só a marca respirando. */
  padding-left: var(--sp-5);
  padding-right: 8px;
  border-radius: var(--r-pill);
  background: rgba(11, 13, 14, 0.55);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--a-white-10);
  box-shadow: var(--sh-2);
  transition: background-color var(--d-state) ease, border-color var(--d-state) ease;
}
/* Ao rolar, o pill fica mais opaco: o conteúdo passando atrás não pode
   competir com os links. */
.nav.is-solid .nav__inner {
  background: rgba(11, 13, 14, 0.82);
  border-color: var(--c-line-strong);
}
.nav__inner .btn { flex: none; }
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Estado de texto (antes de o SVG carregar, ou se ele não existir) */
.nav__logo-slot { display: inline-flex; align-items: center; }
.nav__logo-slot--btech {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--c-cobalt-text);
}

/* Filete entre as duas marcas: separa sem competir. */
.nav__logo-sep {
  flex: none;
  width: 1px;
  height: 18px;
  background: var(--c-line-strong);
}

/* Logo em arquivo. Alturas diferentes de propósito: a Burloni é a marca
   principal, a B-Tech é a linha — hierarquia por escala, não por cor. */
.logo__img { width: auto; display: block; }
.nav__logo-slot[data-logo='burloni'] .logo__img { height: 17px; }
.nav__logo-slot[data-logo='btech']   .logo__img { height: 11px; }
@media (min-width: 900px) {
  .nav__logo-slot[data-logo='burloni'] .logo__img { height: 20px; }
  .nav__logo-slot[data-logo='btech']   .logo__img { height: 13px; }
}
/* Telas muito estreitas: a linha sai e fica só a marca principal, para o
   botão de compra nunca ser espremido. */
@media (max-width: 400px) {
  .nav__logo-sep,
  .nav__logo-slot--btech { display: none; }
}

.nav__links { display: none; gap: var(--sp-6); }
.nav__link {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  transition: color var(--d-state) ease;
}
.nav__link:hover { color: var(--c-text); }
@media (min-width: 900px) { .nav__links { display: flex; } }

/* --------------------------------------------------------------------------
   BARRA DE PROMOCAO (topo) — âmbar exclusivo
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-bar);
  height: var(--h-topbar);
  /* Recolhe ao rolar: duas barras fixas + CTA fixo é chrome demais.
     O preço continua visível no seletor, na oferta e no CTA fixo. */
  transition: transform 320ms var(--e-out);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
  background: linear-gradient(90deg, var(--c-graphite), #14181A, var(--c-graphite));
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-align: center;
}
.topbar.is-solid { transform: translateY(-100%); }
.topbar strong { color: var(--c-amber); font-weight: 500; }
.topbar s { color: var(--c-text-faint); text-decoration-thickness: 1px; }

/* Versão longa do texto só onde ela cabe: em 375px a frase completa
   estoura a linha em mono 11px com tracking. */
.topbar__long { display: none; }
@media (min-width: 620px) { .topbar__long { display: inline; } }
.topbar__dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-amber);
  animation: dotPulse 2.6s var(--e-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,61,.5); }
  60%      { box-shadow: 0 0 0 8px rgba(255,138,61,0); }
}
html.no-motion .topbar__dot { animation: none; }

/* --------------------------------------------------------------------------
   CARD DE TECNOLOGIA
   -------------------------------------------------------------------------- */

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background:
    linear-gradient(180deg, var(--a-white-06), transparent 42%),
    var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-state) ease, background-color var(--d-state) ease,
              transform var(--d-state) var(--e-snap);
}
/* Filete cobalto que cresce no hover: direciona o olhar sem mover o texto */
.tcard::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: linear-gradient(180deg, var(--c-cobalt-text), var(--c-cobalt));
  transition: height 420ms var(--e-out);
}
.tcard:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.tcard:hover::before { height: 100%; }

.tcard__icon { width: 34px; height: 34px; color: var(--c-cobalt-text); }
/* overflow visible: o vapor e as ondas de odor saem da viewBox de propósito */
.tcard__icon svg { width: 100%; height: 100%; overflow: visible; }

/* As classes .ic-* dentro dos ícones (.ic-ring, .ic-wave, .ic-hole, .ic-flow,
   .ic-wrinkle, .ic-flat, .ic-drop, .ic-vapor, .ic-hot, .ic-cold, .ic-mid) NÃO
   têm estilo aqui de propósito: são alvos das micro-animações em scroll.js.
   Quem controla transform/opacity/stroke-dashoffset delas é o GSAP — declarar
   os mesmos valores no CSS criaria dois donos para a mesma propriedade. */

/* Cor chapada, pelo mesmo motivo do .line-mask: gradiente recortado em texto
   é frágil e aqui não acrescenta nada. O contraste do número vem do peso e
   do tamanho — o ícone acima é quem carrega o cobalto. */
.tcard__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-num);
  line-height: .9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.tcard__num small { font-size: .46em; letter-spacing: 0; }

.tcard__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tcard__desc { font-size: var(--t-sm); color: var(--c-text-dim); }

/* --------------------------------------------------------------------------
   SELETOR DE COR — swatches
   -------------------------------------------------------------------------- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.swatch {
  position: relative;
  width: 44px; height: 44px;      /* alvo de toque mínimo confortável */
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--d-state) var(--e-snap);
}
.swatch:hover { transform: scale(1.06); }
.swatch:active { transform: scale(.97); }

/* O disco de cor real do produto */
.swatch__dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--swatch-color, #333);
  /* Aro interno claro: garante que "Branco" não desapareça no fundo escuro */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), var(--sh-1);
  transition: width var(--d-state) var(--e-snap), height var(--d-state) var(--e-snap);
}
/* Anel de seleção: desenhado fora do disco, nunca cobre a cor */
.swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transform: scale(.82);
  transition: transform var(--d-state) var(--e-snap), border-color var(--d-state) ease;
}
.swatch[aria-checked='true']::after {
  border-color: var(--c-cobalt-text);
  transform: scale(1);
}
.swatch[aria-checked='true'] .swatch__dot { width: 24px; height: 24px; }
.swatch[data-stock='out'] { opacity: .35; }
.swatch[data-stock='out']::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 1px;
  background: var(--c-text-dim);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   SELETOR DE TAMANHO — chips
   -------------------------------------------------------------------------- */

.sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.size {
  min-width: 52px;
  height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--c-text-dim);
  transition: border-color var(--d-state) ease, color var(--d-state) ease,
              background-color var(--d-state) ease, transform var(--d-tap) var(--e-snap);
}
.size:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.size:active { transform: translateY(1px); }
.size[aria-checked='true'] {
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-graphite);
}
.size[data-stock='out'] {
  opacity: .4;
  text-decoration: line-through;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   VISOR DO PRODUTO — troca de imagem por crossfade
   Todas as fotos ficam empilhadas no mesmo enquadramento; só a alfa muda.
   É isso que evita o "salto" que faz galeria de e-commerce parecer amadora.
   -------------------------------------------------------------------------- */

.viewer {
  position: relative;
  /* 2:3 — a proporção exata das fotos (1200x1800). Reservada antes do
     carregamento, então CLS = 0 e nada é cortado pelo `cover`. */
  aspect-ratio: 2 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #202629 0%, transparent 62%),
    var(--c-surface);
  border: 1px solid var(--c-line);
}
/* Vinheta interna: integra a foto ao fundo escuro do site.
   Sem isso, a imagem do produto parece "colada" em cima do layout. */
.viewer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;                 /* acima da foto, abaixo do selo */
  pointer-events: none;
  /* Vinheta forte de propósito: o fundo do estúdio é cinza claro e o site é
     grafite. Sem isso a foto vira um retângulo claro colado no layout —
     exatamente o efeito que denuncia galeria amadora. A vinheta faz a borda
     da foto morrer na cor da página. */
  background:
    radial-gradient(94% 74% at 50% 40%, transparent 44%, rgba(11,13,14,.34) 74%, rgba(11,13,14,.82) 100%),
    linear-gradient(180deg, rgba(11,13,14,.45) 0%, transparent 22%, transparent 58%, rgba(11,13,14,.88) 100%),
    linear-gradient(90deg, rgba(11,13,14,.5) 0%, transparent 16%, transparent 84%, rgba(11,13,14,.5) 100%);
}
/* Poça de luz sob o produto: a mesma "ancoragem" da cena 3D,
   para que foto e 3D pertençam ao mesmo mundo. */
.viewer::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 5%;
  width: 74%; height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(36,44,50,.9), transparent 72%);
  pointer-events: none;
  z-index: 0;                 /* fica atrás das fotos; aparece no estado sem foto */
}

/* Camada das fotos: entre a poça de luz (z 0) e a vinheta (z 2). */
.viewer__stack {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.viewer__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--d-state) ease, transform 900ms var(--e-out);
  transform: scale(1.02);
}
.viewer__shot.is-active { opacity: 1; transform: scale(1); }
/* `cover` porque as fotos são de estúdio com fundo cinza e já vêm em 2:3,
   igual à caixa — então não há corte real, e a imagem preenche o painel
   inteiro em vez de flutuar com margem. */
.viewer__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estado sem foto: a seção continua funcional e apresentável
   antes de as imagens reais entrarem no projeto. */
.viewer__shot--empty {
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
}
.viewer__swatch-lg {
  width: clamp(84px, 22vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-inline: auto;
  background: var(--swatch-color, #333);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--sh-3);
}
.viewer__hint {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* --------------------------------------------------------------------------
   CARROSSEL DO VISOR
   Setas e bolinhas só aparecem quando a cor tem mais de uma imagem — o JS
   controla o atributo `hidden`. Controle visível para navegar em um único
   slide é o tipo de detalhe que denuncia componente genérico.
   -------------------------------------------------------------------------- */

.viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--a-black-60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--a-white-10);
  color: var(--c-text);
  opacity: 0;
  transition: opacity var(--d-state) ease, background-color var(--d-state) ease,
              transform var(--d-tap) var(--e-snap);
}
.viewer__nav--prev { left: var(--sp-3); }
.viewer__nav--next { right: var(--sp-3); }
.viewer__nav svg { width: 16px; height: 16px; }
.viewer__nav:hover { background: rgba(11,13,14,.85); }
.viewer__nav:active { transform: translateY(-50%) scale(.94); }

/* Aparecem no hover (desktop) e permanecem visíveis no toque, onde não
   existe hover para revelá-las. */
.viewer:hover .viewer__nav,
.viewer__nav:focus-visible { opacity: 1; }
@media (hover: none) {
  .viewer__nav { opacity: 1; }
}

.viewer__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sp-4);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}
.viewer__dot {
  width: 22px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--a-white-10);
  transition: background-color var(--d-state) ease, width var(--d-state) var(--e-snap);
}
.viewer__dot[aria-current='true'] {
  width: 34px;
  background: var(--c-text);
}
.viewer__dot:hover { background: var(--c-text-dim); }

/* Selo de dado técnico sobre a foto */
.viewer__tag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--a-black-60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--a-white-10);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
}
.viewer__tag i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-green);
}

/* --------------------------------------------------------------------------
   DEPOIMENTO
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--d-state) ease;
}
.quote:hover { border-color: var(--c-line-strong); }
/* Aspas tipográficas grandes como marca d'água: dá peso editorial ao
   depoimento sem precisar de estrelas fabricadas. */
.quote::before {
  content: '\201C';
  position: absolute;
  top: -0.15em;
  right: var(--sp-4);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 5rem;
  line-height: 1;
  color: var(--a-white-06);
  pointer-events: none;
}
.quote__text { font-size: 1.0625rem; line-height: 1.5; }
.quote__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.quote__name { font-size: var(--t-sm); font-weight: 600; }
.quote__meta {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* --------------------------------------------------------------------------
   PREÇO
   Um único componente de preço, usado no seletor e na oferta. Preço
   escrito de formas diferentes em pontos diferentes da página é uma das
   inconsistências que mais destrói confiança.
   -------------------------------------------------------------------------- */

.price { display: flex; flex-direction: column; gap: var(--sp-1); }

.price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.price__from {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price__now {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;   /* dígito não "dança" entre estados */
}
.price__save {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--a-amber-12);
  border: 1px solid rgba(255,138,61,.32);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-amber);
}
.price__installments { font-size: var(--t-sm); color: var(--c-text-dim); }

/* --------------------------------------------------------------------------
   SELOS DE CONFIANÇA
   -------------------------------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.badge svg { width: 13px; height: 13px; color: var(--c-green); }

/* --------------------------------------------------------------------------
   FAQ / ACORDEÃO  (usa <details> nativo — acessível por padrão)
   -------------------------------------------------------------------------- */

.faq__item {
  border-bottom: 1px solid var(--c-line);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--d-state) ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-cobalt-text); }
.faq__q i {
  flex: none;
  position: relative;
  width: 13px; height: 13px;
}
.faq__q i::before, .faq__q i::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--d-state) var(--e-snap), opacity var(--d-state) ease;
}
.faq__q i::before { inset: 6px 0 auto 0; height: 1px; }
.faq__q i::after  { inset: 0 6px auto auto; width: 1px; height: 13px; }
.faq__item[open] .faq__q i::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  padding-bottom: var(--sp-5);
  max-width: var(--grid-text);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
}

/* --------------------------------------------------------------------------
   EASTER EGG
   Faixa estreita, não seção. É um segredo da marca — anunciar em display
   gigante mataria a graça. Borda tracejada e mono: lê como nota de
   engenharia, que é exatamente o tom da página.
   -------------------------------------------------------------------------- */

/* A faixa em si não precisa de estilo próprio além do respiro reduzido
   (.section--tight); a classe .egg-band existe só como âncora semântica. */
.egg-band { }

.egg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 180% at 0% 50%, var(--a-cobalt-08) 0%, transparent 60%),
    var(--c-surface);
}
.egg__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-cobalt-lo);
  background: var(--a-cobalt-08);
  color: var(--c-cobalt-text);
}
.egg__mark svg { width: 16px; height: 16px; }
.egg__body { flex: 1 1 18rem; }
.egg__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-cobalt-text);
}
.egg__text {
  margin-top: var(--sp-1);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
}
.egg__text b { color: var(--c-text); font-weight: 500; }
.egg__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-cobalt-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-state) ease, gap var(--d-state) var(--e-snap);
}
.egg__link:hover { border-bottom-color: currentColor; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   CTA FIXO DE MOBILE — aparece após o hero
   -------------------------------------------------------------------------- */

.sticky-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--a-black-90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  transform: translateY(105%);
  transition: transform 420ms var(--e-out);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy__info { display: flex; flex-direction: column; line-height: 1.25; }
.sticky-buy__price { font-size: 1.0625rem; font-weight: 600; }
/* Nota do CTA fixo: cinza, não âmbar. O âmbar é reservado para preço e
   promoção — usá-lo aqui diluiria o sinal. */
.sticky-buy__note {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.sticky-buy .btn { margin-left: auto; }
@media (min-width: 900px) { .sticky-buy { display: none; } }