/* Floratta · V3 da proposta (iPhone primeiro) · rodada 8.
   Sem a classe .coreo a página é um documento normal e legível (sem JS, sem WebGL ou com o iPhone deitado).
   Com .coreo: palcos presos (sticky 100svh), trevo WebGL fixo atrás do texto, etapas controladas pelo app.js. */

/* Satoshi: arquivo WEB oficial (variável 300–900), licença FFL da Fontshare/ITF, uso web comercial permitido */
@font-face { font-family: "Satoshi"; font-weight: 300 900; font-style: normal; font-display: swap; src: url(assets/fonts/Satoshi-Variable.woff2) format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500.woff2) format("woff2"); }

:root {
  --papel: #f3f1ea; --papel-2: #e9e6dc; --tinta: #10201e; --tinta-2: #3d4b48;
  --verde: #134e4a; --noite: #0c2724; --noite-2: #133430; --ouro: #dcc06e; --ouro-tinta: #7d5f17;
  --creme: #f3f1ea; --creme-2: #c9cfc8; --creme-3: #a9b8b3; --fio: rgba(243, 241, 234, .22); --fio-t: rgba(16, 32, 30, .22);
  --sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --m: max(16px, env(safe-area-inset-left, 0px));
  --md: max(16px, env(safe-area-inset-right, 0px));
  --u: calc((100vw - 32px) / 343);
  --cab: 58px;
  --reserva: calc(78px + env(safe-area-inset-bottom, 0px));
  --t-h1: calc(60 * var(--u));
  --t-h2: calc(38 * var(--u));
  --t-h3: calc(26 * var(--u));
  --t-b1: calc(18 * var(--u));
  --t-b2: max(16px, calc(16 * var(--u)));
  --t-mono: 12.5px;
  --t-bt: 13px;
  --peso-tit: 640;   /* Halyard Display 500/600 da Oryzo lê mais grosso que a Satoshi no mesmo número */
  --peso-sub: 600;
  --svh: 1svh;
  color-scheme: dark;
}
@supports not (height: 1svh) { :root { --svh: 1vh; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--noite); overflow-x: clip; touch-action: manipulation; }
body { margin: 0; background: var(--noite); color: var(--creme); font-family: var(--sans); font-weight: 400; font-size: var(--t-b2); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, table { margin: 0; }
ul, ol { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }
.claro :focus-visible { outline-color: var(--ouro-tinta); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: 12px; z-index: 50; background: var(--ouro); color: var(--noite); padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; transform: translateY(calc(-100% - 40px)); }
.pular:focus { transform: none; }
/* iPhone deitado: documento com escala de leitura fixa (a unidade da coreografia cresce com a largura) */
html.deitado { --u: 1.15px; }
html.deitado .carta { width: 64%; }
.so-coreo { display: none; }
.coreo .so-coreo { display: block; }

/* ---------- tipografia ---------- */
.mono { font-family: var(--mono); font-weight: 500; font-size: var(--t-mono); line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; }
.rotulo { font-size: var(--t-mono); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.h1 { font-weight: var(--peso-tit); text-transform: uppercase; line-height: .86; letter-spacing: -.014em; font-size: var(--t-h1); }
.h1 .ln { display: block; white-space: nowrap; }
.h2 { font-weight: var(--peso-tit); text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: var(--t-h2); }
.h2 .ln { display: block; }
.h3 { font-weight: var(--peso-sub); text-transform: uppercase; line-height: 1.07; letter-spacing: -.005em; font-size: var(--t-h3); }
.gigante { font-weight: var(--peso-tit); line-height: .86; letter-spacing: -.02em; font-size: calc(62 * var(--u)); }
.gigante .ln { display: block; white-space: nowrap; }
.body1 { font-size: var(--t-b1); line-height: 1.22; }
.cena:not(.claro), .fluxo:not(.claro) { color: var(--creme); }
.claro { color: var(--tinta); }

/* ---------- cabeçalho ---------- */
.cab { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--cab); padding: max(12px, env(safe-area-inset-top, 0px)) var(--md) 0 var(--m); display: flex; align-items: flex-start; justify-content: space-between; color: var(--creme); pointer-events: none; transition: color .5s; }
.cab > * { pointer-events: auto; }
/* faixa de fundo: aparece só quando há texto em fluxo ou um palco saindo por baixo do cabeçalho */
.cab-fundo { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cab) + 30px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, var(--noite) 0%, var(--noite) 58%, rgba(12, 39, 36, 0) 100%); opacity: 0; transition: opacity .35s; pointer-events: none !important; }
body.cab-claro .cab-fundo { background: linear-gradient(180deg, var(--papel) 0%, var(--papel) 58%, rgba(243, 241, 234, 0) 100%); }
body.com-faixa .cab-fundo, html:not(.coreo) .cab-fundo { opacity: 1; }
.cab-marca { position: relative; font-size: var(--t-mono); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 33px; }
body.cab-claro .cab { color: var(--tinta); }
.pilula-menu { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 0 13px 0 9px; border: 1px dashed currentColor; border-radius: 999px; background: transparent; color: inherit; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pilula-menu::after { content: ""; position: absolute; inset: -6px -4px; } /* alvo de toque ≥ 44 px */
.mini-trevo { width: 15px; height: 15px; display: block; overflow: visible; }
.mini-trevo path { fill: currentColor; opacity: .38; transition: opacity .5s, fill .5s; fill-rule: evenodd; }
.mini-trevo path.on { opacity: 1; fill: var(--ouro); }
body.cab-claro .mini-trevo path.on { fill: var(--ouro-tinta); }
.mini-trevo.escondido path { opacity: 0 !important; }
.rotulo-cena { position: absolute; left: var(--m); top: calc(max(12px, env(safe-area-inset-top, 0px)) + 44px); height: 30px; display: none; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(19, 52, 48, .72); border: 1px solid var(--fio); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .4s; pointer-events: none; }
.rotulo-cena.on { opacity: 1; }
.rotulo-cena span { display: inline-block; }
body.cab-claro .rotulo-cena { background: rgba(233, 230, 220, .85); border-color: rgba(16, 32, 30, .18); }

/* ---------- menu (gaveta pela direita) ---------- */
.veu { position: fixed; inset: 0; z-index: 25; background: rgba(12, 39, 36, .75); opacity: 0; pointer-events: none; transition: opacity .18s; }
.gaveta { position: fixed; z-index: 26; top: 0; right: 0; bottom: 0; width: 72%; max-width: 420px; background: var(--noite); color: var(--creme); padding: calc(var(--cab) + 40px) 22px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: space-between; transform: translate3d(101%, 0, 0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); visibility: hidden; overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.gaveta ul { list-style: none; display: grid; gap: 4px; }
.gaveta a { display: block; font-size: clamp(24px, calc(31 * var(--u)), 40px); overflow-wrap: anywhere; font-weight: var(--peso-sub); line-height: 1.15; text-transform: uppercase; text-decoration: none; padding: 4px 0; touch-action: manipulation; }
.gaveta-pe { color: var(--creme-3); }
body.menu-aberto .veu { opacity: 1; pointer-events: auto; }
body.menu-aberto .gaveta { transform: none; visibility: visible; }
body.menu-aberto .cab { color: var(--creme); }
html.menu-aberto, body.menu-aberto { overflow: hidden; overscroll-behavior: none; }
.js .gaveta:not(.pronta) { display: none; }
html:not(.js) .pilula-menu { display: none; }
/* sem JavaScript o ajuste de título por largura não roda: títulos quebram linha normalmente */
html:not(.js) .h1 .ln, html:not(.js) .gigante .ln { white-space: normal; }
html:not(.js) .h1 { font-size: calc(50 * var(--u)); }

/* ---------- camadas fixas ---------- */
.fx { display: none; }
#alvo { display: none; }
.coreo .fx { display: block; }
.coreo .fx > * { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; }
/* fundo: gradiente de reserva em CSS; a luz de cada ato é desenhada num canvas pequeno (90 px) esticado pelo compositor */
#fundo { z-index: 0; background: radial-gradient(90% 45% at 50% 112%, rgba(220, 192, 110, .09), rgba(220, 192, 110, 0) 70%), radial-gradient(120% 80% at 50% 46%, #143c37 0%, var(--noite-2) 38%, var(--noite) 100%); }
#cv-luz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fundo::after, #papel::after { content: ""; position: absolute; inset: 0; background-image: var(--ruido); background-size: 128px 128px; opacity: .08; mix-blend-mode: overlay; }
#papel::after { opacity: .05; mix-blend-mode: multiply; }
#cv-noite, #cv-noite2 { z-index: 1; transition: opacity .5s; }
#papel { z-index: 2; background: var(--papel); opacity: var(--pa, 1); clip-path: circle(var(--pr, 150%) at var(--px, 50%) var(--py, 50%)); -webkit-clip-path: circle(var(--pr, 150%) at var(--px, 50%) var(--py, 50%)); }
#papel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#tras { z-index: 3; }
#gl { z-index: 5; }
.coreo .fx > #gl-reserva { z-index: 5; width: 100px; height: auto; opacity: 0; transform-origin: 0 0; transition: opacity .3s; }
.coreo .fx > #gl-reserva.on { opacity: 1; }
#cv-frente { z-index: 6; }
#etiquetas { z-index: 7; }
.coreo #alvo { display: block; position: fixed; z-index: 9; left: 0; top: 0; width: 10px; height: 10px; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 50%; touch-action: pan-y; pointer-events: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.coreo #alvo.ativo { pointer-events: auto; }

/* sombra de contato */
.sombra { position: absolute; left: 0; top: 0; width: 100px; height: 30px; margin: -15px 0 0 -50px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0)); opacity: 0; }

/* visor da prévia */
.visor { --area: calc(100 * var(--svh) - var(--cab) - var(--reserva) - 172px); --vh: min(calc(56vw * 844 / 390), var(--area)); position: absolute; left: 50%; top: calc(var(--cab) + 36px + (var(--area) - var(--vh)) / 2); height: var(--vh); width: calc(var(--vh) * 390 / 844); transform: translate(-50%, 0) scale(.94); opacity: 0; transition: opacity .6s, transform .9s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; /* uma camada só: a expansão de 2,6x não re-rasteriza as telas */ }
.visor[data-st="on"] { opacity: 1; transform: translate(-50%, 0) scale(1); }
.visor.expande { transform: translate(-50%, 0) scale(2.6); opacity: 0; transition: opacity 1s .1s, transform 1s cubic-bezier(.65, 0, .35, 1); }
.visor::before { content: ""; position: absolute; inset: -10px; border: 1px dashed rgba(220, 192, 110, .55); border-radius: 4px; }
.visor-telas { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--papel); clip-path: inset(0 0 100% 0); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1); }
.visor.revela .visor-telas { clip-path: inset(0 0 0 0); }
.vt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1); }
.vt.on { clip-path: inset(0 0 0 0); }
.vt-0 { clip-path: inset(0 0 0 0); }
.cortina { position: absolute; top: 0; bottom: 0; width: 2px; left: 100%; background: var(--ouro); box-shadow: 0 0 12px rgba(220, 192, 110, .8); opacity: 0; }
.cortina.corre { animation: cortina .7s cubic-bezier(.65, 0, .35, 1); }
@keyframes cortina { 0% { left: 100%; opacity: 1; } 100% { left: -2px; opacity: 1; } }
.vaga-abs { position: absolute; }
#v-pouso { left: 50%; top: 45.26%; width: 68%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.cruz, .canto { position: absolute; display: block; }
.cruz { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: .55; }
.cruz::before, .cruz::after { content: ""; position: absolute; background: var(--ouro); }
.cruz::before { left: 5.5px; top: 0; width: 1px; height: 12px; }
.cruz::after { top: 5.5px; left: 0; height: 1px; width: 12px; }
.visor.revela .cruz { opacity: 0; transition: opacity .4s; }
.canto { width: 14px; height: 14px; border-color: var(--ouro); border-style: solid; border-width: 0; }
.canto.c1 { left: -10px; top: -10px; border-left-width: 1.5px; border-top-width: 1.5px; }
.canto.c2 { right: -10px; top: -10px; border-right-width: 1.5px; border-top-width: 1.5px; }
.canto.c3 { left: -10px; bottom: -10px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.canto.c4 { right: -10px; bottom: -10px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* palavras e números gigantes (atrás do trevo, legíveis: creme 8:1 e ouro 7:1 sobre o fundo) */
.gig { position: absolute; left: 0; right: 0; top: calc(var(--cab) + (100 * var(--svh) - var(--cab) - var(--reserva)) * var(--gig-y, .53)); transform: translateY(-58%); text-align: center; font-weight: var(--peso-tit); text-transform: uppercase; line-height: .82; letter-spacing: -.02em; color: var(--creme); white-space: nowrap; }
.gig-num { font-size: min(64vw, 40 * var(--svh)); color: var(--creme-2); font-variant-numeric: tabular-nums; }
.gig-num .letras { display: inline-block; }
.gig-caminhos { font-size: calc(70 * var(--u)); color: var(--creme); --gig-y: .44 !important; }
.gig-num small { display: block; margin-bottom: .06em; transform: translateY(-1.2em); font-size: 13px; letter-spacing: .06em; color: var(--ouro); line-height: 1.2; }
.gig-nota .l { color: var(--ouro); }
.gig-nota.contorno .l { color: transparent; -webkit-text-stroke: 2px var(--ouro); transition: color .8s, -webkit-text-stroke-color .8s; }

/* folha de papel das fotos */
.folha { position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--papel-2); border-radius: 6px; opacity: 0; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }

/* etiquetas da constelação */
#etiquetas .etq { position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 999px; background: rgba(12, 39, 36, .78); border: 1px solid rgba(220, 192, 110, .45); color: var(--creme); font: 600 12px/1 var(--sans); white-space: nowrap; opacity: 0; transition: opacity .4s; }
#etiquetas.on .etq { opacity: 1; }

/* ---------- conteúdo: modo documento (sem coreografia) ---------- */
main { position: relative; z-index: 10; }
.cena, .fluxo { position: relative; }
.cena.claro, .fluxo.claro { background: var(--papel); }
.palco { padding: calc(var(--cab) + 28px) var(--md) 40px var(--m); display: flex; flex-direction: column; gap: 22px; }
.zona { display: flex; flex-direction: column; gap: 20px; }
.vaga { display: none; }
#v-hero { display: block; position: relative; }
.trevo-estatico { width: 62%; max-width: 280px; margin: 8px auto; }
.dica-toque { display: none; }
.coluna { max-width: 620px; margin: 0 auto; padding: 56px var(--md) 40px var(--m); }
.telas-base { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--md)) 0 calc(-1 * var(--m)); padding: 0 var(--md) 6px var(--m); scrollbar-width: none; }
.telas-base figure { flex: 0 0 58%; max-width: 240px; scroll-snap-align: start; }
.telas-base img { border-radius: 16px; aspect-ratio: 390 / 844; background: var(--papel-2); }
.telas-base figcaption { margin-top: 6px; font-size: 14px; color: var(--creme-2); }
.legenda-visor, .tracos-g { display: none; }
.gig, .visor, .folha { display: none; }
.coreo .gig, .coreo .visor, .coreo .folha { display: block; }

/* abertura */
.g-hero { display: flex; flex-direction: column; gap: 14px; }
.g-hero .rotulo { text-align: right; }
.carta { font-size: var(--t-b1); line-height: 1.22; margin-left: auto; width: 72%; }
.hero-base { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.cartao-hero { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 14px 14px 12px; border-radius: 4px; background: rgba(12, 39, 36, .93); color: var(--creme); text-decoration: none; width: min(100%, 210px); justify-content: space-between; }
.ch-tit { font-size: var(--t-mono); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.15; }
.ch-txt { font-size: 15px; line-height: 1.3; color: var(--creme-2); }
.ch-ver { color: var(--ouro); font-size: 13px; }
.hero-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mini-previa { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.mini-previa img { width: 74px; height: auto; aspect-ratio: 240 / 519; border-radius: 7px; border: 1.5px solid var(--ouro-tinta); box-shadow: 0 6px 18px rgba(16, 32, 30, .25); }
.mini-previa .mono { font-size: 12px; }
.role { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.role svg { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; padding: 2px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* cartões e blocos */
.cartao { background: rgba(19, 52, 48, .94); border: 1px solid rgba(243, 241, 234, .08); border-radius: 4px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cartao p { color: var(--creme-2); }
.cartao .tag-pro { color: var(--ouro); font-size: 12.5px; }
.achado { display: flex; flex-direction: column; gap: 8px; }
.achado .mono { color: var(--ouro); }
.pilula-rot { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ouro); color: var(--ouro); padding: 7px 11px; border-radius: 999px; }
.fonte { margin-top: 12px; color: var(--ouro); max-width: 30ch; }
.regua { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 4px; }
.rg { display: flex; gap: 4px; }
.rg i { width: 16px; height: 9px; border: 1px solid rgba(220, 192, 110, .6); border-radius: 2px; }
.regua .mono { color: var(--creme-3); }
.coreo [data-st="on"] .rg i { animation: acende .3s both; }
.rg6 i:nth-child(1) { animation-delay: .5s !important; } .rg6 i:nth-child(2) { animation-delay: .62s !important; } .rg6 i:nth-child(3) { animation-delay: .74s !important; }
.rg6 i:nth-child(4) { animation-delay: .86s !important; } .rg6 i:nth-child(5) { animation-delay: .98s !important; } .rg6 i:nth-child(6) { animation-delay: 1.1s !important; }
.rg5 i:nth-child(1) { animation-delay: 1.45s !important; } .rg5 i:nth-child(2) { animation-delay: 1.57s !important; } .rg5 i:nth-child(3) { animation-delay: 1.69s !important; }
.rg5 i:nth-child(4) { animation-delay: 1.81s !important; } .rg5 i:nth-child(5) { animation-delay: 1.93s !important; }
@keyframes acende { from { background: transparent; } to { background: var(--ouro); border-color: var(--ouro); } }
html:not(.coreo) .rg i { background: var(--ouro); }

/* seletor */
.seletor-topo { display: flex; flex-direction: column; gap: 6px; }
.coreo #caminhos .seletor-topo, .coreo #caminhos .pacote-info { align-items: center; text-align: center; }
.coreo #caminhos .preco, .coreo #caminhos .pilulas { justify-content: center; }
.coreo #caminhos .parc-barra { margin: 0 auto; }
.coreo #caminhos .z-base .body1 { text-align: center; }
.preco { font-weight: var(--peso-tit); font-size: calc(84 * var(--u)); line-height: .9; letter-spacing: -.02em; display: flex; align-items: flex-start; gap: .08em; font-variant-numeric: tabular-nums; }
.preco .moeda { font-size: .28em; margin-top: .22em; letter-spacing: 0; }
.odo { display: inline-flex; overflow: hidden; height: .9em; line-height: .9; }
.odo .dg { display: inline-block; height: .9em; overflow: hidden; }
.odo .fita { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.33, 1, .68, 1); }
.odo .fita span { height: .9em; line-height: .9em; }
.odo .pt { display: inline-block; }
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pil { position: relative; display: inline-flex; }
.pil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pil span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--fio); font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; transition: border-color .3s, box-shadow .3s, color .3s; }
.pil span em { font-style: normal; color: var(--ouro); margin-left: .35em; }
.pil input:checked + span { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro), 0 0 18px rgba(220, 192, 110, .35); }
.pil input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 3px; }
.pil::after { content: ""; position: absolute; inset: -3px 0; }
/* convite (sem escolher pela Mari): a pílula recomendada pulsa duas vezes */
.pil-rec.convite span { animation: convite 1.3s cubic-bezier(.33, 1, .68, 1) 2; }
@keyframes convite { 0% { box-shadow: 0 0 0 0 rgba(220, 192, 110, .55); border-color: var(--ouro); } 70% { box-shadow: 0 0 0 12px rgba(220, 192, 110, 0); border-color: var(--ouro); } 100% { box-shadow: 0 0 0 0 rgba(220, 192, 110, 0); } }
.dica-pil { color: var(--creme-3); margin-top: 4px; font-size: 12px; transition: opacity .4s; }
html.escolheu .dica-pil { visibility: hidden; }
html:not(.js) .pilulas, html:not(.js) .dica-pil { display: none; }
.pacote-info { display: flex; flex-direction: column; gap: 8px; }
.pac-para { color: var(--creme-2); }
.parcelas { margin-top: 4px; }
.parc-barra { display: flex; gap: 3px; width: calc(var(--w, 1) * 100%); transition: width .5s cubic-bezier(.33, 1, .68, 1); }
.ps { height: 30px; border-radius: 3px; background: linear-gradient(180deg, #e7cf86, #c9a752); color: var(--noite); display: flex; align-items: center; justify-content: center; padding: 0 6px; overflow: hidden; transition: flex-grow .5s cubic-bezier(.33, 1, .68, 1); min-width: 0; }
.ps:nth-child(2) { background: linear-gradient(180deg, #d9bf72, #b8963f); }
.ps:nth-child(3) { background: linear-gradient(180deg, #ccb065, #a98835); }
.ps b { font-family: var(--mono); font-weight: 500; font-size: 13px; white-space: nowrap; letter-spacing: -.01em; }
.parc-leg { margin-top: 7px; color: var(--creme-2); font-size: 13px; }
.pac-prazo { color: var(--ouro); font-size: 13px; }

/* ficha (O que inclui): duas colunas de especificação, rótulo mono, linha de uma frase, divisória tracejada */
.ficha-g + .ficha-g { margin-top: 28px; }
.coreo .ficha-g + .ficha-g { margin-top: 0; }
.ficha { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.28; }
.ficha caption { caption-side: top; text-align: left; color: var(--ouro); padding-bottom: 8px; }
.ficha thead th { font: 600 13px/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase; text-align: left; vertical-align: bottom; padding: 0 6px 8px; color: var(--creme); }
.ficha thead th b { display: block; font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .02em; color: var(--ouro); margin-top: 3px; }
.ficha thead th em { display: block; font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--ouro); text-transform: uppercase; margin-top: 2px; }
.ficha thead td, .ficha thead th { border-bottom: 1px solid var(--fio); }
.ficha thead tr > :first-child { width: 44%; }
.ficha thead tr > :nth-child(2) { width: 25%; }
.ficha tbody th { text-align: left; font-weight: 500; padding: 9px 8px 9px 0; vertical-align: top; color: var(--creme); }
.ficha tbody th small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--creme-2); font-weight: 400; margin-top: 3px; }
.ficha tbody td { padding: 9px 6px; vertical-align: top; color: var(--creme-2); font-size: 14px; }
.ficha tbody td.num { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.ficha tbody td.num span { display: block; white-space: nowrap; }
.ficha tbody tr + tr > * { border-top: 1px dashed var(--fio); }
.ficha .sim { display: inline-block; width: 11px; height: 11px; margin-top: 4px; border-radius: 50% 50% 50% 0; background: var(--ouro); transform: rotate(-45deg); }
.ficha .nao { display: inline-block; width: 12px; height: 1.5px; margin-top: 9px; background: var(--creme-3); }
/* coluna do caminho em destaque (mostrado no seletor); contraste igual nos dois */
html[data-escolha="essencial"] .ficha [data-p="essencial"], html[data-escolha="profissional"] .ficha [data-p="profissional"] { box-shadow: inset 0 -2px 0 var(--ouro); }
/* lista de especificação (Em todos os caminhos, Para começar) */
.spec { list-style: none; display: grid; }
.spec li { padding: 9px 0 9px 22px; position: relative; font-size: 15px; line-height: 1.32; }
.spec li + li { border-top: 1px dashed var(--fio); }
.spec li::before { content: ""; position: absolute; left: 1px; top: calc(9px + .42em); width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: var(--ouro); transform: rotate(-45deg); }
.spec-nao li { color: var(--creme-2); }
.spec-nao li::before { border-radius: 0; width: 10px; height: 1.5px; top: calc(9px + .66em); transform: none; background: var(--creme-3); }
.nao-incluso .h3 { font-size: calc(22 * var(--u)); margin-bottom: 6px; }
.claro .spec li + li { border-top-color: var(--fio-t); }
.claro .spec li::before { background: var(--ouro-tinta); }
.comeco { counter-reset: c; }
.comeco li { counter-increment: c; padding-left: 30px; font-size: var(--t-b1); line-height: 1.28; }
.spec.comeco li::before, .claro .spec.comeco li::before { content: counter(c); font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--ouro-tinta); background: none; width: auto; height: auto; transform: none; border-radius: 0; top: calc(9px + .2em); }
.sub-comecar { color: var(--ouro-tinta); margin-top: 10px; }

/* para somar */
.extra { display: flex; flex-direction: column; gap: 10px; }
.extra-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.extra-v { font-size: var(--t-b1); font-weight: 600; white-space: nowrap; color: var(--ouro); }
.extra-cab .h3 { min-width: 0; }
.pilha-topo { display: flex; flex-direction: column; gap: 16px; }
.pilha-topo .body1 { max-width: 26ch; }
.extra p.linhas { color: var(--creme-2); font-size: 15.5px; line-height: 1.42; }
.controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
html:not(.js) .controles, html:not(.js) .amostras, html:not(.js) .copiar, html:not(.js) .r-escolha { display: none; }
/* interruptor próprio (igual em todos os navegadores; continua sendo checkbox com role="switch") */
.chave { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; }
.chave input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: rgba(243, 241, 234, .14); border: 1px solid var(--fio); cursor: pointer; transition: background .25s, border-color .25s; }
.chave input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--creme-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.33, 1, .68, 1), background .25s; }
.chave input:checked { background: rgba(220, 192, 110, .3); border-color: var(--ouro); }
.chave input:checked::after { transform: translateX(18px); background: radial-gradient(circle at 35% 30%, #fff1c2, #dcc06e 50%, #a98835); }
.chave input:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.passo { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--fio); border-radius: 999px; padding: 2px; }
.passo button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: inherit; font: 500 20px/1 var(--sans); cursor: pointer; touch-action: manipulation; }
.passo button:disabled { opacity: .35; cursor: default; }
.passo output { min-width: 66px; text-align: center; font-family: var(--mono); font-size: 13px; text-transform: uppercase; }
.anel-leg { color: var(--ouro); }

/* cor do trevo */
.amostras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.amostras legend { float: left; margin-right: 4px; color: var(--creme-3); font-size: 12px; }
.amostra { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border: 1px solid var(--fio); border-radius: 999px; cursor: pointer; font-size: 14px; }
.amostra input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.amostra:has(input:checked) { border-color: var(--ouro); }
.amostra input:focus-visible ~ span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.sw { width: 26px; height: 26px; border-radius: 50%; display: block; }
.sw-ouro { background: radial-gradient(circle at 35% 30%, #fff1c2, #dcc06e 45%, #8a6a1c); }
.sw-verde { background: radial-gradient(circle at 35% 30%, #5fb3a4, #1d6e64 45%, #0a3531); }
.nao-incluso { margin-top: 28px; }
.coreo .nao-incluso { margin-top: 0; }

/* como acontece */
.etapas { list-style: none; display: grid; }
.etapa { display: flex; flex-direction: column; gap: 8px; }
.etapa .mono:first-child { color: var(--ouro-tinta); }
.etapa .linhas { color: var(--tinta-2); }
.rodada, .testes { color: var(--ouro-tinta); }
.prazo b { font-weight: 500; }
.prazo b.on { font-weight: 700; box-shadow: inset 0 -0.4em 0 rgba(220, 192, 110, .45); }

/* fechamento e rodapé */
.logo-caixa { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.logo-caixa img { width: 100%; }
#v-simbolo { left: 86.96%; top: 29.25%; width: 21.57%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.coreo .logo-caixa img { clip-path: polygon(0 0, 75.6% 0, 75.6% 54%, 100% 54%, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 75.6% 0, 75.6% 54%, 100% 54%, 100% 100%, 0 100%); }
.coreo .logo-caixa.inteiro img { clip-path: none; -webkit-clip-path: none; }
.fim-txt { display: flex; flex-direction: column; gap: 14px; }
.fim-txt .body1 { color: var(--creme-2); max-width: 30ch; }
.botao-wa { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; background: var(--ouro); color: var(--noite); font-weight: 700; text-decoration: none; font-size: 17px; margin-bottom: 26px; }
.resumo { border: 1px dashed rgba(220, 192, 110, .5); border-radius: 4px; padding: 16px; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; color: var(--creme-2); }
.resumo-tit { color: var(--ouro); }
.resumo dl { display: grid; gap: 4px; color: var(--creme); }
.resumo dl div { display: flex; justify-content: space-between; gap: 12px; }
.resumo dd { font-variant-numeric: tabular-nums; }
.r-total { border-top: 1px solid var(--fio); padding-top: 6px; margin-top: 2px; font-weight: 700; }
.r-escolha { color: var(--creme); }
.r-escolha a { color: var(--ouro); text-underline-offset: 3px; }
.r-nota { color: var(--creme-3); font-size: 14px; }
.contato { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--creme-2); }
.contato .num { color: var(--creme); font-weight: 600; -webkit-user-select: all; user-select: all; font-variant-numeric: tabular-nums; }
.copiar { min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid #4b625e; background: none; color: var(--creme); font: 600 14px/1 var(--sans); cursor: pointer; }
.validade { margin-top: 8px; color: var(--creme-3); font-size: 14px; }
.assinatura { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--fio); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--creme-3); font-size: 14px; }
#rodape .coluna { padding-top: 24px; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* barra do pacote */
.barra { position: fixed; z-index: 20; left: var(--m); right: var(--md); bottom: max(12px, env(safe-area-inset-bottom, 0px)); height: 52px; display: none; align-items: center; gap: 10px; padding: 0 8px 0 18px; border-radius: 999px; background: rgba(12, 39, 36, .92); border: 1px solid rgba(220, 192, 110, .45); color: var(--creme); text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translate3d(0, 140%, 0); transition: transform .55s cubic-bezier(.22, 1, .36, 1), background .5s, color .5s, border-color .5s; touch-action: manipulation; }
.coreo .barra { display: flex; }
.barra.on { transform: none; }
.b-nome { font-size: var(--t-bt); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.b-preco { font-family: var(--mono); font-size: 13px; color: var(--ouro); white-space: nowrap; flex: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.b-acao { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--ouro); color: var(--noite); display: inline-flex; align-items: center; font-size: var(--t-bt); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.barra[data-modo="cta"] { background: var(--ouro); color: var(--noite); border-color: var(--ouro); justify-content: center; padding: 0 18px; }
.barra[data-modo="cta"] .b-preco { display: none; }
.barra[data-modo="cta"] .b-nome { font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.barra[data-modo="cta"] .b-acao { background: var(--noite); color: var(--ouro); }

/* medidor (?medir=1) */
.medidor { position: fixed; z-index: 60; left: 8px; bottom: 74px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #9f9; font: 11px/1.35 ui-monospace, Menlo, monospace; white-space: pre; pointer-events: none; }

/* =================== COREOGRAFIA (.coreo) =================== */
.coreo .cena { height: calc((var(--p, 1) + 1) * 100 * var(--svh)); background: none; pointer-events: none; }
.coreo main { pointer-events: none; }
.coreo .fluxo { pointer-events: auto; }
.coreo .cena.presa + .cena.presa { margin-top: calc(-100 * var(--svh)); }
.coreo .fluxo.claro { background: none; }
.coreo .palco { position: -webkit-sticky; position: sticky; top: 0; height: calc(100 * var(--svh)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: calc(var(--cab) + 14px) var(--md) var(--reserva) var(--m); pointer-events: none; overflow: hidden; }
.coreo #abertura .palco { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-top: calc(var(--cab) + 8px); }
.coreo .palco a, .coreo .palco button, .coreo .palco input, .coreo .palco label, .coreo .palco output { pointer-events: auto; }
.coreo .zona { display: grid; gap: 0; }
.coreo .zona > * { grid-area: 1 / 1; min-width: 0; }
.coreo .z-base { align-self: end; align-items: end; }
.coreo .z-base > * { align-self: end; }
.coreo .vaga { display: block; position: relative; min-height: 0; }
.coreo .trevo-estatico { display: none; }
.coreo .telas-base { display: none; }
.coreo .legenda-visor, .coreo .tracos-g { display: block; }
.coreo .legenda-visor { text-align: center; color: var(--ouro); }

.coreo .nota-visor { margin-bottom: 0; text-align: center; }
.coreo .nota-visor .nota { font-size: 14px; color: var(--creme-3); max-width: 32ch; margin: 0 auto; }
.coreo .legenda-visor { margin-bottom: 102px; } .coreo .tracos-g { margin-bottom: 78px; }
.coreo .tracos { display: flex !important; gap: 5px; justify-content: center; }
.coreo .tracos i { width: 18px; height: 2px; background: var(--fio); transition: background .3s; }
.coreo .tracos i.on { background: var(--ouro); }
.coreo .dica-toque { display: block; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); color: var(--tinta-2); font-size: 12px; white-space: nowrap; }
.coreo .etapas > li { grid-area: 1 / 1; }
.coreo .etapas { display: grid; }
.coreo .etapas > li { min-width: 0; }
.coreo .botao-wa { display: none; }
.coreo #conversar .palco { grid-template-rows: auto minmax(0, 1fr) auto; }
.coreo .logo-fim { padding-top: 8px; }
.coreo .rotulo-cena { display: inline-flex; }
/* ficha: no celular o trevo fica no alto à direita do título (posição de tela estável, sem seguir a rolagem) */
.coreo .ficha-cena .palco { grid-template-rows: auto minmax(0, 1fr); }
.coreo .ficha-cena .z-base { grid-row: 2; }
.coreo .ficha-cena .vaga { position: absolute; right: var(--md); top: calc(var(--cab) + 6px); width: 36vw; height: 36vw; max-width: 170px; max-height: 170px; }
.coreo #todos .vaga { top: calc(var(--cab) + 2px); width: 32vw; height: 32vw; }
.coreo #comecar .vaga { width: 1px; height: 1px; }
.coreo .ficha-cena .z-topo .h2 { max-width: 60%; }
.coreo .ficha-cena .amostras { max-width: 100%; }
.coreo .ficha-cena .amostras legend { float: none; width: 100%; margin: 0 0 2px; }
/* rodapé: ocupa a tela inteira no fim, para o palco anterior sair por completo */
.coreo #rodape .coluna { min-height: calc(100 * var(--svh)); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--cab) + 6px); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* estados das peças (data-st: antes | on | depois) */
.coreo [data-e] { pointer-events: none; }
.coreo [data-e][data-st="on"] { pointer-events: auto; }
.coreo .palco [data-e][data-st="on"] { pointer-events: none; }
.coreo .palco [data-e][data-st="on"] a, .coreo .palco [data-e][data-st="on"] button, .coreo .palco [data-e][data-st="on"] label, .coreo .palco [data-e][data-st="on"] input { pointer-events: auto; }
.coreo .palco [data-e]:not([data-st="on"]) a, .coreo .palco [data-e]:not([data-st="on"]) button, .coreo .palco [data-e]:not([data-st="on"]) label, .coreo .palco [data-e]:not([data-st="on"]) input { pointer-events: none; }

/* grupo: aparece rápido, some depois que as letras saem */
.coreo [data-e]:not(.visor):not(.cartao) { opacity: 0; transition: opacity .3s ease .28s; }
.coreo [data-e][data-st="on"]:not(.visor):not(.cartao) { opacity: 1; transition-delay: 0s; transition-duration: .18s; }
/* letras (sem will-change permanente: a transição já promove a camada só enquanto anima) */
.coreo .wm { display: inline-block; white-space: nowrap; }
.coreo .letras .l { display: inline-block; opacity: 0; transform: translate3d(0, .26em, 0); transition: opacity .6s cubic-bezier(.33, 1, .68, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d0, 0s) + var(--i) * var(--esc, .022s)); }
.coreo [data-st="on"] .letras .l, .coreo .letras[data-st="on"] .l, .coreo [data-st="on"].letras .l { opacity: 1; transform: none; }
.coreo [data-st="depois"] .letras .l, .coreo [data-st="depois"].letras .l { opacity: 0; transform: translate3d(0, -.45em, 0); transition-duration: .32s, .4s; transition-delay: calc(var(--j) * .01s); }
.coreo .letras .l.ultima { transform: translate3d(0, .26em, 0) scale(.4); transform-origin: 30% 80%; transition: opacity .5s, transform .9s cubic-bezier(.34, 1.9, .64, 1); transition-delay: calc(var(--d0, 0s) + var(--i) * var(--esc, .022s)); }
.coreo [data-st="on"] .letras .l.ultima { transform: none; }
/* linhas por máscara (cada palavra sobe dentro da sua máscara; o atraso é o da linha) */
.coreo .linhas .wm { overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.coreo .linhas .wi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--d0, .12s) + var(--ln) * .07s); }
.coreo [data-st="on"] .linhas .wi { transform: none; }
.coreo [data-st="depois"] .linhas .wi { transform: translate3d(0, -108%, 0); transition-duration: .38s; transition-delay: calc(var(--ln) * .03s); }
/* blocos */
.coreo [data-e] .anima, .coreo [data-e].anima { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s cubic-bezier(.33, 1, .68, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d0, .18s); }
.coreo [data-st="on"] .anima { opacity: 1; transform: none; }
.coreo [data-st="depois"] .anima { opacity: 0; transform: translate3d(0, -10px, 0); transition-duration: .3s; transition-delay: 0s; }
/* linhas de especificação: entram uma a uma (atraso por linha em --d0) */
.coreo [data-e] .ficha caption, .coreo [data-e] .ficha thead th, .coreo [data-e] .ficha tbody th, .coreo [data-e] .ficha tbody td, .coreo [data-e] .spec li { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .45s cubic-bezier(.33, 1, .68, 1), transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d0, .08s); }
.coreo [data-e] .ficha tbody td { transition-delay: calc(var(--d0, .08s) + .06s); }
.coreo [data-st="on"] .ficha caption, .coreo [data-st="on"] .ficha thead th, .coreo [data-st="on"] .ficha tbody th, .coreo [data-st="on"] .ficha tbody td, .coreo [data-st="on"] .spec li { opacity: 1; transform: none; }
.coreo [data-st="depois"] .ficha caption, .coreo [data-st="depois"] .ficha th, .coreo [data-st="depois"] .ficha td, .coreo [data-st="depois"] .spec li { opacity: 0; transform: translate3d(0, -8px, 0); transition-duration: .28s; transition-delay: 0s; }
.coreo .cartao[data-e], .coreo .gig[data-e] { transition: opacity .45s, transform .7s cubic-bezier(.22, 1, .36, 1); }
.coreo .cartao[data-e] { opacity: 0; transform: translate3d(0, 18px, 0); }
.coreo .cartao[data-st="on"] { opacity: 1; transform: none; transition-delay: .08s; }
.coreo .cartao[data-st="depois"] { opacity: 0; transform: translate3d(0, -12px, 0); transition-duration: .3s; }
.coreo .gig .l { transition-duration: .7s, 1s; }
.coreo .dica-toque[data-e] { opacity: 0; transition: opacity .6s .9s; }
.coreo .dica-toque[data-st="on"] { opacity: .85; }
.coreo .pacote-info .h3, .coreo .pacote-info .pac-para { transition: opacity .25s; }
.coreo .pacote-info.troca .h3, .coreo .pacote-info.troca .pac-para { opacity: 0; transition: none; }

/* papel: as peças de texto do palco seguem o mundo */
.coreo .cena.claro .palco { color: var(--tinta); }
.coreo #abertura .cartao-hero { background: rgba(12, 39, 36, .94); }

/* ---------- telas baixas (iPhone com as barras do Safari) ---------- */
@media (max-height: 760px) and (max-width: 899px) {
  .carta { font-size: max(15.5px, calc(15.5 * var(--u))); line-height: 1.25; width: 76%; }
  .g-hero { gap: 10px; }
  .cartao-hero { min-height: 112px; padding: 11px 12px 10px; gap: 5px; }
  .ch-txt { font-size: 14px; }
  .mini-previa img { width: 56px; }
  .hero-dir { gap: 6px; }
  .coreo .dica-toque { bottom: 0; font-size: 12px; }
  .ficha { font-size: 14px; }
  .ficha tbody th, .ficha tbody td { padding-top: 5.5px; padding-bottom: 5.5px; }
  .ficha thead th { padding-bottom: 6px; }
  .ficha caption { padding-bottom: 5px; }
  .ficha tbody td { font-size: 13.5px; }
  .ficha tbody th small { font-size: 12px; }
  .spec li { font-size: 14.5px; padding-top: 7px; padding-bottom: 7px; }
  .spec li::before { top: calc(7px + .42em); }
  .comeco li { font-size: 16px; }
  .coreo .ficha-cena .vaga { width: 30vw; height: 30vw; }
  :root { --gig-y: .58; }
}

/* ---------- telas maiores (secundário) ---------- */
@media (min-width: 900px) {
  :root { --u: calc(100vw / 1440 * .62); --cab: 70px; --m: 3.125vw; --md: 3.125vw; --t-h2: clamp(40px, 3.6vw, 60px); --t-h3: clamp(24px, 2.2vw, 34px); --t-b1: clamp(19px, 1.7vw, 26px); --t-b2: 17px; --t-h1: clamp(64px, 7vw, 120px); --reserva: 96px; }
  .cab { padding-top: 22px; }
  .coreo .palco { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 4vw; }
  .coreo .palco > .z-topo { grid-column: 1; grid-row: 1; }
  .coreo .palco > .vaga { grid-column: 2; grid-row: 1 / 4; }
  .coreo .palco > .z-base { grid-column: 1; grid-row: 3; }
  .coreo #abertura .palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coreo #abertura .z-topo { grid-column: 1 / 3; }
  .coreo #abertura .vaga { grid-column: 1 / 3; grid-row: 2; }
  .coreo #abertura .z-base { grid-column: 1 / 3; }
  .coreo .ficha-cena .palco { grid-template-rows: auto minmax(0, 1fr) auto; }
  .coreo .ficha-cena .z-base { grid-row: 3; }
  .coreo .ficha-cena .vaga, .coreo #todos .vaga { position: relative; right: auto; top: auto; width: auto; height: auto; max-width: none; max-height: none; }
  .coreo #comecar .vaga { width: auto; height: auto; }
  .coreo .ficha-cena .z-topo .h2 { max-width: none; }
  .carta { width: 42%; }
  .gigante { font-size: clamp(60px, 6.4vw, 112px); }
  .coreo .letras .l { filter: blur(.06em); transition-property: opacity, transform, filter; }
  .coreo [data-st="on"] .letras .l { filter: none; }
  .gig-num { font-size: min(34vw, 62vh); }
  .gig-caminhos { font-size: 12vw; }
  .visor { --vh: min(68vh, 640px); }
  .coluna { max-width: 760px; }
  .barra { left: auto; right: 3.125vw; width: 440px; }
  .preco { font-size: clamp(80px, 8vw, 140px); }
  .ficha { font-size: 16px; }
  .ficha tbody td { font-size: 15px; }
  .spec li { font-size: 16px; }
  .coreo #conversar .palco { grid-template-columns: minmax(0, 1fr); }
  .coreo #conversar .z-topo, .coreo #conversar .z-base, .coreo #conversar .vaga { grid-column: 1; }
  .coreo #conversar .vaga { grid-row: 2; }
  .logo-caixa { max-width: 640px; }
  .fim-txt { align-items: center; text-align: center; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .coreo .letras .l, .coreo .linhas .wi, .coreo [data-e] .anima, .coreo .cartao[data-e], .visor, .vt, .visor-telas, .barra, .gaveta, .veu, .odo .fita, .parc-barra, .ps, .coreo [data-e] .ficha th, .coreo [data-e] .ficha td, .coreo [data-e] .ficha caption, .coreo [data-e] .spec li { transition-duration: .2s !important; transition-delay: 0s !important; animation: none !important; }
  .coreo .letras .l, .coreo .linhas .wi, .coreo [data-e] .ficha th, .coreo [data-e] .ficha td, .coreo [data-e] .spec li { transform: none !important; }
  .coreo [data-st="depois"] .letras .l, .coreo [data-st="depois"] .linhas .wi { transform: none !important; }
  .pil-rec.convite span { animation: none; }
}

/* parada em cada etapa: um deslize = uma etapa (pedido do Paulo, 19/10/2026) */
html.com-parada { scroll-snap-type: y mandatory; }
.paradas { position: absolute; top: 0; left: 0; width: 1px; height: 0; pointer-events: none; }
.paradas i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
html.menu-aberto.com-parada { scroll-snap-type: none; }
/* dica de rolagem: traço fino com um ponto descendo; texto só nas primeiras vezes (pedido do Paulo, 19/10/2026) */
.dica-rola { display: none; }
.coreo .dica-rola { position: fixed; z-index: 19; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 4px); display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--creme); opacity: 0; transform: translate3d(-50%, 6px, 0); transition: opacity .6s, transform .6s cubic-bezier(.22, 1, .36, 1), color .5s; pointer-events: none; }
.coreo .dica-rola[data-barra="com"] { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 62px); }
.coreo .dica-rola.on { opacity: .8; transform: translate3d(-50%, 0, 0); }
body.cab-claro .dica-rola { color: var(--tinta); }
.dica-rola span { order: -1; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dica-rola span:empty { display: none; }
.dica-rola i { position: relative; width: 1px; height: 22px; }
.dica-rola i::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .35; }
.dica-rola i::after { content: ""; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dica-desce 1.8s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes dica-desce { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(19px); opacity: 0; } }
@media (min-width: 900px) { .coreo .dica-rola[data-barra="com"] { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 4px); } }
@media (prefers-reduced-motion: reduce) { .dica-rola i::after { animation: none; top: 8px; } }