/* =========================================================
   Abrindo a Caixa Preta da Shopee — página de captura
   Medidas derivadas do Figma (canvas 1920 x 4324).
   Os clamp() batem o valor do Figma exatamente em 1920px
   de viewport e encolhem a partir daí.
   ========================================================= */

:root{
  --preto:      #000000;
  --laranja:    #FF4B00;
  --tinta:      #1C1C1F;   /* texto escuro    */
  --mudo:       #6E6E72;   /* texto auxiliar  */
  --claro:      #F4F4F6;   /* fundo cinza     */
  --linha:      #E8E8ED;   /* divisórias      */
  --pill:       #131313;   /* fundo das pills */

  --margem: 6.146vw;                 /* 118px @1920 */
  --wrap:   1920px;                  /* conteudo 1684 + 2 x 118 de margem */

  --t-h1:   clamp(38px, 4.792vw, 92px);   /* 3 linhas curtas comportam fonte maior */
  --t-h2:   clamp(28px, 2.500vw, 48px);
  --t-h2b:  clamp(30px, 3.125vw, 60px);
  --t-sub:  clamp(19px, 1.667vw, 32px);
  --t-eyeb: clamp(20px, 1.823vw, 35px);
  --t-lead: clamp(16px, 1.042vw, 20px);
  --t-corpo:clamp(15px, 0.885vw, 17px);
  --t-base: clamp(14px, 0.833vw, 16px);
  --t-mini: clamp(13px, 0.729vw, 14px);
  --t-olho: clamp(12px, 0.625vw, 12px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* o atributo hidden do HTML perde pra qualquer display declarado no CSS
   (o .conta__grade e display:grid). isso devolve a prioridade a ele. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; background:var(--preto); }

body{
  margin:0;
  /* todas as secoes sao escuras: o fundo claro so aparecia numa fresta
     acima do header e no repique do scroll */
  background:var(--preto);
  color:var(--tinta);
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-corpo);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* height:auto neutraliza o atributo height do HTML, que e um hint de CSS
   e sobrepoe o aspect-ratio */
img{ max-width:100%; height:auto; display:block; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--margem);
}

/* ---- tipos compartilhados ---- */
.h2{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:var(--t-h2);
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0;
}
.h2--big{ font-size:var(--t-h2b); letter-spacing:-.045em; }

.eyebrow{
  font-size:var(--t-olho);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mudo);
  margin:0 0 .9em;
}

.muted{ color:#A4A9B2; }

/* Texto com brilho varrido. As pontas nunca descem abaixo do contraste
   minimo sobre preto: cinza para #7C828C, laranja para #C93A00. */
.brilho{
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;  /* Safari ignora o color:transparent */
  background-size:280% 100%;
  background-position:130% 0;
}

/* o brilho atravessa e some. o gradiente e' mais largo que o texto
   de proposito: sobra "espaco morto" entre uma passada e outra. */
@media (prefers-reduced-motion: no-preference) {
  .brilho{ animation:varre 6s linear infinite; }
  @keyframes varre{
    0%   { background-position:130% 0; }
    100% { background-position:-130% 0; }
  }
}
.nao-quebra{ white-space:nowrap; }

/* =========================================================
   FIO NEON — divide as dobras.
   1px que apaga nas pontas, pra nao bater nas bordas da tela,
   e um halo curto que faz o laranja "acender".
   ========================================================= */
.dobra{ position:relative; }
.dobra::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  /* 1px e o chao real: o navegador sempre pinta a caixa com pelo menos
     isso. quem engorda o fio e o halo, entao a espessura se controla ali. */
  height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(255,75,0,.38) 14%, rgba(255,90,18,.82) 50%, rgba(255,75,0,.38) 86%, transparent);
  box-shadow:0 0 2px rgba(255,75,0,.32), 0 0 5px rgba(255,75,0,.10);
  pointer-events:none;
}
.dobra--baixo::before{ top:auto; bottom:0; }
.orange{
  background-image:linear-gradient(100deg,
    #E04200  0%,
    #E04200 34%,
    #FF9663 46%,
    #FF5A12 56%,
    #E04200 68%,
    #E04200 100%);
}

/* =========================================================
   CABEÇALHO FLUTUANTE
   Barra sobre o hero, colada no topo ao rolar. Os links
   apontam para seções da própria página — não são portas
   de saída, e o botão mantém a inscrição sempre a um clique.
   ========================================================= */
.topo{
  position:sticky;
  top:clamp(10px,.83vw,16px);
  z-index:50;
  padding-inline:var(--margem);
  margin-bottom:calc(-1 * clamp(52px,3.65vw,70px));   /* a barra flutua sobre o hero */
}
.topo__barra{
  max-width:calc(var(--wrap) - 2 * var(--margem));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(8px,.63vw,12px) clamp(10px,.83vw,16px) clamp(8px,.63vw,12px) clamp(12px,1.04vw,20px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(14,14,16,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topo__marca{
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:clamp(13px,.833vw,16px);
  font-weight:600;
  letter-spacing:-.03em;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  min-height:44px;          /* area de toque */
}

.topo__nav{
  display:flex;
  align-items:center;
  gap:clamp(4px,.83vw,16px);
}
.topo__nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;          /* area de toque: 44 em ambos os eixos */
  min-width:44px;
  padding-inline:.35em;
  font-size:clamp(13px,.781vw,15px);
  color:#B4B4BA;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s;
}
.topo__nav a:hover{ color:#fff; }

/* o CTA do header e a mesma linguagem dos botoes grandes, em escala
   menor: fantasma sobre vidro nao lia como a acao principal que e. */
.topo__cta{
  padding:.66em 1.6em;
  border:0;
  border-radius:10px;
  font-weight:600;
  color:#fff !important;
  background-image:linear-gradient(100deg,
    #8E2A00 0%, #C93A00 42%, #FF5A12 72%, #B03200 100%);
  box-shadow:
    0 6px 18px rgba(201,58,0,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:filter .2s, box-shadow .2s, transform .2s;
}
.topo__cta:hover{
  filter:brightness(1.1);
  box-shadow:0 9px 24px rgba(201,58,0,.46), inset 0 1px 0 rgba(255,255,255,.26);
}
.topo__cta:active{ transform:translateY(1px); }
.topo__cta:hover 
/* o topo colado nao pode tapar a secao para onde o link leva */
:is(#hero,#historia,#aprender,#quem,#captura){ scroll-margin-top:clamp(70px,5.2vw,100px); }

/* =========================================================
   HERO
   ========================================================= */
/* marca d'agua: discreta pelo tamanho, nao pela opacidade — apagar
   ela derrubaria o contraste abaixo do minimo legivel */
.hero__eyebrow{
  margin:0 0 clamp(10px,.94vw,18px);
  font-weight:600;
  font-size:clamp(13px,.833vw,16px);
  letter-spacing:-.03em;   /* -.089em era calibrado pros 35px; a 16px fechava demais */
  /* laranja metalico, mesma varredura do "Shopee" */
  background-image:linear-gradient(100deg,
    #E04200  0%,
    #E04200 34%,
    #FF9663 46%,
    #FF5A12 56%,
    #E04200 68%,
    #E04200 100%);
}

/* foto do fundo: fica na metade direita. o arquivo em img/ ja esta
   espelhado, para o Rafael olhar PARA o conteudo e nao para fora da tela.
   espelhar por CSS quebrava o object-position. */
.hero__fundo{
  position:absolute;
  inset:0;                 /* cobre o hero inteiro: sem isso o degrade
                              arrancava na borda da caixa e criava emenda */
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.hero__fundo img{
  position:absolute;
  inset:0;
  width:100%;
  /* a foto NAO ocupa a altura toda do hero: o cover amplia pela altura,
     entao limitar aqui e o que reduz o zoom no rosto. o pe se dissolve. */
  height:74%;
  object-fit:cover;
  object-position:62% top;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  /* o arquivo ja vem espelhado E ja vem com o lado esquerdo dissolvido
     no preto, entao aqui nao entra mais mascara: aplicar de novo
     empilharia dois fades e apagaria a estante do fundo. */
}
/* o texto vive por cima da foto: essas duas camadas garantem que ele
   continue legivel, escurecendo da esquerda e do pe. */
.hero__fundo::after{
  content:"";
  position:absolute; inset:0;
  background:
    /* com o zoom reduzido entra mais luz (abajur, rosto) atras da coluna
       de texto: este veu precisa ser mais forte que na versao ampliada. */
    linear-gradient(90deg,
      rgba(0,0,0,.93) 0%, rgba(0,0,0,.88) 26%, rgba(0,0,0,.70) 44%,
      rgba(0,0,0,.34) 64%, rgba(0,0,0,.10) 84%, transparent 100%),
    /* a notificacao queimada no arquivo cai SEMPRE entre 60% e 68% da
       altura do hero, encostada na direita. este radial engole essa
       faixa e le como queda de luz da propria foto. */
    radial-gradient(64% 30% at 100% 64%, #000 52%, rgba(0,0,0,.92) 70%, transparent 100%),
    linear-gradient(0deg, #000 0%, #000 16%, transparent 40%);
}
.hero > .wrap{ position:relative; z-index:1; }

.hero{
  position:relative;
  /* bloom quente saindo de tras do headline: da profundidade ao preto
     chapado e amarra o laranja do "Shopee" ao espaco em volta */
  background:
    radial-gradient(90% 65% at 22% 12%, rgba(255,75,0,.13), transparent 62%),
    var(--preto);
  color:#fff;
  padding-block:clamp(84px, 8.9vw, 171px) clamp(48px, 4.115vw, 79px);
}



.hero__title{
  margin:0;
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:var(--t-h1);
  line-height:1.05;
  letter-spacing:-.04em;
}

/* o lede virou tres frases: a primeira segura o corpo de subheadline,
   as outras duas descem um degrau pra caber na coluna sem invadir os avisos */
.hero__lede{ margin-top:clamp(12px,1.04vw,20px); }
.hero__sub{
  margin:0;
  max-width:26ch;
  font-size:clamp(19px,1.35vw,26px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
}
.hero__sub2{
  margin:clamp(8px,.63vw,12px) 0 0;
  max-width:44ch;
  font-size:var(--t-lead);
  line-height:1.45;
  color:#C6C6CC;
}

.hero__mesmo{
  margin:clamp(28px,2.4vw,46px) 0 0;
  font-size:var(--t-lead);
}

/* ---- prova social ---- */
.prova{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(10px,1.7vw,32px);
  margin-top:clamp(16px,1.2vw,23px);
}
.prova__txt{ flex:1 1 14ch; }
/* flex-shrink padrao apertava a caixa abaixo do conteudo e as fotos
   vazavam por baixo do texto */
.prova__faces{ display:flex; flex:none; }
.prova__faces img{
  width:clamp(34px,2.08vw,40px);
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid #fff;
  object-fit:cover;
}
.prova__faces img + img{ margin-left:-.55em; }
.prova__rule{
  width:1px;
  align-self:stretch;
  background:rgba(255,255,255,.35);
}
.prova__txt{ margin:0; font-size:var(--t-base); }
.prova__estrelas{
  color:#FFB800;         /* amarelo de avaliacao, nao o laranja da marca */
  letter-spacing:.08em;
  margin-right:.35em;
}

/* =========================================================
   AVISOS DE PEDIDO
   Ilustração do hero. Ficam na metade direita, que estava
   vazia. Só aparecem onde há largura pra eles.
   ========================================================= */
.avisos{ display:none; }

/* no celular so um aviso aparece, sobre a faixa da foto */
/* no celular o header sai: o formulario ja esta na primeira tela,
   entao a barra so roubava altura util. */
@media (max-width:720px){
  .topo{ display:none; }
}

@media (max-width:900px){
  .avisos{ display:block; position:absolute; inset:0; z-index:1; pointer-events:none; }
  .aviso{
    position:absolute;
    display:flex;
    align-items:center;
    gap:4px;
    right:var(--margem);
    padding:4px 6px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;
    background:rgba(18,18,20,.86);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 16px 34px rgba(0,0,0,.5);
  }
  /* as tres cabem na faixa da foto sem cruzar o rosto: uma acima da
     cabeca, duas abaixo do queixo, com larguras diferentes pra nao
     virarem uma coluna empilhada. */
  /* cada card fica do tamanho exato do conteudo, sem largura fixa:
     as tres saem com medidas diferentes sozinhas. */
  .aviso{ width:max-content; max-width:calc(100% - var(--margem)*2); }
  .aviso--3{ top:clamp(22px,5.6vw,28px);
             right:auto; left:var(--margem); }   /* canto superior esquerdo */
  /* so duas no celular: uma acima da cabeca encostada na direita, outra
     abaixo do queixo encostada na esquerda. a terceira sobrava. */
  .aviso--1{ top:clamp(190px,49vw,236px);
             left:auto; right:var(--margem); }   /* canto inferior direito */
  .aviso--2{ display:none; }
  /* a de baixo encolhe o dobro da de cima: fonte, icone, respiro e
     preenchimento, todos um degrau abaixo da base. */
  .aviso--1{ gap:3px; padding:3px 5px; border-radius:8px; }
  .aviso--1 .aviso__ico{ width:15px; height:15px; border-radius:4px; }
  .aviso--1 .aviso__ico svg{ width:11px; height:11px; }
  .aviso--1 .aviso__t{ font-size:9px; }
  .aviso--1 .aviso__d{ font-size:8px; }
  .aviso--1 .aviso__h{ font-size:8px; padding-left:3px; }
  .aviso__ico{
    flex:none; display:grid; place-items:center;
    width:18px; height:18px; border-radius:5px; background:#EE4D2D;
  }
  .aviso__ico svg{ width:13px; height:13px; display:block; }
  .aviso__txt{ min-width:0; }
  .aviso__t{ margin:0; font-size:10px; font-weight:600; color:#fff; white-space:nowrap; }
  .aviso__d{ margin:1px 0 0; font-size:9px; color:#8A8A90; white-space:nowrap; }
  .aviso__h{ margin-left:auto; font-size:9px; color:#8A8A90; white-space:nowrap; padding-left:4px; }
}

/* 901px e onde o hero vira lado-a-lado: abaixo disso vale o bloco do
   celular. sem essa faixa, tablet deitado e notebook de 1024 ficavam
   sem nenhuma notificacao. */
@media (min-width:901px){
  .avisos{
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .aviso{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    width:clamp(264px,17vw,326px);
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    background:rgba(16,16,18,.93);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  /* o rosto iluminado vai de x 67% a 96%; a boca fica em y ~38%.
     o aviso 1 fica NA altura da boca, mas encostado a esquerda dela. */
  /* tres alturas diferentes formam uma diagonal, em vez de uma coluna.
     nenhuma cruza o rosto (x 67-96%, y 22-51%). */
  .aviso--3{ right:9%;  top:11%; }   /* acima da cabeca */
  .aviso--1{ right:34%; top:37%; }   /* na linha da boca, a esquerda dela */
  .aviso--2{ right:6%;  top:61.5%; }  /* fica sobre a faixa da queimada */

  /* a do topo fica num tamanho intermediario */
  .aviso--3{ width:clamp(236px,15.8vw,264px); }

  /* a de cima e menor: cabe na fresta entre o formulario e o rosto */
  .aviso--1{
    width:clamp(190px,13.4vw,218px);
    gap:8px;
    padding:8px 10px;
    border-radius:11px;
  }
  /* o preco faz parte do texto do pedido: aparece nos tres */
  .aviso--1 .aviso__h{ font-size:12px; }
  .aviso--1 .aviso__ico{ width:27px; height:27px; border-radius:8px; }
  .aviso--1 .aviso__ico svg{ width:18px; height:18px; }
  /* 12px e o piso de texto da pagina: o card encolhe por medida, nao por fonte */
  .aviso--1 .aviso__t{ font-size:13px; }
  .aviso--1 .aviso__d{ font-size:12px; margin-top:1px; }

  .aviso__ico{
    flex:none;
    display:grid;
    place-items:center;
    width:34px; height:34px;
    border-radius:9px;
    background:#EE4D2D;       /* laranja da Shopee, com o logo em branco */
  }
  .aviso__ico svg{ width:23px; height:23px; display:block; }
  .aviso__txt{ min-width:0; }
  .aviso__t{ margin:0; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; }
  .aviso__d{ margin:2px 0 0; font-size:12px; color:#8A8A90; white-space:nowrap; }
  .aviso__h{ margin-left:auto; font-size:12px; color:#8A8A90; white-space:nowrap; }
}

/* Entre 901 e 1099px a coluna de texto ocupa proporcionalmente mais
   largura, e os avisos do meio e de baixo caiam em cima do paragrafo.
   Nessa faixa eles encostam na direita e descem pra fora do rosto
   (que ocupa x 67-96%, y 22-51%). */
@media (min-width:901px) and (max-width:1099px){
  /* nessa faixa as tres ficam estreitas e encostadas na direita: e o
     unico jeito de todas limparem a coluna de texto, que aqui e
     proporcionalmente mais larga. */
  .aviso{
    width:clamp(188px,21vw,210px);
    gap:8px; padding:8px 10px; border-radius:11px;
  }
  .aviso__ico{ width:27px; height:27px; border-radius:8px; }
  .aviso__ico svg{ width:18px; height:18px; }
  .aviso__t{ font-size:13px; }
  .aviso__d{ font-size:12px; margin-top:1px; }
  .aviso--3{ right:5%; top:10%; }
  .aviso--1{ right:6%; top:57%; }
  .aviso--2{ right:5%; top:79%; }
}

/* ---- CONVITE PARA A COMUNIDADE ----
   <dialog> nativo: o navegador ja entrega travamento de foco, Esc para
   fechar e fundo inerte. Nao vale reescrever isso a mao. */
.convite{
  border:0; padding:0; color:#fff; background:transparent;
  max-width:min(92vw, 460px); width:100%;
  margin:auto;                                   /* centraliza em todo navegador */
}
.convite::backdrop{
  background:rgba(4,4,5,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.convite[open]{
  position:relative;
  display:block;
  padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,34px) clamp(20px,2.6vw,30px);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,75,0,.14), transparent 60%),
    #111113;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  text-align:center;
}
.convite__x{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px;                       /* alvo de toque de 40px */
  display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer;
  color:#8A8A90; font-size:26px; line-height:1;
  border-radius:10px;
}
.convite__x:hover{ color:#fff; background:rgba(255,255,255,.06); }
.convite__selo{
  margin:0 0 8px;
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:#7ED9A0;
}
.convite__t{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(26px,3.1vw,38px);
  margin:0 0 clamp(10px,1vw,14px);
}
.convite__d{
  margin:0 0 clamp(20px,2vw,28px);
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.5;
  color:#B4B4BA;
}
/* verde do WhatsApp com texto escuro: branco sobre #25D366 da 1.8:1 e
   reprova; texto quase preto da 11:1 e mantem a marca reconhecivel. */
/* display:flex vence o atributo [hidden] do navegador. sem esta linha,
   apagar o LINK_COMUNIDADE deixaria o botao verde visivel apontando
   para lugar nenhum. */
.convite__zap[hidden]{ display:none; }
.convite__zap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 22px;
  border-radius:14px;
  background:#25D366;
  color:#06210F;
  font-weight:700;
  font-size:clamp(15px,1.15vw,17px);
  text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.26);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.convite__zap svg{ width:22px; height:22px; flex:none; }
.convite__zap:hover{
  background:#2BE874;
  transform:translateY(-1px);
  box-shadow:0 14px 38px rgba(37,211,102,.34);
}
.convite__zap:active{ transform:translateY(0); }
.convite__depois{
  margin-top:14px; min-height:44px; width:100%;
  border:0; background:transparent; cursor:pointer;
  color:#8A8A90; font-size:14px;
  border-radius:10px;
}
.convite__depois:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .convite__zap{ transition:none; }
  .convite__zap:hover{ transform:none; }
}

/* ---- pills de números ---- */
.pills{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(8px,.78vw,15px);
  margin:clamp(40px,3.4vw,66px) 0 0;
  padding:0;
}
.pill{
  background:linear-gradient(180deg, #1B1B1D, #0E0E10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:clamp(7px,.57vw,11px) clamp(12px,1.09vw,21px);
  font-size:var(--t-base);
  color:#E1E1E1;
  white-space:nowrap;
}
.pill b{ color:var(--laranja); font-weight:500; }

/* =========================================================
   CRONÔMETRO (abaixo do botão)
   Sem caixa: só o número e o rótulo. A leitura fica no
   contraste de tamanho entre os dois.
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.conta{ margin-top:clamp(22px,1.77vw,34px); max-width:560px; }


.conta__grade{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(4px,.42vw,8px);
  margin:0; padding:0;
}
.conta__grade li{ display:grid; gap:3px; }

.conta__n{
  font-size:clamp(30px,2.29vw,44px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:#fff;
  font-variant-numeric:tabular-nums;  /* impede o número de tremer a cada tique */
}
.conta__u{
  font-size:var(--t-olho);          /* respeita o piso de 12px */
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8A8A90;
}

/* estado depois que zera */
.conta__agora{
  margin:0;
  font-size:clamp(20px,1.46vw,28px);
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--laranja);
}

/* =========================================================
   FORMULÁRIO (ocupa o vão do hero, entre a subheadline
   e a linha "Mesmo que voce...")
   ========================================================= */
.form{
  max-width:560px;
  margin-top:clamp(16px,1.25vw,24px);
  display:grid;
  gap:clamp(10px,.83vw,16px);
}
.form__field{ display:grid; }
/* o rotulo sai da tela mas continua no codigo: sem ele o leitor de tela
   anuncia so "caixa de texto", e o preenchimento automatico do navegador
   deixa de reconhecer o campo. placeholder nao e rotulo. */
.form__field label{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.form input{
  width:100%;
  padding:clamp(11px,.83vw,16px) clamp(13px,1.04vw,20px);
  background:var(--pill);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  min-height:48px;
  color:#fff;
  font:inherit;
  font-size:var(--t-base);
  transition:border-color .15s;
}
.form input::placeholder{ color:#5A5A60; }
.form input:focus{
  outline:none;
  border-color:var(--laranja);
}
.form input[aria-invalid="true"]{ border-color:#FF4B00; }

.form__msg{
  margin:0;
  min-height:1.2em;
  font-size:var(--t-mini);
  color:#8A8A90;
}
.form__msg[data-tipo="erro"]{ color:#FF7A4D; }
.form__msg[data-tipo="ok"]{ color:#7ED9A0; }

/* consentimento: exigido pela LGPD para coletar nome, e-mail e telefone.
   discreto de proposito -- informa sem competir com o botao. */
/* campo-armadilha: fora da tela, fora da ordem de tabulacao e
   escondido de leitores de tela. so robo preenche. */
.armadilha{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.form__lgpd{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.45;
  color:#8A8A90;
  max-width:52ch;
}

/* ---- botão ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* nucleo quente com as pontas queimadas, brilho no topo.
     as pontas nao vao ate o preto: no fundo escuro a forma sumiria. */
  /* o pico nao passa de #C93A00: acima disso o texto branco cai
     abaixo de 4.5:1. e o azul da referencia tambem e fundo, nao vibrante. */
  background:linear-gradient(100deg,
      #3A1100  0%,
      #631D00 16%,
      #8E2900 38%,
      #B53300 58%,
      #C93A00 72%,
      #9C2C00 89%,
      #661E00 100%);
  color:#fff;
  border:0;
  border-radius:14px;
  padding:clamp(12px,.938vw,18px) clamp(18px,1.458vw,28px);
  font:inherit;
  font-size:var(--t-base);
  font-weight:600;
  line-height:1;
  min-height:48px;          /* area de toque no celular */
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 12px 30px rgba(201,58,0,.30),       /* halo que descola do fundo preto */
    inset 0 1px 0 rgba(255,255,255,.16), /* fio de luz no topo */
    inset 0 -1px 0 rgba(0,0,0,.28);
  transition:filter .15s, transform .15s, box-shadow .15s;
}
.btn:hover{
  filter:brightness(1.1);
  box-shadow:
    0 14px 36px rgba(201,58,0,.42),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28);
}
.btn:active{ transform:translateY(1px); }

/* seta em círculo, à direita do texto */
.btn{ gap:.7em; }
.btn__seta{
  flex:none;
  display:grid;
  place-items:center;
  width:1.85em;
  height:1.85em;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  transition:transform .25s ease, border-color .25s ease;
}
.btn__seta svg{ width:.9em; height:.9em; display:block; }
.btn:hover .btn__seta{ transform:translateX(3px); border-color:#fff; }
.btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.btn--block{ width:100%; margin-top:4px; }

/* =========================================================
   MINHA HISTÓRIA (continua no preto)
   ========================================================= */
.historia{
  background:var(--preto);
  color:#fff;
  padding-block:clamp(72px,7.29vw,140px) clamp(72px,7.29vw,140px);
}
/* colunas conforme o Figma: foto em 420-713, texto em 1008-1490.
   a coluna do meio e o vao, por isso entra como faixa vazia. */
.historia__grid{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--margem);
  display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,6fr) minmax(0,56fr);
  align-items:start;
}
/* o card: moldura, o degrade que segura a legenda e o fio laranja
   na base, que amarra a foto ao resto da paleta */
.historia__foto{
  grid-column:1;
  /* a coluna de texto e bem mais alta: sem isso a foto fica sozinha
     no topo com um vazio embaixo. assim ela acompanha a leitura. */
  position:sticky;
  top:clamp(84px,6.25vw,120px);
  align-self:start;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.historia__foto::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, #FF5A12, transparent);
}
.historia__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  display:grid;
  gap:2px;
  padding:clamp(30px,2.6vw,50px) clamp(12px,1.04vw,20px) clamp(12px,1.04vw,20px);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.86) 62%);
}
.historia__nome{
  font-size:var(--t-base);
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
}
.historia__papel{
  font-size:var(--t-olho);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#A8A8AE;
}
.historia__txt{ grid-column:3; }
.historia__foto{ margin:0; }
.historia__foto img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.historia__txt .eyebrow{ color:#8A8A90; }
.historia__txt .h2{ margin-bottom:clamp(16px,1.04vw,20px); }
.historia__txt p{ margin:0 0 1em; max-width:52ch; }
.historia__txt p:last-child{ margin-bottom:0; }


/* os números do Rafael, ancorando a história */
.numeros{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.04vw,20px);
  margin:clamp(24px,1.98vw,38px) 0;
  padding:0;
  max-width:52ch;
}
.numeros li{
  display:grid;
  gap:2px;
  padding:clamp(12px,1.04vw,20px) clamp(12px,1.04vw,20px);
  border:1px solid rgba(255,255,255,.10);
  border-left:2px solid var(--laranja);
  border-radius:0 12px 12px 0;
  background:linear-gradient(180deg, rgba(26,26,29,.9), rgba(11,11,12,.9));
}
.numeros b{
  font-size:clamp(20px,1.46vw,28px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#fff;
}
.numeros span{
  font-size:var(--t-olho);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8A8A90;
}

/* as duas frases de virada: mesmo corpo, porem brancas */
.historia__punch{
  color:#fff;
  font-weight:500;
  font-size:var(--t-lead);
}

.historia__fecho{
  padding-top:clamp(16px,1.25vw,24px);
  border-top:1px solid rgba(255,255,255,.10);
  color:#C6C6CC;
}

/* =========================================================
   O QUE VOCÊ VAI APRENDER
   ========================================================= */
/* a secao de cima (historia) tambem e preta: sem o fio elas viram
   um bloco continuo so */
.aprender{
  background:var(--preto);
  color:#fff;
  padding-inline:var(--margem);   /* o titulo e a lede nao tinham respiro */
  text-align:center;
  padding-block:clamp(64px,9.9vw,190px) 0;
}
.aprender__nota{
  margin:clamp(14px,1.5vw,28px) 0 0;
  color:#8A8A90;
}
/* fecho da area de membros, embaixo da maquete */
.membros__pe{
  max-width:70ch;
  margin:clamp(28px,2.4vw,46px) auto 0;
  color:#C6C6CC;
  font-size:var(--t-lead);
}
/* ---- os quatro cards ----
   A foto do galpão em quatro recortes diferentes dá textura sem
   precisar de quatro fotos. O conteúdo assenta no pé do card,
   sobre o véu mais escuro, que é onde ele fica mais legível. */
.aulas{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.04vw,20px);
  max-width:var(--wrap);
  margin:clamp(36px,3.4vw,66px) auto 0;
  padding:0;
  text-align:left;
}

.aula{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:clamp(280px,26vw,420px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:clamp(16px,1.35vw,26px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.aula__arte{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  filter:grayscale(.12) contrast(1.04) brightness(.86);
}
.aula[data-i="0"] .aula__arte{
  background-image:url('img/card1.jpg');
  background-size:cover;
  background-position:50% 42%;
  filter:grayscale(.12) contrast(1.04) brightness(.86);
}
.aula[data-i="1"] .aula__arte{
  background-image:url('img/card2.jpg');
  background-size:cover;
  background-position:50% 40%;
  filter:grayscale(.12) contrast(1.04) brightness(.86);
}
.aula[data-i="3"] .aula__arte{
  background-image:url('img/card4.jpg');
  background-size:cover;
  background-position:50% 42%;
  filter:grayscale(.12) contrast(1.04) brightness(.86);
}

/* o terceiro card tem foto propria. Nos outros o vel e pesado porque a
   arte e so textura; aqui o assunto importa, entao ele clareia. */
.aula[data-i="2"] .aula__arte{
  background-image:url('img/card3.jpg');
  background-size:cover;
  background-position:50% 24%;
  filter:grayscale(.12) contrast(1.04) brightness(.86);
}
/* o topo fica claro para a foto aparecer, e o pe fecha quase solido
   porque e ali que o texto vive. sem isso a descriçao cai para 1.7:1. */
.aula::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(10,10,11,.06) 0%, rgba(10,10,11,.24) 30%,
      rgba(8,8,9,.74) 52%, rgba(6,6,7,.94) 70%, rgba(6,6,7,.98) 100%),
    radial-gradient(120% 55% at 50% 0%, rgba(255,75,0,.12), transparent 62%);
}

.aula:hover{
  transform:translateY(-6px);
  border-color:rgba(255,75,0,.5);
  box-shadow:0 22px 46px rgba(255,75,0,.18);
}

.aula__t{
  margin:0;
  font-size:clamp(19px,1.66vw,32px);
  font-weight:700;
  line-height:1.42;   /* respiro entre linhas destacadas */
  letter-spacing:-.03em;
  color:#fff;
}
/* a tarja cobre o titulo inteiro e acompanha a quebra de linha.
   box-decoration-break faz cada linha ganhar o proprio respiro,
   senao a segunda linha nasce colada na borda do destaque. */
.aula__hl{
  display:inline;
  padding:.1em .3em;
  background:var(--laranja);
  color:#fff;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.aula__d{
  margin:clamp(10px,.83vw,16px) 0 0;
  /* reserva 3 linhas: os cards sao alinhados pelo pe, entao uma
     descriçao mais curta empurraria o titulo daquele card para baixo */
  min-height:4.5em;
  font-size:var(--t-mini);
  line-height:1.5;
  color:#B4B4BA;
}

.aprender__mais{
  max-width:var(--wrap);
  margin:clamp(22px,2.08vw,40px) auto 0;
  padding:0 0 clamp(64px,6.25vw,120px);
  font-size:var(--t-corpo);
  color:#8A8A90;
}

/* =========================================================
   PRA QUEM É
   Antes era um palco absoluto de proporção fixa (1920x1416
   do Figma). O texto novo é longo demais para caber em
   coordenadas travadas, então o zigue-zague virou eixo:
   os cards alternam os lados de um fio central e crescem
   com o próprio conteúdo.
   ========================================================= */
.quem{
  position:relative;
  /* a luz de trás sobrou do recorte de figura que ocupava o centro:
     ela é o que impede o preto chapado de achatar a seção */
  background:
    radial-gradient(70% 55% at 50% 12%, rgba(255,75,0,.11), transparent 64%),
    var(--preto);
  color:#fff;
  overflow:hidden;
  padding:clamp(64px,7.3vw,140px) var(--margem) clamp(72px,7.8vw,150px);
}
.quem__head{
  max-width:56ch;
  margin:0 auto clamp(36px,3.4vw,66px);
  text-align:center;
}
.quem__lead{
  margin:clamp(12px,1.04vw,20px) 0 0;
  font-size:var(--t-lead);
  color:#8A8A90;
}
.quem__foto{
  display:block;
  width:min(60%,540px);
  margin:0 auto clamp(28px,2.6vw,50px);
}

.quem__cards{
  position:relative;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(48px,6.25vw,120px);
  row-gap:clamp(16px,1.56vw,30px);
  max-width:calc(var(--wrap) - 2 * var(--margem));
  margin:0 auto;
  padding:0;
}
/* o eixo: as pontas apagam pra ele não bater seco no primeiro
   e no último card */
.quem__cards::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  width:1px;
  background:linear-gradient(180deg,
    rgba(255,90,18,0), rgba(255,90,18,.55) 10%,
    rgba(255,90,18,.55) 90%, rgba(255,90,18,0));
}

/* uma fileira por card: é o que devolve o zigue-zague do desenho */
.card:nth-child(1){ grid-row:1; }
.card:nth-child(2){ grid-row:2; }
.card:nth-child(3){ grid-row:3; }
.card:nth-child(4){ grid-row:4; }
.card:nth-child(5){ grid-row:5; }
.card:nth-child(6){ grid-row:6; }

.card{
  position:relative;
  grid-column:1;
  justify-self:end;            /* encosta no eixo, não na borda da tela */
  width:100%;
  max-width:clamp(300px,32vw,560px);
  background:linear-gradient(180deg, #1A1A1D, #0B0B0C 70%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:clamp(16px,1.35vw,26px) clamp(16px,1.56vw,30px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.card--r{ grid-column:2; justify-self:start; }

/* o traço que liga o card ao eixo: metade da calha entre as colunas */
.card::after{
  content:"";
  position:absolute;
  top:clamp(26px,2.08vw,40px);
  width:clamp(24px,3.125vw,60px);
  height:1px;
}
.card--l::after{
  left:100%;
  background:linear-gradient(90deg, rgba(255,90,18,.75), rgba(255,90,18,.12));
}
.card--r::after{
  right:100%;
  background:linear-gradient(270deg, rgba(255,90,18,.75), rgba(255,90,18,.12));
}

.card__t{
  isolation:isolate;
  display:flex;
  align-items:flex-start;      /* o título agora quebra em duas linhas */
  gap:.75em;
  margin:0 0 clamp(10px,.94vw,18px);
  font-weight:600;
  font-size:var(--t-corpo);
  line-height:1.3;
}
.card__n{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:2em; height:2em;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  font-size:var(--t-mini);
  font-weight:600;
  color:#fff;
  transition:border-color .3s ease, color .3s ease;
}
/* o número acende quando o card entra e no hover */
.card__n::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:50%;
  background:var(--laranja);
  z-index:-1;
  transform:scale(0);
  transition:transform .4s cubic-bezier(.2,.7,.3,1) .2s;
}
.card{ transition:transform .3s ease, opacity .55s ease-out, border-color .3s ease, box-shadow .3s ease; }
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,75,0,.5);
  box-shadow:0 22px 46px rgba(255,75,0,.14);
}
.card__d{
  margin:0;
  font-size:var(--t-mini);
  line-height:1.5;
  color:#8A8A90;
}

/* =========================================================
   CTA FINAL + RODAPÉ
   ========================================================= */
/* a troca de cor com a secao de cima ja separa as duas: sem borda aqui */
.cta{
  /* o foco fica atras do botao, na altura dele */
  background:
    radial-gradient(58% 52% at 50% 76%, rgba(255,75,0,.15), transparent 66%),
    var(--preto);
  color:#fff;
  text-align:center;
  padding-block:clamp(56px,7.3vw,141px) clamp(40px,4.4vw,85px);
  padding-inline:var(--margem);
}
.cta .h2{ margin-bottom:clamp(16px,1.5vw,29px); }
/* no preto, o --mudo (#6E6E72) fica abaixo do contraste minimo */
.cta .eyebrow,
.quem .eyebrow{ color:#8A8A90; }
.cta__lead{
  margin:0 0 clamp(18px,1.56vw,30px);
  max-width:34ch;
  margin-inline:auto;
  font-size:clamp(17px,1.25vw,22px);
  color:#C6C6CC;
}
/* a cena das 20h01: o parágrafo que faz o leitor imaginar o momento */
.cta__cena{
  max-width:52ch;
  margin:0 auto clamp(22px,2.08vw,40px);
  color:#8A8A90;
}

/* as tres objecoes, uma por linha: o travessao laranja faz o ritmo */
.cta__nao{
  list-style:none;
  display:grid;
  gap:clamp(8px,.63vw,12px);
  max-width:60ch;
  margin:0 auto clamp(20px,1.77vw,34px);
  padding:0;
  color:#C6C6CC;
  font-size:var(--t-lead);
}
.cta__nao li{ position:relative; padding-left:1.6em; text-align:left; }
.cta__nao li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--laranja);
}
.cta__precisa{
  max-width:60ch;
  margin:0 auto clamp(26px,2.4vw,46px);
  font-size:var(--t-lead);
  font-weight:500;
  color:#fff;
}

/* o formulario do fim: mesma caixa do hero, centrada, com os rotulos
   alinhados a esquerda dentro de uma secao centralizada */
.cta__nota{
  margin:clamp(10px,.83vw,16px) 0 0;
  font-size:var(--t-olho);
  color:#8A8A90;
}

/* fecha a pagina no mesmo preto do hero */
.rodape{
  background:var(--preto);
  border-top:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding-block:clamp(32px,2.6vw,50px);
}
.rodape__grade{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--margem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;   /* sobrou uma linha so: centrada le melhor */
  gap:10px 24px;
}
/* duas partes com hierarquia, em vez de uma frase longa que quebra
   onde a tela deixar. no desktop elas ficam na mesma linha. */
.rodape__legal{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:4px 10px;
  color:#8A8A90;
}
.rodape__nome{ font-weight:600; color:#B4B4BA; letter-spacing:-.01em; }
.rodape__dir{ font-size:var(--t-mini); }   /* #6E6E72 nao alcanca AA no preto */


/* =========================================================
   ANIMAÇÃO

   Regra que sustenta tudo abaixo: nada fica escondido por
   CSS sozinho. Só esconde se `.js` existe (o <head> marca)
   E se a pessoa não pediu menos movimento. Se o JS falhar,
   a página aparece inteira, parada.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  .js .revela,
  .js .quem__cards .card{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .55s ease-out, transform .55s ease-out;
  }
  .js .revela.visivel,
  .js .quem__cards .card.visivel{
    opacity:1;
    transform:none;
  }

  /* cards das aulas: entram em cascata e a tarja se preenche depois */
  .js .aulas .aula{
    opacity:0;
    transform:translateY(20px);
  }
  .js .aulas .aula.visivel{ opacity:1; transform:none; }
  .js .aulas .aula.visivel:hover{ transform:translateY(-6px); }

  /* o disco do número se preenche de laranja ao revelar */
  .js .quem__cards .card.visivel .card__n{ border-color:var(--laranja); }
  .js .quem__cards .card.visivel .card__n::before{ transform:scale(1); }
  .js .quem__cards .card.visivel:hover{ transform:translateY(-4px); }

  .js .aula__hl::before{
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s cubic-bezier(.2,.7,.3,1) .15s;
  }
  .js .aula.visivel .aula__hl::before{ transform:scaleX(1); }

  /* brilho que atravessa o botao no hover */
  .btn{ position:relative; overflow:hidden; }
  .btn::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(100deg,
      transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
    transform:translateX(-110%);
    pointer-events:none;   /* passa por cima do texto, sem roubar o clique */
  }
  .btn:hover::after{ transition:transform .7s ease; transform:translateX(110%); }
}

/* 4 cards lado a lado so param de pe em tela larga */
@media (max-width:1100px){
  .aulas{ grid-template-columns:repeat(2,1fr); }
}
/* no celular, duas colunas espremem o titulo e a tarja laranja quebra
   no meio da palavra. uma coluna deixa cada titulo numa linha so. */
@media (max-width:620px){
  .aulas{ grid-template-columns:1fr; gap:16px; }
  .aula{ min-height:clamp(300px,86vw,380px); }
  .aula__t{ font-size:clamp(22px,6.2vw,26px); }
  .aula__d{ min-height:0; font-size:14px; }
}

/* =========================================================
   MOBILE — o palco absoluto vira lista empilhada
   ========================================================= */
@media (max-width:900px){
  :root{ --margem:clamp(20px,7vw,34px); }

  /* ---- HERO: a foto passa a ocupar a largura toda, com o rosto no
     terco de cima, e o conteudo desce para nao ficar sobre ele. ---- */
  .hero{ padding-top:clamp(248px,64vw,306px); }
  .hero__fundo img{
    /* desce abaixo da barra do header, senao ela corta o topo da cabeca */
    top:clamp(20px,5vw,26px);
    width:100%;
    height:clamp(300px,80vw,382px);
    object-fit:cover;
    object-position:100% 42%;   /* rosto fica na direita do arquivo novo */
    /* o pe da foto se dissolve no preto do hero, em vez de cortar seco.
       e isso que deixa o texto subir por cima sem aparecer emenda. */
    /* termina em 78%: a notificacao queimada na imagem vive entre 81% e
       92% da altura dela, e assim a foto ja acabou antes de chegar la. */
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.5) 64%, transparent 78%);
    mask-image:linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.5) 64%, transparent 78%);
  }
  .hero__fundo::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 14%,
                              rgba(0,0,0,.70) 46%, #000 62%),
      linear-gradient(90deg, rgba(0,0,0,.45), transparent 55%);
  }

  /* no desktop o conteudo do hero fica na coluna da esquerda e o brilho
     mira nela. aqui o formulario ocupa a largura toda: o foco vai pro centro. */
  .hero{
    background:
      radial-gradient(120% 55% at 50% 10%, rgba(255,75,0,.13), transparent 64%),
      var(--preto);
  }

  .historia__grid{
    grid-template-columns:1fr;
    padding-inline:var(--margem);
    gap:28px;
  }
  .historia__foto,
  .historia__txt{ grid-column:1; }
  /* relative, nao static: a legenda e absoluta e precisa desta referencia */
  .historia__foto{ max-width:340px; position:relative; top:auto; }
  .numeros{ grid-template-columns:1fr; }

  .quem{ padding:56px var(--margem) 64px; }
  .quem__head{ margin-bottom:28px; }
  .quem__foto{ width:min(70%,320px); margin:0 auto 32px; }

  /* o eixo do meio nao cabe numa coluna so: o caminho vira um fio
     curto entre um card e o proximo */
  .quem__cards{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:18px;
  }
  .quem__cards::before{ display:none; }
  .card,
  .card--r{ grid-column:1; justify-self:stretch; max-width:none; }
  .card:nth-child(n){ grid-row:auto; }
  .card::after{ display:none; }
  .card + .card::before{
    content:"";
    position:absolute;
    left:calc(clamp(16px,1.56vw,30px) + 1em);
    top:-18px;
    width:1px; height:18px;
    background:linear-gradient(180deg, rgba(255,90,18,.15), rgba(255,90,18,.75));
  }

  /* 4 colunas em 272px de conteudo: sem afrouxar, "SEGUNDOS" estoura */
  .conta__u{ letter-spacing:.04em; }

  /* os links de seção não cabem no celular: fica marca + botão */
  .topo__nav a:not(.topo__cta){ display:none; }
  .topo__marca span{
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .rodape__grade{ justify-content:center; text-align:center; }
  .rodape{ padding-block:clamp(30px,8vw,44px); }
  .rodape__legal{ flex-direction:column; gap:6px; }

  .pills{ justify-content:flex-start; }
  .pill{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}