/* STOA — "Mármore vivo". Dois mundos que se alternam: a mata escura onde o mármore flutua (herói, mergulho, citação, lago)
   e o papel claro onde se lê (portas, notícias, blog). Paleta Pandora; Cormorant Garamond para o que é dito em voz alta,
   Atkinson Hyperlegible Next para o que se lê, IBM Plex Mono para rótulos, números e fontes. */
@font-face { font-family: "Cormorant Garamond"; src: url("/fontes/cormorantgaramond-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fontes/cormorantgaramond-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fontes/cormorantgaramond-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fontes/cormorantgaramond-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fontes/cormorantgaramond-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fontes/atkinsonhyperlegiblenext-normal-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fontes/atkinsonhyperlegiblenext-normal-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fontes/ibmplexmono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fontes/ibmplexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --mata: #021009; --musgo: #06261A; --musgo-2: #0C3A27; --esmeralda: #00D17A; --menta: #7DFFB0; --turquesa: #19E3D0;
  --texto: #EFFFF4; --texto-2: rgba(239, 255, 244, .76); --texto-3: rgba(239, 255, 244, .56);
  --papel: #F3F7EF; --papel-2: #E7EEE2; --tinta: #0B1F15; --tinta-2: rgba(11, 31, 21, .70); --tinta-3: rgba(11, 31, 21, .64); --link: #0A7A4A;   /* tinta-3 a .64: 4,7:1 sobre o papel, o mínimo para texto pequeno */
  --fio-claro: rgba(11, 31, 21, .13); --fio-escuro: rgba(239, 255, 244, .14); --cuidado: #8A3A20;
  --serifa: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --sans: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --margem: clamp(16px, 4.6vw, 76px); --max: 1320px; --barra: 76px;
  --suave: cubic-bezier(.22, .8, .2, 1); --sombra-texto: 0 1px 2px rgba(2, 10, 6, .55), 0 2px 30px rgba(2, 10, 6, .6);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 12px); scrollbar-color: rgba(125, 255, 176, .45) #06261A; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #06261A; } ::-webkit-scrollbar-thumb { background: rgba(125, 255, 176, .45); border-radius: 5px; border: 2px solid #06261A; } ::-webkit-scrollbar-thumb:hover { background: rgba(125, 255, 176, .7); }
body { background: var(--mata); color: var(--texto); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 4px; border-radius: 3px; }
[data-tema="claro"] :focus-visible { outline-color: var(--link); }
::selection { background: var(--menta); color: var(--mata); }
.pular { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--menta); color: var(--mata); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.pular:focus { left: 12px; }
.olho { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--menta); }
[data-tema="claro"] .olho { color: var(--link); }
em { font-style: italic; }
.seta { width: 1em; height: 1em; flex: none; transition: transform .5s var(--suave); }
a:hover > .seta, a:focus-visible > .seta { transform: translateX(4px); }

/* ---------------------------------------------------------------- botões e chips */
.botao { translate: var(--mx, 0) var(--my, 0); display: inline-flex; align-items: center; gap: .7em; padding: 15px 26px; border-radius: 999px; background: var(--menta); color: var(--mata); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-decoration: none; transition: background .3s, transform .5s var(--suave), box-shadow .5s var(--suave); box-shadow: 0 10px 40px -14px rgba(125, 255, 176, .55); }
.botao:hover { background: #A6FFC8; transform: translateY(-2px); }
.botao.fantasma { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px rgba(239, 255, 244, .38); }
.botao.fantasma:hover { box-shadow: inset 0 0 0 1px var(--menta); color: var(--menta); }
[data-tema="claro"] .botao, .papel .botao { background: var(--tinta); color: var(--papel); box-shadow: 0 14px 34px -18px rgba(11, 31, 21, .6); }
[data-tema="claro"] .botao:hover, .papel .botao:hover { background: var(--link); }
.link-seta { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-seta.claro { color: var(--menta); }
.link-claro { color: var(--menta); }
.chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.2; }
.chip.aberta { background: var(--esmeralda); color: var(--mata); }
.chip.breve { box-shadow: inset 0 0 0 1px rgba(11, 31, 21, .26); color: var(--tinta-2); }
.chip.tipo { box-shadow: inset 0 0 0 1px var(--fio-claro); color: var(--link); background: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- barra */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--barra); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--margem); color: var(--texto); transition: background .45s, color .45s, box-shadow .45s, transform .5s var(--suave); }
.barra.rolou[data-tema="escuro"] { background: rgba(2, 16, 9, .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--fio-escuro); }
.barra[data-tema="claro"] { color: var(--tinta); background: rgba(243, 247, 239, .82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--fio-claro); }
.barra.some { transform: translateY(-100%); }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca svg { width: 28px; height: 28px; }
.marca span { font-family: var(--serifa); font-weight: 600; font-size: 23px; letter-spacing: .34em; margin-right: -.34em; }
.links { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.links a { font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; opacity: .84; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: opacity .3s, background-size .5s var(--suave); }
.links a:hover, .links a[aria-current] { opacity: 1; background-size: 100% 1px; }
.acoes-barra { display: flex; align-items: center; gap: 14px; }
.pilula { translate: var(--mx, 0) var(--my, 0); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; transition: background .3s, color .3s; }
.barra[data-tema="escuro"] .pilula { color: var(--menta); }
.barra[data-tema="escuro"] .pilula:hover { background: var(--menta); color: var(--mata); }
.barra[data-tema="claro"] .pilula:hover { background: var(--tinta); color: var(--papel); }
.som { display: inline-flex; align-items: center; gap: 9px; padding: 8px 6px; font-size: 12px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.som:hover { opacity: 1; }
.ondas { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ondas i { width: 2px; height: 14px; background: currentColor; border-radius: 1px; transform: scaleY(.22); transform-origin: 50% 100%; }
.som[aria-pressed="true"] .ondas i { animation: onda 1.1s ease-in-out infinite; }
.som[aria-pressed="true"] .ondas i:nth-child(2) { animation-delay: -.3s; } .som[aria-pressed="true"] .ondas i:nth-child(3) { animation-delay: -.6s; } .som[aria-pressed="true"] .ondas i:nth-child(4) { animation-delay: -.85s; }
@keyframes onda { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
.menu-botao { display: none; width: 42px; height: 42px; position: relative; }
.menu-botao i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--suave), top .4s var(--suave); }
.menu-botao i:first-child { top: 16px; } .menu-botao i:last-child { top: 25px; }
.menu-botao[aria-expanded="true"] i:first-child { top: 20.5px; transform: rotate(45deg); } .menu-botao[aria-expanded="true"] i:last-child { top: 20.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; background: var(--mata); color: var(--texto); padding: calc(var(--barra) + 32px) var(--margem) 40px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { font-family: var(--serifa); font-size: clamp(34px, 9vw, 52px); line-height: 1.15; text-decoration: none; }
.menu p { font-size: 13px; color: var(--texto-3); max-width: 40ch; }
body.menu-aberto { overflow: hidden; }
body.menu-aberto .barra { background: transparent; box-shadow: none; color: var(--texto); }

/* ---------------------------------------------------------------- herói */
.heroi-camada { position: absolute; inset: 0; z-index: 5; opacity: var(--heroi, 1); isolation: isolate; }   /* o herói é a primeira cena do filme: some quando a rolagem começa */
.heroi-camada.oculta { visibility: hidden; }
.heroi-midia, .heroi-midia img, .heroi-midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroi-video { opacity: 0; transition: opacity 1.4s ease; }
.heroi-video.viva { opacity: 1; }
.heroi-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 16, 9, .82) 0%, rgba(2, 16, 9, .42) 34%, rgba(2, 16, 9, 0) 58%), linear-gradient(0deg, rgba(2, 16, 9, .7) 0%, rgba(2, 16, 9, 0) 26%), linear-gradient(180deg, rgba(2, 16, 9, .55) 0%, rgba(2, 16, 9, 0) 18%); }
.heroi-texto { position: absolute; left: var(--margem); top: clamp(120px, 21vh, 230px); width: min(700px, 48vw); display: grid; gap: 26px; z-index: 3; }
.heroi-camada h1 { font-family: var(--serifa); font-weight: 400; font-size: clamp(46px, 6vw, 100px); line-height: 1.0; letter-spacing: -.012em; text-wrap: balance; text-shadow: var(--sombra-texto); }
.heroi-camada h1 em { color: var(--menta); font-weight: 300; }
.heroi-lede { font-size: clamp(17px, 1.35vw, 20px); color: var(--texto-2); max-width: 32em; text-wrap: pretty; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.heroi-pe { position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(20px, 4vh, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; z-index: 3; }
.rolar { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); transition: opacity .8s; }
.rolar-fio { width: 1px; height: 42px; background: linear-gradient(var(--menta), transparent); position: relative; overflow: hidden; }
.rolar-fio::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 2px; background: var(--menta); animation: desce 2.2s var(--suave) infinite; }
@keyframes desce { from { transform: translateY(-12px); } to { transform: translateY(42px); } }
.rolou-uma-vez .rolar { opacity: 0; }
.direto { translate: var(--mx, 0) var(--my, 0); display: inline-flex; align-items: center; gap: .55em; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--texto); padding: 10px 16px; border-radius: 999px; background: rgba(2, 16, 9, .5); box-shadow: inset 0 0 0 1px var(--fio-escuro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .3s, color .3s; }
.direto:hover { color: var(--menta); box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .6); }
/* a mira que caça o que há para ver */
/* os cantos são pintados por gradientes presos às quatro pontas (como em .mira-fixa): nada se move no layout quando a mira muda de tamanho */
.mira { position: absolute; left: 0; top: 0; width: 100px; height: 100px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s; box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .32); will-change: transform, width, height; background: linear-gradient(var(--menta), var(--menta)) 0 0 / 20px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 0 / 2px 20px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 0 / 20px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 0 / 2px 20px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 100% / 20px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 100% / 2px 20px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 100% / 20px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 100% / 2px 20px no-repeat; }
.mira.ativa { opacity: 1; }
.mira i { display: none; }
.mira-coord { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: rgba(125, 255, 176, .8); white-space: nowrap; will-change: transform; }
.mira-coord.ativa { opacity: 1; }
.mira-rotulo { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; display: flex; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 8px 12px; background: rgba(2, 16, 9, .62); box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .8s; white-space: nowrap; will-change: transform; }
.mira-rotulo.ativa { opacity: 1; }
.mira-n { color: var(--menta); } .mira-t { color: var(--texto); transition: opacity .35s; }
.selo-canto { position: absolute; right: var(--margem); top: calc(var(--barra) + 10px); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); text-decoration: none; text-shadow: 0 1px 2px rgba(2, 10, 6, .6); z-index: 3; transition: color .3s; }
.selo-canto:hover { color: var(--menta); }

/* ---------------------------------------------------------------- mergulho (vídeo raspado pela rolagem) */
.mergulho { position: relative; height: 430vh; background: var(--mata); }
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.mergulho-cartaz, .mergulho-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mergulho-video { opacity: 0; }
.mergulho-video.viva { opacity: 1; }
.mergulho-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 16, 9, calc(.72 * var(--topo, 0))) 0%, rgba(2, 16, 9, 0) 48%), linear-gradient(180deg, rgba(243, 247, 239, calc(.9 * var(--nevoa, 0))) 0%, rgba(243, 247, 239, calc(.55 * var(--nevoa, 0))) 30%, rgba(243, 247, 239, 0) 56%), linear-gradient(0deg, rgba(2, 16, 9, calc(.8 * (1 - var(--claro, 0)))) 0%, rgba(2, 16, 9, 0) 50%), linear-gradient(0deg, rgba(243, 247, 239, var(--fim, 0)) 0%, rgba(243, 247, 239, calc(.7 * var(--fim, 0))) 18%, rgba(243, 247, 239, 0) 38%); }
.etapa { position: absolute; z-index: 2; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 26px)); pointer-events: none; will-change: opacity, transform; }
.etapa.e1 { left: var(--margem); top: calc(var(--barra) + 9vh); width: min(600px, 44vw); display: grid; gap: 18px; }
.etapa h2 { font-family: var(--serifa); font-weight: 400; font-size: clamp(38px, 5vw, 80px); line-height: 1.02; text-wrap: balance; }
.etapa.e1 h2 { text-shadow: var(--sombra-texto); }
.etapa.e2 { left: var(--margem); bottom: 15vh; width: min(560px, 86vw); padding: 26px 28px; border-radius: 16px; background: rgba(2, 16, 9, .5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--fio-escuro); }
.etapa.e2 p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; }
.etapa.e3 { left: var(--margem); top: calc(var(--barra) + 9vh); width: min(780px, 86vw); color: var(--tinta); }
.etapa.e3 em { color: var(--link); font-weight: 300; }
.trilho { position: absolute; right: var(--margem); top: 50%; transform: translateY(-50%); z-index: 2; opacity: calc(1 - var(--heroi, 1)); display: grid; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.trilho li { position: relative; padding-right: 22px; text-align: right; color: var(--cor-trilho, var(--texto-3)); transition: color .4s; }
.trilho li::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: background .4s, transform .4s; }
.trilho li.aqui { color: var(--cor-trilho-aqui, var(--menta)); }
.trilho li.aqui::after { background: currentColor; transform: scale(1.25); }

/* ---------------------------------------------------------------- as oito portas */
.portas { position: relative; background: var(--papel); color: var(--tinta); overflow: hidden; }
.portas-campo { position: relative; height: max(122svh, 1000px); max-width: 1680px; margin: 0 auto; perspective: 1400px; }
.portas-titulo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 42vw); text-align: center; display: grid; gap: 18px; z-index: 2; }
.portas-titulo h2 { font-family: var(--serifa); font-weight: 400; font-size: clamp(48px, 6vw, 96px); line-height: .98; letter-spacing: -.01em; }
.portas-titulo p:last-child { color: var(--tinta-2); font-size: 18px; text-wrap: balance; }
.cartas { position: absolute; inset: 0; }
.carta { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: clamp(140px, min(calc(var(--w) * 1vw), calc(var(--w) * 1.75vh)), 260px); z-index: 3; transform-style: preserve-3d; }
.carta.baixo { top: auto; bottom: calc(var(--y) * 1%); }
.carta a { display: grid; gap: 10px; padding: 9px 9px 13px; background: #fff; border-radius: 15px; text-decoration: none; color: var(--tinta); box-shadow: 0 34px 60px -30px rgba(11, 31, 21, .5), 0 2px 6px rgba(11, 31, 21, .07); transform: var(--t, none); transition: box-shadow .5s var(--suave); will-change: transform; }
.carta a:hover, .carta a:focus-visible { box-shadow: 0 46px 80px -30px rgba(11, 31, 21, .55), 0 2px 8px rgba(11, 31, 21, .08); }
.carta-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 9px; background: var(--musgo); }
.carta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.carta a:hover .carta-img img { transform: scale(1.06); }
.carta-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 0 4px; }
.carta-linha strong { font-family: var(--serifa); font-weight: 600; font-size: clamp(20px, 1.5vw, 25px); line-height: 1.1; }
.carta-desc { display: grid; grid-template-rows: 0fr; padding: 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); opacity: 0; transition: grid-template-rows .5s var(--suave), opacity .4s; overflow: hidden; }
.carta a:hover .carta-desc, .carta a:focus-visible .carta-desc { grid-template-rows: 1fr; opacity: 1; }
.vidro { position: absolute; z-index: 4; display: grid; gap: 3px; max-width: 250px; font-size: 14px; line-height: 1.4; padding: 13px 17px; border-radius: 14px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -24px rgba(11, 31, 21, .4), inset 0 0 0 1px rgba(11, 31, 21, .06); }
.vidro small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.vidro.v1 { left: 41%; top: 86%; } .vidro.v2 { left: 44%; top: 9%; }

/* ---------------------------------------------------------------- citação de Sêneca */
.citacao { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--mata); overflow: clip; isolation: isolate; }   /* clip, não hidden: hidden quebra o sticky do Sêneca girando */
.citacao-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; transform: scale(var(--zoom, 1.08)); will-change: transform; }
.citacao-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 16, 9, .9) 0%, rgba(2, 16, 9, .55) 40%, rgba(2, 16, 9, 0) 66%); }
.citacao-texto { position: relative; z-index: 2; margin: 0 var(--margem); width: min(660px, 52vw); display: grid; gap: 22px; padding: 14vh 0; }
.citacao blockquote p { font-family: var(--serifa); font-style: italic; font-weight: 300; font-size: clamp(46px, 5.8vw, 96px); line-height: 1.0; letter-spacing: -.01em; text-wrap: balance; }
.citacao figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.citacao figcaption span { color: var(--menta); margin-right: .8em; }
.citacao-nota { color: var(--texto-2); max-width: 30em; }
.citacao .link-seta { width: fit-content; }

/* ---------------------------------------------------------------- quem ensina */
.quem { background: var(--papel); color: var(--tinta); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; padding: clamp(80px, 15vh, 170px) max(var(--margem), calc((100% - 1680px) / 2)); }   /* o papel vai de borda a borda; só o miolo tem largura máxima */
.quem-fig { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel-2); box-shadow: 0 50px 90px -50px rgba(11, 31, 21, .55); }
.quem-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.06)); transition: translate .8s var(--suave); }
.quem-texto { display: grid; gap: 22px; justify-items: start; }
.quem h2, .lista-cabeca h2, .conta h2, .trailer h2 { font-family: var(--serifa); font-weight: 400; font-size: clamp(40px, 4.6vw, 74px); line-height: 1.0; letter-spacing: -.01em; text-wrap: balance; }
.registro { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; line-height: 1.5; padding: 10px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(11, 31, 21, .2); background: #fff; }
.quem p { max-width: 34em; text-wrap: pretty; }
.registro span { white-space: nowrap; }
.apagado { color: var(--tinta-2); font-size: 16px; }

/* ---------------------------------------------------------------- listas (notícias, textos) */
.secao-lista { background: var(--papel); color: var(--tinta); padding: clamp(70px, 12vh, 140px) var(--margem); }
.secao-lista > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.textos-sec { padding-top: 0; }
.lista-cabeca { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 16px 60px; align-items: end; margin-bottom: 44px; }
.lista-cabeca .olho { grid-column: 1 / -1; }
.lista-cabeca > p:last-child { color: var(--tinta-2); }
.aviso-rascunho { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--cuidado); padding: 10px 14px; border-radius: 10px; background: rgba(138, 58, 32, .07); margin-bottom: 18px; width: fit-content; }
.secao-lista > .aviso-rascunho { margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.noticias { border-bottom: 1px solid var(--fio-claro); }
.noticia { display: grid; grid-template-columns: 230px 1fr; gap: 12px 40px; padding: 34px 0; border-top: 1px solid var(--fio-claro); }
.noticia-tipo { display: grid; gap: 8px; align-content: start; justify-items: start; }
.noticia-tipo small { font-size: 13px; color: var(--tinta-3); line-height: 1.4; }
.noticia h2, .noticia h3 { font-family: var(--serifa); font-weight: 600; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.005em; max-width: 30ch; text-wrap: balance; margin: 0; }
.noticia h2 a, .noticia h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--suave); }
.noticia h2 a:hover, .noticia h3 a:hover { background-size: 100% 1px; }
.noticia-corpo { display: grid; gap: 12px; }
.noticia-corpo > p:not(.selo):not(.fonte) { color: var(--tinta-2); max-width: 46em; }
.selo { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--cuidado); padding: 8px 12px; border-left: 2px solid var(--cuidado); background: rgba(138, 58, 32, .06); width: fit-content; }
.fonte, .fonte-artigo { font-size: 14px; color: var(--tinta-3); }
.fonte a, .fonte-artigo a { color: var(--link); }
.secao-lista > .link-seta { display: flex; width: fit-content; margin-top: 30px; margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.textos { border-bottom: 1px solid var(--fio-claro); }
.texto > a, .texto.em-breve { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px 40px; align-items: center; padding: 26px 0; border-top: 1px solid var(--fio-claro); text-decoration: none; }
.texto > a .chip, .texto.em-breve .chip { justify-self: start; }
.texto-titulo { font-family: var(--serifa); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; }
.texto-meta { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.texto > a .texto-meta { color: var(--link); }
.texto > a:hover .texto-titulo { color: var(--link); }
.texto.em-breve .texto-titulo { color: var(--tinta-2); }
.conta { background: var(--papel-2); color: var(--tinta); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 80px; align-items: end; padding: clamp(70px, 12vh, 130px) var(--margem); }
.conta > div { display: grid; gap: 16px; justify-items: start; max-width: 640px; }
.conta > div:last-child p { color: var(--tinta-2); }

/* ---------------------------------------------------------------- rodapé: o lago e a palavra */
.rodape { background: var(--mata); color: var(--texto); position: relative; }
.lago { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.lago-tela { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; }
.lago.pronto .lago-tela { opacity: 1; }
.lago-veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--mata) 0%, rgba(2, 16, 9, .4) 16%, rgba(2, 16, 9, 0) 34%), linear-gradient(0deg, rgba(2, 16, 9, .82) 0%, rgba(2, 16, 9, 0) 34%); }
.lago.sem3d { background: radial-gradient(ellipse at 50% 40%, #124A36, var(--mata) 70%); }
.lago-texto { position: absolute; left: var(--margem); top: clamp(60px, 11vh, 120px); z-index: 3; display: grid; gap: 14px; text-shadow: var(--sombra-texto); pointer-events: none; }
.lago-texto h2 { font-family: var(--serifa); font-weight: 400; font-size: clamp(38px, 4.4vw, 70px); line-height: 1; }
.lago-texto h2 em { color: var(--menta); font-weight: 300; }
.dica-lago { font-size: 14px; letter-spacing: .06em; color: var(--texto-2); display: inline-flex; align-items: center; gap: 10px; transition: opacity .8s; }
.dica-lago::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 14px 3px rgba(125, 255, 176, .6); animation: pulso 1.8s ease-in-out infinite; }
.lago.tocou .dica-lago { opacity: 0; }
@keyframes pulso { 50% { transform: scale(1.7); opacity: .5; } }
.lago-rots { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.6s ease 1s; }
.lago.pronto .lago-rots { opacity: 1; }
.lago-rots .rot { position: absolute; left: 0; top: 0; will-change: translate; }
.lago-rots a { display: block; translate: -50% 0; pointer-events: auto; padding: 8px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; text-decoration: none; text-shadow: 0 0 12px rgba(2, 10, 6, .95), 0 1px 3px rgba(2, 10, 6, .9); transition: color .3s, letter-spacing .5s var(--suave); }
.lago-rots .fechada a { color: rgba(239, 255, 244, .76); }
.lago-rots .aceso a, .lago-rots a:hover, .lago-rots a:focus-visible { color: var(--menta); letter-spacing: .26em; }
.palavra { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; display: grid; justify-items: center; font-family: var(--serifa); font-weight: 600; font-size: min(28vw, 44svh); line-height: .78; letter-spacing: .03em; white-space: nowrap; }
.rodape { --marmore: none; }   /* o mármore da palavra só é baixado quando o rodapé se aproxima (base.js põe .perto) */
.rodape.perto { --marmore: url("/midia/marmore.webp"); }
.palavra-letras, .palavra-reflexo > span { display: block; margin-right: -.03em; color: transparent; background: var(--marmore) 50% 40% / cover #D6E0D8; -webkit-background-clip: text; background-clip: text; }
.palavra-letras { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .5)); }
.palavra-reflexo { display: block; height: .4em; overflow: hidden; opacity: .34; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%); }
.palavra-reflexo > span { transform: scaleY(-1); filter: blur(.5px) brightness(.8); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .palavra-reflexo > span { filter: url(#onda-agua) blur(.4px) brightness(.8); } }
.filtros { position: absolute; width: 0; height: 0; }
.rodape-pe { padding: 64px var(--margem) 30px; border-top: 1px solid var(--fio-escuro); }
.rodape-colunas { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; max-width: var(--max); margin: 0 auto 56px; }
.rodape-aviso { display: grid; gap: 16px; max-width: 34em; }
.rodape-aviso p:last-child { font-size: 14.5px; color: var(--texto-3); }
.marca-rodape { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); }
.marca-rodape svg { width: 30px; height: 30px; } .marca-rodape span { font-family: var(--serifa); font-weight: 600; font-size: 26px; letter-spacing: .34em; }
.rodape-colunas ul { display: grid; gap: 10px; align-content: start; }
.rodape-colunas a { text-decoration: none; color: var(--texto-2); font-size: 15.5px; }
.rodape-colunas a:hover { color: var(--menta); }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; max-width: var(--max); margin: 0 auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--texto-3); }
.selo-previa { color: var(--menta); }

/* ---------------------------------------------------------------- páginas internas */
.cabeca { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; min-height: 74svh; padding: calc(var(--barra) + 70px) var(--margem) clamp(56px, 9vh, 96px); background: radial-gradient(ellipse 70% 80% at 74% 46%, #124A36 0%, rgba(18, 74, 54, 0) 70%), var(--mata); color: var(--texto); overflow: hidden; }
.cabeca:not(:has(.cabeca-fig)) { grid-template-columns: minmax(0, 1fr); min-height: 54svh; }
.cabeca-texto { display: grid; gap: 22px; max-width: 900px; }
.cabeca h1 { font-family: var(--serifa); font-weight: 400; font-size: clamp(46px, 6.6vw, 108px); line-height: .98; letter-spacing: -.012em; text-wrap: balance; }
.cabeca-lede { font-size: clamp(18px, 1.5vw, 22px); color: var(--texto-2); max-width: 34em; text-wrap: pretty; }
.cabeca-fig { position: relative; justify-self: end; width: min(440px, 100%); }
.cabeca-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 74% at 50% 46%, #000 62%, transparent 100%); }
.cabeca-fig figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-top: 12px; }
.mira-fixa { position: absolute; inset: -12px; pointer-events: none; z-index: 2; background: linear-gradient(var(--menta), var(--menta)) 0 0 / 22px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 0 / 2px 22px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 0 / 22px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 0 / 2px 22px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 100% / 22px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 0 100% / 2px 22px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 100% / 22px 2px no-repeat, linear-gradient(var(--menta), var(--menta)) 100% 100% / 2px 22px no-repeat; bottom: 14px; }
.papel { background: var(--papel); color: var(--tinta); }
.miolo { max-width: 880px; margin: 0 auto; padding: clamp(56px, 9vh, 96px) var(--margem) clamp(90px, 14vh, 150px); }
.miolo:has(.noticias), .miolo:has(.textos) { max-width: var(--max); }
.prosa h2 { font-family: var(--serifa); font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; margin: 2.2em 0 .6em; }
.prosa p, .prosa li { font-size: 19px; line-height: 1.72; margin-bottom: 1.1em; text-wrap: pretty; }
.prosa ul { list-style: disc; padding-left: 1.2em; }
.prosa a:not(.botao):not(.link-seta) { color: var(--link); }
.prosa .lede { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.55; color: var(--tinta); }
.assinatura { font-family: var(--mono); font-size: 12.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.refs-titulo { font-size: 24px !important; }
.refs { list-style: decimal; padding-left: 1.3em; }
.refs li { font-size: 15.5px; color: var(--tinta-2); margin-bottom: .5em; }
.aviso-educativo { font-size: 15.5px !important; padding: 18px 20px; border-radius: 12px; background: var(--papel-2); color: var(--tinta-2); }
.nota-editorial { margin-top: 32px; max-width: 46em; font-size: 15px; color: var(--tinta-3); }
.nota-editorial a { color: var(--link); }
.duas-acoes { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 28px; }
.form-entrar { display: grid; gap: 20px; max-width: 520px; }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 600; }
.campo input { font: inherit; padding: 15px 18px; border-radius: 12px; border: 1px solid rgba(11, 31, 21, .24); background: #fff; color: var(--tinta); }
.campo input:focus { outline: 2px solid var(--link); outline-offset: 2px; border-color: transparent; }
.caixa { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.caixa input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--link); flex: none; }
.form-entrar .botao { justify-self: start; }
.retorno { min-height: 1.6em; font-size: 16px; }
.retorno[data-tom="erro"] { color: var(--cuidado); }
.retorno[data-tom="ok"] { color: var(--link); font-weight: 600; }
.retorno a { color: var(--link); font-weight: 600; }
/* o formulário "quero ser avisado": nome (opcional), e-mail, aprender/ensinar/os dois, aceite; a armadilha .hp fica fora da tela */
.hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.campo .opcional { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-left: 8px; }
.opcoes { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.opcoes legend { font-weight: 600; padding: 0; margin-bottom: 10px; }
.opcoes-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.opcoes-lista label { position: relative; }
.opcoes-lista input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opcoes-lista span { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 600; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(11, 31, 21, .24); transition: background .3s, color .3s, box-shadow .3s; }
.opcoes-lista label:hover span { box-shadow: inset 0 0 0 1px var(--tinta); }
.opcoes-lista input:checked + span { background: var(--tinta); color: var(--papel); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcoes-lista input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.opcoes-nota { font-size: 14px; color: var(--tinta-3); margin: 0; }
.caixa-mini { font-size: 14px; color: var(--tinta-3); }
.caixa-mini input { width: 18px; height: 18px; margin-top: 2px; }
.caixa-mini a { color: var(--link); }
.interesse .botao:disabled { opacity: .55; cursor: default; transform: none; }
.interesse.enviado .campo, .interesse.enviado .opcoes, .interesse.enviado .caixa, .interesse.enviado .avise-linha { opacity: .5; }
.quem .avise { margin: 6px 0 0; width: min(100%, 560px); }
.quem .avise > label[for] { font-size: 22px; }

/* ---------------------------------------------------------------- surgir ao rolar */
.surge { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--suave), transform 1.2s var(--suave); transition-delay: calc(var(--i, 0) * 70ms); }
.surge.visto { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- entrada, flutuação e passagem entre páginas */
.heroi-texto > * { animation: entra 1.3s var(--suave) both; }
.heroi-texto > :nth-child(1) { animation-delay: .25s; } .heroi-texto > :nth-child(2) { animation-delay: .4s; } .heroi-texto > :nth-child(3) { animation-delay: .6s; } .heroi-texto > :nth-child(4) { animation-delay: .75s; }
.heroi-pe { animation: entra 1.3s var(--suave) 1s both; }
.abrindo .heroi-texto > *, .abrindo .heroi-pe { animation-play-state: paused; }
@keyframes entra { from { opacity: 0; transform: translateY(22px); } }
.cabeca-fig img { animation: boia 11s ease-in-out infinite; }
@keyframes boia { 50% { transform: translateY(-12px) rotate(-.5deg); } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: var(--suave); }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1080px) {
  .links { display: none; }
  .menu-botao { display: block; }
  .som-txt { display: none; }
  .portas-campo { height: auto; padding: 110px var(--margem) 90px; perspective: none; }
  .portas-titulo { position: static; transform: none; margin: 0 auto 44px; width: min(620px, 100%); }
  .cartas { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
  .carta { position: static; width: auto; }
  .carta a { transform: none !important; }
  .carta-desc { grid-template-rows: 1fr; opacity: 1; }
  .vidro { display: none; }
  .quem { grid-template-columns: 1fr; }
  .conta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  :root { --barra: 64px; }
  .pilula { padding: 9px 15px; font-size: 12px; }
  .marca span { font-size: 20px; }
  .heroi-veu { background: linear-gradient(0deg, rgba(2, 16, 9, .95) 0%, rgba(2, 16, 9, .78) 38%, rgba(2, 16, 9, .25) 56%, rgba(2, 16, 9, 0) 66%), linear-gradient(180deg, rgba(2, 16, 9, .5) 0%, rgba(2, 16, 9, 0) 16%); }
  .heroi-midia { transform: translateY(-11%); }
  .heroi-texto { top: auto; bottom: 110px; width: auto; right: var(--margem); gap: 18px; }
  .heroi-camada h1 { font-size: clamp(40px, 11.5vw, 58px); }
  .heroi-lede { font-size: 16.5px; }
  .heroi-acoes .botao { padding: 13px 20px; font-size: 15px; }
  .heroi-pe { bottom: 22px; }
  .rolar { font-size: 11px; }
  .rolar-fio { height: 30px; }
  .mira-coord { display: none; }
  .selo-canto { display: none; }
  .mira-rotulo { font-size: 11px; padding: 6px 10px; }
  .mergulho { height: 380vh; }
  .etapa.e2 { bottom: 11vh; }
  .etapa.e1 { width: auto; right: var(--margem); }
  .etapa.e3 { top: calc(var(--barra) + 6vh); }
  .trilho { display: none; }
  .cartas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .carta a { padding: 7px 7px 11px; border-radius: 13px; gap: 8px; }
  .carta-linha strong { font-size: 20px; }
  .carta-desc { font-size: 13px; }
  .citacao { align-items: end; }
  .citacao-img { object-position: 64% 50%; }
  .citacao-veu { background: linear-gradient(0deg, rgba(2, 16, 9, .96) 0%, rgba(2, 16, 9, .75) 44%, rgba(2, 16, 9, .1) 72%); }
  .citacao-texto { width: auto; padding: 46vh 0 12vh; }
  .lista-cabeca { grid-template-columns: 1fr; }
  .noticia { grid-template-columns: 1fr; padding: 28px 0; }
  .texto > a, .texto.em-breve { grid-template-columns: 1fr; gap: 10px; }
  .rodape-colunas { grid-template-columns: 1fr 1fr; }
  .rodape-aviso { grid-column: 1 / -1; }
  .palavra { font-size: min(34vw, 30svh); }
  .lago { height: 88svh; }
  .lago-rots a { font-size: 10.5px; letter-spacing: .16em; padding: 10px 8px; }
  .cabeca { grid-template-columns: 1fr; align-items: start; min-height: auto; padding-top: calc(var(--barra) + 40px); gap: 36px; }
  .cabeca-fig { justify-self: start; width: min(300px, 76vw); }
  .prosa p, .prosa li { font-size: 18px; }
}

/* ---------------------------------------------------------------- recorte no celular (enquanto o render em pé não existe) */
@media (max-width: 760px), (max-aspect-ratio: 20/23) {
  .heroi-midia img, .heroi-midia video, .mergulho-cartaz, .mergulho-video, .travessia-video, .citacao-video { object-position: var(--foco-p, 50%) 50%; }
}

/* ---------------------------------------------------------------- abertura (só na primeira visita da sessão) */
.abertura { position: fixed; inset: 0; z-index: 90; background: var(--mata); color: var(--texto); display: grid; place-content: center; justify-items: center; gap: 18px; transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), opacity .6s ease .9s; clip-path: inset(0 0 0 0); }
.abertura.sai { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.abertura.nao { display: none; }
.abertura-palavra { font-family: "Palatino Linotype", "Book Antiqua", Palatino, var(--serifa); font-style: italic; font-size: clamp(56px, 9vw, 130px); line-height: 1; letter-spacing: .06em; width: min(92vw, 6em); text-align: center; }   /* largura fixa: as letras trocam sem mexer na caixa */
.abertura-palavra.latina { font-family: var(--serifa); font-style: normal; font-weight: 600; letter-spacing: .3em; margin-right: -.3em; }
.abertura-fio { display: block; width: min(360px, 60vw); height: 1px; background: linear-gradient(90deg, transparent, var(--menta), transparent); transform: scaleX(0); animation: fio 1.2s var(--suave) .2s forwards; }
@keyframes fio { to { transform: scaleX(1); } }
.abertura-legenda { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); opacity: 0; animation: entra-op 1s var(--suave) .6s forwards; }
@keyframes entra-op { to { opacity: 1; } }

/* ---------------------------------------------------------------- pólen do herói (canvas) */
.polen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; mix-blend-mode: screen; }   /* acima da camada do herói: os esporos vivem no palco inteiro do filme */

/* ---------------------------------------------------------------- cursor: um anel que segue, cresce sobre o que se clica e vira mira sobre as relíquias */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .4s; }
.cursor i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(239, 255, 244, .9); mix-blend-mode: difference; transition: transform .35s var(--suave), border-radius .35s, background .35s, box-shadow .35s; }   /* cresce por transform, não por largura */
.cursor.ativo { opacity: 1; }
.cursor.sobre i { transform: scale(1.75); background: rgba(239, 255, 244, .12); box-shadow: inset 0 0 0 1px rgba(239, 255, 244, .9); }
.cursor.mira i { border-radius: 3px; transform: scale(1.62); box-shadow: inset 0 0 0 .7px rgba(125, 255, 176, .9); mix-blend-mode: normal; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------------------------------------------------------------- brilho nas cartas (a luz segue o cursor) */
.carta a { position: relative; overflow: hidden; }
.carta a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%), linear-gradient(115deg, rgba(125, 255, 176, 0) 30%, rgba(125, 255, 176, .18) 48%, rgba(25, 227, 208, .14) 52%, rgba(125, 255, 176, 0) 70%) var(--gx, 50%) 0 / 260% 100%; mix-blend-mode: soft-light; }
.carta a:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- a citação: as palavras acendem, e Sêneca gira enquanto se rola */
.pal { color: rgba(239, 255, 244, calc(.2 + .8 * var(--luz, 1))); transition: color .25s; }
.citacao.com-giro { display: block; min-height: 0; height: 240vh; }
.citacao-palco { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.citacao.com-giro .citacao-palco { position: sticky; top: 0; height: 100svh; }
/* o render do busto tem o próprio fundo (verde quase preto, com um halo no alto): as bordas do vídeo somem num degradê
   (esquerda, alto e baixo) para ele se fundir com a mata da seção em vez de parecer uma imagem recortada */
.citacao-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; opacity: 0; transition: opacity .6s; transform: translateX(20%) scale(.84);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%); mask-composite: intersect; }
.citacao-video.viva { opacity: 1; }
.citacao-palco:has(.citacao-video.viva) .citacao-img { opacity: 0; }

/* ---------------------------------------------------------------- travessia: o filme continua pela colunata até as oito relíquias */
.mergulho.com-travessia { height: 1100vh; }
.travessia-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.travessia-video.viva.aqui { opacity: 1; }
.etapa.e4 { left: var(--margem); top: calc(var(--barra) + 8vh); width: min(640px, 80vw); display: grid; gap: 16px; color: var(--tinta); }
.etapa.e4 h2, .etapa.e5 h2 { text-shadow: 0 1px 30px rgba(243, 247, 239, .6); }
.etapa.e5 { right: var(--margem); top: calc(var(--barra) + 8vh); width: min(560px, 80vw); display: grid; gap: 14px; color: var(--tinta); text-align: right; justify-items: end; }
.etapa.e5 p:last-child { color: var(--tinta-2); font-size: 18px; }
.etapa.e6 { left: 50%; bottom: 6vh; transform: translate(-50%, calc((1 - var(--o, 0)) * 26px)); width: min(760px, 90vw); text-align: center; display: grid; gap: 10px; color: var(--tinta); }
.etapa.e6 p { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--link); }
.etapa.e4 .olho, .etapa.e5 .olho { color: var(--link); }
.reliquias-rotulos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.reliquias-rotulos li { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s; will-change: transform, opacity; }
.reliquias-rotulos li.v { opacity: 1; }
.reliquias-rotulos a { display: inline-flex; align-items: center; gap: 8px; translate: -50% -100%; padding: 7px 8px 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(11, 31, 21, .5), inset 0 0 0 1px rgba(11, 31, 21, .08); text-decoration: none; color: var(--tinta); white-space: nowrap; transition: transform .35s var(--suave), background .3s; }
.reliquias-rotulos a::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: linear-gradient(rgba(11, 31, 21, .5), transparent); }
.reliquias-rotulos .rr-nome { font-family: var(--serifa); font-weight: 600; font-size: 19px; line-height: 1; }
.reliquias-rotulos .chip { font-size: 10px; padding: 4px 8px; }
.reliquias-rotulos.clicavel { pointer-events: none; }
.reliquias-rotulos.clicavel a { pointer-events: auto; }
.reliquias-rotulos.clicavel a:hover, .reliquias-rotulos.clicavel a:focus-visible { background: #fff; transform: translateY(-4px); }
@media (max-width: 760px) { .citacao.com-giro .citacao-video { transform: translateY(-34%) scale(1.25); } .citacao.com-giro .citacao-texto { padding-top: 50vh; } }
@media (max-width: 760px) { .reliquias-rotulos .rr-nome { font-size: 15px; } .reliquias-rotulos .chip { display: none; } .etapa.e5 { text-align: left; justify-items: start; left: var(--margem); right: auto; } }
/* ---------------------------------------------------------------- a faixa: os nomes das portas correndo de lado com a rolagem */
.faixa { background: var(--papel); color: var(--tinta); overflow: hidden; padding: clamp(10px, 3vh, 34px) 0; border-top: 1px solid var(--fio-claro); border-bottom: 1px solid var(--fio-claro); }
.faixa-trilho { display: flex; align-items: center; gap: .35em; width: max-content; font-family: var(--serifa); font-size: clamp(54px, 9vw, 150px); line-height: 1; white-space: nowrap; transform: translate3d(var(--fx, 0px), 0, 0); will-change: transform; }
.faixa-trilho span { font-weight: 400; letter-spacing: -.01em; }
.faixa-trilho span.vazada { color: transparent; -webkit-text-stroke: 1.2px var(--tinta); font-style: italic; font-weight: 300; }
.faixa-trilho i { font-style: normal; font-size: .3em; color: var(--link); }
/* ---------------------------------------------------------------- leitura: capitular */
article.prosa > .assinatura + h2 + p::first-letter { font-family: var(--serifa); font-weight: 600; float: left; font-size: 4.2em; line-height: .82; margin: .06em .1em 0 0; color: var(--link); }
/* ---------------------------------------------------------------- o papel de mármore: veios bem leves e grão; perto do cursor, uma luz rasante revela os veios e, entre eles, letras gregas gravadas */
.secao-papel { position: relative; isolation: isolate; background-color: var(--papel); background-image: url("/midia/papel.webp"); background-size: 1024px; }
.conta.secao-papel { background-color: var(--papel-2); background-blend-mode: multiply; }
.secao-papel { --forte: none; }   /* os veios fortes só são baixados quando o ponteiro entra pela primeira vez numa seção clara (base.js põe .luz) */
.secao-papel.luz { --forte: url("/midia/papel-forte.webp"); }
.secao-papel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cg%20font-family%3D%22Palatino%20Linotype%2CBook%20Antiqua%2CPalatino%2CGeorgia%2Cserif%22%20font-style%3D%22italic%22%20font-size%3D%2258%22%20fill%3D%22%230B1F15%22%20fill-opacity%3D%22.16%22%3E%3Ctext%20x%3D%2230%22%20y%3D%2292%22%3E%CF%83%CF%84%CE%BF%CE%AC%3C%2Ftext%3E%3Ctext%20x%3D%22380%22%20y%3D%22150%22%3E%CE%BB%CF%8C%CE%B3%CE%BF%CF%82%3C%2Ftext%3E%3Ctext%20x%3D%2280%22%20y%3D%22288%22%3E%E1%BD%91%CE%B3%CE%AF%CE%B5%CE%B9%CE%B1%3C%2Ftext%3E%3Ctext%20x%3D%22400%22%20y%3D%22372%22%3E%CF%86%CF%8D%CF%83%CE%B9%CF%82%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22470%22%3E%E1%BC%80%CF%81%CE%B5%CF%84%CE%AE%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22560%22%3E%E1%BC%80%CE%B3%CE%BF%CF%81%CE%AC%3C%2Ftext%3E%3Ctext%20x%3D%22420%22%20y%3D%2240%22%3E%CF%83%CE%BF%CF%86%CE%AF%CE%B1%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 640px, var(--forte) 0 0 / 1024px; -webkit-mask-image: radial-gradient(380px circle at var(--lx, -999px) var(--ly, -999px), #000 0%, rgba(0, 0, 0, .45) 45%, transparent 72%); mask-image: radial-gradient(380px circle at var(--lx, -999px) var(--ly, -999px), #000 0%, rgba(0, 0, 0, .45) 45%, transparent 72%); }
@media (pointer: coarse) { .secao-papel::after { display: none; } }

/* ---------------------------------------------------------------- as seções se empilham como folhas, com cantos arredondados */
:root { --curva: clamp(22px, 3vw, 44px); }
.portas { padding-bottom: var(--curva); }
.citacao, .quem, .rodape { border-radius: var(--curva) var(--curva) 0 0; margin-top: calc(-1 * var(--curva)); position: relative; }
.citacao { z-index: 2; } .quem { z-index: 3; } .faixa, .secao-lista, .conta { position: relative; z-index: 3; } .rodape { z-index: 4; overflow: clip; }
.citacao { box-shadow: 0 -30px 60px -40px rgba(2, 16, 9, .5); } .quem, .rodape { box-shadow: 0 -24px 50px -36px rgba(2, 16, 9, .55); }

/* ---------------------------------------------------------------- títulos que sobem palavra por palavra */
.revela .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.revela .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--suave); transition-delay: calc(var(--k, 0) * 55ms); }
.revela.visto .w > span { transform: none; }

/* ---------------------------------------------------------------- a palavra STOA: uma luz que passa pelo mármore */
.palavra-letras { background: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 58%) -60% 0 / 220% 100% no-repeat, var(--marmore) 50% 40% / cover #D6E0D8; -webkit-background-clip: text; background-clip: text; animation: varre 9s var(--suave) infinite; }
@keyframes varre { 0%, 55% { background-position: 160% 0, 50% 40%; } 100% { background-position: -60% 0, 50% 40%; } }

/* ---------------------------------------------------------------- páginas internas: outras notícias, aviso das portas fechadas, linha do tempo */
.mais-noticias { max-width: var(--max); margin: 0 auto; padding: 0 var(--margem) clamp(80px, 12vh, 140px); }
.mais-noticias h2 { font-family: var(--serifa); font-weight: 400; font-size: clamp(32px, 3.4vw, 52px); margin-bottom: 24px; }
.avise { display: grid; gap: 10px; margin: 30px 0 10px; padding: 26px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--fio-claro), 0 24px 50px -36px rgba(11, 31, 21, .4); }
.avise > label[for] { font-family: var(--serifa); font-size: 26px; font-weight: 600; line-height: 1.2; }
.avise-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.avise-linha input { flex: 1 1 220px; font: inherit; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(11, 31, 21, .22); background: #fff; color: var(--tinta); }   /* só o e-mail: a caixa de aceite é outro input dentro do .avise */
.avise-linha input:focus { outline: 2px solid var(--link); outline-offset: 2px; border-color: transparent; }
.avise .retorno { font-size: 15px; min-height: 1.4em; margin: 0; }
.avise .retorno[data-tom="erro"] { color: var(--cuidado); }
.avise-nota, .nota-dados { font-size: 14px !important; line-height: 1.5 !important; color: var(--tinta-3); margin: 0 !important; max-width: 46em; }
.avise-nota a, .nota-dados a { color: var(--link); }
.linha-tempo { position: relative; list-style: none !important; padding-left: 0 !important; margin: 28px 0 10px; display: grid; gap: 4px; }
.linha-tempo::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--link), rgba(10, 122, 74, .15)); }
.linha-tempo li { position: relative; padding: 0 0 18px 38px !important; margin: 0 !important; }
.linha-tempo li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--link); transition: background .5s, box-shadow .5s; }
.linha-tempo li.visto::before { background: var(--link); box-shadow: 0 0 0 6px rgba(10, 122, 74, .12); }
.linha-tempo .ano { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: 4px; }
.linha-tempo p { margin: 0 !important; }
/* ---------------------------------------------------------------- caminho de volta nas páginas internas */
.volta { translate: var(--mx, 0) var(--my, 0); display: inline-flex; align-items: center; gap: .55em; width: fit-content; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--texto-2); padding: 9px 16px 9px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fio-escuro); transition: color .3s, box-shadow .3s; }
.volta:hover, .volta:focus-visible { color: var(--menta); box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .6); }
.volta:hover > .seta-volta, .volta:focus-visible > .seta-volta { transform: translateX(-4px); }
.cabeca-texto .volta { margin-bottom: 4px; }
/* ---------------------------------------------------------------- termos e privacidade */
.legal h2 { font-size: clamp(24px, 2.2vw, 30px); margin-top: 2em; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal li { margin-bottom: .6em; }
.legal li strong { font-weight: 600; }
.preencher { font-family: var(--mono); font-size: .8em; font-weight: 500; letter-spacing: .02em; color: var(--cuidado); background: rgba(138, 58, 32, .1); box-shadow: inset 0 0 0 1px rgba(138, 58, 32, .35); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.legal .aviso-rascunho { margin-bottom: 28px; }
/* ---------------------------------------------------------------- o trailer */
.trailer { position: relative; z-index: 3; background: var(--mata); color: var(--texto); border-radius: var(--curva) var(--curva) 0 0; margin-top: calc(-1 * var(--curva)); padding: clamp(84px, 14vh, 170px) max(var(--margem), calc((100% - 1680px) / 2)) clamp(100px, 16vh, 190px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: clamp(32px, 5vw, 90px); align-items: center; box-shadow: 0 -24px 50px -36px rgba(2, 16, 9, .55); overflow: clip; }
.trailer::before { content: ""; position: absolute; inset: auto -10% -30% 30%; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(18, 74, 54, .9), rgba(2, 16, 9, 0) 70%); pointer-events: none; }
.trailer-texto { position: relative; display: grid; gap: 20px; justify-items: start; }
.trailer-texto > p:not(.olho):not(.trailer-creditos) { color: var(--texto-2); max-width: 32em; text-wrap: pretty; }
.trailer-creditos { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-top: 6px; }
.trailer-palco { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--musgo); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--fio-escuro); }
.trailer-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--texto); }
.trailer-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--suave), filter .6s; }
.trailer-play:hover img, .trailer-play:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.trailer-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 16, 9, .55), rgba(2, 16, 9, 0) 50%); pointer-events: none; }
.play-anel, .play-txt { position: relative; z-index: 1; }
.play-anel { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; color: var(--menta); background: rgba(2, 16, 9, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .7), 0 0 0 0 rgba(125, 255, 176, .35); animation: anel 2.6s var(--suave) infinite; transition: transform .5s var(--suave), background .3s; }
.play-anel svg { width: 34px; height: 34px; margin-left: 4px; }
.trailer-play:hover .play-anel { transform: scale(1.08); background: rgba(2, 16, 9, .7); }
@keyframes anel { 0% { box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .7), 0 0 0 0 rgba(125, 255, 176, .4); } 100% { box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .7), 0 0 0 26px rgba(125, 255, 176, 0); } }
.play-txt { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto); text-shadow: var(--sombra-texto); }
.trailer-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.trailer-video[hidden] { display: none; }
.trailer.tocando .trailer-play { display: none; }
/* "em breve": o cartaz apagado, sem player, com o rótulo em mono e uma linha em itálico por cima */
.trailer-palco.em-breve > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.36) saturate(.7) contrast(1.05); }
.trailer-palco.em-breve::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(2, 16, 9, 0) 30%, rgba(2, 16, 9, .6) 100%); pointer-events: none; }
.trailer-breve { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.trailer-breve .olho { padding: 9px 16px; border-radius: 999px; letter-spacing: .22em; background: rgba(2, 16, 9, .55); box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.trailer-breve p:last-child { font-family: var(--serifa); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; color: var(--texto); max-width: 16em; text-wrap: balance; text-shadow: var(--sombra-texto); }
@media (max-width: 1080px) { .trailer { grid-template-columns: 1fr; gap: 36px; } }
/* ---------------------------------------------------------------- a veia: um fio de mármore que se enche de menta conforme a página rola */
.veia { position: fixed; left: 7px; top: calc(var(--barra) + 18px); bottom: 18px; width: 12px; z-index: 62; pointer-events: none; color: var(--texto); transition: color .45s, opacity .4s; }
.veia svg { width: 100%; height: 100%; overflow: visible; }
.veia path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.veia .fundo { stroke: currentColor; stroke-opacity: .16; stroke-width: 1.2; }
.veia .cheio { stroke: var(--menta); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rolado, 0)); filter: drop-shadow(0 0 4px rgba(125, 255, 176, .75)); }
.veia .ponta { fill: var(--menta); filter: drop-shadow(0 0 6px var(--menta)); }
.veia[data-tema="claro"] { color: var(--tinta); }
.veia[data-tema="claro"] .cheio { stroke: var(--link); filter: none; }
.veia[data-tema="claro"] .ponta { fill: var(--link); filter: none; }
body.menu-aberto .veia, .abrindo .veia { opacity: 0; }
@media (max-width: 760px) { .veia { left: 0; right: 0; top: var(--barra); bottom: auto; width: auto; height: 9px; } }
/* ---------------------------------------------------------------- as cartas respiram luz; a racha acende em menta quando o ponteiro passa */
.carta a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(125, 255, 176, 0), inset 0 -40px 70px -50px rgba(125, 255, 176, 0); animation: respira 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s); }
@keyframes respira { 50% { box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .5), inset 0 -40px 70px -50px rgba(125, 255, 176, .4); } }
.carta-img { position: relative; }
.racha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.racha path { fill: none; stroke: var(--menta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 5px rgba(125, 255, 176, .95)); transition: stroke-dashoffset 1.1s var(--suave), opacity .35s; }
.racha .ramo { stroke-width: 1; transition-delay: .4s; }
.carta a:hover .racha path, .carta a:focus-visible .racha path, .carta.visto .racha path { stroke-dashoffset: 0; opacity: .95; }
.carta a:hover .racha .ramo, .carta a:focus-visible .racha .ramo, .carta.visto .racha .ramo { opacity: .7; }
/* ---------------------------------------------------------------- o segredo: os esporos formam a palavra grega */
.segredo { position: fixed; inset: 0; z-index: 97; pointer-events: none; opacity: 0; transition: opacity .9s ease; background: radial-gradient(ellipse at 50% 40%, rgba(6, 38, 26, .82), rgba(2, 16, 9, .9) 70%); display: grid; place-content: end center; padding: 0 var(--margem) 11vh; }
.segredo.ativo { opacity: 1; }
.segredo canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.segredo-legenda { position: relative; display: grid; gap: 10px; text-align: center; justify-items: center; color: var(--texto); text-shadow: var(--sombra-texto); opacity: 0; transform: translateY(10px); transition: opacity .9s var(--suave) .2s, transform .9s var(--suave) .2s; }
.segredo.ativo .segredo-legenda { opacity: 1; transform: none; transition-delay: 1.6s; }
.segredo-legenda .latim { font-family: var(--serifa); font-style: italic; font-weight: 300; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.1; }
/* ---------------------------------------------------------------- menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .surge { opacity: 1; transform: none; }
  .carta a::before, .play-anel { animation: none; }
  .veia .cheio { transition: none; }
}
.calmo .mergulho { height: auto; }
.calmo .palco { position: relative; height: 100svh; }
.calmo .etapa { display: none !important; }

.calmo .etapa.e3, .calmo .etapa.e4, .calmo .etapa.e5, .calmo .etapa.e6, .calmo .reliquias-rotulos, .calmo .travessia-video, .calmo .trilho { display: none; }
.calmo .citacao.com-giro { height: auto; } .calmo .citacao.com-giro .citacao-palco { position: relative; }
.calmo .abertura { display: none; }
@media (prefers-reduced-motion: reduce) { .palavra-letras { animation: none; } .revela .w > span { transform: none; } }