/* Hallmark · genre: editorial · macrostructure: Marquee Hero
 * H1 Marquee knobs: size=xl · alignment=left-bias · underlay=none (variante mídia:
 *   vídeo full-bleed como chão da dobra, não tipografia)
 * theme: CUSTOM — ancorado em #424241, a única cor do manual oficial do cliente,
 *   mais a escala de neutros medida no CARTÃO FÍSICO dele (tokens.css, intocado).
 *   Nenhum tema do catálogo do Hallmark foi usado. Zero cor nova.
 *   Eixos: paper=claro (L≈98%) · display=condensada romana (Bebas Neue) ·
 *   accent=neutro (a paleta inteira tem R−B ≈ +1, cinza puro)
 * nav: N6 masthead, variante só-wordmark · footer: Ft1 mast-headed
 * CTA persistente: C4 barra fixa, mantida em TODAS as larguras
 * preços: F3 folha tabular · enrichment: nenhum inventado (o vídeo do dono e as
 *   fotos do próprio salão são a peça; sem CSS art, sem SVG, sem banco de imagem)
 *
 * pre-emit critique: P5 H4 E4 S5 R4 V4
 *   Philosophy 5 · o objeto físico da campanha e a voz do dono comandam a página
 *   Hierarchy  4 · sete formas de seção diferentes; a dobra tem um destino só
 *   Execution  4 · 3 primitivas de movimento, tokens fechados, 320→1440 conferido
 *   Specificity 5 · cor do manual, cinzas do cartão, alt honesto, preço não inventado
 *   Restraint  4 · caiu Ken Burns, luz-corre, brilho de botão, giro infinito do cartão
 *   Variety    4 · zero eyebrow, zero repetição de compasso, molduras variadas
 *
 * 🔴 DESVIOS DECLARADOS (ordem explícita do briefing, acima do padrão da skill):
 *   1. Marquee Hero manda "nenhum CTA na dobra". Aqui o CTA fica na dobra —
 *      é ordem do cliente e é a lei de LP: o botão aparece sem rolar, no celular.
 *   2. motion.md bane parallax. O briefing pede parallax leve (≤24px) nas
 *      molduras grandes. Entregue limitado a 24px, só transform, e desligado
 *      por prefers-reduced-motion e pelo interruptor html[data-mov].
 *
 * 🔒 O QUE NÃO SE TOCA (vindo da v2 publicada e das ordens dele):
 *   SEM VERDE · SEM FUNDO PRETO (o escuro é cinza médio) · nunca escurecer FOTO
 *   do estabelecimento · só <source type="video/mp4"> · zero grid-column inline ·
 *   alvo de toque ≥44px · "33% de cortesia", nunca "OFF" nem "desconto".
 * ========================================================================== */

@font-face{font-family:"Bebas Neue";src:url("assets/bebas-neue-latin.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url("assets/zalando-sans-latin.woff2")format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}
/* A fonte do LOGO, extraida do PDF do proprio cliente. Subset de 10 glifos:
   so escreve "Classe habitual". Por isso o unicode-range travado: se alguma
   outra letra escapar, o navegador NAO usa esta fonte e cai na Bebas. */
@font-face{font-family:"Dolce Vita";src:url("assets/dolce-vita.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0043,U+0061,U+0062,U+0065,U+0068,U+0069,U+006C,U+0073,U+0074,U+0075}

/* ==========================================================================
   EXTENSÃO DE TOKENS — tokens.css é do cliente e NÃO se edita.
   🔴 Nada aqui é cor nova: os véus são a --tinta (#2e2d2c) com alfa, e os
   vidros são o --branco com alfa. Nenhum matiz entra na página.
   Isto existe para que nenhum valor solto apareça no meio do CSS.
   ========================================================================== */
:root{
  color-scheme: light;              /* trava o UA: sem inverter input no modo escuro */

  --tinta-a86: rgb(46 45 44 / .86);
  --tinta-a70: rgb(46 45 44 / .70);
  --tinta-a44: rgb(46 45 44 / .44);
  --tinta-a16: rgb(46 45 44 / .16);
  --tinta-a00: rgb(46 45 44 / 0);

  --branco-a92: rgb(255 255 255 / .92);
  --branco-a30: rgb(255 255 255 / .30);
  --branco-a14: rgb(255 255 255 / .14);

  /* só na BASE, para a legenda e o título lerem sobre o vídeo */
  --veu-heroi: linear-gradient(to top,
      var(--tinta-a86) 0%, var(--tinta-a70) 22%,
      var(--tinta-a44) 44%, var(--tinta-a16) 66%, var(--tinta-a00) 86%);
  --veu-dentro: linear-gradient(to top,
      var(--tinta-a86) 0%, var(--tinta-a44) 46%, var(--tinta-a00) 80%);
  /* 🔴 EXCEÇÃO MEDIDA ao "véu só na base". Em 04/09, no recorte 16x9, o
     wordmark caiu a 2,22:1 contra o PIXEL MAIS CLARO da faixa dele — o topo
     do quadro tem luz de filamento. A média dava 16,6:1 e escondia o defeito;
     véu de borda se mede NA FAIXA, nunca na média.
     Isto não é o véu da página: é o chão do próprio cabeçalho, curto e só
     atrás do wordmark. A base continua sendo o único véu grande. */
  --veu-mast: linear-gradient(to bottom,
      var(--tinta-a86) 0%, var(--tinta-a70) 45%, var(--tinta-a00) 100%);

  --sobre-1: var(--branco);
  --sobre-2: var(--nevoa-3);

  --z-mast: 30;
  --z-pe:   50;
  --z-pip: 45;
  --z-prog: 60;

  /* o vermelho de erro NÃO é cor de marca: é sinal de sistema, e é o mesmo par
     que a v2 já usava, medido em 7,91:1 sobre o branco */
  --erro:     #8d2f24;
  --erro-luz: #f2e3e1;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem;
  scroll-padding-bottom:6rem}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--nevoa-0);color:var(--tinta);
  font:var(--p-corpo) var(--t-17)/1.68 var(--corpo);
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
/* 🔴 sem isto o iOS mantém o atraso de ~300ms de duplo-toque em TODO alvo */
button,a,summary,label,input{touch-action:manipulation}
/* o retângulo cinza-azulado do iOS é a única cor de sistema que apareceria
   numa página inteira de cinza e branco. O :active e o :focus-visible já dão
   a resposta ao toque. */
*{-webkit-tap-highlight-color:transparent}
/* 🔴 O ATRIBUTO hidden PERDE PARA QUALQUER display DE AUTOR.
   Medido em 04/09: o .puxador tem display:inline-flex no CSS, então com o
   atributo hidden ligado ele continuava na página — invisível por opacity,
   mas OCUPANDO LUGAR E CLICÁVEL. Dava para tocar num botão que não existia
   na tela. Esta linha faz o hidden voltar a valer. */
[hidden]{display:none !important}
:focus-visible{outline:2.5px solid var(--marca);outline-offset:3px;border-radius:2px}
/* 🔴 ANEL DE FOCO NAS SUPERFÍCIES ESCURAS.
   O anel padrão é --marca (#424241) e sobre --grafite dá 1,12:1 — invisível.
   Nas quatro superfícies escuras da página o anel vira branco (7,6:1).
   Nenhuma cor nova: --branco já é token do cliente. */
.heroi :focus-visible,
.rodape :focus-visible,
.pip :focus-visible,
.dentro :focus-visible{outline-color:var(--branco)}

/* 🔴 RESPOSTA AO TOQUE EM TODO CONTROLE.
   O -webkit-tap-highlight-color foi apagado acima para toda a página; sem
   :active, tocar nestes sete controles não devolvia sinal nenhum no celular.
   Mesmo gesto do .btn, só transform. */
.som:active,.puxador:active,.filme__play:active,.mapa__abrir:active,
.mov:active,.pip__fechar:active,.faq summary:active{transform:translateY(1px)}
::selection{background:var(--nevoa-4);color:var(--tinta)}

/* ---------- tipografia ---------- */
.display{
  /* 🔴 piso 1.0: caixa-alta não tem descendente e com line-height .9 o topo
     da linha 2 encostava na base da linha 1 (quatro títulos quebram no celular). */
  font-family:var(--display);font-weight:400;line-height:1.02;
  letter-spacing:.006em;text-transform:uppercase;text-wrap:balance;
  /* gate 51: display quebra DENTRO da palavra em vez de estourar a caixa */
  overflow-wrap:anywhere;min-width:0;
}
.d-xl{font-size:var(--t-64)}
.d-l {font-size:var(--t-46)}
.d-m {font-size:var(--t-34)}

/* 🔴 TÍTULO ÚNICO · ordem dele 04/09, depois de reprovar no iPhone.
   Antes: quatro h2 com <br> na marra, um h2 menor que os outros (.d-m) e
   caixas de largura diferente — o título ficava em duas linhas com espaço
   sobrando ao lado. Agora TODO h2 de seção tem o MESMO tamanho, a MESMA
   caixa (18ch) e quebra sozinho, equilibrado pelo text-wrap:balance.
   O h1 do herói segue a mesma lógica, só que no tamanho .d-xl.
   🛑 Não devolver <br> em h1/h2 e não criar h2 de tamanho próprio. */
h1.display,h2.display{
  font-size:var(--t-46);
  max-width:18ch;margin-inline:auto;
  text-align:center;line-height:1.02;
  text-wrap:balance;
}
h1.display{font-size:var(--t-64)}
/* fallback para navegador sem balance (Safari < 17.5, Firefox antigo):
   pretty já evita a palavra órfã na última linha */
@supports not (text-wrap:balance){
  h1.display,h2.display{text-wrap:pretty}
}
.lede{font-size:var(--t-19);line-height:1.62;color:var(--tinta-2);max-width:44ch;text-wrap:pretty;
  /* 🔴 ordem dele 04/09: o lede acompanha o título e fica centrado em toda largura */
  text-align:center;margin-inline:auto}
p{max-width:62ch;text-wrap:pretty}

/* ---------- leito e ritmo ----------
   🔴 O RITMO NÃO É MAIS ÚNICO. A v2 abria nove seções com o mesmo compasso
   (rótulo → h2 → lede → foto) e o olho parava de registrar onde uma começava.
   Aqui cada seção tem forma própria, e o padding vertical VARIA de propósito. */
.leito{width:min(100% - var(--calha)*2,var(--leito));margin-inline:auto;
  padding-inline:max(0px, env(safe-area-inset-left) - var(--calha))
                 max(0px, env(safe-area-inset-right) - var(--calha))}
.secao{padding-block:var(--e-96)}
/* 🔴 TÍTULO DE SEÇÃO CENTRADO em toda largura (ordem dele, 04/09) */
.secao__titulo{margin-block:0 var(--e-24);text-align:center;margin-inline:auto}
.secao__titulo--menor{margin-bottom:var(--e-16)}

/* 🔴 PASSAGEM DELICADA (ordem dele, 24/08): os fundos alternam por 4 a 5% de
   luz e a emenda se dissolve. O degradê foi de 6rem para 4rem e o padding
   subiu: assim nenhum texto nasce EM CIMA da faixa de passagem, que foi o
   achado de contraste alta das duas auditorias. */
.secao--a{background:var(--nevoa-0)}
.secao--b{background:var(--nevoa-2)}
.secao--c{background:var(--nevoa-1)}
.secao--b,.secao--c{position:relative}
.secao--b::before,.secao--c::before,
.secao--b::after,.secao--c::after{
  content:"";position:absolute;left:0;right:0;height:4rem;pointer-events:none;
}
.secao--b::before,.secao--c::before{top:0;background:linear-gradient(to bottom,var(--nevoa-0),transparent)}
.secao--b::after,.secao--c::after{bottom:0;background:linear-gradient(to top,var(--nevoa-0),transparent)}
/* 🔴 24/08 — O VÉU DE BORDA. Os pseudo-elementos vêm DEPOIS do conteúdo na
   árvore, então pintavam POR CIMA das fotos: 35 dos 424px da foto ficavam sob
   o gradiente, +44,5 pontos de luz NA FAIXA. Erguer o conteúdo resolve.
   ⚠️ Medir a MÉDIA da foto NÃO pega isto: 35px de 424 diluem +44,5 para +2,07,
   que passa por ruído. Véu de borda se mede NA FAIXA. */
.secao--b > *,.secao--c > *{position:relative;z-index:2}

/* ==========================================================================
   MOLDURA · a assinatura visual, herdada do cartão do cliente
   O cartão dele é metal escovado com o logo em ALTO RELEVO: fio fino, luz em
   cima, sombra embaixo, respiro branco em volta.
   🔴 O QUE MUDOU NA v3: a moldura não é mais carimbo. Ela some em duas
   seções de propósito (o conceito não tem foto; "por dentro" sangra até a
   borda) e fica FINA em outras duas. Sem variação, doze molduras idênticas
   viravam a nota baixa em variedade.
   ========================================================================== */
.moldura{
  position:relative;background:var(--branco);
  padding:6px;border-radius:var(--raio-3);
  box-shadow:0 0 0 1px var(--fio), var(--alto), var(--sombra-2);
  overflow:hidden;isolation:isolate;
}
.moldura > img,.moldura > video{
  display:block;width:100%;border-radius:calc(var(--raio-3) - 5px);
  box-shadow:0 0 0 1px var(--tinta-a16);
}
/* 🔴 24/08 — a moldura SUMIA com o movimento ligado: o parallax amplia a foto e
   ela comia os 6px de passe-partout (medido: 7 das 12 iam a folga NEGATIVA).
   Conserto que fica: o passe-partout é desenhado POR CIMA da foto, então
   nenhum transform o alcança. */
.moldura::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:6px solid var(--branco);border-radius:inherit;
}
.moldura--fina{padding:4px;box-shadow:0 0 0 1px var(--fio), var(--sombra-1)}
.moldura--fina::before{border-width:4px}

/* ==========================================================================
   HERÓI DE VÍDEO  ·  Marquee Hero
   Uma tela cheia, um destino. O vídeo é o chão; o texto e o botão vivem na
   base, sobre o único véu da página — e ele para na metade da altura, para
   não encostar no rosto de quem fala.
   ========================================================================== */
.heroi{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  overflow:clip;background:var(--grafite);
  padding-bottom:calc(var(--e-24) + env(safe-area-inset-bottom));
}
.heroi__filme{position:absolute;inset:0;z-index:0}
.heroi__video{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.heroi__veu{position:absolute;inset:0;background:var(--veu-heroi);pointer-events:none}

/* N6 masthead, reduzido ao wordmark: sobre o vídeo, em tinta clara */
.mast{
  position:relative;z-index:var(--z-mast);grid-row:1;
  display:flex;align-items:center;gap:var(--e-12);
  padding:calc(var(--e-16) + env(safe-area-inset-top)) var(--calha) 0;
}
.mast::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7rem;
  background:var(--veu-mast);pointer-events:none;z-index:-1;
}
.mast img{width:auto;height:24px;filter:brightness(0) invert(1);opacity:.94}
.mast__nome{
  font-family:var(--wordmark);font-size:var(--t-19);letter-spacing:.02em;
  color:var(--sobre-1);white-space:nowrap;
  text-shadow:0 1px 12px var(--tinta-a70);
}

/* ---- LEGENDA -------------------------------------------------------------
   🔴 SAIU EM 05/09. A legenda agora é QUEIMADA dentro do vídeo pelo Remotion,
   junto com o título e a condição. A camada .heroi__legenda, o <track> WebVTT
   e as regras ::cue foram removidos de propósito: com os dois caminhos ligados
   a fala aparecia DUAS vezes na mesma tela.
   🛑 Não recriar. Se um dia a legenda voltar a ser do navegador, ela volta
   com o <track>, e aí a queimada precisa sair do vídeo primeiro.            */

.heroi__texto{
  position:relative;z-index:2;grid-row:3;align-self:end;
  padding-inline:var(--calha);
  /* 🔴 FAIXA RESERVADA PARA O PUXADOR.
     Medido em 390x844: o .puxador é absolute com pointer-events:auto e a
     caixa dele (792-836) cruzava a metade de baixo do "Ativar meu convite"
     (766-820) — o toque no centro do CTA ia para o #convite. Esta reserva
     tira as duas caixas de cima uma da outra. No desktop (>=47rem) a regra
     de baixo devolve o padding normal. */
  padding-bottom:calc(44px + var(--e-16));
  width:min(100% ,var(--leito));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* 🔴 .heroi__titulo, .heroi__sub e .heroi__cond SAÍRAM em 05/09 junto com o
   texto deles. O h1 virou .sr-only e as duas frases desceram para o lede da
   seção "O convite". No herói sobra UMA ação. */
.heroi__acoes{display:flex;margin-top:var(--e-24);
  align-items:center;justify-content:center}

/* 🔴 BOTÃO DE SOM · ordem dele 05/09: "deixe o botão de silêncio um pouco
   menor e mais transparente".
   Saiu de 56×112 com borda e rótulo escrito para 44×44, só ícone: o mínimo de
   toque, e nada além. Vidro de 14% do --branco, traço branco a 70%, sem borda
   sólida. Saiu também da linha do CTA e foi para o canto superior direito, para
   não haver dois botões lado a lado no rosto de quem fala.
   🛑 Não baixar de 44×44 e não devolver rótulo escrito: o estado é contado
   pelo ícone e pelo aria-label, nunca pelos dois mais um texto. */
.som{
  position:absolute;z-index:var(--z-mast);
  top:calc(var(--e-16) + env(safe-area-inset-top) + 2.8rem);
  right:var(--calha);
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;cursor:pointer;
  background:rgb(255 255 255 / .14);color:var(--sobre-1);
  border:0;border-radius:100px;
  transition:background var(--t-r) var(--saida);
}
.som__ico{opacity:.7;transition:opacity var(--t-r) var(--saida)}
.som:hover{background:var(--branco-a30)}
.som:hover .som__ico{opacity:.95}

/* ==========================================================================
   AVISO DE SOM · pílula branca, grande e no meio do vídeo
   Só acende quando o navegador NEGA o autoplay com áudio. O primeiro toque em
   qualquer lugar da página liga o som e apaga o aviso.
   ========================================================================== */
.avisom{
  /* 🔴 NÃO no meio exato do herói: a metade de baixo é do título, do subtítulo
     e dos botões. O aviso mora no terço superior, sobre o rosto do vídeo, e
     acima de TODAS as camadas do herói (o texto é z-index 2). */
  position:absolute;left:50%;top:30%;translate:-50% -50%;z-index:6;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:56px;padding:0 var(--e-24);max-width:calc(100% - var(--calha)*2);
  background:var(--branco);color:var(--tinta);
  border:0;border-radius:100px;cursor:pointer;white-space:nowrap;
  font:var(--p-forte) var(--t-17)/1 var(--corpo);letter-spacing:.014em;
  box-shadow:var(--sombra-2), 0 10px 40px -10px var(--tinta-a44);
}
.avisom svg{width:24px;height:24px;flex:none}
.avisom:active{transform:scale(.985)}
/* o pulso é transform + opacity, e só existe com o movimento ligado — o
   data-mov já nasce em "0" para quem pede reduzir movimento no sistema */
html[data-mov="1"] .avisom{animation:pulsa-avisom 1.9s var(--saida) infinite}
@keyframes pulsa-avisom{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.05);opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  html:not([data-mov="1"]) .avisom{animation:none}
}

/* puxador: aparece aos ~5s ou ao primeiro toque/rolagem */
.puxador{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--e-8) + env(safe-area-inset-bottom));z-index:3;
  display:inline-flex;flex-direction:column;align-items:center;gap:.35em;
  min-height:44px;padding:0 var(--e-16);cursor:pointer;white-space:nowrap;
  background:none;border:0;color:var(--sobre-2);
  font:var(--p-medio) var(--t-13)/1 var(--corpo);letter-spacing:.12em;
  text-transform:uppercase;text-shadow:0 1px 10px var(--tinta-a86);
  opacity:0;pointer-events:none;transition:opacity var(--t-r) var(--saida);
}
.puxador[data-ver="1"]{opacity:1;pointer-events:auto}
.puxador__seta{width:9px;height:9px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;rotate:45deg}

/* no desktop o texto do herói respira mais e o vídeo mostra o ambiente */
@media (min-width:47rem){
  .heroi__video{object-position:50% 40%}
  /* 🔴 a reserva de 44px do .heroi__texto VALE EM TODA LARGURA desde 05/09.
     Antes o desktop a devolvia para var(--e-24) e o puxador voltava a cruzar a
     caixa do botão — no herói limpo os dois ficaram vizinhos. */
  .som{top:calc(var(--e-16) + env(safe-area-inset-top) + 3rem)}
}
@media (min-width:62rem){
  .heroi{padding-bottom:var(--e-48)}
  .mast{padding-top:calc(var(--e-24) + env(safe-area-inset-top))}
  .som{top:calc(var(--e-24) + env(safe-area-inset-top) + 3rem)}
}

/* ==========================================================================
   BOTÃO
   🔴 O brilho que corria no ::after saiu: animava background-position, que é
   propriedade de pintura. A regra da casa é transform e opacity, só.
   ========================================================================== */
/* 🔴 GEOMETRIA ÚNICA DE BOTÃO · ordem dele 04/09 (reprovado no iPhone).
   Antes cada seção tinha um botão de largura e altura diferente. Agora TODO
   .btn da página — herói, os dois inline, o do formulário e o "Ver o mapa" —
   tem a MESMA altura (56px), o MESMO padding, o MESMO corpo e a MESMA
   largura (22rem, ou a largura do leito quando a tela é menor).
   Duas exceções de propósito: o "Som" do herói (7rem, é um par, não um CTA)
   e o "Ativar" da barra fixa (largura livre, a barra é uma linha só).
   🛑 Não criar variante de largura nova sem a ordem dele. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:56px;padding:0 var(--e-24);
  /* a largura é a MESMA em toda a página: 22rem, ou a largura útil da tela
     quando ela é menor. Medido na viewport (não no pai) para que o botão do
     herói, o inline, o do formulário e o do mapa devolvam o MESMO número. */
  width:min(22rem, calc(100vw - var(--calha) * 2));margin-inline:auto;flex:none;
  background:var(--acao);color:var(--nevoa-1);border:0;border-radius:var(--raio-2);
  font:var(--p-forte) var(--t-17)/1 var(--corpo);letter-spacing:.014em;
  cursor:pointer;text-decoration:none;position:relative;
  white-space:nowrap;                      /* gate 49: rótulo nunca em 2 linhas */
  box-shadow:var(--sombra-1), inset 0 1px 0 var(--branco-a14);
  transition:background var(--t-r) var(--saida),transform .18s var(--seco),box-shadow var(--t-r) var(--saida);
}
.btn:hover{background:var(--acao-f);box-shadow:var(--sombra-2), inset 0 1px 0 var(--branco-a14)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn[disabled]{opacity:.62;cursor:progress}
/* o CTA do herói é claro: sobre vídeo escuro, o cinza escuro sumiria */
.btn--claro{background:var(--nevoa-0);color:var(--tinta);
  box-shadow:var(--sombra-2), inset 0 1px 0 var(--branco)}
.btn--claro:hover{background:var(--branco)}
/* .btn--largo e .btn--fantasma seguem a MESMA geometria: só a pintura muda */
.btn--largo{}
/* 🔴 CTA inline centrado em toda largura (ordem dele, 04/09) */
.depois-cta{margin-top:var(--e-40);max-width:none;text-align:center}

/* ==========================================================================
   2 · O CARTÃO  ·  objeto único, grande, centrado. Nenhuma outra seção
   tem esta forma — é o que faz o cartão parecer a peça e não um ilustrador.
   ========================================================================== */
.secao--cartao{background:var(--nevoa-1);padding-block:var(--e-96) var(--e-64)}
.cartao-leito{display:flex;flex-direction:column;align-items:center;text-align:center}
.secao--cartao .secao__titulo{color:var(--marca)}

.cartao{
  position:relative;width:min(100% - 2.5rem,25rem);margin:var(--e-24) auto 0;
  perspective:1100px;
  filter:drop-shadow(0 2px 3px var(--tinta-a16)) drop-shadow(0 22px 40px var(--tinta-a44));
  transform:rotate(-2deg);
}
.cartao__placa{
  position:relative;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .5s var(--saida);
}
.cartao[data-mexendo="1"] .cartao__placa{transition:transform .09s linear}
.cartao img{width:100%;display:block;border-radius:var(--raio-3)}
.cartao__brilho{
  position:absolute;inset:0;pointer-events:none;border-radius:var(--raio-3);
  background:linear-gradient(115deg,transparent 38%,var(--branco-a30) 48%,transparent 58%);
  background-size:250% 100%;
  background-position:calc(50% + var(--bx,0%)) 0;
  opacity:var(--bo,0);transition:opacity .4s var(--saida);
}
.cartao__selo{
  position:absolute;right:-1rem;bottom:-.9rem;z-index:3;
  background:var(--branco);border-radius:100px;
  padding:.6rem 1.05rem;box-shadow:0 0 0 1px var(--fio), var(--sombra-2);
  font:var(--p-forte) var(--t-13)/1 var(--corpo);letter-spacing:.1em;
  text-transform:uppercase;color:var(--marca);white-space:nowrap;
}

/* as três regras: uma linha cada, uma vez só na página inteira */
.regras{display:grid;gap:var(--e-16);margin-top:var(--e-64);text-align:left;
  max-width:46rem;width:100%}
.regras li{padding-top:var(--e-16);border-top:1px solid var(--fio);
  color:var(--tinta-2);font-size:var(--t-15);line-height:1.6}
.regras b{display:block;color:var(--tinta);font-weight:var(--p-forte);
  font-size:var(--t-17);margin-bottom:.15em}
@media (min-width:44rem){
  .regras{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-24)}
}
@media (min-width:62rem){
  .cartao{width:min(100%,34rem);transform:rotate(-3deg)}
}

/* ==========================================================================
   3 · PREÇOS  ·  folha tabular, fio fino entre linhas
   ========================================================================== */
.precos{
  display:grid;gap:1px;background:var(--fio-2);
  border-radius:var(--raio-2);overflow:hidden;margin-top:var(--e-32);
  box-shadow:0 0 0 1px var(--fio), var(--sombra-1);
}
.preco{background:var(--branco);padding:var(--e-24);display:flex;
  align-items:baseline;justify-content:space-between;gap:var(--e-16);flex-wrap:wrap;
  transition:background var(--t-r) var(--saida)}
.preco:hover{background:var(--nevoa-0)}
.preco__nome{font-family:var(--display);font-size:var(--t-24);letter-spacing:.03em;
  color:var(--tinta);max-width:26ch}
/* tabular-nums no PAI: o valor riscado e o valor novo ficam lado a lado e
   precisam alinhar os algarismos entre si */
.preco__valores{display:flex;align-items:baseline;gap:.7em;font-size:var(--t-17);
  font-variant-numeric:tabular-nums}
.preco__de{color:var(--tinta-3);text-decoration:line-through;text-decoration-thickness:1px}
.preco__por{font-weight:var(--p-forte);font-size:var(--t-24);color:var(--marca)}
.preco--sob{display:block}
.preco--sob .preco__nome{font-size:var(--t-19);line-height:1.15;max-width:34ch}
.preco__sob{color:var(--tinta-3);font-size:var(--t-15);margin-top:var(--e-8)}

/* ==========================================================================
   4 · O CONCEITO  ·  QUEBRA DE RITMO: só texto, tipo grande, sem foto.
   ========================================================================== */
.conceito-secao{background:var(--nevoa-0);padding-block:var(--e-96) var(--e-64)}
.conceito{display:grid;gap:var(--e-32)}
.conceito__titulo{color:var(--marca);margin:0;text-align:center}
.conceito__abre{font-size:var(--t-24);line-height:1.42;color:var(--tinta);
  max-width:30ch;font-weight:var(--p-medio)}
.conceito__texto p + p{margin-top:var(--e-24);color:var(--tinta-2)}
@media (min-width:52rem){
  .conceito{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--e-64);
    align-items:start}
  .conceito__abre{font-size:var(--t-30);line-height:1.34}
}

/* ==========================================================================
   5 · PROCEDIMENTOS
   No celular: faixa horizontal com scroll-snap. Cinco cartões de 78vw que a
   pessoa arrasta com o polegar — em vez das cinco fotos verticais empilhadas
   que a v2 gastava em três telas.
   No desktop: grade assimétrica de 2 grandes + 3 menores.
   🔴 Todo vão de coluna mora DENTRO do media query. Um span em grade de 1
   coluna cria colunas implícitas e espreme tudo (bug medido em 24/08).
   ========================================================================== */
.proc-faixa{
  margin-top:var(--e-40);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:var(--e-4) var(--e-16);
}
.proc-faixa::-webkit-scrollbar{display:none}
.proc{display:flex;gap:var(--e-20);align-items:start;
  padding-inline:max(var(--calha),calc(50vw - var(--leito)/2))}
.proc__item{flex:0 0 78vw;max-width:22rem;scroll-snap-align:center;
  display:flex;flex-direction:column}
.proc__item .moldura{flex:0 0 auto}
.proc__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
/* 🔴 O CONTRASTE DE FORMA VALE NO CELULAR TAMBÉM: na v2 estes modificadores
   viviam só dentro do @media de 44rem, ou seja estavam mortos para quase
   todo o tráfego, e os cinco cartões saíam com a mesma proporção. */
.proc__item--a img{aspect-ratio:4/3}
.proc__item--c img{aspect-ratio:1}
/* 🔴 razão 4:1. Na v2 era 16px entre foto e legenda contra 32px entre cartões,
   e "TRATAMENTO CAPILAR" lia como legenda do cartão de baixo tanto quanto do
   de cima. A legenda agora fecha no cartão e o intervalo abre. */
.proc__cap{padding:var(--e-12) var(--e-4) 0;color:var(--tinta)}
.proc__cap h3{font-family:var(--display);font-size:var(--t-30);letter-spacing:.02em;
  line-height:.95;color:var(--marca)}
.proc__cap p{font-size:var(--t-15);color:var(--tinta-2);margin-top:var(--e-8);max-width:34ch}

@media (min-width:52rem){
  .proc-faixa{overflow:visible;scroll-snap-type:none;padding-block:0;
    margin-top:var(--e-48)}
  .proc{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:var(--e-48) var(--e-24);
    width:min(100% - var(--calha)*2,var(--leito));margin-inline:auto;padding-inline:0;
  }
  .proc__item{max-width:none}
  .proc__item--a{grid-column:span 3}
  .proc__item--b{grid-column:span 3}
  .proc__item--c{grid-column:span 2}
  .proc__item--d{grid-column:span 2}
  .proc__item--e{grid-column:span 2}
  .proc__item--a img{aspect-ratio:16/11}
  .proc__item--b img{aspect-ratio:3/4}
  .proc__item--c img{aspect-ratio:4/5}
  .proc__item--d img{aspect-ratio:4/5}
  .proc__item--e img{aspect-ratio:4/5}
}

/* ==========================================================================
   5.5 · O QUE DIZEM  ·  prova social do Google
   Duas placas (empilham no celular) e quatro depoimentos, na mesma superfície
   branca com fio e relevo que o resto da página usa — nenhuma forma nova.
   🔴 AS ESTRELAS SÃO CINZA (--aco-2), nunca amarelo: amarelo seria cor nova
   e a paleta desta marca é cinza e branco. A nota parcial (4,6) é desenhada
   por RECORTE da fileira cheia, não por estrela apagada — 4,6 tem que parecer
   4,6, e não 5 nem 4.
   ========================================================================== */
.prova__rotulo{
  text-align:center;margin:0 auto var(--e-12);max-width:none;
  font:var(--p-forte) var(--t-13)/1 var(--corpo);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
.notas{display:grid;gap:var(--e-16);margin-top:var(--e-32)}
.nota{
  background:var(--branco);border-radius:var(--raio-2);padding:var(--e-24);
  box-shadow:0 0 0 1px var(--fio), var(--alto), var(--sombra-1);
  display:flex;flex-direction:column;align-items:center;gap:var(--e-8);
  text-align:center;
}
.nota__casa{font-family:var(--display);font-size:var(--t-24);letter-spacing:.03em;
  line-height:1;color:var(--marca);max-width:none}
.nota__linha{display:flex;align-items:center;gap:.65em;max-width:none;margin:0}
.nota__num{font-weight:var(--p-forte);font-size:var(--t-24);color:var(--tinta);line-height:1}
.estrelas{color:var(--aco-2);width:104px;height:20px;flex:none}
.nota__qtd{font-size:var(--t-15);color:var(--tinta-3);max-width:none;margin:0;line-height:1.4}
.nota__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-15);font-weight:var(--p-medio);color:var(--marca);
  text-underline-offset:3px;text-decoration-color:var(--fio-3);
}
.nota__link:hover{text-decoration-color:var(--marca)}

.depos{display:grid;gap:var(--e-16);margin-top:var(--e-24)}
.depo{
  background:var(--branco);border-radius:var(--raio-2);padding:var(--e-24);
  box-shadow:0 0 0 1px var(--fio), var(--alto), var(--sombra-1);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-16);
}
.depo__txt{margin:0;color:var(--tinta-2);font-size:var(--t-17);line-height:1.62;
  text-wrap:pretty;max-width:none}
.depo__quem{margin:0;max-width:none;font-size:var(--t-15);line-height:1.45}
.depo__quem b{display:block;color:var(--tinta);font-weight:var(--p-forte)}
.depo__quem span{color:var(--tinta-3)}

@media (min-width:44rem){
  .notas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-24)}
  .depos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-24)}
}

/* ==========================================================================
   6 · O CLASSE POR DENTRO  ·  QUEBRA DE RITMO: full-bleed, sem moldura.
   O único momento da página em que a imagem sangra até a borda e respira
   sozinha. Fundo cinza médio, nunca preto.
   ========================================================================== */
.dentro{position:relative;background:var(--grafite);color:var(--nevoa-2);
  display:grid;isolation:isolate}
.dentro__media{grid-area:1/1;position:relative;height:min(78svh,34rem)}
.dentro__video{width:100%;height:100%;object-fit:cover}
.dentro__veu{position:absolute;inset:0;background:var(--veu-dentro);pointer-events:none}
.dentro__texto{grid-area:1/1;align-self:end;position:relative;z-index:2;
  padding-block:var(--e-40);padding-inline:var(--calha)}
.dentro__texto h2{color:var(--branco);margin-bottom:var(--e-16);
  text-align:center;margin-inline:auto;
  text-shadow:0 2px 20px var(--tinta-a86)}
.dentro__texto p{color:var(--sobre-2);max-width:40ch;text-align:center;margin-inline:auto;
  text-shadow:0 1px 10px var(--tinta-a86)}
@media (min-width:52rem){
  .dentro__media{height:min(86svh,42rem)}
  .dentro__texto{padding-block:var(--e-64)}
}

/* ==========================================================================
   BOTÃO DE PLAY  ·  presente nos DOIS estados
   Na v2 ele só aparecia com o movimento desligado, ou seja exatamente quando
   o vídeo NÃO estava tocando: com movimento ligado os laços rodavam e o único
   freio era a pílula lá no topo, fora da tela. Agora ele toca e pausa.
   Disco branco de 56px, sem véu: não escurece a imagem.
   ========================================================================== */
.filme{position:relative}
.filme video{width:100%;display:block}
.filme--retrato{max-width:20rem;margin-inline:auto}
.filme--retrato video{aspect-ratio:9/16;object-fit:cover}
/* 🔴 SAIU DO CENTRO (ordem dele, 04/09). O disco branco de 56px no meio do
   quadro tapava a peça: o filme toca sozinho e o botão serve só para pausar.
   Agora ele é quase transparente, tem o mínimo de toque (44px) e mora no canto
   inferior direito da moldura. */
.filme__play{
  position:absolute;right:var(--e-12);bottom:var(--e-12);z-index:4;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgb(255 255 255 / .12);color:var(--branco);
  display:grid;place-items:center;box-shadow:none;
  transition:background var(--t-r) var(--saida),transform .18s var(--seco);
}
.filme__play:hover{background:rgb(255 255 255 / .26)}
.filme__play::after{
  content:"";width:0;height:0;margin-left:3px;opacity:.5;
  border-left:12px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.filme__play[data-tocando="1"]::after{
  width:11px;height:13px;margin-left:0;border:0;opacity:.5;
  border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;
}
.filme__marca{
  padding:var(--e-12) var(--e-4) var(--e-4);
  color:var(--tinta-3);font-size:var(--t-13);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--p-forte);text-align:center;
}

/* ==========================================================================
   7 · O CORTE
   ========================================================================== */
.corte{display:grid;gap:var(--e-24);margin-top:var(--e-32);
  grid-template-columns:minmax(0,1fr)}
.corte__foto img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:52rem){
  .corte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;gap:var(--e-32);max-width:52rem}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{margin-top:var(--e-24);border-radius:var(--raio-2);overflow:hidden;
  background:var(--branco);box-shadow:0 0 0 1px var(--fio), var(--sombra-1)}
.faq details{border-bottom:1px solid var(--fio-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--e-20) 3rem var(--e-20) var(--e-24);
  position:relative;font-size:var(--t-17);font-weight:var(--p-medio);
  transition:background var(--t-r) var(--saida);
}
.faq summary:hover{background:var(--nevoa-0)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.35rem;top:50%;width:10px;height:10px;
  border-right:1.8px solid var(--aco-2);border-bottom:1.8px solid var(--aco-2);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-r) var(--dupla);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details[open] summary{background:var(--nevoa-0)}
.faq details p{padding:0 var(--e-24) var(--e-24);color:var(--tinta-2);max-width:58ch}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
/* 🔴 o formulário (e com ele o botão de envio) fica centrado na coluna,
   em toda largura — ordem dele de 04/09 */
.form{display:grid;gap:var(--e-16);margin-top:var(--e-32);max-width:30rem;margin-inline:auto}
.campo{display:grid;gap:var(--e-8)}
.campo label{font-size:var(--t-15);font-weight:var(--p-medio)}
.campo input{
  min-height:54px;padding:0 var(--e-16);font:var(--p-corpo) var(--t-17)/1 var(--corpo);
  color:var(--tinta);background:var(--branco);
  border:1px solid var(--fio-3);border-radius:var(--raio-2);
  box-shadow:var(--baixo);
  transition:border-color var(--t-r) var(--saida),box-shadow var(--t-r) var(--saida);
}
.campo input:hover{border-color:var(--aco-1)}
.campo input:focus{outline:2.5px solid var(--marca);outline-offset:2px;
  border-color:var(--marca);box-shadow:0 0 0 3px var(--acao-luz)}
.campo input[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 3px var(--erro-luz)}
.campo__erro{font-size:var(--t-15);color:var(--erro);min-height:1.35em}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__nota{font-size:var(--t-15);color:var(--tinta-3);margin-bottom:var(--e-4)}

/* ==========================================================================
   RODAPÉ · mast-headed, cinza médio, com FECHO
   🔴 A v2 acabava na linha do Google Maps e sobrava um bloco cinza vazio de
   ~83px reservado para a barra fixa. Aqui o rodapé fecha com a frase do
   próprio Phelipe, e o espaço da barra é reservado só enquanto ela existe.
   ========================================================================== */
.rodape{background:var(--grafite);color:var(--nevoa-3);position:relative;
  padding-block:calc(var(--e-96) + 3rem) var(--e-64)}
/* passagem delicada: 4rem de degradê, e o conteúdo nasce muito depois dele */
.rodape::before{content:"";position:absolute;top:0;left:0;right:0;height:4rem;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--nevoa-0),transparent)}
.rodape > *{position:relative;z-index:1}
.rodape a{color:var(--branco);text-decoration-color:var(--branco-a30);
  text-underline-offset:4px;display:inline-block;padding-block:.6rem;
  white-space:nowrap}
.rodape a:hover{text-decoration-color:currentColor}
.rodape__fecho{color:var(--branco);margin-bottom:var(--e-48);max-width:12ch}
.rodape__grade{display:grid;gap:var(--e-32)}
.rodape__marca{font-family:var(--wordmark);font-size:var(--t-30);color:var(--branco);
  letter-spacing:.01em}
.rodape__marca span{display:block;font-family:var(--corpo);font-size:.32em;
  letter-spacing:.36em;color:var(--nevoa-4);margin-top:.7em;
  font-weight:var(--p-corpo);text-transform:uppercase}
.rodape__end{margin-top:var(--e-24);line-height:1.8}
.rodape__links{margin-top:var(--e-8);line-height:1.9}
.rodape__miudo{margin-top:var(--e-40);font-size:var(--t-15);color:var(--nevoa-4);
  max-width:52ch;line-height:1.7}
@media (min-width:52rem){
  .rodape__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--e-64);align-items:start}
}

/* ==========================================================================
   MAPA · fachada. O embed do Google custa 1,5 MB de JS (medido 24/08).
   ========================================================================== */
.mapa{position:relative;border-radius:var(--raio-2);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:var(--e-12)}
/* o "Ver o mapa" agora É um .btn (geometria única); aqui só sobra a pintura
   clara, porque ele mora no rodapé escuro */
.mapa__abrir{
  background:var(--branco);color:var(--tinta);
  box-shadow:var(--sombra-1);
}
.mapa__abrir:hover{background:var(--branco);transform:translateY(-1px);box-shadow:var(--sombra-2)}
.mapa__pin{width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--marca);
  rotate:-45deg;flex:none}
.mapa__nota{font-size:var(--t-13);color:var(--nevoa-4);margin:0;text-align:center}
.mapa__nota a{color:var(--branco);padding-block:.85rem}
.mapa.mapa--aberto{background:none;padding:0;display:block;
  box-shadow:0 0 0 1px var(--branco-a14)}
.mapa iframe{border:0;width:100%;height:16rem;display:block}

/* ==========================================================================
   INTERRUPTOR DE MOVIMENTO · saiu do topo, virou o último controle do rodapé
   🔴 aria-pressed OU rótulo que muda, nunca os dois: na v2 o leitor de tela
   lia "Desligar movimento, botão de alternância, pressionado" — o estado dito
   duas vezes, em sentidos opostos. Aqui o nome é fixo e quem conta o estado
   é o aria-pressed.
   ========================================================================== */
.mov{
  margin-top:var(--e-40);
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;
  background:transparent;border:1px solid var(--branco-a30);border-radius:100px;
  padding:0 1.05em;font:var(--p-medio) var(--t-13)/1 var(--corpo);
  color:var(--nevoa-3);cursor:pointer;white-space:nowrap;
  transition:border-color var(--t-r) var(--saida),color var(--t-r) var(--saida);
}
.mov:hover{border-color:var(--branco-a92);color:var(--branco)}
.mov__bola{width:8px;height:8px;border-radius:50%;background:var(--aco-1);flex:none;
  transition:background var(--t-r) var(--saida)}
html[data-mov="1"] .mov__bola{background:var(--branco)}

/* ==========================================================================
   BARRA DE AÇÃO NO PÉ · C4
   🔴 MANTIDA NO DESKTOP. Na v2 ela sumia a partir de 62rem e o cabeçalho não
   tinha botão nenhum: quem lia no computador rolava a página inteira sem um
   caminho para converter. Aqui ela fica, em formato reduzido.
   ========================================================================== */
.pe{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-pe);
  display:flex;align-items:center;gap:var(--e-16);
  padding:var(--e-12) var(--calha) calc(var(--e-12) + env(safe-area-inset-bottom));
  background:var(--nevoa-0);
  border-top:1px solid var(--fio-2);box-shadow:0 -2px 18px -8px var(--tinta-a16);
  transform:translateY(102%);transition:transform .5s var(--saida);
}
@supports (backdrop-filter:blur(1px)){
  .pe{background:color-mix(in srgb,var(--nevoa-0) 94%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
/* recolhida, ela recebia foco FORA da tela: quem navega por teclado perdia o
   foco de vista por uma parada inteira */
.pe[data-ver="0"]{visibility:hidden}
.pe[data-ver="1"]{transform:none;visibility:visible}
.pe__txt{flex:1;min-width:0;font-size:var(--t-15);line-height:1.32}
.pe__txt b{display:block;font-weight:var(--p-forte);color:var(--tinta)}
.pe__txt span{color:var(--tinta-3);font-size:var(--t-13)}
.pe .btn{min-height:56px;width:auto;padding:0 var(--e-24);flex:none;margin-inline:0}
@media (min-width:62rem){
  .pe{justify-content:center;gap:var(--e-24);
    padding-block:var(--e-8)}
  .pe__txt{flex:0 1 auto}
}

/* ==========================================================================
   CARTÃO FIXO DO VÍDEO
   O herói encolhe para cá quando a página rola, e continua tocando.
   🔴 Nunca cobre a barra fixa nem o formulário: o offset de baixo conta a
   altura da .pe, e o app.js esconde o cartão quando o form entra na tela.
   ========================================================================== */
.pip{
  position:fixed;right:var(--calha);z-index:var(--z-pip);
  bottom:calc(5.6rem + env(safe-area-inset-bottom));
  width:120px;border-radius:var(--raio-2);overflow:hidden;
  background:var(--grafite);
  box-shadow:0 0 0 1px var(--tinta-a16), 0 14px 34px -12px var(--tinta-a44);
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity var(--t-r) var(--saida),transform var(--t-r) var(--saida);
}
.pip[data-ver="1"]{opacity:1;transform:none;pointer-events:auto}
.pip__video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.pip__fechar{
  position:absolute;top:0;right:0;width:44px;height:44px;
  border:0;background:none;cursor:pointer;color:var(--branco);
  display:grid;place-items:center;
}
.pip__fechar::before,.pip__fechar::after{
  content:"";position:absolute;width:15px;height:1.8px;background:currentColor;
  border-radius:2px;filter:drop-shadow(0 1px 3px var(--tinta-a86));
}
.pip__fechar::before{rotate:45deg}
.pip__fechar::after{rotate:-45deg}
@media (min-width:62rem){
  .pip{width:150px;bottom:calc(6rem + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   MOVIMENTO · TRÊS primitivas, e nada mais
   A v2 rodava nove ao mesmo tempo (entrada, cascata, Ken Burns, parallax de
   escala, brilho correndo em 12 molduras, giro infinito do cartão, mola no
   selo, barra de progresso e brilho no botão). Com tudo se mexendo junto,
   nenhum movimento significava nada. Saíram seis.

   FICARAM:  ① cascata de entrada (sem o blur: filter é pintura, não composição)
             ② deslize leve nas molduras grandes, ≤24px
             ③ barra de progresso da leitura
   INTERAÇÃO SOB DEMANDA (não é movimento ambiente): a inclinação do cartão
   sob o dedo, e as transições funcionais do puxador e do cartão fixo.
   ========================================================================== */
.entra{opacity:0;transform:translateY(20px)}
html[data-mov="1"] .entra{
  animation:entra-agora .9s var(--saida) both;
  animation-timeline:view();animation-range:entry 6% cover 24%;
}
@keyframes entra-agora{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ① cascata — a tabela de atraso é o que faz a peça parecer cara, não o efeito.
   Degraus largos, e o BOTÃO POR ÚLTIMO: o olho percorre a frase e para nele. */
html[data-mov="1"] .cascata > *{
  animation:entra-fino .85s var(--saida) both;
  animation-timeline:view();animation-range:entry 4% cover 24%;
}
@keyframes entra-fino{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
html[data-mov="1"] .cascata > *:nth-child(2){animation-delay:.15s}
html[data-mov="1"] .cascata > *:nth-child(3){animation-delay:.28s}
html[data-mov="1"] .cascata > *:nth-child(4){animation-delay:.44s}
html[data-mov="1"] .cascata > *:nth-child(5){animation-delay:.60s}

/* ② deslize — 24px no total, teto duro, só nas molduras grandes.
   A escala de 1.045 existe para os 12px de cada lado não abrirem buraco na
   moldura; o passe-partout é desenhado por cima, então nada o alcança. */
html[data-mov="1"] .desliza{
  animation:desliza linear both;
  animation-timeline:view();animation-range:entry 0% exit 100%;
}
@keyframes desliza{
  from{transform:translateY(-12px) scale(1.045)}
  to{transform:translateY(12px) scale(1.045)}
}

/* ③ barra de progresso da leitura */
.progresso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-prog);
  background:var(--marca);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}
html[data-mov="1"] .progresso{animation:progride linear both;animation-timeline:scroll(root)}
@keyframes progride{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-mov="0"] .progresso{display:none}

/* o interruptor desliga tudo, seco */
html[data-mov="0"] .entra,html[data-mov="0"] .cascata > *{opacity:1;transform:none;animation:none}
html[data-mov="0"] .desliza{animation:none;transform:none}
html[data-mov="0"] .cartao__placa{transform:none;transition:none}
html[data-mov="0"] .cartao__brilho{display:none}
html[data-mov="0"] .puxador,html[data-mov="0"] .pip,html[data-mov="0"] .pe{transition:none}
html[data-mov="0"]{scroll-behavior:auto}

/* 🔴 sr-only · desde 05/09 o título do herói é QUEIMADO dentro do vídeo.
   O <h1> continua no HTML, fora da tela: é ele que o leitor de tela anuncia
   (o herói tem aria-labelledby nele) e é ele que o buscador lê.
   🛑 Não trocar por display:none — isso o tira das duas coisas. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.pula{position:absolute;left:-9999px;top:0;background:var(--acao);color:var(--nevoa-1);
  padding:var(--e-12) var(--e-16);z-index:99}
.pula:focus{left:var(--e-8);top:var(--e-8)}

/* ==========================================================================
   REDUZIR MOVIMENTO
   Respeita o sistema no primeiro quadro. O interruptor da página continua
   podendo LIGAR, porque quem tem a preferência ligada no Windows abriria uma
   página parada e julgaria isso como o produto.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html:not([data-mov="1"]) *,
  html:not([data-mov="1"]) *::before,
  html:not([data-mov="1"]) *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
  html:not([data-mov="1"]) .entra,
  html:not([data-mov="1"]) .cascata > *{opacity:1;transform:none}
  html:not([data-mov="1"]) .desliza{transform:none}
  html:not([data-mov="1"]){scroll-behavior:auto}
}