/* Ported verbatim from reference/canvas-2026-10-19/canvas.html (docs/01 §3-§5).
   The only deviations are F-1, F-2, F-3 and F-4, each marked below. */

/* F-9: the canvas embedded both fonts as base64. They are files now, byte-identical
   (docs/00 D8), preloaded from index.html. */
@font-face{font-family:'Zalando Sans';src:url(../fonts/zalando-sans.woff2) format('woff2');font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url(../fonts/public-sans.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* cores medidas no frame invite-presencial (Figma 37:15) */
  --navy:#02172c;
  --navy-fundo:#00243b;
  --save:#081d32;
  --verde:#21cf7e;
  --claro:#d5e5ec;
  --claro-grafismo:#c0dcee;
  --branco:#ffffff;
  /* F-1: was rgba(255,255,255,.28) — 2.48:1 against the navy, under the 3:1 that
     WCAG 1.4.11 asks of a form border. .34 measures 3.07:1. */
  --linha:rgba(255,255,255,.34);
  --erro:#ffb4a8;
  /* 1u = 1px do frame de 1080px, escalado pela largura da tela */
  --u:calc(min(100vw, 820px) / 1080);
  --z:'Zalando Sans', system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --p:'Public Sans', system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--navy-fundo);color:var(--branco);font-family:var(--z);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
.palco{position:relative;width:min(100%,820px);margin:0 auto;height:100%}

/* ---------- Faixa clara com a assinatura ---------- */
.topo{position:relative;background:var(--claro);height:calc(304 * var(--u));overflow:hidden}
.topo__grafismo{position:absolute;left:calc(297 * var(--u));top:0;width:calc(783 * var(--u));height:auto;max-width:none}
.topo__logo{position:absolute;left:calc(137 * var(--u));top:calc(82.46 * var(--u));width:calc(806 * var(--u));height:auto;max-width:none}

/* ---------- Bloco navy ---------- */
.kv{position:relative;overflow:hidden;background:var(--navy);isolation:isolate;min-height:calc(100vh - 304 * var(--u))}
.kv__degrade{position:absolute;left:0;right:0;bottom:0;height:calc(402 * var(--u));background:linear-gradient(to bottom, rgba(0,36,59,0) 28.37%, var(--navy-fundo) 100%);z-index:-2;pointer-events:none}
.kv__save{position:absolute;left:50%;top:calc(2 * var(--u));transform:translateX(-50%);width:calc(1047 * var(--u));margin:0;
  font-weight:800;font-size:calc(330.49 * var(--u));line-height:1;letter-spacing:calc(23.13 * var(--u));text-align:center;color:var(--save);opacity:.54;z-index:-3;
  user-select:none;pointer-events:none}
.kv__3d{position:absolute;z-index:-1;pointer-events:none;
  right:calc(-116.3 * var(--u));bottom:calc(-110.4 * var(--u));width:calc(710.2 * var(--u));height:calc(541.3 * var(--u));
  display:flex;align-items:center;justify-content:center}
.kv__3d img{width:calc(637.87 * var(--u));height:calc(420.07 * var(--u));max-width:none;object-fit:cover;transform:rotate(-11.78deg)}

.kv__conteudo{position:relative;padding:max(44px, calc(132 * var(--u))) max(28px, calc(126 * var(--u))) max(120px, calc(240 * var(--u)))}

/* F-4: the canvas carried these three declarations as style="" attributes on the h1 and its
   two spans. The CSP in docs/02 §10 has no 'unsafe-inline', so they live here instead.
   `font:inherit` drops the browser's own h1 font; `.data` and `.cidade` set their own. */
.kv__conteudo h1{margin:0;font:inherit}
.data{display:block;margin:0;font-weight:700;color:var(--verde);font-size:max(25px, calc(64.07 * var(--u)));line-height:1;letter-spacing:.07em;text-transform:uppercase}
.cidade{display:block;margin:calc(6 * var(--u)) 0 0;font-weight:300;font-size:max(20px, calc(52.49 * var(--u)));line-height:1;letter-spacing:.07em}

.chamada{margin:max(28px, calc(67 * var(--u))) 0 0;font-weight:300;font-size:max(18px, calc(50.36 * var(--u)));line-height:1.12;letter-spacing:.07em}
.chamada b{font-weight:700}
.chamada strong{font-weight:500}
.chamada .linha{display:block}
.ciclo{display:inline-flex;align-items:center;justify-content:center;vertical-align:.12em;
  height:.7527em;padding:0 .48em 0 .52em;margin-left:0;border:max(1.2px, calc(1.736 * var(--u))) solid var(--verde);border-radius:999px;
  font-size:1em;letter-spacing:0}
.ciclo span{font-weight:600;font-size:.487em;letter-spacing:.16em;color:var(--verde);text-transform:uppercase;line-height:.9;transform:translateX(.08em)}

.confirme{margin:max(26px, calc(60 * var(--u))) 0 0;font-weight:300;font-size:max(14.5px, calc(35.05 * var(--u)));line-height:1.05;letter-spacing:.08em}
.confirme span{display:block}

/* ---------- Formulário ---------- */
.rsvp{margin-top:max(24px, calc(48 * var(--u)));max-width:440px}
.campo{display:flex;flex-direction:column;gap:8px}
.rotulo{font-family:var(--p);font-size:13.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.86)}
.entrada{font:400 16px/1.3 var(--p);color:var(--branco);background:rgba(2,23,44,.55);border:1.5px solid var(--linha);border-radius:12px;padding:11px 14px;width:100%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s}
/* F-2: was .45 — 4.43:1, just under the 4.5:1 a placeholder needs. .46 measures 4.60:1. */
.entrada::placeholder{color:rgba(255,255,255,.46)}
.entrada:hover{border-color:rgba(255,255,255,.5)}
.entrada:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(33,207,126,.22)}
.entrada[aria-invalid="true"]{border-color:var(--erro)}

.opcoes{border:0;margin:22px 0 0;padding:0;min-width:0}
.opcoes legend{padding:0;margin-bottom:10px}
.opcoes__lista{display:flex;flex-wrap:wrap;gap:10px}
.opcao{position:relative}
/* F-3: was inset:0, which gave the pill a 40px-tall hit area. The input is invisible and
   already covers the pill, so stretching it 2px past the top and bottom edges takes the
   target to 44px without moving a painted pixel. */
.opcao input{position:absolute;opacity:0;inset:-2px 0;margin:0;cursor:pointer}
.opcao label{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border:1.736px solid var(--verde);border-radius:999px;cursor:pointer;
  font-family:var(--z);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);background:rgba(2,23,44,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s,color .15s}
.opcao label::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none;transition:background-color .15s}
.opcao input:hover + label{background:rgba(33,207,126,.12)}
.opcao input:checked + label{background:var(--verde);color:var(--navy)}
.opcao input:checked + label::before{background:var(--navy);border-color:var(--navy)}
.opcao input:focus-visible + label{outline:2px solid var(--branco);outline-offset:3px}
.opcoes[aria-invalid="true"] .opcao label{border-color:var(--erro);color:var(--erro)}

.enviar{margin-top:22px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:46px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--verde);color:var(--navy);font-family:var(--z);font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;transition:filter .15s,transform .15s}
.enviar:hover{filter:brightness(1.07)}
.enviar:active{transform:translateY(1px)}
.enviar:focus-visible{outline:2px solid var(--branco);outline-offset:3px}
.enviar[disabled]{opacity:.6;cursor:progress}
.aviso{margin:12px 0 0;min-height:1.4em;font-family:var(--p);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.7)}
.aviso.erro{color:var(--erro)}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.obrigado{margin-top:max(24px, calc(48 * var(--u)));max-width:440px;padding:22px 22px 20px;border:1.736px solid var(--verde);border-radius:22px;background:rgba(2,23,44,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.obrigado h2{margin:0;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:.04em;color:var(--verde)}
.obrigado p{margin:10px 0 0;font-family:var(--p);font-size:15px;line-height:1.45;color:rgba(255,255,255,.9)}
/* F-3: was margin-top:16px;padding:0, which left a 146x16 target. The 14px of vertical
   padding is cancelled by the same 14px off each margin, so the link keeps its position and
   its underline while the hit area grows to 146x44. */
.obrigado button{margin:2px 0 -14px;padding:14px 0;border:0;background:none;color:var(--branco);font:500 14px var(--p);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.obrigado:focus{outline:none}

.endosso{margin-top:max(36px, calc(58 * var(--u)))}
.endosso img{width:max(150px, calc(444 * var(--u)));height:auto}

[hidden]{display:none !important}
.enviar{white-space:nowrap}
@media (max-width:520px){.enviar{width:100%;padding:0 20px;font-size:13.5px}.opcao label{padding:0 14px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}