/* ═══════════════════════════════════════════════════════════
   DRA. MARIANE CUNHA — LP Auxílio-Acidente
   Régua tipográfica do site Portela Cunha: monumentos 800,
   Cormorant itálica dourada como contraponto, grifos de faixa,
   escadas editoriais, ouro raro, ar de sobra.
   ═══════════════════════════════════════════════════════════ */
:root {
  --marinho: #111c2d;
  --azul: #223f5f;
  --azul-suave: #46536b;
  --papel: #f6f1e7;
  --papel-2: #efe7d7;
  --creme: #fbf7ee;
  --ouro: #bb9b61;
  --areia: #dcbe87;
  --ouro-fundo: #96763f;
  --fio: rgba(187, 155, 97, 0.34);
  --sans: "Montserrat", sans-serif;
  --serif: "Cormorant Garamond", serif;
  --borda: clamp(1.4rem, 5vw, 5.5rem);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
/* pins + trilhos transformados confundem o scroll anchoring do Chrome */
html, body { overflow-anchor: none; }
body {
  background: var(--papel);
  color: var(--marinho);
  font-family: var(--sans);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
em { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* ── a voz das seções: kicker dourado espaçado ── */
.secao-etq {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--ouro-fundo);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.secao-etq::before { content: ""; width: 34px; height: 1px; background: var(--ouro); }
.secao-etq.claro { color: var(--areia); }
.secao-etq.claro::before { background: var(--areia); }
html.js .surge { opacity: 0; }

/* ── grifo de faixa dourada (a assinatura do site-mãe) ── */
.grifo-faixa { position: relative; display: inline-block; white-space: nowrap; }
.grifo-faixa i {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--marinho);
  padding-inline: 0.12em;
}
.grifo-faixa::before {
  content: "";
  position: absolute;
  inset: 8% -2% 0% -2%;
  background: linear-gradient(100deg, var(--ouro), var(--areia));
  transform: scaleX(var(--g, 0)) skewY(-0.6deg);
  transform-origin: left;
}

/* cursor de proximidade */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--ouro);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.3s;
  mix-blend-mode: multiply;
  opacity: 0;
}
.cursor.viva { opacity: 1; }
.cursor.perto { width: 56px; height: 56px; background: rgba(187, 155, 97, 0.12); }
@media (hover: none) { .cursor { display: none; } }

/* ░░ abertura ░░ */
.abre {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--marinho);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
}
.abre-simbolo { width: clamp(60px, 8vw, 92px); opacity: 0.96; }
.abre-porta { position: relative; width: min(240px, 44vw); }
.abre-linha { display: block; width: 100%; height: 1px; background: rgba(220, 190, 135, 0.25); position: relative; overflow: hidden; }
.abre-linha::after {
  content: ""; position: absolute; inset: 0; background: var(--areia);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
/* a caneta puxa a linha de abertura — o site começa assinado */
.abre-caneta {
  position: absolute; left: 0; bottom: 0; height: clamp(74px, 11vh, 104px); width: auto;
  transform: translateX(-1%) rotate(10deg); transform-origin: bottom left;
  pointer-events: none;
}

/* ░░ nav ░░ */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem var(--borda);
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.topo.densa {
  background: rgba(246, 241, 231, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--fio);
  padding-block: 0.8rem;
}
.topo-marca {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.32em;
  color: var(--marinho); text-decoration: none; display: flex; align-items: center; gap: 0.55rem;
  white-space: nowrap;
}
.topo-marca i { color: var(--ouro); font-style: normal; font-size: 0.5rem; }
.marca-sub { display: inline-flex; align-items: center; gap: 0.55rem; }
.topo-cta {
  margin-left: auto; margin-right: 1.1rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--marinho); text-decoration: none;
  padding: 0.65rem 1.25rem; border: 1px solid var(--fio); border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
.topo-cta:hover { background: var(--marinho); color: var(--creme); }
.topo-menu {
  width: 44px; height: 44px; border: 1px solid var(--fio); border-radius: 50%;
  background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.topo-menu i { width: 16px; height: 1.5px; background: var(--marinho); transition: transform 0.35s ease; }
body.menu-on .topo-menu i:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-on .topo-menu i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ░░ menu staggered ░░ */
.menu {
  position: fixed; inset: 0; z-index: 110;
  background: var(--marinho); color: var(--creme);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: circle(0% at calc(100% - 3.5rem) 3.5rem);
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
body.menu-on .menu { clip-path: circle(150% at calc(100% - 3.5rem) 3.5rem); pointer-events: auto; }
.menu-lista { list-style: none; text-align: center; }
.menu-link {
  display: inline-flex; align-items: baseline; gap: 1.2rem; text-decoration: none; color: var(--creme);
  font-weight: 800; font-size: clamp(1.8rem, 5.4vw, 3.6rem); letter-spacing: -0.015em; text-transform: uppercase;
  padding: 0.35rem 0; opacity: 0; transform: translateY(26px);
}
.menu-link i { font-style: italic; font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--areia); text-transform: none; }
.menu-link span { transition: color 0.3s; }
.menu-link:hover span { color: var(--areia); }
body.menu-on .menu-link { animation: entraItem 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
body.menu-on .menu-lista li:nth-child(1) .menu-link { animation-delay: 0.12s; }
body.menu-on .menu-lista li:nth-child(2) .menu-link { animation-delay: 0.19s; }
body.menu-on .menu-lista li:nth-child(3) .menu-link { animation-delay: 0.26s; }
body.menu-on .menu-lista li:nth-child(4) .menu-link { animation-delay: 0.33s; }
body.menu-on .menu-lista li:nth-child(5) .menu-link { animation-delay: 0.40s; }
@keyframes entraItem { to { opacity: 1; transform: translateY(0); } }
.menu-pe { position: absolute; bottom: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.32em; color: rgba(243, 238, 227, 0.6); text-transform: uppercase; }
.menu-pe a { color: var(--areia); text-decoration: none; }

/* ░░ hero — escada monumental ░░ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding: 8rem var(--borda) 4.5rem;
  overflow: hidden;
}
.hero-foto {
  position: relative; height: 80svh; overflow: hidden; order: 2;
  box-shadow: 0 50px 90px rgba(17, 28, 45, 0.26);
}
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(220, 190, 135, 0.5);
  transform: translate(14px, 14px);
  pointer-events: none;
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; will-change: transform; }
.hero-veu { position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(17, 28, 45, 0.3)); }
.hero-corpo { order: 1; max-width: 44rem; }
.hero-etq {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.42em; color: var(--ouro-fundo); text-transform: uppercase;
  margin-bottom: 2.2rem;
}
.hero-etq::before { content: ""; width: 34px; height: 1px; background: var(--ouro); }
.hero-h { font-weight: 800; letter-spacing: -0.018em; }
.hero-h .hl { display: block; line-height: 0.99; }
.hero-h .h-caps { font-size: clamp(2.5rem, 5.8vw, 5.4rem); text-transform: uppercase; }
.hero-h .h-serif { margin: 0.06em 0; }
.hero-h .h-serif em {
  font-size: clamp(2.3rem, 5.2vw, 4.9rem);
  color: var(--ouro-fundo);
  letter-spacing: 0;
  font-weight: 500;
}
.hero-h .h-fecho { margin-top: 0.28em; font-size: clamp(1.4rem, 2.7vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.01em; }
.hero-h .h-fecho .grifo-faixa i { font-size: 1.32em; }
.hero-sub { margin-top: 2rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 300; color: var(--azul-suave); max-width: 33rem; line-height: 1.75; }
.hero-sub b { font-weight: 600; color: var(--marinho); }
.hero-acao { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.hero-ver { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--azul); text-decoration: none; border-bottom: 1px solid var(--fio); padding-bottom: 4px; }
.hero-rolar { position: absolute; left: var(--borda); bottom: 1.8rem; font-size: 0.54rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--ouro-fundo); }

/* efeito FOCO ANIMADO — dentro da escada */
.foco { display: inline-block; position: relative; min-width: 5.2em; height: 1.02em; vertical-align: baseline; }
.foco-p {
  position: absolute; left: 0; top: 0; font-weight: 800; color: var(--ouro-fundo);
  opacity: 0; filter: blur(7px); transition: opacity 0.5s ease, filter 0.5s ease;
}
.foco-p.on { opacity: 1; filter: blur(0); }
.foco-mold { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.4s, width 0.45s cubic-bezier(0.22,1,0.36,1), height 0.45s, left 0.45s, top 0.45s; }
.foco-mold.on { opacity: 1; }
.foco-mold i { position: absolute; width: 13px; height: 13px; border: 2.5px solid var(--ouro); }
.foco-mold i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.foco-mold i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.foco-mold i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.foco-mold i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* botão blob gooey */
.blob {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.15rem 2.4rem; border-radius: 999px; overflow: hidden;
  background: var(--marinho); text-decoration: none; isolation: isolate;
  box-shadow: 0 16px 40px rgba(17, 28, 45, 0.3);
}
.blob-t { position: relative; z-index: 2; color: var(--creme); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; transition: color 0.3s; }
.blob-bolhas { position: absolute; inset: 0; z-index: 1; filter: url(#goo); }
.blob-bolhas i {
  position: absolute; bottom: -30%; width: 42%; height: 140%; border-radius: 50%;
  background: linear-gradient(120deg, var(--ouro), var(--areia)); transform: translateY(110%) scale(1.2);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.blob-bolhas i:nth-child(1) { left: -6%; }
.blob-bolhas i:nth-child(2) { left: 22%; transition-delay: 0.04s; }
.blob-bolhas i:nth-child(3) { left: 50%; transition-delay: 0.08s; }
.blob-bolhas i:nth-child(4) { left: 74%; transition-delay: 0.12s; }
.blob:hover .blob-bolhas i { transform: translateY(0) scale(1.2); }
.blob:hover .blob-t { color: var(--marinho); }
/* estado "assinado" — a caneta tocou o botão e ele ficou de ouro */
.blob.dourado .blob-bolhas i { transform: translateY(0) scale(1.2); }
.blob.dourado .blob-t { color: var(--marinho); }
.blob-min { padding: 1rem 1.9rem; }
.blob-min .blob-t { font-size: 0.68rem; }
.blob-grande { padding: 1.35rem 2.9rem; }
.blob-grande .blob-t { font-size: 0.85rem; }

/* ░░ auxílio ░░ */
.auxilio { position: relative; padding: clamp(7rem, 16vh, 13rem) var(--borda); overflow: hidden; }
.aux-grande {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-weight: 800; font-size: clamp(4rem, 15vw, 15rem); letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(187, 155, 97, 0.3); z-index: 0; pointer-events: none;
}
.aux-corpo { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto; text-align: center; }
.aux-h { font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.015em; }
.aux-h em { font-size: 1.18em; color: var(--ouro-fundo); }
.aux-p { margin-top: 2rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 300; color: var(--azul-suave); line-height: 1.8; }
.aux-p b { font-weight: 600; color: var(--marinho); }
.aux-selos { margin-top: 2.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.selo { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--azul); padding: 0.7rem 1.3rem; border: 1px solid var(--fio); border-radius: 999px; }
.selo i { color: var(--ouro); font-style: normal; margin-right: 0.5rem; }

/* ░░ parallax full ░░ */
.parallax { position: relative; min-height: 94svh; display: flex; align-items: center; overflow: hidden; }
.parallax .parallax-bg { position: absolute; inset: -12% 0; background-size: cover; background-position: center; will-change: transform; z-index: 0; }
.parallax-veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(17, 28, 45, 0.85), rgba(17, 28, 45, 0.5) 60%, rgba(17, 28, 45, 0.12)); }
.parallax-veu.forte { background: linear-gradient(180deg, rgba(17, 28, 45, 0.66), rgba(17, 28, 45, 0.8)); }
.lei-corpo, .contato-corpo { position: relative; z-index: 2; padding: 0 var(--borda); color: var(--creme); max-width: 46rem; }
.lei-ano {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(4.5rem, 11vw, 9rem); color: var(--areia); line-height: 0.9;
}
.lei-h { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.015em; margin-top: 1rem; text-transform: uppercase; }
.lei-h em { font-size: 1.12em; color: var(--areia); text-transform: none; letter-spacing: 0; }
.lei-p { margin-top: 1.8rem; color: rgba(243, 238, 227, 0.85); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.8; max-width: 36rem; }

/* ░░ perguntas ░░ */
.perguntas { padding: clamp(7rem, 16vh, 13rem) var(--borda); max-width: 1180px; margin: 0 auto; }
.perg-cab { text-align: center; margin-bottom: 4.5rem; }
.perg-h { font-weight: 800; font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; }
.perg-h em { font-size: 1.12em; color: var(--ouro-fundo); }
.perg-lista { list-style: none; border-top: 1px solid var(--fio); }
.perg-item {
  display: flex; align-items: baseline; gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: 2.6rem clamp(0.5rem, 2vw, 2rem);
  border-bottom: 1px solid var(--fio);
  transition: background 0.35s, padding-left 0.35s;
}
.perg-item:hover { background: rgba(251, 247, 238, 0.9); padding-left: clamp(1rem, 3vw, 3rem); }
.perg-n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--ouro); line-height: 1; min-width: 1.6em; }
.perg-item p { font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 300; color: var(--azul-suave); line-height: 1.5; }
.perg-item b { font-weight: 700; color: var(--marinho); }
.perg-fecho { margin-top: 3.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.perg-fecho p { max-width: 46rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 300; color: var(--azul-suave); line-height: 1.75; }
.perg-fecho em { font-size: 1.15em; color: var(--ouro-fundo); }

/* ░░ antigo ░░ */
.antigo { padding: clamp(6rem, 14vh, 11rem) var(--borda); text-align: center; background: var(--papel-2); }
.antigo-h { font-weight: 800; font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; }
.antigo-h em { font-size: 1.1em; color: var(--ouro-fundo); text-transform: none; letter-spacing: 0; }
.antigo-p { max-width: 46rem; margin: 2rem auto 0; color: var(--azul-suave); font-weight: 300; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.8; }

/* ░░ benefícios — card swap ░░ */
.beneficios { padding: clamp(7rem, 16vh, 13rem) var(--borda); display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.ben-h { font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.015em; }
.ben-h em { font-size: 1.14em; color: var(--ouro-fundo); }
.ben-p { margin-top: 1.6rem; color: var(--azul-suave); font-weight: 300; max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.8; }
.ben-link { display: inline-block; margin-top: 2rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--azul); text-decoration: none; border-bottom: 1px solid var(--fio); padding-bottom: 4px; }
.ben-baralho { position: relative; height: 400px; perspective: 1400px; }
.card {
  position: absolute; inset: 0; margin: auto; width: min(360px, 82%); height: 235px;
  background: var(--marinho); color: var(--creme); border-radius: 4px; padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 34px 70px rgba(17, 28, 45, 0.32); transform-style: preserve-3d;
  border: 1px solid rgba(220, 190, 135, 0.2);
}
.card::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(220, 190, 135, 0.16); pointer-events: none; }
.card-i { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 2rem; color: var(--areia); line-height: 1.05; }
.card p { font-size: 0.82rem; font-weight: 300; color: rgba(243, 238, 227, 0.75); letter-spacing: 0.04em; }

/* ░░ missão ░░ */
.missao { padding: clamp(8rem, 18vh, 15rem) var(--borda); text-align: center; background: var(--marinho); color: var(--creme); }
.missao-frase { font-weight: 800; font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.06; letter-spacing: -0.015em; }
.mf { display: block; }
.mf-ouro { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.16em; color: var(--areia); text-transform: none; letter-spacing: 0; }
.missao-ass { display: block; margin-top: 2.6rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(220, 190, 135, 0.7); }

/* ░░ sobre — retrato fluido ░░ */
.sobre { padding: clamp(7rem, 16vh, 13rem) var(--borda); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.sobre-retrato { position: relative; height: 80svh; overflow: hidden; box-shadow: 0 50px 90px rgba(17, 28, 45, 0.26); }
.sobre-retrato::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(220, 190, 135, 0.5); transform: translate(-14px, 14px); pointer-events: none; }
.sobre-retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.retrato-fluido { mix-blend-mode: soft-light; opacity: 0.9; will-change: transform; }
.retrato-luz { position: absolute; inset: 0; background: radial-gradient(180px 180px at 50% 50%, rgba(220, 190, 135, 0.4), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.3s; }
.sobre-h { font-weight: 800; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.018em; text-transform: uppercase; }
.sobre-h em { font-size: 1.14em; color: var(--ouro-fundo); text-transform: none; letter-spacing: 0; }
.sobre-bio { margin-top: 1.8rem; color: var(--azul-suave); font-weight: 300; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.8; }
.sobre-bio b { font-weight: 600; color: var(--marinho); }
.sobre-fatos { list-style: none; margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
.sobre-fatos li { padding-left: 1.6rem; position: relative; color: var(--azul-suave); font-weight: 300; font-size: 1rem; }
.sobre-fatos li::before { content: "◆"; position: absolute; left: 0; color: var(--ouro); font-size: 0.62rem; top: 0.3rem; }
.sobre-fatos b { font-weight: 600; color: var(--marinho); }

/* ░░ contato ░░ */
.contato { min-height: 96svh; }
.contato-corpo { text-align: center; max-width: 50rem; margin: 0 auto; }
.contato-h { font-weight: 800; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; }
.contato-h em { font-size: 1.1em; color: var(--areia); text-transform: none; letter-spacing: 0; }
.contato-p { margin-top: 1.8rem; color: rgba(243, 238, 227, 0.88); font-weight: 300; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.8; max-width: 40rem; margin-inline: auto; }
.contato .blob { margin-top: 2.8rem; }
.contato-micro { display: block; margin-top: 1.6rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(220, 190, 135, 0.8); }

/* ░░ rodapé ░░ */
.rodape { background: var(--marinho); color: var(--creme); padding: clamp(4rem, 9vh, 7rem) var(--borda); text-align: center; }
.rodape-logo { width: min(300px, 72vw); margin: 0 auto 2.4rem; opacity: 0.94; }
.rodape-social { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2.4rem; }
.soc-item {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--creme); text-decoration: none;
  padding: 0.65rem 1rem; border: 1px solid rgba(220, 190, 135, 0.24); border-radius: 999px;
  max-width: 0; padding-inline: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s, padding 0.4s, background 0.3s;
}
.soc-cabeca { max-width: none; opacity: 1; padding: 0.65rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.soc-cabeca span { color: var(--areia); }
.rodape-social:hover .soc-item { max-width: 240px; opacity: 1; padding-inline: 1.1rem; }
.soc-item:hover { background: rgba(220, 190, 135, 0.14); }
.rodape-nota { max-width: 48rem; margin: 0 auto; font-size: 0.7rem; font-weight: 300; color: rgba(243, 238, 227, 0.5); line-height: 1.8; }
.rodape-base { display: block; margin-top: 1.8rem; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243, 238, 227, 0.4); }

/* ░░ robô assistente ░░ */
.robo {
  position: fixed; right: 0; bottom: clamp(1rem, 3vh, 2rem); z-index: 140;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
  pointer-events: none;
}
.robo-corpo {
  position: relative; border: 0; background: none; cursor: pointer; pointer-events: auto;
  width: clamp(94px, 12vw, 120px); height: clamp(102px, 13vw, 130px);
  filter: drop-shadow(0 14px 30px rgba(17, 28, 45, 0.35));
}
.robo-rasgo {
  position: absolute; inset: -8% -2% -14% -16%;
  background: var(--marinho);
  clip-path: polygon(22% 0, 8% 9%, 16% 18%, 3% 28%, 12% 39%, 0 52%, 10% 63%, 2% 75%, 13% 86%, 6% 100%, 100% 100%, 100% 0);
  border-radius: 14px 0 0 0;
  box-shadow: inset 2px 2px 0 rgba(220, 190, 135, 0.45);
  transition: background 0.4s ease;
}
/* na parte azul do site, o rasgo vira papel claro pra contrastar */
body.tela-escura .robo-rasgo {
  background: var(--papel);
  box-shadow: inset 2px 2px 0 rgba(187, 155, 97, 0.6);
}
.robo-janela { position: relative; display: block; width: 100%; height: 100%; }
.robo-janela img { position: absolute; inset: 8% 6% 4% 12%; width: 82%; height: 88%; object-fit: contain; }
.robo-svg { position: absolute; inset: 8% 6% 4% 12%; width: 82%; height: 88%; display: none; }
.robo.sem-img .robo-svg { display: block; }
.robo.sem-img .robo-janela img { display: none; }
.robo-braco { transform-origin: 99px 88px; animation: acena 1.7s ease-in-out infinite; }
@keyframes acena { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-13deg); } }
.robo-balao {
  pointer-events: auto; max-width: min(74vw, 300px);
  margin-right: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--creme); color: var(--marinho);
  border: 1px solid rgba(187, 155, 97, 0.4);
  border-radius: 16px 16px 4px 16px;
  padding: 0.9rem 1rem;
  box-shadow: 0 18px 40px rgba(17, 28, 45, 0.25);
  opacity: 0; visibility: hidden; transform-origin: bottom right;
}
.robo-balao.viva { visibility: visible; }
.robo-balao p { font-size: 0.82rem; font-weight: 500; line-height: 1.5; }
.robo-cta {
  margin-top: 0.6rem; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--ouro), var(--areia)); color: var(--marinho);
  font-weight: 800; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.55rem 0.95rem; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .robo-braco { animation: none; }
  .robo-balao.viva { opacity: 1; transform: none; }
}
html:not(.js) .robo, html:not(.js) .quiz { display: none; }

/* ░░ questionário ░░ */
body.quiz-on { overflow: hidden; }
.quiz { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.quiz.aberto { display: flex; }
.quiz-veu { position: absolute; inset: 0; background: rgba(10, 16, 28, 0.74); backdrop-filter: blur(6px); }
.quiz-caixa {
  position: relative; width: min(94vw, 460px);
  background: var(--papel); border-radius: 18px;
  padding: 2rem 1.6rem 1.4rem;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(187, 155, 97, 0.35);
}
.quiz-fecha { position: absolute; top: 0.6rem; right: 0.9rem; border: 0; background: none; font-size: 1.6rem; color: var(--azul-suave); cursor: pointer; line-height: 1; }
.quiz-etq { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.32em; color: var(--ouro-fundo); text-transform: uppercase; margin-bottom: 1rem; }
.quiz-passos { display: flex; gap: 6px; margin-bottom: 1.4rem; }
.quiz-passos i { height: 3px; flex: 1; background: rgba(187, 155, 97, 0.25); border-radius: 2px; transition: background 0.3s; }
.quiz-passos i.feito { background: linear-gradient(90deg, var(--ouro), var(--areia)); }
.quiz-perg { font-weight: 800; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.quiz-perg em { color: var(--ouro-fundo); }
.quiz-ops { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
.quiz-op {
  border: 1px solid rgba(187, 155, 97, 0.4); background: var(--creme);
  color: var(--marinho); font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 0.85rem 1rem; border-radius: 12px; cursor: pointer; text-align: left;
  transition: background 0.25s, transform 0.15s;
}
.quiz-op:hover { background: rgba(220, 190, 135, 0.22); transform: translateX(3px); }
.quiz-nome {
  width: 100%; margin-top: 1.2rem; padding: 0.85rem 1rem;
  border: 1px solid rgba(187, 155, 97, 0.5); border-radius: 12px;
  font: inherit; font-size: 0.95rem; background: var(--creme); color: var(--marinho);
}
.quiz-zap {
  width: 100%; margin-top: 0.9rem; border: 0; cursor: pointer;
  background: var(--marinho); color: var(--creme);
  font: inherit; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1rem; border-radius: 999px;
}
.quiz-nota { display: block; margin-top: 1.1rem; font-size: 0.6rem; color: var(--azul-suave); letter-spacing: 0.06em; }

/* ░░ painel local de métricas (?painel=1) ░░ */
.painel-mc {
  position: fixed; left: 12px; top: 12px; z-index: 300;
  background: rgba(13, 22, 38, 0.96); color: var(--creme);
  border: 1px solid rgba(220, 190, 135, 0.4); border-radius: 12px;
  padding: 1rem 1.2rem; font-size: 0.78rem; max-width: 300px; line-height: 1.7;
}
.painel-mc b { color: var(--areia); }
.painel-mc button { margin-top: 0.6rem; margin-right: 0.5rem; border: 1px solid rgba(220, 190, 135, 0.5); background: none; color: var(--areia); border-radius: 8px; padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.68rem; }

/* ░░ botão flutuante ░░ */
.flutua {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 130;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(120deg, var(--ouro), var(--areia)); color: var(--marinho);
  font-weight: 800; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 0.95rem 1.4rem; border-radius: 999px; box-shadow: 0 16px 38px rgba(187, 155, 97, 0.42);
  transform: translateY(130%); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s;
}
.flutua.viva { transform: translateY(0); opacity: 1; }
.flutua-ping { width: 9px; height: 9px; border-radius: 50%; background: var(--marinho); position: relative; }
.flutua-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--marinho); animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.4); opacity: 0; } }

/* ═══ JORNADAS HORIZONTAIS — o sistema do site-mãe, portado ═══ */
.h-secao { position: relative; }
.h-palco {
  position: relative; height: 100svh; overflow: clip;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--papel);
}
.h-secao.escuro .h-palco {
  background:
    radial-gradient(80% 70% at 55% 35%, rgba(34, 63, 95, 0.35), transparent 65%),
    var(--marinho);
  color: var(--creme);
}
.h-trilho { position: relative; display: flex; height: 100%; width: max-content; will-change: transform; align-items: stretch; }
.quadro {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4.5rem, 10vh, 7rem) clamp(2rem, 4vw, 5rem);
  flex-shrink: 0;
}

/* ── a caneta que costura o site: linha de tinta + derrame + caneta ── */
.tinta { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.tinta-alta { z-index: 3; }
.tinta-mancha { fill: var(--marinho); }
.q-indice {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ouro-fundo); margin-bottom: 2.2rem;
}
.q-indice::before { content: ""; width: 34px; height: 1px; background: var(--ouro); }
.escuro .q-indice { color: var(--areia); }
.escuro .q-indice::before { background: var(--areia); }

.q-abre { width: 88vw; }
.q-retrato { width: 92vw; flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.q-retrato.invertido { flex-direction: row-reverse; }
.q-ano { width: 90vw; flex-direction: row; align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.q-missao { width: 96vw; align-items: center; text-align: center; }
.q-final-h { width: 96vw; align-items: center; text-align: center; }

.q-frase { display: flex; flex-direction: column; gap: 0.18em; font-weight: 800; letter-spacing: -0.015em; }
.q-frase.centrada { align-items: center; text-align: center; }
.qf-s { font-size: clamp(0.8rem, 1.3vw, 1.05rem); font-weight: 700; letter-spacing: 0.32em; color: var(--ouro-fundo); text-transform: uppercase; }
.escuro .qf-s { color: rgba(220, 190, 135, 0.85); }
.qf-m { font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.05; text-transform: uppercase; }
.qf-g { font-size: clamp(1.9rem, 3.8vw, 3.6rem); line-height: 1.02; text-transform: uppercase; }
.qf-gg { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 1; text-transform: uppercase; }
.qf-xx { font-size: clamp(2.8rem, 6vw, 5.8rem); line-height: 0.98; text-transform: uppercase; }
.esp { margin-top: 0.7em; }
.serifado i { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
.serifado.ouro i { color: var(--ouro-fundo); font-size: 1.14em; }
.serifado.ouro-escuro i { color: var(--areia); font-size: 1.14em; }

.q-final { font-weight: 800; font-size: clamp(1.8rem, 3.8vw, 3.4rem); line-height: 1.12; letter-spacing: -0.015em; text-transform: uppercase; }
.q-final em { font-size: 1.12em; color: var(--ouro-fundo); text-transform: none; letter-spacing: 0; }
.escuro .q-final em { color: var(--areia); }
.qf-antes, .qf-depois { display: block; }

.q-foto { position: relative; overflow: hidden; flex-shrink: 0; box-shadow: 0 40px 80px rgba(17, 28, 45, 0.25); }
.q-foto::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(220, 190, 135, 0.45); transform: translate(12px, 12px); pointer-events: none; }
.f-alta { width: min(34vw, 460px); height: 74svh; }
.q-foto img { width: 100%; height: 100%; object-fit: cover; will-change: transform, filter; }

/* 1995 escrito à mão pela pena de tinteiro */
.ano-caligrafia { width: clamp(320px, 36vw, 560px); flex-shrink: 0; }
.ano-caligrafia svg { display: block; width: 100%; height: auto; overflow: visible; }
.ano-caligrafia .digito { stroke: var(--marinho); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── o eclipse dourado (estudo Zyno traduzido para a marca) ── */
.q-missao { position: relative; overflow: hidden; }
.q-missao .q-frase { position: relative; z-index: 1; }
.eclipse {
  position: absolute; left: 50%; top: 58%;
  width: max(170vw, 1400px); height: max(170vw, 1400px);
  max-width: 2400px; max-height: 2400px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0c1422;
  box-shadow:
    0 -12px 30px rgba(236, 214, 172, 0.9),
    0 -30px 80px rgba(220, 190, 135, 0.5),
    0 -70px 200px rgba(187, 155, 97, 0.32),
    0 -130px 380px rgba(154, 122, 69, 0.22);
  pointer-events: none; opacity: 0.95;
}

/* céu de pontos dourados nas cenas escuras (grade estelar do estudo) */
.h-secao.escuro .h-palco::before, .contato::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(220, 190, 135, 0.30) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(220, 190, 135, 0.14) 1px, transparent 1.6px);
  background-size: 34px 34px, 54px 54px;
  background-position: 0 0, 17px 27px;
  opacity: 0.5;
  animation: ceuDeriva 90s linear infinite;
}
@keyframes ceuDeriva { to { background-position: -340px 0, -223px 27px; } }
.contato { position: relative; }
.contato-corpo { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .h-secao.escuro .h-palco::before, .contato::before { animation: none; }
}

/* ── luz líquida (estudo HorizonX/Aurel): facho dourado que respira ── */
/* os pais recortam o facho de 130vw pra nunca criar rolagem horizontal */
.contato, .h-secao.escuro .q-abre { overflow: hidden; }
.contato::after, .h-secao.escuro .q-abre::after {
  content: ""; position: absolute; left: 50%; top: 32%; z-index: -1;
  width: 130vw; height: 62vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(220, 190, 135, 0.16), transparent 70%);
  pointer-events: none;
  animation: luzRespira 7s ease-in-out infinite alternate;
}
.contato::after { z-index: 0; }
@keyframes luzRespira {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -52%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .contato::after, .h-secao.escuro .q-abre::after { animation: none; }
}

/* ── clarão dourado que varre os títulos-monumento ── */
.tem-clarao { position: relative; overflow: hidden; }
.clarao {
  position: absolute; inset: -12% -34%; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(220, 190, 135, 0.55) 50%, transparent 66%);
  mix-blend-mode: soft-light;
  transform: translateX(-141%); /* repouso fora da tela — o tween assume dali */
}

/* ── números das perguntas escritos à mão (o traço do 1995) ── */
.perg-n svg { display: block; width: 2em; height: 1.5em; overflow: visible; }
.perg-n path { stroke: var(--areia); stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── rubrica da caneta (assinatura em qualquer seção) ── */
.sub-m { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sub-m path { stroke: var(--areia); stroke-width: 3; fill: none; stroke-linecap: round; }
.caneta-m2 {
  position: absolute; height: min(140px, 18svh); width: auto;
  left: 0; top: 0; transform: translate(-0.7%, -99.2%);
  opacity: 0; pointer-events: none; z-index: 2;
}

/* grifos extra (o faixa já existe acima) */
.grifo { position: relative; display: inline-block; }
.grifo i { position: relative; z-index: 1; }
.grifo-sub { padding-bottom: 0.08em; }
.grifo-sub::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--ouro), var(--areia));
  transform: scaleX(var(--g, 0)) skewY(-0.5deg); transform-origin: left;
}
.grifo-nevoa i { display: inline-block; will-change: opacity, filter; }

/* ░░ alcance — painel tipográfico ░░ */
.alcance { padding: clamp(7rem, 16vh, 13rem) var(--borda); text-align: center; }
.alc-h { font-weight: 800; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; }
.alc-h em { font-size: 1.12em; color: var(--ouro-fundo); text-transform: none; letter-spacing: 0; }
.alc-lista {
  list-style: none; max-width: 880px; margin: 3.4rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem;
}
.alc-item {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem); font-weight: 700; letter-spacing: 0.22em;
  color: var(--azul); padding: 0.85rem 1.4rem; border: 1px solid var(--fio); border-radius: 999px;
}
.alc-item i { color: var(--ouro); font-style: normal; font-size: 0.6rem; }

/* ── depois do derrame, o site segue mergulhado na tinta ── */
.perguntas {
  background: var(--marinho); color: var(--creme);
  max-width: none; margin: 0;
  padding: clamp(7rem, 16vh, 13rem) max(var(--borda), calc((100vw - 1180px) / 2));
}
.perg-h em { color: var(--areia); }
.perg-lista { border-top-color: rgba(220, 190, 135, 0.22); }
.perg-item { border-bottom-color: rgba(220, 190, 135, 0.22); }
.perg-item:hover { background: rgba(251, 247, 238, 0.05); }
.perg-n { color: var(--areia); }
.perg-item p { color: rgba(243, 238, 227, 0.78); }
.perg-item b { color: var(--creme); }
.perg-fecho p { color: rgba(243, 238, 227, 0.78); }
.perg-fecho em { color: var(--areia); }
.perguntas .blob, .contato .blob { border: 1px solid rgba(220, 190, 135, 0.35); }

.alcance { background: var(--marinho); color: var(--creme); }
.alc-h em { color: var(--areia); }
.alc-item { color: rgba(243, 238, 227, 0.85); border-color: rgba(220, 190, 135, 0.3); }

.rodape { border-top: 1px solid rgba(220, 190, 135, 0.16); }

/* contato agora é escuro tipográfico */
.contato {
  min-height: 92svh; display: flex; align-items: center;
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(34, 63, 95, 0.4), transparent 65%),
    var(--marinho);
  color: var(--creme);
  padding: clamp(6rem, 14vh, 10rem) var(--borda);
}
.contato-corpo { text-align: center; max-width: 50rem; margin: 0 auto; }
.contato-h em { color: var(--areia); }

/* ░░ mobile ░░ */
@media (max-width: 900px) {
  .topo { padding: 0.9rem 1.2rem; }
  .topo-marca { font-size: 0.56rem; }
  .marca-sub { display: none; }
  .topo-cta { display: none; }
  .topo-menu { flex-shrink: 0; }
  .hero { grid-template-columns: 1fr; padding-top: 6rem; padding-bottom: 2.5rem; gap: 2.6rem; min-height: auto; }
  .hero-foto { order: 1; height: 56svh; }
  .hero-corpo { order: 2; }
  .hero-rolar { display: none; }
  .hero-h .h-caps { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-h .h-serif em { font-size: clamp(2rem, 9vw, 3rem); }
  .beneficios { grid-template-columns: 1fr; }
  .ben-baralho { height: 330px; }
  .sobre { grid-template-columns: 1fr; }
  .sobre-retrato { height: 62svh; }
  .perg-item { gap: 1.2rem; padding-block: 2rem; }
  .flutua-t { display: none; }
  .flutua { padding: 1.05rem; }
  /* ── jornadas viram CENAS VERTICAIS de tela cheia ── */
  .h-secao { height: auto !important; }
  .h-palco { height: auto; overflow: visible; }
  /* block (não flex): o pin-spacer precisa empurrar o fluxo; will-change/transform
     criariam containing-block e quebrariam os pins internos */
  .h-trilho { display: block; width: 100%; transform: none !important; will-change: auto; }
  .tinta, .tinta-alta { display: none; }
  .quadro { min-height: 74svh; width: 100%; padding: clamp(2.4rem, 7vh, 4rem) 1.4rem; justify-content: center; }
  /* frases-monumento cabem na tela: fonte calibrada + quebra permitida */
  .qf-xx { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .qf-gg { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .qf-g { font-size: clamp(1.7rem, 7.2vw, 2.2rem); }
  .grifo-faixa { white-space: normal; }
  /* o CTA principal vira pílula digna, não torre */
  .blob-grande { padding: 1.1rem 1.7rem; }
  .blob-grande .blob-t { font-size: 0.68rem; letter-spacing: 0.12em; line-height: 1.7; }
  .q-abre, .q-missao, .q-final-h { width: 100%; }
  .q-retrato, .q-retrato.invertido, .q-ano { width: 100%; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
  .f-alta { width: 100%; height: 52svh; }
  .ano-caligrafia { width: 88vw; position: relative; margin-inline: auto; }

  /* caneta da cena do 1995 (âncora = ponta do bico: 6/891, 992/1000) */
  .caneta-m {
    position: absolute; height: min(200px, 26svh); width: auto;
    left: 0; top: 0; transform: translate(-0.7%, -99.2%);
    opacity: 0; pointer-events: none; z-index: 2;
  }
  /* portal de tinta: a mancha nasce no impacto e a câmera mergulha nela */
  .q-final-h { min-height: 100svh; position: relative; overflow: hidden; align-items: center; }
  .q-final-h .q-final { position: relative; z-index: 3; }
  .mancha-m { position: absolute; inset: -1px; background: var(--marinho); clip-path: circle(0% at 76% 62%); z-index: 0; }
  .splat-m { position: absolute; width: 120px; height: 120px; z-index: 2; pointer-events: none; }
  .splat-m svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .splat-m path, .splat-m circle { fill: var(--marinho); }
  .ceu-portal {
    position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
    background-image:
      radial-gradient(circle, rgba(220, 190, 135, 0.3) 1px, transparent 1.6px),
      radial-gradient(circle, rgba(220, 190, 135, 0.14) 1px, transparent 1.6px);
    background-size: 34px 34px, 54px 54px;
    background-position: 0 0, 17px 27px;
  }
  .q-final-h .qf-antes { position: relative; z-index: 1; }
  .q-final-h .qf-depois {
    position: absolute; left: 1.4rem; right: 1.4rem; top: 50%; z-index: 3;
    text-align: center; color: #f3eee3; opacity: 0;
  }
  .q-final-h .qf-depois em { color: var(--areia); }

  /* o fio de tinta vertical que costura as cenas */
  .fio-m { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
  .fio-m path { fill: none; stroke-linecap: round; }

  /* o ato da gota no derrame */
  .caneta-d {
    position: absolute; height: 210px; width: auto;
    left: calc(76% - 4px); top: calc(10% - 208px);
    opacity: 0; pointer-events: none; z-index: 1;
  }
  .gota-palco {
    position: absolute; left: calc(76% - 60px); top: 10%;
    width: 120px; height: 52%;
    pointer-events: none; z-index: 1; filter: url(#goo);
  }
  .gota {
    position: absolute; left: 50%; top: 4px; width: 18px; height: 18px; margin-left: -9px;
    border-radius: 50%; background: var(--marinho); transform-origin: top center;
  }
  .resp {
    position: absolute; left: 50%; top: 4px; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: var(--marinho); opacity: 0;
  }
  .resp.r2 { width: 10px; height: 10px; }
  .resp.r3 { width: 6px; height: 6px; }
}

/* sem animação, o CTA fica dourado direto — a versão parada não vende menos */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  html:not(.forca) .contato .blob-grande { background: linear-gradient(120deg, var(--ouro), var(--areia)); }
  html:not(.forca) .contato .blob-grande .blob-t { color: var(--marinho); }
}

/* cinto de segurança: nada do mundo mobile aparece no desktop */
@media (min-width: 901px) {
  .caneta-m, .caneta-d, .gota-palco, .mancha-m, .fio-m, .extras-m,
  .h-secao .q-frase .clarao, .contato-corpo .sub-m, .contato-corpo .caneta-m2 { display: none !important; }
}

/* fallbacks das horizontais */
html:not(.js) .h-secao { height: auto !important; }
html:not(.js) .h-trilho { flex-direction: column; width: auto; }
@media (prefers-reduced-motion: reduce) {
  html:not(.forca) .h-secao { height: auto !important; }
  html:not(.forca) .h-trilho { flex-direction: column; width: auto; }
  html:not(.forca) .grifo-sub::after { transform: scaleX(1) skewY(-0.5deg); }
  html:not(.forca) .grifo-nevoa i { opacity: 1; filter: none; }
  html:not(.forca) .tinta { display: none; }
}
html:not(.js) .tinta { display: none; }

/* ░░ reduzir movimento / sem js ░░ */
@media (prefers-reduced-motion: reduce) {
  html:not(.forca) .surge { opacity: 1; }
  html:not(.forca) .abre { display: none; }
  html:not(.forca) .foco-p:first-child { opacity: 1; filter: none; }
  html:not(.forca) .grifo-faixa::before { transform: scaleX(1) skewY(-0.6deg); }
}
html:not(.js) .surge { opacity: 1; }
html:not(.js) .abre { display: none; }
html:not(.js) .grifo-faixa::before { transform: scaleX(1) skewY(-0.6deg); }