/* ============================================================
   ROSARIDE — Design System v1 (Fase 1)
   Paleta oficial extraída da marca. Assinatura visual: faixa de
   sinalização viária (hachura amarela) + sublinhado "pintado".
   Tipos: Archivo (display) · Instrument Sans (texto) · IBM Plex Mono (dados)
   ============================================================ */

:root{
  --header-h:74px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.3,.64,1);
  --bg:#0b0b0d;
  --surface:#151519;
  --surface-2:#101013;
  --text:#f5f5f4;
  --muted:#9c9ca4;
  --yellow:#f2c200;
  --yellow-ink:#131309;
  --yellow-dim:rgba(242,194,0,.12);
  --line:rgba(245,245,244,.09);
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --container:1160px;
  --radius:14px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  color-scheme:dark;
  accent-color:var(--yellow);
}
/* Mola real onde linear() existe; a cascata degrada sozinha para a bezier acima */
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.42 12%,.83 25%,1.02 37%,1.06 50%,1.02 68%,1)}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;
  /* Compensa o header fixo em âncoras, skip-link e scrollIntoView */
  scroll-padding-top:calc(var(--header-h) + 1rem);
  scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::placeholder{color:var(--muted);opacity:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--yellow-ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--yellow-ink);
  padding:.6rem 1rem;z-index:200;font-weight:600}
.skip-link:focus{left:12px;top:12px}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;
  letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.6vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.15rem;letter-spacing:0}
p{margin:0 0 1em;color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#c9c9cf}
strong{color:var(--text)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--yellow)}

/* Sublinhado "pintado" — assinatura tipográfica */
.mark{position:relative;white-space:nowrap;font-style:normal}
.mark::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.3em;
  background:var(--yellow);z-index:-1;transform:skewX(-8deg);
  border-radius:2px;opacity:.92;
}

/* Marcador de dado a confirmar (remover no go-live) */
.tbc{border-bottom:1px dashed rgba(242,194,0,.55);cursor:help}

/* ---------- Faixa de sinalização (assinatura visual) ---------- */
.stripe{
  height:14px;border:0;margin:0;
  background:repeating-linear-gradient(-45deg,
    var(--yellow) 0 14px, var(--bg) 14px 28px);
  opacity:.9;
}
.stripe--thin{height:8px;opacity:.7}

/* ---------- Layout ---------- */
.container{width:min(var(--container),calc(100% - 2.5rem));margin-inline:auto}
.section{padding:clamp(4rem,9vw,7rem) 0}
.section--tint{background:var(--surface-2)}
.section-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.grid{display:grid;gap:1.4rem}
@media(min-width:820px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  /* Canais separados: translate = lift, scale = press. Nunca `transform` aqui,
     senão hover e active competem pela mesma propriedade (bug do :active). */
  transition:translate .28s var(--spring),scale .16s var(--spring),
             box-shadow .28s var(--ease-out),background .18s ease,
             color .18s ease,border-color .18s ease;
}
.btn:active{scale:.97}
.btn-yellow{background:var(--yellow);color:var(--yellow-ink)}
.btn-yellow:hover{translate:0 -2px;box-shadow:0 10px 30px rgba(242,194,0,.28)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(11,11,13,0);
  /* backdrop-filter NÃO entra na transition: interpolar o raio do blur
     re-rasteriza a área inteira a cada frame. Ele liga de forma
     discreta e quem faz a passagem suave é o background. */
  transition:background .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{background:rgba(11,11,13,.86);backdrop-filter:blur(12px);
  border-color:var(--line)}
/* Sentinela do header: 24px no topo do documento. Enquanto está na
   viewport o header é transparente. Trocou o listener de scroll por
   um IntersectionObserver — o mesmo resultado sem trabalho por frame. */
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:24px;
  pointer-events:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:1rem}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em}
.logo b{color:var(--yellow)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-size:.92rem;color:var(--muted);transition:color .15s}
.nav a:hover{color:var(--text)}
.nav .btn{padding:.6rem 1.15rem;font-size:.85rem}
.nav-toggle{display:none;background:none;border:0;color:var(--text);
  padding:.5rem;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}
@media(max-width:860px){
  .nav{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;
    background:var(--surface-2);border-bottom:1px solid var(--line);
    padding:1.2rem 1.4rem 1.6rem;gap:1.1rem;transform:translateY(-130%);
    visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s}
  .nav.is-open{transform:translateY(0);visibility:visible;
    transition:transform .28s ease}
  .nav-toggle{display:block}
}

/* ---------- Hero ---------- */
.hero{position:relative;
  padding:calc(var(--header-h) + clamp(3rem,8vw,6rem)) 0 0;overflow:hidden}
.hero::before{ /* farol amarelo difuso */
  content:"";position:absolute;top:-20%;right:-15%;width:60vw;height:60vw;
  background:radial-gradient(closest-side,var(--yellow-dim),transparent 70%);
  pointer-events:none;
}
.hero-grid{display:grid;gap:2.5rem;align-items:center;
  padding-bottom:clamp(3rem,7vw,5.5rem)}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:.6em}
.hero .lead{max-width:34rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero-meta{display:flex;gap:1.6rem;margin-top:2.2rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-media::after{ /* placa de identificação */
  content:"X8 · LINHA 2026";position:absolute;left:14px;bottom:14px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  background:var(--yellow);color:var(--yellow-ink);padding:.4rem .7rem;
  border-radius:6px;font-weight:600;
}

/* ---------- Modelos ---------- */
.model-featured{
  display:grid;gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
@media(min-width:860px){.model-featured{grid-template-columns:1.1fr .9fr}}
.model-featured img{height:100%;object-fit:cover}
.model-featured-body{padding:clamp(1.6rem,3.5vw,2.6rem);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem}
.model-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1.4rem}
.chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:999px;padding:.38rem .75rem;
  color:var(--muted)}
.model-soon{border:1px dashed var(--line);border-radius:var(--radius);
  padding:1.6rem;display:flex;flex-direction:column;gap:.3rem;
  justify-content:center;min-height:150px;color:var(--muted)}
.model-soon .eyebrow{margin-bottom:.2rem;color:var(--muted)}
.model-soon .eyebrow::before{background:var(--muted)}

/* ---------- Especificações ---------- */
.specs{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:640px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{background:var(--surface-2);padding:1.4rem 1.5rem}
.spec dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .45rem}
.spec dd{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:1.35rem;letter-spacing:-.01em}
.spec dd small{display:block;font-family:var(--font-body);font-weight:400;
  font-size:.8rem;color:var(--muted);margin-top:.25rem}
.specs-note{font-size:.8rem;margin-top:.9rem;color:var(--muted)}

/* ---------- Galeria ---------- */
.gallery{display:grid;gap:1rem}
@media(min-width:720px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;position:relative;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line)}
.gallery img{transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:.7rem 1rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(11,11,13,.85))}

/* ---------- História ---------- */
.historia-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.historia-grid{grid-template-columns:.9fr 1.1fr}}
.historia-quote{
  border-left:3px solid var(--yellow);padding-left:1.4rem;
  font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  color:var(--text);line-height:1.4;
}

/* ---------- Especialistas ---------- */
.spec-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem;display:flex;
  flex-direction:column;gap:.9rem;transition:border-color .2s,transform .2s}
.spec-card:hover{border-color:rgba(242,194,0,.5);transform:translateY(-3px)}
.spec-card-region{font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.spec-card h3{margin:0}
.spec-card .phone{font-family:var(--font-mono);font-size:.85rem;color:var(--muted)}

/* ---------- Formulário ---------- */
.form-wrap{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.6rem,3.5vw,2.6rem)}
.form-grid{display:grid;gap:1rem}
@media(min-width:680px){.form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}}
label{display:block;font-size:.82rem;font-weight:600;color:var(--text);
  margin-bottom:.4rem}
input,select,textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:.85rem 1rem;
  font:inherit;font-size:.95rem;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--yellow)}
input:focus:not(:focus-visible),select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible){outline:none}
textarea{min-height:110px;resize:vertical}
.consent-row{display:flex;gap:.7rem;align-items:flex-start;
  font-size:.8rem;color:var(--muted)}
.consent-row input{width:auto;margin-top:.2rem}
.form-note{font-size:.78rem;color:var(--muted);margin-top:1rem}
.form-error{display:none;background:rgba(220,60,60,.12);
  border:1px solid rgba(220,60,60,.4);color:#f2b8b8;border-radius:10px;
  padding:.8rem 1rem;font-size:.85rem;margin-bottom:1rem}
.form-error.is-visible{display:block}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.25rem 0;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--font-mono);
  color:var(--yellow);font-size:1.2rem;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .faq-body{padding:0 0 1.3rem;max-width:58rem}
.faq-list .faq-body p{margin-bottom:.4em}

/* ---------- CTA final ---------- */
.cta-final{text-align:center;position:relative}
.cta-final .container{max-width:720px}
.cta-final h2{font-size:clamp(1.9rem,4vw,2.9rem)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:3.2rem 0 2rem;
  background:var(--surface-2)}
.footer-grid{display:grid;gap:2rem;margin-bottom:2.4rem}
@media(min-width:820px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.footer h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer a{color:var(--muted);font-size:.9rem}
.footer a:hover{color:var(--yellow)}
.footer-bottom{border-top:1px solid var(--line);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;
  font-size:.78rem;color:var(--muted)}

/* ---------- Banner de consentimento (LGPD) ---------- */
.consent-banner{
  position:fixed;inset:auto 0 0;z-index:150;background:var(--surface);
  border-top:1px solid var(--line);padding:1.1rem 0;
  transform:translateY(110%);transition:transform .35s ease;
  box-shadow:0 -18px 50px rgba(0,0,0,.5);
}
.consent-banner.is-visible{transform:translateY(0)}
.consent-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between}
.consent-inner p{margin:0;font-size:.83rem;max-width:46rem}
.consent-actions{display:flex;gap:.6rem}
.consent-actions .btn{padding:.6rem 1.2rem;font-size:.82rem}

/* ---------- Chat de conversão ---------- */
.chat-fab{
  position:fixed;right:20px;bottom:20px;z-index:140;
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--yellow);color:var(--yellow-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(242,194,0,.35);
  transition:transform .2s ease;
}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab svg{width:26px;height:26px}
.chat-panel{
  position:fixed;right:20px;bottom:92px;z-index:145;width:min(360px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);
  /* visibility:hidden tira o painel fechado do fluxo de tabulação e da
     árvore de acessibilidade. Só opacity:0 deixava o botão de fechar
     focável e invisível — quem navega por teclado caía num controle
     que não existe na tela. Mesmo tratamento já dado ao menu mobile.
     A visibility troca sem transição na abertura e só depois da
     animação no fechamento, para a saída não sumir de uma vez. */
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.chat-panel.is-open{opacity:1;transform:none;pointer-events:auto;
  visibility:visible;transition:opacity .22s ease,transform .22s ease}
.chat-head{background:var(--yellow);color:var(--yellow-ink);
  padding:.95rem 1.1rem;display:flex;justify-content:space-between;
  align-items:center}
.chat-head strong{font-family:var(--font-display);font-size:.95rem}
.chat-head small{display:block;font-size:.72rem;opacity:.75}
.chat-close{background:none;border:0;cursor:pointer;color:inherit;
  font-size:1.2rem;line-height:1;padding:.2rem}
.chat-body{padding:1.1rem;display:grid;gap:.6rem;max-height:380px;overflow:auto}
.chat-msg{background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px 12px 12px 4px;padding:.75rem .95rem;font-size:.86rem;
  color:#d6d6da;max-width:92%}
.chat-opt{
  text-align:left;background:transparent;border:1px solid var(--line);
  border-radius:10px;padding:.7rem .95rem;color:var(--text);cursor:pointer;
  font:inherit;font-size:.86rem;transition:border-color .15s,background .15s;
}
.chat-opt:hover{border-color:var(--yellow);background:var(--yellow-dim)}
.chat-input-row{display:flex;gap:.5rem}
.chat-input-row input{flex:1}
.chat-panel .btn{font-size:.85rem;padding:.75rem 1.1rem}

/* ---------- Reveal on scroll ----------
   ARQUITETURA (MOTION v3): o estado base é VISÍVEL E PARADO. Esconder
   para revelar depois só acontece sob duas condições: existe JS para
   revelar (html.rr-motion) E o usuário aceita movimento. Se qualquer
   uma faltar, o conteúdo simplesmente está lá — nunca invisível.
   A polaridade antiga (escondido por padrão, JS revela) fazia o site
   sumir quando o JS não rodava. */
@media(prefers-reduced-motion:no-preference){
  .rr-motion .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .rr-motion .reveal.is-in{opacity:1;transform:none}
  .rr-motion .d1{transition-delay:.08s}
  .rr-motion .d2{transition-delay:.16s}
  .rr-motion .d3{transition-delay:.24s}
}

/* ============================================================
   MOTION v2 — Sistema de movimento
   Assinatura: "estrada viva" (faixa em loop) + sublinhado que
   se desenha. Só transform/opacity (60fps), easing expo-out.
   ============================================================ */

/* Barra de progresso de leitura — dirigida por scroll, sem JS.
   Fica oculta por padrão e só aparece onde a scroll timeline existe:
   sem suporte ela ficaria travada em zero, e uma barra que nunca
   enche é pior do que barra nenhuma.
   ATENÇÃO AO CANAL: o estado base usa `scale` (propriedade individual),
   não `transform:scaleX()`. Os dois COMPÕEM — se a base ficasse em
   transform:scaleX(0), o keyframe em `scale` seria multiplicado por
   zero e a barra ficaria invisível justamente nos navegadores modernos
   que suportam a timeline. */
.scroll-progress{display:none;position:fixed;top:0;left:0;right:0;height:3px;
  z-index:120;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:var(--yellow);
  transform-origin:left;scale:0 1}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .rr-motion .scroll-progress{display:block}
    .rr-motion .scroll-progress span{
      animation:rr-progress linear both;
      animation-timeline:scroll(root block)}
  }
}
@keyframes rr-progress{from{scale:0 1}to{scale:1 1}}

/* ESTRADA VIVA — a assinatura da marca.
   Antes rodava em loop constante, indiferente ao usuário: papel de
   parede. Agora o loop de tempo continua (a estrada nunca para), mas
   ganha um avanço dirigido pelo scroll — a estrada corre mais quando
   você anda. O loop desacelerou de 1.6s para 3.2s para o componente
   de scroll ter espaço para ler.
   CANAIS: `transform` = loop de tempo, `translate` = avanço por scroll.
   Compõem sem disputa. O overhang de 160px à direita cobre os dois
   deslocamentos somados, para a faixa nunca revelar a emenda. */
/* overflow:hidden é obrigatório aqui: o ::before tem overhang de 160px
   à direita e, sem ele, essa largura entra no overflow do documento e
   cria barra de rolagem horizontal. (clip-path recorta o desenho mas
   NÃO tira o elemento do layout — testado, vazou.)
   A consequência é que .stripe vira scroll container, e por isso o
   avanço por scroll abaixo usa scroll(root block), que nomeia o
   scroller do documento explicitamente, em vez de view(), que subiria
   a árvore e pararia aqui — numa timeline que nunca rola. */
.stripe{position:relative;overflow:hidden;background-image:none}
.stripe::before{content:"";position:absolute;top:0;bottom:0;left:0;right:-160px;
  background-image:linear-gradient(-45deg,
  var(--yellow) 25%,transparent 25%,transparent 50%,
  var(--yellow) 50%,var(--yellow) 75%,transparent 75%);
  background-size:40px 40px;animation:stripe-move 3.2s linear infinite;
  will-change:transform,translate}
@keyframes stripe-move{to{transform:translateX(-40px)}}

@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .rr-motion .stripe::before{
      animation:stripe-move 3.2s linear infinite,
                rr-stripe-scroll linear both;
      animation-timeline:auto,scroll(root block)}
  }
}
@keyframes rr-stripe-scroll{from{translate:0}to{translate:-120px}}

/* Entrada orquestrada do hero — 100% CSS (MOTION v3, bloco 5).
   Antes dependia de body.is-loaded, aplicado por um duplo rAF no
   main.js: a entrada só começava depois do JS rodar. Agora são
   animações com delay, que partem no primeiro paint.
   `both` preserva o estado inicial antes do delay e o final depois. */
@media(prefers-reduced-motion:no-preference){
  .rr-motion .hero-anim{animation:rr-rise .9s var(--ease-out) both}
  .rr-motion .hd1{animation-delay:.05s}
  .rr-motion .hd2{animation-delay:.5s}
  .rr-motion .hd3{animation-delay:.62s}
  .rr-motion .hd4{animation-delay:.74s}
}
@keyframes rr-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* Título revelado linha a linha por máscara.
   display:inline-block é LAYOUT, não movimento — fica na regra base,
   senão o span vira inline quando não há JS e o recorte muda. */
.lines .ln{display:block;overflow:hidden;
  padding-bottom:.08em;margin-bottom:-.08em}
.lines .ln>span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .lines .ln>span{animation:rr-line 1s var(--ease-out) both}
  .rr-motion .lines .ln:nth-child(1)>span{animation-delay:.12s}
  .rr-motion .lines .ln:nth-child(2)>span{animation-delay:.2s}
  .rr-motion .lines .ln:nth-child(3)>span{animation-delay:.28s}
}
@keyframes rr-line{from{translate:0 112%}to{translate:0 0}}

/* Sublinhado pintado — ASSINATURA DA MARCA.
   Estado base = PINTADO. Só se esconde para depois se desenhar quando
   as duas condições valem: existe JS para revelar (html.rr-motion, posto
   pelo snippet inline de index.html) E o usuário aceita movimento.
   Sem esse gate, obrigado/404/política/blog — que carregam style.css mas
   NÃO main.js — ficariam com a assinatura invisível para sempre.
   ESCOPO (corrige regressão do bloco 3): o estado escondido vale só
   onde existe gatilho para revelar — dentro do hero (animação por
   delay) ou dentro de um .reveal (disparo por scroll). Esconder de
   forma global deixava a assinatura invisível para sempre nas seções
   que deixaram de ter .reveal.
   CANAL: o skew mora em `transform` e o desenho em `scale`, que são
   canais independentes e compõem — assim o keyframe não precisa
   repetir o skew nem corre risco de sobrescrevê-lo. */
.mark::after{transform:skewX(-8deg);transform-origin:left}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .hero .mark::after{animation:rr-draw .65s var(--ease-out) .85s both}
  .rr-motion .reveal .mark::after{scale:0 1;
    transition:scale .65s var(--ease-out)}
  .rr-motion .reveal.is-in .mark::after{scale:1 1}
}
@keyframes rr-draw{from{scale:0 1}to{scale:1 1}}

/* Hero media: entrada com escala + resposta ao ponteiro.
   A foto é a candidata a LCP, então NUNCA entra em opacity:0 — o
   container é opaco desde o primeiro paint e a entrada acontece só
   por escala. Canais separados de propósito: scale/translate = entrada,
   `transform` fica livre para o tilt ao ponteiro (js/main.js), que
   escreve em style.transform e comporia errado se disputassem o mesmo
   canal. */
.hero-media{transition:transform .25s ease-out}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .hero-media{animation:rr-media 1.1s var(--ease-out) .3s both}
  .rr-motion .hero-media::after{animation:rr-plate .5s ease 1.15s both}
}
@keyframes rr-media{from{scale:1.04;translate:0 12px}to{scale:1;translate:0 0}}
@keyframes rr-plate{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* Parallax do hero dirigido por scroll, sem listener.
   Canal `translate` na IMAGEM; o container usa scale/translate para a
   entrada e `transform` para o tilt — três elementos, canais que não
   se cruzam. Só desktop, como no comportamento anterior. */
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference) and (min-width:761px){
    .rr-motion .hero-media img{
      animation:rr-parallax linear both;
      animation-timeline:scroll(root block);
      animation-range:0 80vh}
  }
}
@keyframes rr-parallax{from{translate:0 0}to{translate:0 70px}}

/* LEAN ELÁSTICO — a máquina se inclina na velocidade, a tipografia
   permanece firme. Só a foto do hero recebe o gesto; o texto fica reto,
   que é o contraste que faz a inclinação parecer velocidade e não
   página torta.
   Velocidade de scroll não existe em scroll timeline (elas são de
   POSIÇÃO), então este é o único gesto do MOTION v3 que precisa de JS.
   O valor é escrito direto no elemento (inherits:false), para invalidar
   estilo só ali em vez de na árvore inteira.
   CANAL: `rotate`. O container já usa scale/translate (entrada) e
   `transform` (tilt) — quatro canais independentes, nenhum se cruza. */
@property --rr-lean{syntax:"<angle>";inherits:false;initial-value:0deg}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .hero-media{rotate:var(--rr-lean,0deg)}
}

/* REVELAÇÃO PALAVRA A PALAVRA nos títulos das seções que ainda se
   movem. O split é feito em JS, que só então marca .rr-split — se o
   script não rodar, não existe classe, não existe estado escondido e
   o título é texto normal. O estado escondido também está preso a
   .reveal, o mesmo escopo das outras assinaturas. */
.rr-split .rr-word{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .reveal .rr-split .rr-word{opacity:0;translate:0 .45em;
    transition:opacity .5s var(--ease-out),translate .5s var(--ease-out);
    transition-delay:calc(var(--i,0) * 55ms)}
  .rr-motion .reveal.is-in .rr-split .rr-word{opacity:1;translate:0 0}
}

/* Traço do eyebrow — ASSINATURA DA MARCA.
   Mesmo gate, mesmo escopo e mesmo canal do .mark::after acima. */
.eyebrow::before{transform-origin:left}
@media(prefers-reduced-motion:no-preference){
  .rr-motion .hero .eyebrow::before{animation:rr-draw .6s var(--ease-out) .15s both}
  .rr-motion .reveal .eyebrow::before{scale:0 1;
    transition:scale .6s var(--ease-out) .15s}
  .rr-motion .reveal.is-in .eyebrow::before{scale:1 1}
}

/* Revelação por recorte (imagens sobem como uma cortina).
   LONGHANDS de propósito: o shorthand `transition` zera o
   transition-delay, e era ele que apagava o escalonamento .d1/.d2 das
   três fotos da galeria — as três revelavam juntas.
   CANAL: a entrada da imagem usa `scale`, não `transform`. Com
   `transform:none` aqui, a regra vencia .gallery figure:hover img por
   especificidade e matava o zoom ao pairar. Em canais separados os
   dois convivem: scale (entrada) compõe com transform (hover). */
@media(prefers-reduced-motion:no-preference){
  .rr-motion .reveal-clip{clip-path:inset(100% 0 0 0);
    transition-property:clip-path;transition-duration:1.05s;
    transition-timing-function:var(--ease-out)}
  .rr-motion .reveal-clip.is-in{clip-path:inset(0 0 0 0)}
  .rr-motion .reveal-clip img{scale:1.08;
    transition-property:scale;transition-duration:1.2s;
    transition-timing-function:var(--ease-out)}
  .rr-motion .reveal-clip.is-in img{scale:1;transition-duration:.5s;
    transition-timing-function:ease}
}

/* A ficha técnica entra como bloco único.
   A cascata de 6 tempos que existia aqui foi removida: ela dava
   destaque de movimento, um a um, a seis travessões (as specs ainda
   estão marcadas como `tbc`). Chamava atenção justamente para o dado
   que a marca ainda não informa. Quando os valores reais chegarem,
   reavaliar se a cascata volta. */

/* Botão amarelo: brilho varrendo ao pairar */
.btn-yellow{position:relative;overflow:hidden}
.btn-yellow::after{content:"";position:absolute;top:0;bottom:0;left:0;
  width:60%;background:linear-gradient(105deg,transparent,
  rgba(255,255,255,.55),transparent);
  transform:translateX(-160%) skewX(-12deg);transition:transform .7s ease}
.btn-yellow:hover::after{transform:translateX(280%) skewX(-12deg)}

/* Chat: pulso de atenção + mensagens entrando */
.chat-fab::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(242,194,0,.5);
  animation:fab-pulse 2.8s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform,opacity}
@keyframes fab-pulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}}
.chat-msg,.chat-opt,.chat-input-row{
  animation:chat-in .32s cubic-bezier(.16,1,.3,1) both}
@keyframes chat-in{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}

/* FAQ: resposta desliza ao abrir */
details[open] .faq-body{animation:faq-in .4s cubic-bezier(.16,1,.3,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}}

/* Navegação: seção ativa (scrollspy) */
.nav a.is-active{color:var(--yellow)}

/* Sublinhado pintado em telas estreitas: highlight quebrável */
@media(max-width:480px){
  .mark{white-space:normal;color:var(--yellow-ink);
    background-image:linear-gradient(rgba(242,194,0,.9),rgba(242,194,0,.9));
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .mark::after{display:none}
}

/* Com a inversão do MOTION v3, este bloco encolheu de 9 regras para 3:
   todo estado escondido agora vive dentro de
   @media(prefers-reduced-motion:no-preference), então quem pede menos
   movimento simplesmente nunca recebe o estado escondido — não é mais
   preciso desfazer um a um. Sobra o que é de fato específico daqui. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* .scroll-progress já nasce display:none e só aparece dentro de
     @media(prefers-reduced-motion:no-preference) — não precisa de
     override aqui. */
}

/* ============================================================
   BLOG (Fase 2) — reaproveita o design system; nada de paleta ou
   tipografia nova. Sem estados escondidos: as páginas do blog não
   recebem html.rr-motion, então tudo nasce visível e parado.
   ============================================================ */

/* ---- índice e seção do blog na home ---- */
.blog-hero{padding-bottom:0}
.blog-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch}
.blog-hero .lead{max-width:46rem}
.blog-cat{margin-top:clamp(2.4rem,5vw,3.6rem)}
.blog-cat h2{font-size:1.35rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line)}
.blog-grid{display:grid;gap:1.1rem;margin-top:1.4rem}
@media(min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.post-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem;display:flex;
  flex-direction:column;gap:.45rem;
  transition:border-color .2s,translate .2s var(--spring)}
.post-card:hover{border-color:rgba(242,194,0,.5);translate:0 -3px}
.post-card:focus-within{border-color:var(--yellow)}
.post-card h3{margin:0;font-size:1.05rem;line-height:1.3}
.post-card h3 a{display:block}
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card{position:relative}
.post-card p{font-size:.88rem;margin:0}
.post-card-cat,.post-card-meta{font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0}
.post-card-cat{color:var(--yellow)}
.post-card-meta{margin-top:auto;padding-top:.6rem}

/* ---- artigo ---- */
.post-body{max-width:44rem}
.post-crumbs{font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.4rem}
.post-crumbs a:hover{color:var(--yellow)}
.post-crumbs span[aria-hidden]{margin:0 .35rem}
.post h1{font-size:clamp(1.85rem,4.2vw,2.7rem)}
.post-meta{font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.prose{margin-top:1.8rem}
.prose h2{font-size:1.35rem;margin-top:2.2rem}
.prose p{font-size:1rem;line-height:1.75}
.prose ul,.prose ol{color:var(--muted);padding-left:1.15rem;
  display:grid;gap:.5rem;margin:0 0 1.2rem}
.prose li{line-height:1.7}
.prose li::marker{color:var(--yellow)}
.prose strong{color:var(--text)}
.prose a{color:var(--yellow);text-decoration:underline;
  text-underline-offset:3px}

.post-formula{font-family:var(--font-mono);font-size:.85rem;
  background:var(--surface-2);border-left:3px solid var(--yellow);
  padding:1rem 1.2rem;border-radius:0 10px 10px 0;line-height:1.9}
.post-nota{font-size:.85rem;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem}

.post-tabela{overflow-x:auto;margin:0 0 1.4rem}
.post-tabela table{width:100%;border-collapse:collapse;font-size:.86rem;
  min-width:32rem}
.post-tabela th,.post-tabela td{border:1px solid var(--line);
  padding:.6rem .8rem;text-align:left;color:var(--muted)}
.post-tabela th{color:var(--text);font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.post-tabela td:first-child{color:var(--text);font-weight:600}

/* ---- CTAs dentro do artigo ---- */
.post-cta{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--yellow);border-radius:0 var(--radius) var(--radius) 0;
  padding:clamp(1.3rem,3vw,1.8rem);margin:2.6rem 0}
.post-cta p{margin-bottom:.9rem}
.post-cta--end{border-left-width:1px;border-radius:var(--radius);
  text-align:center}
.post-cta--end .eyebrow{justify-content:center}
.post-cta--end h2{font-size:1.5rem}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.post-cta--end .post-cta-actions{justify-content:center}

.post-related{margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.post-related h2{font-size:1.05rem;font-family:var(--font-mono);
  font-weight:400;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.post-related ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.post-related a{font-family:var(--font-display);font-weight:600;
  font-size:1rem}
.post-related a:hover{color:var(--yellow)}

/* ---------- Imagens editoriais ----------
   Cards e capas do blog usam fotografia real (Unsplash/CC0 + fotos da
   própria X8), 800×440 em WebP ~30 KB, sempre lazy e com width/height
   reais para não gerar CLS (regra 6). A arte de seção da home segue
   em SVG autoral (secao-*.svg): nítida em qualquer DPR e quase grátis. */
.post-card-art,
.post-cover,
.secao-art img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  background:var(--surface-2);
}
.post-card-art{
  aspect-ratio:800/440;object-fit:cover;margin-bottom:.9rem;
  border:1px solid var(--line);
}
.post-cover{
  margin:1.4rem 0 2rem;border:1px solid var(--line);
}
.secao-art{margin:0;}
.secao-art img{border:1px solid var(--line)}

/* A arte das regiões acompanha a largura do grid de especialistas */
.secao-art--wide{margin:0 0 1.6rem}
@media(min-width:820px){
  .secao-art--wide img{max-height:260px;object-fit:cover;object-position:center}
}

/* No card, a arte reage junto com o restante ao pairar */
.post-card{overflow:hidden}
.post-card-art{transition:scale .5s var(--ease-out)}
@media(hover:hover){
  .post-card:hover .post-card-art{scale:1.03}
}