/* ==========================================================================
   BURLONI B-TECH — SEÇÕES
   ========================================================================== */

/* --------------------------------------------------------------------------
   STAGE — palco do vídeo
   Hero e manifesto dividem o MESMO vídeo de fundo, que fica em `sticky`
   enquanto as duas seções passam por cima. Um único elemento <video> para
   duas seções: metade da decodificação e nenhuma troca de arquivo no meio
   do scroll.
   -------------------------------------------------------------------------- */

.stage { position: relative; }

/* Viewport em sticky com margem negativa: gruda na tela sem ocupar espaço
   no fluxo (senão empurraria o hero 100svh para baixo). */
.stage__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: var(--z-canvas);
  pointer-events: none;
  overflow: hidden;
}

/* Fundo em CSS: é o primeiro paint em TODOS os aparelhos e permanece como
   experiência final quando o vídeo não pode tocar (economia de dados, rede
   2G, movimento reduzido, autoplay bloqueado). Zero requisição. */
.stage__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 88% at 50% 4%,  #1E252A 0%, transparent 56%),
    radial-gradient(86% 66% at 50% 54%,  #161C21 0%, transparent 72%),
    var(--c-graphite);
}
/* NOTA: aqui havia uma trama em `repeating-linear-gradient` sobre o fundo.
   Removida: em telas com DPR fracionário (1.25 / 1.5 / 1.75 — a maioria dos
   notebooks Windows), o arredondamento de subpixel faz algumas faixas de 1px
   "engordarem" e aparecerem como riscos visíveis atravessando a tela. Com o
   vídeo no lugar do 3D, a trama também virou redundante. */

/* O <video> é criado por JS e inserido aqui. Só aparece no evento `playing`,
   então nunca há um retângulo preto piscando sobre o fundo. */
.stage__mount { position: absolute; inset: 0; }

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform-origin: center;
  transition: opacity 1000ms var(--e-out);
  will-change: transform, filter, opacity;
}
.stage.is-video-ready .stage__video { opacity: 1; }

/* Véu sobre o vídeo. Começa leve (a imagem precisa aparecer) e escurece
   conforme o manifesto sobe — é o que garante contraste do texto sem
   depender de a cena do vídeo ser escura naquele frame. */
/* Stops intermediários de propósito: gradiente escuro de baixa opacidade com
   poucos stops sofre "banding" em tela de 8 bits e aparece como faixas/riscos
   atravessando a imagem. Interpolar em passos menores elimina o artefato. */
.stage__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11,13,14,.55) 0%,
    rgba(11,13,14,.38) 16%,
    rgba(11,13,14,.24) 26%,
    rgba(11,13,14,.18) 34%,
    rgba(11,13,14,.28) 50%,
    rgba(11,13,14,.44) 64%,
    rgba(11,13,14,.62) 78%,
    rgba(11,13,14,.76) 90%,
    rgba(11,13,14,.86) 100%);
  opacity: .35;
}
@media (min-width: 900px) {
  .stage__scrim {
    background: linear-gradient(96deg,
      rgba(11,13,14,.92) 0%,
      rgba(11,13,14,.78) 16%,
      rgba(11,13,14,.62) 30%,
      rgba(11,13,14,.5)  44%,
      rgba(11,13,14,.36) 58%,
      rgba(11,13,14,.24) 68%,
      rgba(11,13,14,.14) 80%,
      rgba(11,13,14,.06) 90%,
      transparent 100%);
  }
}

/* COSTURA ZERO com a seção seguinte.
   O palco tem vídeo + véus, então sua base nunca fecharia exatamente na cor
   de fundo da página — e é justamente esse pequeno degrau que se lê como
   "o hero é mais escuro que o resto". Esta faixa força a base do palco a
   terminar em #0B0D0E, o mesmo valor do <body>. Fica sempre ligada, sem
   depender do GSAP nem de o vídeo estar tocando. */
.stage__viewport::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,13,14,0)   0%,
    rgba(11,13,14,.22) 26%,
    rgba(11,13,14,.48) 48%,
    rgba(11,13,14,.72) 68%,
    rgba(11,13,14,.9)  85%,
    rgb(11,13,14)      100%);
}

/* Seções do palco ficam acima do vídeo */
.stage > section { position: relative; z-index: var(--z-content); }

/* --------------------------------------------------------------------------
   01 — HERO
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--h-topbar) + var(--sp-3) + var(--h-nav) + var(--sp-7));
  /* Respiro maior embaixo: o conteúdo do hero não pode encostar no
     manifesto, que é a próxima peça de texto sobre o mesmo vídeo. */
  padding-bottom: var(--sp-9);
}
/* Scrim local do hero: garante contraste do texto mesmo se o frame do vídeo
   naquele instante for claro. Contraste não pode depender do conteúdo do vídeo. */
.hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 78%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(11,13,14,.16) 18%,
    rgba(11,13,14,.34) 32%,
    rgba(11,13,14,.52) 44%,
    rgba(11,13,14,.66) 56%,
    rgba(11,13,14,.78) 70%,
    rgba(11,13,14,.86) 84%,
    rgba(11,13,14,.92) 100%);
}
@media (min-width: 900px) {
  .hero { justify-content: center; }
  .hero::before {
    inset: 0;
    height: 100%;
    background: linear-gradient(95deg,
      rgba(11,13,14,.9)  0%,
      rgba(11,13,14,.78) 14%,
      rgba(11,13,14,.66) 26%,
      rgba(11,13,14,.55) 38%,
      rgba(11,13,14,.4)  50%,
      rgba(11,13,14,.26) 58%,
      rgba(11,13,14,.14) 64%,
      rgba(11,13,14,.05) 68%,
      transparent 72%);
  }
}

.hero__inner { max-width: 42rem; }

.hero__title {
  margin-top: var(--sp-4);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-hero);
  /* 1.02, não 0.95. Em CAIXA ALTA com acento (VOCÊ, Ã, Ç) o glifo passa
     acima da altura de maiúscula, e com line-height abaixo de 1 o acento
     era CORTADO. Era isso que fazia o título "renderizar estranho". */
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
/* Linhas do título — SEM `overflow: hidden`.
   ------------------------------------------------------------------
   Duas armadilhas eliminadas aqui, ambas causavam "título estranho":

   1. `background-clip: text` + `color: transparent` no elemento que o GSAP
      anima com transform: em várias GPUs o texto simplesmente não pinta.
      Agora é cor chapada.

   2. `overflow: hidden` (a máscara do reveal linha-por-linha) cortava o
      topo dos acentos em caixa alta — o Ê de "VOCÊ" perdia o circunflexo,
      e as bordas dos glifos ficavam raspadas.

   O reveal continua linha por linha, mas com fade + subida curta em vez de
   máscara. Diferença visual pequena; diferença de robustez enorme. */
.line-mask { display: block; }
.line-mask > span {
  display: block;
  color: var(--c-text);
}

.hero__lede {
  max-width: 32rem;
  margin-top: var(--sp-5);
  font-size: var(--t-lede);
  color: var(--c-text-dim);
}
.hero__lede strong { color: var(--c-text); font-weight: 500; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.hero__specs li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.hero__specs li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--c-cobalt);
  transform: rotate(45deg);
}

.scroll-hint {
  position: absolute;
  right: var(--sp-gutter);
  bottom: var(--sp-8);
  display: none;
  align-items: center;
  gap: var(--sp-3);
  writing-mode: vertical-rl;
}
.scroll-hint i {
  width: 1px; height: 54px;
  background: linear-gradient(180deg, var(--c-line-strong), transparent);
  transform-origin: top;
  animation: hintLine 2.8s var(--e-in-out) infinite;
}
@keyframes hintLine {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (min-width: 900px) { .scroll-hint { display: flex; } }
html.no-motion .scroll-hint i { animation: none; }

/* --------------------------------------------------------------------------
   02 — MANIFESTO (flutua sobre o vídeo)
   -------------------------------------------------------------------------- */

/* No mobile o manifesto não ocupa a tela inteira: hero (100svh) seguido de
   outro bloco de 100svh criava um vão vazio enorme entre as duas frases.
   No desktop ele volta a ser tela cheia, onde a declaração respira bem. */
.manifesto {
  min-height: 76svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-8);
}
@media (min-width: 900px) {
  .manifesto { min-height: 100svh; padding-block: var(--sp-9); }
}
/* Véu local: o contraste do manifesto não pode depender do GSAP ter
   carregado nem de qual frame do vídeo está na tela naquele segundo. */
.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 50%, rgba(11,13,14,.88) 0%, rgba(11,13,14,.45) 70%, transparent 100%);
}
.manifesto__quote {
  max-width: 34rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.manifesto__quote em {
  font-style: normal;
  color: var(--c-cobalt-text);
}
.manifesto__sub {
  max-width: 30rem;
  margin: var(--sp-5) auto 0;
  color: var(--c-text-dim);
}

/* --------------------------------------------------------------------------
   03 — A TRAMA
   Bloco editorial: título grande + ficha técnica em 3 colunas.
   Sem simulação de macro. Tentar "desenhar" a ampliação do tecido em CSS
   entregava uma grade sintética que não convence ninguém — e imagem falsa
   de produto técnico corrói exatamente a confiança que a seção deveria
   construir. Quando existir uma macro fotográfica real do tecido, ela entra
   aqui como imagem.
   -------------------------------------------------------------------------- */

/* Primeira seção depois do palco: ela EMERGE de baixo do vídeo em sticky, e
   com o respiro padrão o título chegava colado no topo da tela, embaixo da
   navbar. Um passo extra de padding resolve. */
.weave { padding-top: calc(var(--sp-section) + var(--sp-7)); }

.weave__head { max-width: 52rem; }
.weave__lede {
  max-width: 42rem;
  margin-top: var(--sp-4);
  font-size: var(--t-lede);
  color: var(--c-text-dim);
}

/* Ficha técnica: cada item é um dado com rótulo, como especificação de
   equipamento. É o que faz a seção ler como engenharia.

   ZERO borda. A separação vem do espaço e do contraste entre o rótulo mono
   pequeno e o valor em display grande. Filetes aqui empilhavam linha com a
   seção seguinte e a leitura ficava de tabela, não de ficha. */
.weave__specs {
  display: grid;
  gap: var(--sp-6) var(--sp-7);
  margin-top: var(--sp-8);
}
@media (min-width: 760px) {
  .weave__specs { grid-template-columns: repeat(3, 1fr); }
}

.weave__spec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 24rem;
}

.weave__label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.weave__value {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-cobalt-text);
}
.weave__desc {
  font-size: var(--t-sm);
  color: var(--c-text-dim);
}

/* --------------------------------------------------------------------------
   04 — TECNOLOGIAS
   -------------------------------------------------------------------------- */

.tech { }
.tech__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .tech__grid { grid-template-columns: repeat(2, 1fr); } }

/* Cinco cards em 3 colunas: 3 na primeira linha, 2 CENTRALIZADOS na segunda.
   Cinco colunas iguais dentro de 1248px daria ~180px de conteúdo por card —
   texto de 20 caracteres por linha, que é o tipo de largura ruim que faz
   layout parecer apertado. Grid de 6 faixas com span 2 resolve sem buraco
   à direita, que é o outro erro comum (5 itens em 3 colunas). */
@media (min-width: 1000px) {
  .tech__grid { grid-template-columns: repeat(6, 1fr); }
  .tcard { grid-column: span 2; }
  .tcard:nth-child(4) { grid-column: 2 / span 2; }
  .tcard:nth-child(5) { grid-column: 4 / span 2; }
}

/* --------------------------------------------------------------------------
   05 — SELETOR DE COR
   -------------------------------------------------------------------------- */

.picker { }
.picker__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .picker__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

.picker__panel { display: flex; flex-direction: column; gap: var(--sp-6); }

.picker__row { display: flex; flex-direction: column; gap: var(--sp-3); }
.picker__rowhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.picker__value {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
}
.picker__link {
  font-size: var(--t-xs);
  color: var(--c-cobalt-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-state) ease;
}
.picker__link:hover { border-bottom-color: currentColor; }

/* O preço usa o componente .price (components.css). Aqui só o respiro. */
.picker__pricebox {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.picker__hint {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-cobalt-text);
}

.picker__notes {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.picker__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}
.picker__note svg { width: 13px; height: 13px; flex: none; color: var(--c-green); }

/* --------------------------------------------------------------------------
   06 — PROVA SOCIAL
   -------------------------------------------------------------------------- */

.social { }
.social__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
/* Sem nota agregada e sem estrelas: a Burloni não passou os números reais,
   e nota inventada é o tipo de detalhe que, se o cliente checar, derruba a
   credibilidade de tudo o resto. Quando houver a média real da plataforma
   de avaliações, ela entra aqui. */
.social__note {
  max-width: 22rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
/* 4 depoimentos em 2 colunas (2×2). Quatro colunas dariam ~240px de conteúdo
   por card — largura ruim para depoimento, que precisa respirar para soar
   como pessoa falando e não como selo de e-commerce. */
.social__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .social__grid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   07 — OFERTA
   -------------------------------------------------------------------------- */

.offer {
  background:
    radial-gradient(90% 120% at 88% 6%, var(--a-amber-12) 0%, transparent 58%),
    var(--c-graphite);
}
.offer__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--sp-8); }
}
.offer__panel {
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-surface), rgba(11,13,14,.6));
}
/* Assinatura da linha no card do produto */
.offer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.offer__brandmark {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-cobalt-text);
}
.offer__brandmark .logo__img { height: 15px; }

.offer__price { margin-block: var(--sp-4) var(--sp-5); }
.offer__note {
  margin-top: var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
  text-align: center;
}
.offer__list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.offer__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
}
.offer__item svg { width: 14px; height: 14px; flex: none; color: var(--c-green); }

/* --------------------------------------------------------------------------
   08 — FECHAMENTO + FAQ
   -------------------------------------------------------------------------- */

.closer {
  text-align: center;
}
.closer__title {
  max-width: 36rem;
  margin-inline: auto;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.closer__sub {
  max-width: 28rem;
  margin: var(--sp-4) auto 0;
  color: var(--c-text-dim);
}
.closer .btn { margin-top: var(--sp-6); }
.closer .badges { justify-content: center; margin-top: var(--sp-7); }

.faq { }
.faq__list { max-width: 46rem; }

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.foot {
  padding-block: var(--sp-7);
  /* Folga extra no mobile para o CTA fixo não cobrir o conteúdo */
  padding-bottom: calc(var(--sp-7) + 80px);
}
@media (min-width: 900px) { .foot { padding-bottom: var(--sp-7); } }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.foot__mark { display: inline-flex; }
.foot__mark .logo__img { height: 20px; opacity: .85; }
.foot__legal {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* Crédito de autoria: linha própria, discreta, separada do rodapé da marca.
   Assinatura de quem fez não disputa espaço com a navegação do cliente. */
.foot__credit {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 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-faint);
}
.foot__credit a {
  color: var(--c-text-dim);
  border-bottom: 1px solid transparent;
  transition: color var(--d-state) ease, border-color var(--d-state) ease;
}
.foot__credit a:hover {
  color: var(--c-cobalt-text);
  border-bottom-color: currentColor;
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.foot__links a {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  transition: color var(--d-state) ease;
}
.foot__links a:hover { color: var(--c-text); }
