/* landing.css — a página de entrada (/), marca «Bom para Casar».
   Origem: L3-landing/r2 (sistema-frota), portada por portar_casei.py. As cores e as
   fontes do DS vêm de /design/tokens.css (link no template); só a Outfit mora aqui. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url("/static/landing/outfit-latin.woff2") format('woff2')}
/* ════════════════════════════════════════════════════════════════════════
   A PÁGINA — tela cheia, papel creme com grão, três coisas: marca, chamada, cena.
   Nenhum hex aqui: toda cor é var(--token).
   ════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background-color:var(--surface-page);background-image:var(--bg-page);color:var(--text-body);
  font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
.tela{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;isolation:isolate}
.cena{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.topo{position:absolute;z-index:2;top:clamp(14px,3.2vh,34px);left:var(--margem);right:var(--margem);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.tela{--margem:clamp(20px,6vw,96px)}
.marca{display:inline-flex;border-radius:var(--radius-md);text-decoration:none}
.marca svg,.marca img{height:clamp(46px,7.6vh,70px);width:auto;display:block;overflow:visible}
.marca:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
/* a animação da marca (L1 · rodada 7, aprovada): o modo "solto" toca uma vez na
   chegada (atos A+B, termina no nome inteiro) — mas com o quique calmo do splash,
   sem a inclinação de −6° que a própria L1 marcou como "beira o infantil". */
.marca .bpc.solto .l-assenta{animation-name:assenta;animation-duration:480ms}

.parar{appearance:none;border:1.5px solid var(--ink-300);background:var(--paper-50);color:var(--ink-700);
  width:44px;height:44px;border-radius:var(--radius-pill);display:inline-grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow-xs);transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.parar svg{width:16px;height:16px;display:block}
.parar .ic-anima{display:none}
.parar[aria-pressed="true"] .ic-para{display:none}
.parar[aria-pressed="true"] .ic-anima{display:block}
@media (hover:hover) and (pointer:fine){.parar:hover{border-color:var(--ink-500);background:var(--paper-100)}}
.parar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* a chamada abraça o próprio texto (`fit-content`): a caixa dela é a régua que o
   landing.js usa para a cena não a cruzar (logo v2, 13/11) */
.chamada{position:absolute;z-index:2;left:var(--margem);top:clamp(104px,18vh,200px);
  width:fit-content;max-width:min(38rem,calc(100% - 2 * var(--margem)))}
.chamada h1{font-family:var(--font-display);font-weight:600;color:var(--text-strong);
  font-size:clamp(2.3rem,1.3rem + 3.1vw,4.3rem);line-height:1.02;letter-spacing:-.012em;margin:0 0 .4em;text-wrap:balance}
.chamada h1 .l1{display:block}
.chamada h1 em{display:block;font-style:italic;font-weight:500;color:var(--amber-700)}
/* o título em Outfit, a letra da marca (decisão lavrada pelo Jack, veto do Capitão, 13/11);
   a serifa do DS fica só como reserva, se a Outfit não carregar */
.chamada h1{font-family:'Outfit',var(--font-body);font-weight:600;letter-spacing:-.025em;line-height:1.06;font-size:clamp(2.05rem,1.15rem + 2.75vw,3.8rem)}
.chamada h1 em{font-family:'Outfit',var(--font-body);font-style:normal;font-weight:400}
.chamada p{font-size:clamp(1.05rem,.98rem + .32vw,1.22rem);color:var(--text-muted);max-width:44ch;margin:0 0 var(--space-8);text-wrap:pretty}
.acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  border-radius:13px;font-family:var(--font-body);font-size:1rem;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.botao.cheio{background:var(--brand);color:var(--text-on-brand);border-bottom:2.5px solid var(--espresso-edge);
  box-shadow:0 12px 26px -14px var(--surface-overlay)}
.botao.cheio svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-out)}
.botao.contorno{background:var(--paper-50);color:var(--text-strong);border:1.5px solid var(--ink-300)}
@media (hover:hover) and (pointer:fine){
  .botao.cheio:hover{background:var(--brand-hover);transform:translateY(-1px)}
  .botao.cheio:hover svg{transform:translateX(3px)}
  .botao.contorno:hover{border-color:var(--ink-500);background:var(--paper-100)}
}
.botao:active{transform:translateY(1px)}
.botao.cheio:active{background:var(--brand-active)}
.botao:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* a chamada entra uma vez, depois da marca (30–80 ms de escada, ease-out do DS) */
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chamada>*{animation:sobe 560ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.chamada>*{animation:none}}
.reduzido .chamada>*{animation:none}
.chamada h1{animation-delay:380ms}.chamada p{animation-delay:440ms}.chamada .acoes{animation-delay:500ms}

/* ACIMA DO CORTE ÚNICO DO APP (894 px, `corte.js`) — Capitão, 13/11: a frase grande
   em EXATAMENTE duas linhas («Te ajudamos a chegar no grande dia,» / «um passo de
   cada vez.»). Cada linha é uma peça sem quebra, e o corpo da letra tem um teto que
   faz a linha 1 caber na largura útil: 16 em é a largura dela em Outfit 600
   com o espaçamento da página (medido no Chromium; o teste de navegador remede). */
@media (min-width:55.9375rem){
  .chamada{max-width:calc(100% - 2 * var(--margem))}
  .chamada h1 .l1,.chamada h1 .l2{white-space:nowrap}
  .chamada h1{font-size:min(3.8rem,1.15rem + 2.75vw,calc((100vw - 2 * var(--margem)) / 16))}
}
/* fim do bloco acima do corte */
/* telefone: a chamada sobe, os botões dividem a linha */
@media (max-width:560px){
  .chamada{top:clamp(86px,13vh,120px)}
  .chamada p{margin-bottom:var(--space-6)}
  .chamada p .quebra{display:none}
  .acoes{gap:var(--space-2)}
  .botao{flex:1 1 auto;padding:0 18px;min-height:50px}
}
@media (max-height:640px) and (min-width:561px){.chamada{top:96px}.chamada p{margin-bottom:var(--space-5)}}

/* ── a cena: recortes com contorno navy, traço de papel-boneca ─────────── */
.cena{--k:1;--tom:var(--ink-500)}  /* --tom: o tom de cada convidado (style inline na cena); este é o padrão */
.c{stroke:var(--navy-700);stroke-width:calc(2.6px*var(--k));stroke-linejoin:round;stroke-linecap:round}
.c2{stroke:var(--navy-700);stroke-width:calc(1.8px*var(--k));stroke-linejoin:round;stroke-linecap:round}
.c3{stroke:var(--navy-700);stroke-width:.8px;stroke-linejoin:round}
.dobra{fill:none;stroke:var(--navy-500);stroke-width:calc(1.7px*var(--k));stroke-linecap:round;opacity:.55}
.mb{fill:none;stroke:var(--navy-700);stroke-width:calc(8.6px*var(--k));stroke-linecap:round;stroke-linejoin:round}
.mi{fill:none;stroke-width:calc(3.8px*var(--k));stroke-linecap:round;stroke-linejoin:round}
.mi.pele{stroke:var(--paper-50)}.mi.terno{stroke:var(--espresso)}.mi.tom{stroke:var(--tom)}
.traco{fill:none;stroke:var(--ink-700);stroke-width:calc(5.2px*var(--k));stroke-linecap:round;stroke-linejoin:round}
.ouro-l{fill:none;stroke:var(--gold-leaf);stroke-width:calc(3.2px*var(--k));stroke-linecap:round;opacity:.8}
.chao{fill:none;stroke:var(--kraft-deep);stroke-width:calc(2.6px*var(--k));stroke-linecap:round}
.ponto{fill:none;stroke:var(--paper-50);stroke-width:calc(1.8px*var(--k));stroke-dasharray:7 9;stroke-linecap:round;opacity:.9}
.caule{fill:none;stroke:var(--sage-700);stroke-width:calc(2.2px*var(--k));stroke-linecap:round}
.cadeira{fill:none;stroke:var(--kraft-deep);stroke-width:calc(3.4px*var(--k));stroke-linecap:round}
.papel{fill:var(--paper-50)}.papel2{fill:var(--paper-200)}.esp{fill:var(--espresso)}.tinta{fill:var(--ink-700)}.tinta9{fill:var(--ink-900)}
.blush3{fill:var(--blush-300)}.blush5{fill:var(--blush-500)}.blush6{fill:var(--blush-600)}.pet3{fill:var(--petal-300)}.pet5{fill:var(--petal-500)}
.amb1{fill:var(--amber-100)}.amb3{fill:var(--amber-300)}.amb5{fill:var(--amber-500)}.amb6{fill:var(--amber-600)}.ouro{fill:var(--gold-leaf)}
.sal3{fill:var(--sage-300)}.sal5{fill:var(--sage-500)}.sal6{fill:var(--sage-600)}.kraft{fill:var(--kraft)}.kraftd{fill:var(--kraft-deep)}
.tom{fill:var(--tom)}.sombra{fill:var(--sticker-shadow)}.terra{stroke:var(--terracotta)}
.washi-a{fill:var(--tape-amber)}.washi-s{fill:var(--tape-sage)}.washi-b{fill:var(--tape-blush)}
.veu{fill:var(--paper-50);opacity:.72;stroke:var(--navy-500);stroke-width:calc(1.6px*var(--k));stroke-linejoin:round}
.sol{fill:var(--amber-100);opacity:.78}
.fundo-arco{fill:var(--paper-50);opacity:.62}
.cena g{transform-box:view-box;transform-origin:0 0}
.convidados{opacity:.92}
.fila-tras{opacity:.78}
/* quem já tem conta entra por aqui (Google ou e-mail e senha, na tela /entrar) */
.chamada .ja-tem{margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.ja-tem a{color:var(--text-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ja-tem a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
.chamada .ja-tem{animation-delay:560ms}