/* MIRA COMUNICAÇÕES · v8 "câmara de luz ↔ impresso"
   Seções escuras = instrumento (HUD mono, laser, luz de interferência) · claras = editorial impresso
   SF Pro (sistema Apple) com Inter variável autoenviada como equivalente licenciado (SIL OFL)
   + Spline Sans Mono (HUD, só em superfície escura) · glass = nav + tags do espelho */

@layer reset, base, comp, sect, motion, uty;

/* ---------- FONTES ---------- */
/* SF Pro: a licença da Apple não permite servir os arquivos na web, então a pilha
   usa o SF do próprio sistema nos aparelhos Apple e entrega a Inter variável
   (SIL OFL, métrica compatível) autoenviada em todo o resto. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:107.12%; ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%;
}
@font-face{
  font-family:'Spline Sans Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/spline-sans-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'Spline Sans Mono Fallback';
  src:local('Courier New');
  size-adjust:99.5%; ascent-override:98%; descent-override:27%;
}

/* ---------- TOKENS ---------- */
:root{
  --void:#01061f;
  --navy:#010d3d;
  --navy-2:#061649;
  --laranja:#ea4e1b;
  --laser:#ff6b2e;
  --brasa:#c23a10;
  --papel:#f4f0e7;
  --papel-2:#ece6d7;
  --creme:#f0e9d8;
  --tinta:#212130;
  --tinta-2:#565669;
  --gelo-2:#b7c0dc;
  --gelo-3:#7f8aad;
  --salmao:#f5c9b6;
  --foco:cubic-bezier(.22,.85,.3,1);
  --fonte:-apple-system,BlinkMacSystemFont,'Inter','Inter Fallback','Segoe UI',sans-serif;
  --mono:'Spline Sans Mono','Spline Sans Mono Fallback',ui-monospace,'Cascadia Mono',monospace;
}

/* ---------- RESET ---------- */
@layer reset{
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  [id]{scroll-margin-top:74px} /* ancora nativa nunca esconde a nav fixa */
  body{min-height:100svh}
  img,svg,picture{display:block;max-width:100%}
  a{color:inherit}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  ul,ol{list-style:none}
  summary{list-style:none}
  summary::-webkit-details-marker{display:none}
  em{font-style:italic}
}

/* ---------- BASE ---------- */
@layer base{
  body{
    font-family:var(--fonte);
    font-size:1rem; line-height:1.6;
    background:var(--void);
    color:var(--papel);
    overflow-x:clip;
  }
  main > section{overflow-x:clip; position:relative; padding-block:clamp(64px,8.5vw,116px)}
  .wrap{width:min(1160px,92%); margin-inline:auto}

  ::selection{background:var(--laranja); color:var(--void)}

  :focus-visible{outline:2px solid var(--laser); outline-offset:3px; border-radius:4px}
  .dores :focus-visible, .servs :focus-visible,
  .pilares :focus-visible, .bela :focus-visible, .faq :focus-visible{outline-color:var(--brasa)}

  .skip{
    position:fixed; top:-80px; left:16px; z-index:300;
    background:var(--laranja); color:var(--void); font-weight:600;
    padding:12px 20px; border-radius:999px; text-decoration:none;
    transition:top .3s var(--foco);
  }
  .skip:focus-visible{top:14px}

  /* kicker escuro: HUD mono com colchetes */
  .kicker{
    font-family:var(--mono); font-weight:500; font-size:.74rem;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--laranja); margin-bottom:16px;
  }
  .kicker::before{content:"[\00a0"}
  .kicker::after{content:"\00a0]"}

  /* kicker claro: editorial, sem mono, sem colchetes */
  .kicker--luz{font-family:var(--fonte); font-weight:600; letter-spacing:.2em; color:var(--brasa)}
  .kicker--luz::before,.kicker--luz::after{content:none}
  .pilares .kicker--luz{color:var(--tinta)}

  .h2{
    font-size:clamp(1.95rem,3.6vw,3.05rem); font-weight:800;
    line-height:1.12; letter-spacing:-.02em; color:var(--papel);
    max-width:820px; text-wrap:balance;
  }
  .dores .h2, .servs .h2, .pilares .h2, .bela .h2, .faq .h2{color:var(--tinta)}

  .lead{
    font-size:1.08rem; line-height:1.65; color:var(--gelo-2);
    max-width:620px; margin-top:18px;
  }
  .dores .lead, .servs .lead, .pilares .lead, .bela .lead, .faq .lead{color:var(--tinta-2)}
}

/* ---------- COMPONENTES ---------- */
@layer comp{

  /* grão de filme global */
  .grao{
    position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* fio de progresso de leitura */
  #progresso{
    position:fixed; top:0; left:0; right:0; height:3px; z-index:250;
    background:linear-gradient(90deg,var(--brasa),var(--laranja));
    transform:scaleX(0); transform-origin:left;
    pointer-events:none;
  }

  /* vidro: só a nav pill (e o menu overlay) */
  .nav__pill{
    position:relative;
    background:rgba(4,12,44,.62);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:inset 0 1px 0 rgba(244,240,231,.14), 0 18px 40px rgba(0,3,18,.28);
  }
  .nav__pill::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(165deg,rgba(244,240,231,.42),rgba(244,240,231,.06) 32%,rgba(234,78,27,.22) 78%,rgba(244,240,231,.12));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav__pill{background:rgba(6,22,73,.92)}
  }

  /* botões */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:600; font-size:.98rem; line-height:1;
    padding:14px 26px; border-radius:999px; text-decoration:none;
    transition:transform .35s var(--foco), box-shadow .35s var(--foco),
      background-color .35s var(--foco), border-color .35s var(--foco);
  }
  .btn--laranja{
    background:var(--laranja); color:var(--navy);
    box-shadow:0 8px 28px rgba(234,78,27,.35);
  }
  .btn--laranja:hover{background:#f75a26; transform:translateY(-2px); box-shadow:0 14px 36px rgba(234,78,27,.45)}
  .btn--laranja:active{transform:translateY(0)}
  .btn--linha{
    border:1px solid rgba(244,240,231,.32); color:var(--papel);
  }
  .btn--linha:hover{border-color:rgba(244,240,231,.62); background:rgba(244,240,231,.06); transform:translateY(-2px)}
  .btn--g{padding:17px 32px; font-size:1.02rem}
  .btn--gg{padding:20px 44px; font-size:1.12rem}
  .btn__seta{transition:translate .35s var(--foco)}
  .btn:hover .btn__seta{translate:4px 0}

  /* nav pill flutuante */
  .nav{
    position:fixed; inset:14px 0 auto; z-index:100;
    display:flex; justify-content:center;
    pointer-events:none;
  }
  .nav__pill{
    pointer-events:auto;
    display:flex; align-items:center; gap:26px;
    padding:9px 10px 9px 20px; border-radius:999px;
    max-width:min(920px,calc(100vw - 32px));
    transition:background-color .4s var(--foco),
      padding .55s var(--foco), gap .55s var(--foco);
  }
  /* ao rolar, a pílula encolhe suave */
  .nav.rolou .nav__pill{
    background:rgba(3,10,38,.78);
    padding:5px 6px 5px 15px; gap:16px;
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav.rolou .nav__pill{background:rgba(3,10,38,.96)}
  }
  .nav__logo{display:block; border-radius:8px}
  .nav__logo img{width:104px; height:auto; transition:width .55s var(--foco)}
  .nav.rolou .nav__logo img{width:82px}
  .nav__links{display:flex; gap:4px}
  .nav__lk{
    font-size:.92rem; color:var(--gelo-2); text-decoration:none;
    padding:9px 12px; border-radius:999px;
    transition:color .3s var(--foco), background-color .3s var(--foco), padding .55s var(--foco);
  }
  .nav.rolou .nav__lk{padding-block:7px}
  .nav__lk:hover{color:var(--papel); background:rgba(244,240,231,.07)}
  .nav__cta{padding:11px 20px; font-size:.88rem; transition-property:transform,box-shadow,background-color,border-color,padding}
  .nav.rolou .nav__cta{padding:9px 17px}

  /* ===== ABERTURA (filme que entrega a logo pra nav) =====
     Camadas separadas de proposito: fundo e video somem por opacity (compositor,
     nada de transicao de background-color repintando a tela inteira) enquanto a
     logo, o MESMO arquivo da navbar, voa por transform escrito no rAF (alvo lido
     ao vivo, entao rolagem/resize no meio do voo nao desencaixam a chegada).
     #0a143f = fundo do video COMO O NAVEGADOR PINTA (pixel medido por canvas no
     Chrome; o arquivo traz rgb(10,16,60) mas a colorimetria BT.601/709 desloca
     G+4 B+3 na tela): letterbox do object-fit contain desaparece contra ele.
     Logo da nav fica invisivel (layout intacto, o rect de destino continua
     medivel) ate a chegada; a troca acontece no mesmo frame. */
  .abre{display:none; position:fixed; inset:0; z-index:2100; contain:strict}
  html.intro .abre{display:block}
  .abre.some{display:block; opacity:0; pointer-events:none; transition:opacity .3s ease}
  .abre__fundo{position:absolute; inset:0; background:#0a143f}
  /* luz: veu branco ATRAS do video. O flash do filme clareia o frame inteiro,
     entao o main.js mede a borda do frame por canvas e da ao veu a opacidade
     exata que iguala o letterbox a borda viva (a = excesso / (255 - base)).
     Fora do flash fica em 0 e a tela e um azul so; o video, opaco, cobre o
     proprio retangulo, entao o veu so age onde o fundo aparece. */
  .abre__luz{position:absolute; inset:0; background:#fff; opacity:0; will-change:opacity}
  /* --abre-zoom: no retrato o main.js amplia o filme ate o conteudo util
     (medido no arquivo) ocupar 92% da largura; o excedente do frame que sai
     da tela e fundo chapado, cortado pelo contain:strict do .abre */
  .abre__video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scale(var(--abre-zoom, 1))}
  .abre__logo{
    position:absolute; left:0; top:0; height:auto;
    opacity:0; transform-origin:0 0; will-change:transform;
  }
  /* video some rapido: a camera e a palavra do filme dissolvem no azul identico
     antes da logo se afastar (sem fantasma duplicado); o veu azul abre depois */
  .abre.fecha .abre__video{opacity:0; transition:opacity .4s ease}
  .abre.fecha .abre__fundo{opacity:0; transition:opacity .65s ease .1s}
  html.intro .nav__logo img{visibility:hidden}
  /* cinto pras areas fora do fixed no iPhone (safe areas, rubber band,
     recolhimento de barra): o canvas do html fica no azul da abertura
     enquanto ela existe, nada de faixa clara vazando por tras */
  html.intro{background:#0a143f}
  /* celular (breakpoint de celular do projeto): o filme e outro arquivo, ja
     vertical (1080x1920), e preenche a tela por cover no lugar de contain +
     zoom: sem letterbox, sem veu, uma camada de video so. O corte lateral do
     cover e seguro: o conteudo do filme vive em x166-890 do frame e ate um
     viewport de 280px de largura preserva essa banda inteira. */
  @media (max-width:720px){
    .abre__video{object-fit:cover; transform:none}
    .abre__luz{display:none}
  }
}

/* ---------- SEÇÕES ---------- */
@layer sect{

  /* ===== HERO (claro · areia e marfim: ondas de luz WebGL varrendo o papel) ===== */
  .hero{
    min-height:100svh;
    display:flex; align-items:center;
    padding-block:132px 116px;
    background:#f4eee4;
    color:var(--tinta);
  }
  /* fundo: canvas WebGL com ondas creme/areia (ciclo de 8s); o próprio shader
     mantém a área do título clara (quietLeft). Sem WebGL ou com contexto
     perdido, .hero__fbk assume com os mesmos tons em CSS. data-webgl e
     data-paused são escritos pelo JS. */
  .hero__fundo{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    overflow:hidden; isolation:isolate; contain:paint;
    background:#f4eee4;
  }
  .hero__fbk{
    position:absolute; inset:-18%;
    background:
      radial-gradient(ellipse at 78% 68%, #c9af8e 0%, #dbc7ab 18%, transparent 52%),
      radial-gradient(ellipse at 28% 35%, #fff9ef 0%, #f4eee4 34%, transparent 65%),
      linear-gradient(135deg, #f4eee4, #e9d9c1 60%, #f6f0e6);
    animation:fbkDeriva 8s ease-in-out infinite;
  }
  .hero__fundo canvas{display:block; position:absolute; inset:0; width:100%; height:100%}
  .hero__fundo[data-webgl="true"] .hero__fbk{animation:none}
  .hero__fundo[data-paused="true"] .hero__fbk{animation-play-state:paused}
  .hero .kicker{font-size:.8rem; margin-bottom:18px; color:var(--brasa)}

  .hero__grid{position:relative; z-index:2}
  .hero__txt{max-width:820px}
  .hero__h1{
    font-size:clamp(2.55rem,5.9vw,4.9rem); font-weight:800;
    line-height:1.05; letter-spacing:-.025em; color:var(--tinta);
    margin:18px 0 22px;
  }
  /* inline-block: WebKit posiciona abs dentro de inline puro pelo fragmento
     errado (a elipse escapava da palavra no iPhone) */
  .foco{position:relative; z-index:0; display:inline-block; font-style:normal; color:var(--brasa)}
  .foco__anel{
    position:absolute; inset:-.18em -.2em -.3em; z-index:-1;
    overflow:visible; pointer-events:none;
  }
  .foco__anel path{
    fill:none; stroke:var(--laranja); stroke-width:6;
    stroke-linecap:round; opacity:.9;
    stroke-dasharray:900; stroke-dashoffset:900;
    transition:stroke-dashoffset 1.2s var(--foco) .75s;
  }
  .hero__h1.on .foco__anel path{stroke-dashoffset:0}
  .hero__sub{font-size:1.06rem; line-height:1.65; color:var(--tinta-2); max-width:540px}
  .hero__row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
  /* CTA fantasma precisa de traço escuro sobre o papel */
  .hero .btn--linha{border-color:rgba(33,33,48,.3); color:var(--tinta)}
  .hero .btn--linha:hover{border-color:rgba(33,33,48,.6); background:rgba(33,33,48,.05)}
  /* ===== DORES (claro · página impressa, falas soltas) ===== */
  .dores{background:var(--creme); color:var(--tinta)}
  .dores__eco{
    position:absolute; top:1%; right:-2%; z-index:0;
    font-weight:800; font-size:clamp(6rem,19vw,16rem); line-height:1;
    letter-spacing:-.04em; color:var(--salmao);
    pointer-events:none; user-select:none;
  }
  .dores .wrap{position:relative; z-index:1}
  .risco{color:var(--brasa)}
  .falas{
    margin-top:clamp(40px,6vw,64px);
    display:flex; flex-direction:column; gap:clamp(24px,4vw,38px);
  }
  .fala p{
    font-style:italic; font-weight:400; color:var(--tinta);
    line-height:1.42; letter-spacing:-.01em; text-wrap:balance;
  }
  .fala--1{margin-left:0}      .fala--1 p{font-size:clamp(1.5rem,2.7vw,2.15rem); max-width:22em}
  .fala--2{margin-left:12%}    .fala--2 p{font-size:clamp(1.12rem,1.8vw,1.4rem);  max-width:26em}
  .fala--3{margin-left:24%}    .fala--3 p{font-size:clamp(1.4rem,2.4vw,1.85rem);  max-width:20em}
  .fala--4{margin-left:5%}     .fala--4 p{font-size:clamp(1.08rem,1.7vw,1.3rem);  max-width:27em}
  .fala--5{margin-left:16%}    .fala--5 p{font-size:clamp(1.45rem,2.5vw,1.95rem); max-width:21em}
  .fala--6{margin-left:0}      .fala--6 p{font-size:clamp(1.18rem,1.9vw,1.5rem);  max-width:25em}

  /* ===== MANIFESTO (escuro · navy) ===== */
  .mani{background:var(--navy)}
  .mani__luz{
    position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
    width:920px; height:680px; pointer-events:none;
    background:radial-gradient(ellipse,rgba(234,78,27,.13) 0%,transparent 64%);
  }
  .mani__in{position:relative; max-width:900px}
  .mani__xh{color:var(--laranja); margin-bottom:28px}
  .mani__txt{
    font-size:clamp(1.5rem,3vw,2.35rem); font-weight:600;
    line-height:1.42; letter-spacing:-.01em; color:var(--papel);
  }
  .mani__txt strong{color:var(--laranja); font-weight:700}
  .mani__apoio{margin-top:26px; font-size:1.05rem; line-height:1.68; color:var(--gelo-2); max-width:640px}

  /* ===== ESPELHO (escuro · salão de espelhos: anel 3D de ensaios sobre chão de água) =====
     Geometria: o palco dá a perspectiva; o anel afunda -R em Z e gira em Y (JS escreve o
     transform inline por quadro; custom property aqui recalculava a subtree no WebKit e travava);
     cada card ocupa a MESMA caixa do anel e se lança pra sua posição com
     rotateY(i*passo) translateZ(R). R vem do JS (raio do polígono de 13 lados
     pela largura real do card). O reflexo é um clone da picture DENTRO do card
     (injetado pelo JS), então herda a perspectiva de graça. */
  .esp{
    background:linear-gradient(180deg,var(--navy) 0%,var(--void) 34%,#010312 100%);
    padding-bottom:clamp(48px,6vw,76px);
  }
  .esp__cab{position:relative; z-index:2}
  .esp__palco{
    position:relative; z-index:1;
    margin-top:clamp(28px,4vw,46px);
    height:clamp(390px,52vh,520px);
    perspective:1600px; perspective-origin:50% 30%;
    touch-action:pan-y;
    cursor:grab;
    user-select:none; -webkit-user-select:none;
  }
  .esp__palco.pega{cursor:grabbing}
  .esp__palco :focus-visible{outline:none}
  .esp__anel{
    position:absolute; left:50%; top:40%;
    width:var(--cw); height:calc(var(--cw)*1.5);
    translate:-50% -50%;
    transform-style:preserve-3d;
    transform:translateZ(calc(var(--r)*-1));
    will-change:transform;
    --cw:250px; --r:579px;
  }
  .esp__card{
    position:absolute; inset:0; margin:0;
    transform:rotateY(calc(var(--i)*27.692308deg)) translateZ(var(--r));
    border-radius:14px;
  }
  .esp__card picture{
    position:absolute; inset:0; overflow:hidden;
    border-radius:14px;
    background:var(--navy-2);
    box-shadow:0 30px 70px rgba(0,2,12,.55);
  }
  .esp__card img{width:100%; height:100%; object-fit:cover}
  /* tag da série: lasca de vidro no pé do card */
  .esp__tag{
    position:absolute; left:12px; bottom:12px; z-index:2;
    font-family:var(--mono); font-weight:500; font-size:.6rem;
    letter-spacing:.18em; text-transform:uppercase;
    color:var(--papel);
    background:rgba(2,7,26,.58);
    border:1px solid rgba(244,240,231,.16);
    box-shadow:inset 0 1px 0 rgba(244,240,231,.12);
    padding:7px 11px; border-radius:999px;
    white-space:nowrap;
  }
  /* reflexo na água: clone da picture, espelhado e afogado (injetado pelo JS) */
  .esp__reflexo{
    position:absolute; top:calc(100% + 12px); left:0; width:100%; height:100%;
    transform:scaleY(-1);
    border-radius:14px; overflow:hidden;
    filter:blur(6px) brightness(.6) saturate(.85);
    opacity:.5;
    will-change:opacity;
    -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.6) 4%, transparent 56%);
    mask-image:linear-gradient(to top, rgba(0,0,0,.6) 4%, transparent 56%);
    pointer-events:none;
  }
  .esp__reflexo img{width:100%; height:100%; object-fit:cover}
  /* blur do reflexo no touch: rasterizar o filtro dentro do preserve-3d a cada
     quadro custa caro no celular; máscara + mergulho seguram a leitura de água */
  @media (pointer:coarse){
    .esp__reflexo{filter:brightness(.6) saturate(.85)}
  }
  /* véu de profundidade (elemento injetado pelo JS, opacity escrita direto):
     quanto mais fundo no anel, mais o card afunda no breu */
  .esp__veu{
    position:absolute; inset:0; z-index:3;
    border-radius:14px; background:#010312;
    opacity:0;
    will-change:opacity;
    pointer-events:none;
  }
  /* bruma: horizonte quente atrás do anel + vinheta que come as beiradas */
  .esp__bruma{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(ellipse 64% 30% at 50% 64%, rgba(234,78,27,.12) 0%, transparent 70%),
      linear-gradient(180deg, transparent 62%, rgba(1,3,18,.55) 88%, rgba(1,3,18,.85) 100%),
      linear-gradient(90deg, rgba(1,3,18,.8) 0%, transparent 14% 86%, rgba(1,3,18,.8) 100%);
  }
  /* HUD: só a dica de interação */
  .esp__hud{position:relative; z-index:2; text-align:center; margin-top:clamp(18px,2.5vw,28px)}
  .esp__dica{
    font-family:var(--mono); font-weight:500; font-size:.62rem;
    letter-spacing:.3em; color:var(--gelo-3);
  }

  /* ===== SERVIÇOS (claro · índice de capa, coluna única com respiro) ===== */
  .servs{background:var(--papel); color:var(--tinta)}
  .servs__lista{
    margin-top:clamp(44px,6vw,66px);
    display:flex; flex-direction:column; gap:clamp(32px,5vw,50px);
  }
  /* hover calmo: easing sem estalo (saída longa), nada de salto */
  .serv{
    position:relative; max-width:780px;
    padding-left:clamp(20px,3vw,30px);
    transition:translate .9s cubic-bezier(.25,.46,.45,.94);
  }
  .serv::before{
    content:""; position:absolute; left:0; top:.28em; bottom:.35em; width:3px;
    border-radius:3px; background:var(--laranja);
    transform:scaleY(0); transform-origin:top;
    transition:transform .9s cubic-bezier(.25,.46,.45,.94);
  }
  .serv:hover{translate:8px 0}
  .serv:hover::before{transform:scaleY(1)}
  .serv__t{
    font-size:clamp(1.5rem,2.8vw,2.35rem); font-weight:800;
    letter-spacing:-.018em; line-height:1.12; color:var(--tinta);
    transition:color .7s ease;
  }
  .serv:hover .serv__t{color:var(--brasa)}
  .serv__d{font-size:1rem; line-height:1.62; color:var(--tinta-2); max-width:52ch; margin-top:8px}

  .serv--ag{
    margin-top:clamp(40px,5vw,56px);
    background:var(--navy); color:var(--papel);
    border-radius:22px;
    padding:clamp(30px,4.5vw,44px) clamp(26px,4vw,48px);
    box-shadow:0 26px 60px rgba(1,13,61,.26);
  }
  .serv--ag__xh{color:var(--laranja); margin-bottom:16px}
  .serv--ag__tag{
    font-family:var(--mono); font-weight:500; font-size:.7rem;
    letter-spacing:.2em; color:var(--laranja);
  }
  .serv--ag__t{font-size:1.5rem; font-weight:700; color:var(--papel); margin:12px 0 10px}
  .serv--ag__d{font-size:1rem; line-height:1.65; color:var(--gelo-2); max-width:720px}

  /* ===== MÉTODO (escuro · seis verbos no trilho laser) ===== */
  .met__trilho{margin-top:clamp(40px,5vw,56px); position:relative}
  .met__linha{
    position:absolute; left:19px; top:12px; bottom:12px; width:2px;
    background:rgba(190,205,255,.12); border-radius:2px;
  }
  #linha-mira{
    position:absolute; inset:0; border-radius:2px;
    background:linear-gradient(180deg,var(--laser),var(--laranja));
    box-shadow:0 0 14px rgba(255,107,46,.55);
    transform:scaleY(0); transform-origin:top;
    will-change:transform;
  }
  .met__passos{display:grid; gap:clamp(26px,4vw,38px); padding-left:clamp(52px,7vw,84px)}
  .passo{display:flex; align-items:baseline; gap:14px 34px; flex-wrap:wrap}
  .passo__t{
    flex:0 0 clamp(200px,25vw,318px);
    font-size:clamp(2.15rem,4.8vw,3.5rem); font-weight:800;
    line-height:1.04; letter-spacing:-.022em;
    color:rgba(244,240,231,.2);
    transition:color .6s var(--foco), text-shadow .6s var(--foco);
  }
  .passo.trava .passo__t{
    color:var(--laranja);
    text-shadow:0 0 26px rgba(255,107,46,.4);
  }
  .passo__d{
    flex:1; min-width:250px; max-width:520px;
    font-size:1rem; line-height:1.62; color:var(--gelo-2);
  }

  /* ===== PILARES (claro · faixa salmão, zigue-zague com marca-texto) ===== */
  .pilares{background:var(--salmao); color:var(--tinta)}
  .pil__lista{
    margin-top:clamp(42px,6vw,60px);
    display:flex; flex-direction:column; gap:clamp(30px,5vw,46px);
  }
  .pil{max-width:600px}
  .pil--dir{margin-left:auto; text-align:right}
  .pil__t{
    display:inline;
    font-size:clamp(1.45rem,2.9vw,2.3rem); font-weight:800;
    letter-spacing:-.018em; line-height:1.28; color:var(--tinta);
    background-image:linear-gradient(var(--laranja),var(--laranja));
    background-repeat:no-repeat;
    background-position:0 86%;
    background-size:0% .3em;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
    transition:background-size .7s var(--foco) .4s;
  }
  .pil--dir .pil__t{background-position:100% 86%}
  .pil.on .pil__t{background-size:100% .3em}
  .pil__d{margin-top:10px; font-size:1.02rem; line-height:1.6; color:var(--tinta-2); max-width:460px}
  .pil--dir .pil__d{margin-left:auto}

  /* ===== BELA (claro · papel, capítulo pessoal) ===== */
  .bela{
    background:var(--papel); color:var(--tinta);
    padding-top:clamp(132px,14vw,192px);
  }
  .bela__borda{
    position:absolute; top:-1px; left:0; width:100%; height:clamp(60px,8vw,110px);
  }
  .bela__ondas{
    position:absolute; left:0; right:0; top:14%; width:100%; height:auto;
    pointer-events:none;
  }
  .bela__grid{
    position:relative;
    display:grid; grid-template-columns:minmax(280px,420px) 1fr;
    gap:58px; align-items:center;
  }
  .bela__foto{position:relative}
  .bela__foto picture{
    display:block; transform:rotate(-2deg);
    background:var(--creme); padding:14px;
    border-radius:6px;
    box-shadow:12px 14px 0 var(--navy);
    transition:transform .6s var(--foco);
  }
  .bela__foto:hover picture{transform:rotate(0)}
  .bela__foto img{width:100%; height:auto; border-radius:3px}
  .bela__legenda{
    position:absolute; left:20px; bottom:-16px; transform:rotate(1.5deg);
    background:var(--navy); color:var(--papel);
    font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.08em;
    padding:9px 16px; border-radius:999px;
    box-shadow:0 8px 20px rgba(1,13,61,.3);
  }
  .cor{color:var(--laranja)}
  .bela__p{font-size:1.02rem; line-height:1.7; color:var(--tinta-2); max-width:560px; margin-top:16px}
  .bela__frase{
    margin-top:26px; padding-left:20px;
    border-left:3px solid var(--laranja);
  }
  .bela__frase em{font-size:1.28rem; line-height:1.5; color:var(--tinta)}
  .bela__ass{margin-top:26px; font-size:.95rem; color:var(--tinta-2)}
  .lk{color:var(--brasa); font-weight:600; text-underline-offset:3px}

  /* ===== FAQ (claro · papel-2) ===== */
  .faq{background:var(--papel-2); color:var(--tinta)}
  .faq__head{max-width:640px; margin:0 auto 42px; text-align:center}
  .faq__head .h2,.faq__head .lead{margin-inline:auto}
  .faq__lista{max-width:760px; margin:0 auto}
  .q{border-top:1px solid rgba(1,13,61,.14)}
  .q:last-child{border-bottom:1px solid rgba(1,13,61,.14)}
  .q summary{
    display:grid; grid-template-columns:1fr 26px;
    align-items:center; gap:14px;
    padding-block:22px; cursor:pointer;
  }
  .q__perg{font-size:1.08rem; font-weight:600; color:var(--tinta); transition:color .3s var(--foco)}
  .q summary:hover .q__perg{color:var(--brasa)}
  .q__mais{position:relative; width:22px; height:22px; transition:transform .35s var(--foco)}
  .q__mais::before,.q__mais::after{
    content:""; position:absolute; top:50%; left:50%;
    background:var(--navy); border-radius:2px;
  }
  .q__mais::before{width:14px; height:2px; transform:translate(-50%,-50%)}
  .q__mais::after{width:2px; height:14px; transform:translate(-50%,-50%)}
  .q[open] .q__mais{transform:rotate(45deg)}
  .q > p{
    padding:0 40px 26px 0;
    font-size:1rem; line-height:1.68; color:var(--tinta-2); max-width:660px;
  }

  /* ===== CHAMADA FINAL (escuro · void) ===== */
  .fim{
    background:var(--void); overflow:hidden;
    padding-block:clamp(100px,13vw,150px);
    text-align:center;
  }
  .fim__tunel{position:absolute; inset:0; pointer-events:none}
  .fim__tunel i{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    border-radius:50%; border:1px solid rgba(183,192,220,.09);
  }
  .fim__tunel i:nth-child(1){width:940px; height:940px}
  .fim__tunel i:nth-child(2){width:660px; height:660px; border-color:rgba(183,192,220,.12)}
  .fim__tunel i:nth-child(3){width:430px; height:430px; border-color:rgba(234,78,27,.16)}
  .fim__tunel i:nth-child(4){
    width:230px; height:230px;
    border-color:rgba(255,107,46,.3);
    box-shadow:0 0 60px rgba(234,78,27,.16), inset 0 0 40px rgba(234,78,27,.1);
  }
  .fim__in{position:relative; max-width:720px}
  .fim .kicker{margin-inline:auto}
  .fim__h2{
    font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800;
    line-height:1.1; letter-spacing:-.02em; color:var(--papel);
    text-wrap:balance;
  }
  .fim__p{font-size:1.08rem; line-height:1.65; color:var(--gelo-2); margin:20px auto 36px; max-width:520px}
  .fim .btn--gg{animation:pulso 3.2s ease-in-out infinite}
  .fim__selo{
    margin-top:38px;
    font-family:var(--mono); font-weight:500; font-size:.7rem;
    letter-spacing:.32em; color:var(--gelo-3);
  }

  /* ===== FOOTER ===== */
  .pe{background:#01040f; position:relative}
  .pe::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent 8%,rgba(234,78,27,.5) 50%,transparent 92%);
  }
  .pe__grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr;
    gap:42px; padding-block:56px 44px;
  }
  .pe__logo{width:128px; height:auto}
  .pe__desc{margin-top:20px; font-size:.95rem; line-height:1.62; color:var(--gelo-2); max-width:300px}
  .pe__t{
    font-family:var(--mono); font-weight:500; font-size:.72rem;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--gelo-3); margin-bottom:18px;
  }
  .pe__lk{
    display:block; width:fit-content;
    color:var(--gelo-2); text-decoration:none;
    font-size:.95rem; padding:5px 0;
    transition:color .3s var(--foco);
  }
  .pe__lk:hover{color:var(--papel)}
  .pe__fim{
    border-top:1px solid rgba(190,205,255,.08);
    padding-block:24px 32px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:12px 24px;
    font-size:.85rem; color:var(--gelo-3);
  }
  .pe__fim a{color:var(--gelo-2); text-underline-offset:3px}
  .pe__fim a:hover{color:var(--papel)}
  .pe__fim-dir{display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px}
}

/* ---------- MOTION ---------- */
@layer motion{
  /* Reveals so armam com a classe js no html (posta pelo inline do head).
     Sem JS, ou se main.js falhar (failsafe de 3s tira a classe), nenhum
     conteudo depende de script pra aparecer: a pagina fica visivel de cara. */
  .js .rv{
    opacity:0; transform:translateY(22px); filter:blur(10px);
    transition:opacity .8s var(--foco) var(--d,0s),
      transform .8s var(--foco) var(--d,0s),
      filter .8s var(--foco) var(--d,0s);
  }
  .js .rv.on{opacity:1; transform:none; filter:none}

  /* sem JS o anel da hero ja aparece desenhado */
  html:not(.js) .foco__anel path{stroke-dashoffset:0}

  /* dores: falas deslizam do seu lado */
  .js .dores .fala.rv{transform:translateX(-34px)}
  .js .dores .fala:nth-child(even).rv{transform:translateX(34px)}
  .js .dores .fala.rv.on{transform:none}

  /* serviços: entrada em degraus, um item por vez */
  .serv.rv:nth-child(2){transition-delay:.08s}
  .serv.rv:nth-child(3){transition-delay:.16s}
  .serv.rv:nth-child(4){transition-delay:.24s}
  .serv.rv:nth-child(5){transition-delay:.32s}

  /* pilares: cada linha desliza do seu lado (marca-texto tem delay próprio) */
  .js .pilares .pil.rv{transform:translateX(-38px)}
  .js .pilares .pil--dir.rv{transform:translateX(38px)}
  .js .pilares .pil.rv.on{transform:none}

  /* manifesto: palavras assumem o reveal */
  .js .mani__txt.rv{opacity:1; transform:none; filter:none}
  .w{
    display:inline-block;
    opacity:.14; filter:blur(5px); transform:translateY(.18em);
    transition:opacity .6s var(--foco) calc(var(--wi)*55ms),
      filter .6s var(--foco) calc(var(--wi)*55ms),
      transform .6s var(--foco) calc(var(--wi)*55ms);
  }
  .mani__txt.on .w{opacity:1; filter:none; transform:none}

  /* faq: resposta abre com um respiro */
  .q[open] > p{animation:qAbrir .5s var(--foco)}

  /* deriva do fallback bege da hero (só roda quando o WebGL não desenha) */
  @keyframes fbkDeriva{
    0%,100%{transform:translate3d(-2%,1%,0) rotate(-4deg) scale(1.06)}
    50%{transform:translate3d(3%,-2%,0) rotate(4deg) scale(1.12)}
  }
  @keyframes qAbrir{from{opacity:0; translate:0 -8px}}
  @keyframes pulso{
    0%,100%{box-shadow:0 10px 40px rgba(234,78,27,.4)}
    50%{box-shadow:0 10px 56px rgba(234,78,27,.62)}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.001s!important;
      animation-iteration-count:1!important;
      transition-duration:.001s!important;
      transition-delay:0s!important;
      scroll-behavior:auto!important;
    }
    .rv,.w{opacity:1!important; transform:none!important; filter:none!important}
    .serv::before{transform:none!important}
    .serv:hover{translate:0 0}
    .foco__anel path{stroke-dashoffset:0!important}
    .pil__t{background-size:100% .3em!important}
    #linha-mira{transform:none!important}
    .hero__fbk{animation:none}
    .fim .btn--gg{animation:none}
    /* intro nem chega a nascer com movimento reduzido (head nao poe a classe);
       este e so o cinto caso a preferencia mude no meio da visita */
    .abre{display:none!important}
    .nav__logo img{visibility:visible!important}
  }
}

/* ---------- RESPONSIVO ---------- */

/* dobra: telas largas e baixas */
@media (min-width:941px) and (max-height:820px){
  .hero{padding-block:116px 100px}
  .hero__h1{font-size:clamp(2.4rem,4.6vw,3.5rem); margin:14px 0 18px}
  .hero__sub{font-size:1rem}
  .hero__row{margin-top:26px}
}

@media (max-width:940px){
  /* nav completa em toda largura: mesma pílula do desktop, só comprimida */
  .nav__pill{gap:14px; padding:8px 8px 8px 16px}
  .nav__links{gap:2px}
  .nav__lk{font-size:.86rem; padding:9px 9px}
  .nav__logo img{width:84px}
  .nav.rolou .nav__logo img{width:72px}
  .nav__cta{padding:10px 15px; font-size:.82rem}
  .nav.rolou .nav__cta{padding:8px 13px}

  .hero{padding-block:124px 96px}
}

/* faixa tablet: entre o layout cheio e o empilhado, os degraus e as colunas
   do desktop apertam; aqui eles afrouxam sem virar mobile */
@media (min-width:721px) and (max-width:1024px){
  .fala--2{margin-left:8%}
  .fala--3{margin-left:15%}
  .fala--4{margin-left:3%}
  .fala--5{margin-left:10%}

  .esp__anel{--cw:228px}

  .met__passos{padding-left:48px}

  .bela__grid{grid-template-columns:minmax(260px,340px) 1fr; gap:44px}
  .bela__frase em{font-size:1.18rem}

  .pe__grid{gap:34px}
  .pe__desc{max-width:none}
}

@media (max-width:720px){
  /* pílula inteira no celular: tudo mais compacto, nada some */
  .nav__pill{gap:7px; padding:6px 6px 6px 11px}
  .nav.rolou .nav__pill{gap:6px; padding:5px 5px 5px 10px}
  .nav__logo img{width:54px}
  .nav.rolou .nav__logo img{width:48px}
  .nav__lk{font-size:.67rem; padding:9px 5px; white-space:nowrap}
  .nav.rolou .nav__lk{padding-block:8px}
  .nav__cta{padding:8px 10px; font-size:.67rem; white-space:nowrap}
  .nav.rolou .nav__cta{padding:7px 9px}

  .hero{padding-block:112px 84px}

  .falas{margin-top:36px; gap:24px}
  .fala--1,.fala--2,.fala--3,.fala--4,.fala--5,.fala--6{margin-left:0}

  /* espelho: anel mais fechado, palco mais baixo, câmera mais perto */
  .esp__palco{height:clamp(320px,48vh,400px); perspective:1150px}
  .esp__anel{--cw:190px}
  .esp__reflexo{top:calc(100% + 8px)}
  .esp__tag{left:9px; bottom:9px; font-size:.54rem; padding:6px 9px}

  .servs__lista{gap:30px}
  .serv{padding-left:16px}
  .serv__t{font-size:1.4rem}
  .serv--ag{padding:28px 24px}

  .met__trilho{margin-top:40px}
  .met__passos{gap:28px; padding-left:46px}
  .passo{gap:8px}
  .passo__t{flex-basis:100%; font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .passo__d{min-width:0; flex-basis:100%}

  .pil{max-width:none}
  .pil--dir{margin-left:0; text-align:left}
  .pil--dir .pil__t{background-position:0 86%}
  .pil--dir .pil__d{margin-left:0}

  .bela{padding-top:clamp(104px,17vw,140px)}
  .bela__grid{grid-template-columns:1fr; gap:46px}
  .bela__foto{max-width:310px; margin-inline:auto}

  .q summary{gap:12px}
  .q > p{padding-right:8px}

  .pe__grid{grid-template-columns:1fr; gap:32px; padding-block:46px 36px}
  .pe__fim{flex-direction:column; align-items:flex-start}
}

@media (max-width:400px){
  .nav__logo img{width:46px}
  .nav.rolou .nav__logo img{width:42px}
  .nav__lk{font-size:.6rem; padding:9px 4px}
  .nav__cta{padding:8px 8px; font-size:.6rem}
  .nav.rolou .nav__cta{padding:7px 7px}

  .hero__h1{font-size:2.3rem}
  .btn--gg{padding:18px 32px; font-size:1.02rem}
}

/* ---------- UTIL ---------- */
@layer uty{
  [hidden]{display:none!important}
}