/* =====================================================================
   CBB · Convite Oficial
   Medidas extraídas do PSD "Lading page CONVITE OFICIAL" (1920 × 3611).
   --u = 1px da arte. No desktop, a página é a arte em escala:
   --u = min(largura, 1920px × --site-scale) / 1920. Abaixo de 1024px entra o layout empilhado.
   --site-scale: escala máxima da arte (0.7 = 70% → página com no máximo 1344px de largura).
   Posições de texto partem da linha de base do PSD (Noka: ascendente 0,8 em).
   ===================================================================== */

@font-face {
    font-family: "Noka";
    src: url("../fonts/fonnts.com-Noka_Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noka";
    src: url("../fonts/fonnts.com-Noka_Semibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* Poppins servida pelo próprio site (antes vinha do Google Fonts): nenhuma conexão externa ao abrir a página. */
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Calligraphica Afera";
    src: url("../fonts/calligraphicaferabeautytrial-boldi.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --green-ink: #083428;
    --green: #008338;
    --green-footer: #03472c;
    --green-hero: #05432b;
    --yellow: #eecb0c;
    --gold: #ffc700;
    --form-bg: #f8f8f8;
    --consent-ink: #1a2424;
    --error: #b42318;
    --focus: #0a5cff;
    --site-scale: 0.7;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: #fff;
    color: var(--green-ink);
    font-family: "Noka", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: none; }
h1, h2, p { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.page {
    container-type: inline-size;
    overflow-x: clip;
}

.stage {
    --u: calc(min(100cqw, 1920px * var(--site-scale)) / 1920);
    position: relative;
    width: calc(1920 * var(--u));
    margin: 0 auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -100px;
    z-index: 100;
    padding: 12px 18px;
    background: #fff;
    color: var(--green-ink);
    font-weight: 600;
    border-radius: 8px;
}
.skip-link:focus { top: 16px; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--focus); }
.btn[disabled] { cursor: not-allowed; }

/* =====================================================================
   1. HERO (0–1144) — composição centralizada, sem colagem
   Medidas da referência "hero" (1920 × 1144); eixo central em x = 960.
   ===================================================================== */
.hero {
    background: var(--green-hero) url("../img/hero-fundo.webp") center top / cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.hero__stage { height: calc(1144 * var(--u)); }

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero__logo {
    width: calc(92 * var(--u));
    height: calc(115 * var(--u));
    margin-top: calc(117 * var(--u));
}
.hero__stars {
    width: calc(183 * var(--u));
    height: calc(56.5 * var(--u));
    margin-top: calc(45.5 * var(--u));
}

/* Título em uma linha: caixa-alta com 131px de altura e 1046px de largura na arte. */
.hero__title {
    margin-top: calc(0.9 * var(--u));
    height: calc(187.1 * var(--u));
    font-family: "Calligraphica Afera", Georgia, serif;
    font-weight: 700;
    font-size: calc(187.1 * var(--u));
    line-height: calc(187.1 * var(--u));
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    transform: scaleX(0.712); /* compressão horizontal da arte */
}

.hero__rule {
    width: calc(722 * var(--u));
    height: 1px;
    margin: calc(26 * var(--u)) 0 0;
    border: 0;
    background: rgba(255, 255, 255, 0.85);
    flex: none;
}
.hero__rule--2 { margin-top: calc(23.5 * var(--u)); }

.hero__subtitle {
    margin-top: calc(27.8 * var(--u));
    font-size: calc(22.7 * var(--u));
    line-height: 1;
    letter-spacing: var(--subtitle-tracking, 0.453em);
    margin-right: calc(-1 * var(--subtitle-tracking, 0.453em)); /* desconta o espaçamento após a última letra */
    text-transform: uppercase;
    white-space: nowrap;
}

.hero__games {
    display: flex;
    gap: calc(41 * var(--u));
    margin-top: calc(54 * var(--u));
}
.hero__game {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__flags { display: flex; gap: calc(15 * var(--u)); }
.hero__game--2 .hero__flags { transform: translateY(calc(-2 * var(--u))); }
.hero__flags img { width: calc(128.3 * var(--u)); height: calc(90 * var(--u)); }

.hero__date {
    margin-top: calc(16.1 * var(--u));
    font-weight: 600;
    font-size: calc(21.3 * var(--u));
    line-height: calc(25 * var(--u));
    color: var(--gold);
    text-transform: uppercase;
    white-space: nowrap;
}

.hero__venue {
    margin-top: calc(25.7 * var(--u));
    font-size: calc(22.7 * var(--u));
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero__cta {
    width: calc(564 * var(--u));
    height: calc(86 * var(--u));
    margin-top: calc(48.5 * var(--u));
    padding-top: calc(4 * var(--u));
    font-size: calc(26.7 * var(--u));
}

/* =====================================================================
   2. CONTADOR (1148–1406)
   ===================================================================== */
.countdown {
    background: var(--yellow) url("../img/contador-fundo.webp") center top / cover no-repeat;
    color: var(--green-ink);
    font-weight: 600;
}
.countdown__stage { height: calc(258 * var(--u)); }

.countdown__lead,
.countdown__tail {
    position: absolute;
    font-size: calc(24.94 * var(--u));
    letter-spacing: 0.8em;
    text-transform: uppercase;
    white-space: nowrap;
}
.countdown__lead {
    /* Ancorado pela borda direita (onde "Faltam" termina na arte, x ≈ 655): em qualquer idioma
       a palavra fica à mesma distância do contador, seja curta ("Only") ou longa. */
    right: calc((1920 - 655) * var(--u));
    top: calc(118.5 * var(--u));
    line-height: 1;
    text-align: right;
}
.countdown__tail {
    left: calc(1282 * var(--u));
    top: calc(95 * var(--u));
    line-height: calc(36 * var(--u));
}
.countdown__tail-final { display: none; }

.countdown__unit {
    position: absolute;
    top: calc(78.2 * var(--u));
    width: calc(180 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.countdown__unit--days    { left: calc((753.6 - 90) * var(--u)); }
.countdown__unit--hours   { left: calc((901.0 - 90) * var(--u)); }
.countdown__unit--minutes { left: calc((1046.3 - 90) * var(--u)); }
.countdown__unit--seconds { left: calc((1192.6 - 90) * var(--u)); } /* mesmo passo das demais unidades (~146) */

.countdown__value {
    font-size: calc(78.77 * var(--u));
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.countdown__label {
    margin-top: calc(4.6 * var(--u));
    font-weight: 500;
    font-size: calc(32.22 * var(--u));
    line-height: 1;
    text-transform: uppercase;
}
.countdown__unit--days .countdown__label,
.countdown__unit--hours .countdown__label,
.countdown__unit--minutes .countdown__label { position: relative; left: calc(-1 * var(--u)); }
.countdown__unit--seconds .countdown__label { position: relative; left: calc(2 * var(--u)); }

.countdown__note {
    position: absolute;
    left: 0; right: 0;
    top: calc(212 * var(--u));
    font-weight: 500;
    font-size: max(12px, calc(16 * var(--u)));
    line-height: 1.2;
    text-align: center;
    opacity: 0.85;
}
.countdown__note:empty { display: none; }

/* Contagem encerrada: valores zerados e texto final no lugar de "Para o jogo". */
.countdown[data-state="finished"] .countdown__lead { visibility: hidden; }
.countdown[data-state="finished"] .countdown__tail-default { display: none; }
.countdown[data-state="finished"] .countdown__tail-final { display: block; white-space: normal; max-width: calc(420 * var(--u)); }

/* =====================================================================
   3. FORMULÁRIO (1406–2743)
   --f: unidade do formulário, com piso para manter campos legíveis em telas menores.
   ===================================================================== */
.rsvp {
    background: var(--form-bg);
    scroll-margin-top: 0;
}
.rsvp:focus { outline: none; }
.rsvp__stage {
    --f: max(var(--u), 0.7px);
    padding-top: calc(83.7 * var(--f));
    padding-bottom: calc(83.7 * var(--f)); /* mesmo respiro do topo da seção */
}

.rsvp__title {
    font-weight: 600;
    font-size: calc(52.21 * var(--f));
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--green-ink);
}

.rsvp__form {
    width: calc(714 * var(--f));
    margin: calc(71.5 * var(--f)) auto 0;
}

.field { position: relative; }
.field--1:not(:first-of-type) { margin-top: calc(31.4 * var(--f)); }
.field--2 { margin-top: calc(31.4 * var(--f)); }
.field--3 { margin-top: calc(34.4 * var(--f)); }
.field--4 { margin-top: calc(38.4 * var(--f)); }
.field--5 { margin-top: calc(35.4 * var(--f)); }

.field__label {
    display: block;
    padding-left: calc(6 * var(--f));
    font-weight: 600;
    font-size: calc(20.87 * var(--f));
    line-height: 1;
    text-transform: uppercase;
    color: var(--green-ink);
}

.field__control {
    display: block;
    width: 100%;
    height: calc(75 * var(--f));
    margin-top: calc(16.7 * var(--f));
    padding: 0 calc(24 * var(--f));
    border: 2px solid transparent;
    border-radius: calc(16 * var(--f));
    background: #fff;
    color: var(--green-ink);
    font-family: inherit;
    font-weight: 500;
    font-size: max(16px, calc(20 * var(--f)));
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}
select.field__control { cursor: pointer; }
.field__control:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.field__control[aria-invalid="true"] { border-color: var(--error); }
.field__control:disabled { cursor: not-allowed; color: rgba(8, 52, 40, 0.55); }

.field__error {
    position: absolute;
    left: calc(6 * var(--f));
    top: calc(100% + 4px);
    font-size: max(12px, calc(14 * var(--f)));
    line-height: 1.2;
    color: var(--error);
}
.field__error:empty { display: none; }
.field__hint {
    position: absolute;
    left: calc(6 * var(--f));
    top: calc(100% + 4px);
    font-size: max(12px, calc(14 * var(--f)));
    line-height: 1.2;
    color: rgba(8, 52, 40, 0.75);
}
.field__error:not(:empty) ~ .field__hint, .field__hint:has(~ .field__error:not(:empty)) { display: none; }

.consent {
    position: relative;
    margin-top: calc(34.6 * var(--f));
    min-height: calc(38.9 * var(--f));
    padding-left: calc(49 * var(--f));
}
.consent__box {
    position: absolute;
    left: calc(2 * var(--f));
    top: calc(2.4 * var(--f));
    width: calc(31 * var(--f));
    height: calc(30 * var(--f));
    margin: 0;
    border: 2px solid transparent;
    border-radius: calc(5 * var(--f));
    background: #fdfdfd;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.consent__box:checked {
    background: #fdfdfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23008338' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.consent__box[aria-invalid="true"] { border-color: var(--error); }
.consent__text {
    display: block;
    max-width: calc(610 * var(--f));
    font-family: "Poppins", "Noka", Arial, sans-serif;
    font-weight: 400;
    font-size: calc(16.2 * var(--f));
    line-height: calc(19.44 * var(--f));
    color: var(--consent-ink);
    cursor: pointer;
}
.consent__error { left: calc(49 * var(--f)); }

.captcha {
    position: relative;
    margin-top: calc(27.5 * var(--f));
    margin-left: calc(1 * var(--f));
}
/* O widget oficial tem 304 × 78; na arte ele aparece com 410 × 105 (escala aplicada via JS). */
.captcha__frame {
    width: calc(410 * var(--f));
    height: calc(105 * var(--f));
}
.captcha__widget { transform-origin: 0 0; }
.captcha__pending {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    border: 1px dashed #b9c2bf;
    border-radius: 4px;
    background: #fff;
    font-size: max(13px, calc(16 * var(--f)));
    line-height: 1.3;
    color: var(--green-ink);
}
.captcha__error { left: 0; }

.rsvp__submit {
    display: flex; /* bloco: evita o espaço de linha abaixo do botão */
    width: calc(570 * var(--f));
    height: calc(90 * var(--f));
    margin-top: calc(33.8 * var(--f));
    margin-left: calc(-1 * var(--f));
    padding: calc(5.8 * var(--f)) calc(5 * var(--f)) 0 0;
    font-size: calc(26.31 * var(--f));
}
.rsvp__submit[disabled] { opacity: 0.6; }
.rsvp__submit[aria-busy="true"] { opacity: 0.75; cursor: progress; }

.rsvp__status {
    margin-top: calc(20 * var(--f));
    max-width: calc(714 * var(--f));
    font-size: max(15px, calc(19 * var(--f)));
    line-height: 1.35;
}
.rsvp__status:empty { display: none; }
.rsvp__status .is-success { color: var(--green); font-weight: 600; }
.rsvp__status .is-error { color: var(--error); }

/* ---------- Convite: etapa do código e etapa de confirmação ---------- */
.invite-intro {
    margin-bottom: calc(28 * var(--f));
    font-size: max(15px, calc(19 * var(--f)));
    line-height: 1.4;
    color: var(--consent-ink);
}
.field__control--code { letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.invite-guest {
    position: relative;
    padding: calc(20 * var(--f)) calc(24 * var(--f));
    border-radius: calc(16 * var(--f));
    background: #fff;
}
.invite-guest .field__label { padding-left: 0; font-size: max(12px, calc(16 * var(--f))); opacity: .8; }
.invite-guest__name {
    margin-top: calc(8 * var(--f));
    padding-right: calc(150 * var(--f));
    font-weight: 600;
    font-size: max(17px, calc(24 * var(--f)));
    line-height: 1.25;
    color: var(--green-ink);
    overflow-wrap: anywhere;
}
.invite-guest__exit {
    position: absolute;
    right: calc(20 * var(--f));
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--green);
    font: inherit;
    font-size: max(13px, calc(16 * var(--f)));
    text-decoration: underline;
    cursor: pointer;
}
.invite-guest__exit:focus-visible, .invite-games__all:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.invite-games { margin-top: calc(34 * var(--f)); padding: 0; border: 0; min-width: 0; }
.invite-games legend { margin-bottom: calc(14 * var(--f)); }
.invite-games__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(12 * var(--f)); }
.invite-game {
    padding: calc(18 * var(--f)) calc(22 * var(--f));
    border: 2px solid transparent;
    border-radius: calc(16 * var(--f));
    background: #fff;
    color: var(--green-ink);
    font-size: max(15px, calc(20 * var(--f)));
    line-height: 1.3;
}
.invite-game--available:has(.invite-game__box:checked) { border-color: var(--green); }
.invite-game__pick { display: flex; align-items: flex-start; gap: calc(14 * var(--f)); cursor: pointer; }
.invite-game__box {
    flex: none;
    width: max(22px, calc(28 * var(--f)));
    height: max(22px, calc(28 * var(--f)));
    margin: 0;
    border: 2px solid #b9c2bf;
    border-radius: calc(6 * var(--f));
    background: #fdfdfd;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.invite-game__box:checked {
    border-color: var(--green);
    background: #fdfdfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23008338' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.invite-game__box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.invite-game__name { font-weight: 600; overflow-wrap: anywhere; }
.invite-game:not(.invite-game--available) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: #eef1f0; }
.invite-game__tag {
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    font-size: max(12px, calc(15 * var(--f)));
    white-space: nowrap;
}
.invite-game--confirmed .invite-game__tag { color: var(--green); }
.invite-game--blocked .invite-game__tag, .invite-game--closed .invite-game__tag { color: #6b5800; }
.invite-game__note { margin-top: calc(10 * var(--f)); padding-left: calc(42 * var(--f)); font-size: max(13px, calc(16 * var(--f))); opacity: .8; }
.invite-companion { margin-top: calc(16 * var(--f)); padding-left: calc(42 * var(--f)); }
.invite-companion__label { display: block; margin-top: calc(12 * var(--f)); font-weight: 600; font-size: max(13px, calc(16 * var(--f))); }
.invite-companion .field__control { margin-top: calc(8 * var(--f)); height: calc(64 * var(--f)); min-height: 44px; background: #f8f8f8; }
.invite-companion__error { margin-top: 4px; font-size: max(12px, calc(14 * var(--f))); color: var(--error); }
.invite-companion__error:empty { display: none; }
.invite-games__all {
    margin-top: calc(14 * var(--f));
    border: 0;
    background: none;
    color: var(--green);
    font: inherit;
    font-weight: 600;
    font-size: max(14px, calc(18 * var(--f)));
    text-decoration: underline;
    cursor: pointer;
}
.invite-contact { margin-top: calc(30 * var(--f)); display: grid; gap: calc(10 * var(--f)); }
.invite-contact__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: max(15px, calc(19 * var(--f))); color: var(--consent-ink); }
.invite-contact__item .field__label { padding-left: 0; font-size: max(12px, calc(16 * var(--f))); }
.invite-contact .field { margin-top: calc(10 * var(--f)); }
.rsvp__form--invite .rsvp__status:not([data-status]) { margin: calc(20 * var(--f)) 0 0; }

/* =====================================================================
   4. PATROCINADORES (2743–3400)
   ===================================================================== */
.sponsors { background: #fff; }
.sponsors__stage { height: calc(657 * var(--u)); }

.sponsors__master,
.sponsors__group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}
.sponsors__master  { left: calc(957.9 * var(--u)); top: calc(111.2 * var(--u)); }
.sponsors__group   { top: calc(395.9 * var(--u)); }
.sponsors__group--1 { left: calc(445.9 * var(--u)); }
.sponsors__group--2 { left: calc(959.2 * var(--u)); }
.sponsors__group--3 { left: calc(1490.4 * var(--u)); }

.sponsors__label {
    font-weight: 600;
    font-size: calc(22.84 * var(--u));
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--green-ink);
}

.sponsors__logo--wns   { width: calc(288 * var(--u)); height: calc(102 * var(--u)); margin-top: calc(37 * var(--u)); position: relative; left: calc(1.1 * var(--u)); }
.sponsors__logo--caixa { width: calc(305 * var(--u)); height: calc(69 * var(--u)); margin-top: calc(39.3 * var(--u)); position: relative; left: calc(-9.4 * var(--u)); }
.sponsors__logo--lnb   { width: calc(194 * var(--u)); height: calc(89 * var(--u)); margin-top: calc(37.3 * var(--u)); position: relative; left: calc(0.8 * var(--u)); }
.sponsors__logo--sp    { width: calc(484 * var(--u)); height: calc(68 * var(--u)); margin-top: calc(41.3 * var(--u)); position: relative; left: calc(-12.4 * var(--u)); }

/* =====================================================================
   5. RODAPÉ (3400–3611)
   ===================================================================== */
.footer {
    background: var(--green-footer);
    color: #fff;
}
.footer__stage { height: calc(211 * var(--u)); }
.footer__logo {
    position: absolute;
    left: calc(175 * var(--u));
    top: calc(70 * var(--u));
    width: calc(229 * var(--u));
    height: calc(84 * var(--u));
}
.footer__text {
    position: absolute;
    right: calc(165 * var(--u));
    top: calc(86.7 * var(--u));
    font-size: calc(20.74 * var(--u));
    line-height: calc(26.7 * var(--u));
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}
.footer__site {
    margin-right: calc(7 * var(--u));
    color: inherit;
    text-decoration: none;
}
.footer__site:hover { text-decoration: underline; }

/* =====================================================================
   LAYOUT EMPILHADO (tablet e celular, < 1024px)
   Não há arte mobile: mantém ordem, cores, tipografia e proporções,
   empilhando a colagem e o conteúdo da hero, e centralizando as demais seções.
   ===================================================================== */
@media (max-width: 1023.98px) {
    /* Hero: título em duas linhas e conteúdo ocupando a largura disponível */
    .hero__stage {
        --u: min(1px, calc((100cqw - 32px) / 640));
        width: 100%;
        height: auto;
        padding: 0 16px 56px;
    }
    .hero__logo { margin-top: 48px; }
    .hero__title { height: auto; }
    .hero__title span { display: block; line-height: calc(150 * var(--u)); }
    .hero__rule { width: 100%; max-width: calc(722 * var(--u)); }
    .hero__subtitle { font-size: max(11px, calc(22.7 * var(--u))); --subtitle-tracking: 0.3em; }
    .hero__games { gap: calc(41 * var(--u)); }
    /* Texto livre (sem data cadastrada) vem numa linha só: quebra dentro da largura das bandeiras */
    .hero__date {
        font-size: max(13px, calc(21.3 * var(--u)));
        line-height: 1.2;
        max-width: max(9.5em, calc(271.6 * var(--u)));
        white-space: normal;
        text-wrap: balance;
    }
    .hero__venue { font-size: max(13px, calc(22.7 * var(--u))); white-space: normal; }
    .hero__cta { width: 100%; max-width: 564px; height: max(56px, calc(86 * var(--u))); font-size: max(16px, calc(26.7 * var(--u))); }

    /* Contador */
    .countdown { background-size: cover; background-position: center; }
    .countdown__stage {
        --u: min(1px, calc((100cqw - 32px) / 560));
        width: 100%;
        height: auto;
        padding: 28px 16px 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .countdown__lead, .countdown__tail, .countdown__unit, .countdown__note { position: static; }
    .countdown__lead, .countdown__tail {
        font-size: max(13px, calc(24.94 * var(--u)));
        letter-spacing: 0.6em;
        padding-left: 0.6em;
        line-height: 1.2;
        text-align: center;
    }
    .countdown__tail br { display: none; }
    .countdown__units {
        display: flex;
        justify-content: center;
        gap: calc(28 * var(--u));
    }
    .countdown__unit { width: auto; min-width: calc(110 * var(--u)); }
    .countdown__value { font-size: max(40px, calc(78.77 * var(--u))); }
    .countdown__label { font-size: max(15px, calc(32.22 * var(--u))); }
    .countdown__unit .countdown__label { left: 0 !important; }
    .countdown[data-state="finished"] .countdown__lead { display: none; }
    .countdown[data-state="finished"] .countdown__tail-final { max-width: none; }

    /* Formulário */
    .rsvp__stage {
        --f: 0.8px;
        width: 100%;
        min-height: 0;
        padding: 56px 16px;
    }
    .rsvp__title { font-size: min(calc(52.21 * var(--f)), 7.4cqw); }
    .rsvp__form { width: 100%; max-width: calc(714 * var(--f)); margin-top: 40px; }
    .field + .field { margin-top: 34px; }
    .field--game + .field { margin-top: 48px; } /* espaço para o aviso de "dois jogos" (2 linhas) */
    .consent { margin-top: 36px; }
    .consent__text { max-width: none; font-size: 14px; line-height: 1.4; }
    .captcha { margin-top: 30px; }
    .captcha__frame { max-width: 100%; }
    .rsvp__submit { width: 100%; max-width: 570px; height: 64px; margin-top: 38px; margin-left: 0; font-size: 18px; }
    .invite-guest { padding: 16px 16px 48px; }
    .invite-guest__name { padding-right: 0; }
    .invite-guest__exit { top: auto; bottom: 14px; right: auto; left: 16px; transform: none; }
    .invite-game { padding: 14px 16px; }
    .invite-game__note, .invite-companion { padding-left: 0; }
    .invite-contact { margin-top: 28px; }

    /* Patrocinadores */
    .sponsors__stage {
        --u: min(0.85px, calc((100cqw - 32px) / 560));
        width: 100%;
        height: auto;
        padding: 56px 16px 64px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 48px 40px;
    }
    .sponsors__master, .sponsors__group { position: static; transform: none; }
    .sponsors__master { flex-basis: 100%; }
    .sponsors__label { font-size: max(14px, calc(22.84 * var(--u))); white-space: normal; text-align: center; }
    .sponsors__logo { left: 0 !important; max-width: calc(100cqw - 32px); height: auto !important; }
    .sponsors__logo--wns, .sponsors__logo--caixa, .sponsors__logo--lnb, .sponsors__logo--sp { margin-top: 20px; }

    /* Rodapé */
    .footer__stage {
        --u: 0.8px;
        width: 100%;
        height: auto;
        padding: 40px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }
    .footer__logo, .footer__text { position: static; }
    .footer__text { text-align: center; white-space: normal; font-size: 15px; line-height: 1.5; }
    .footer__site { margin-right: 0; }
}

/* =====================================================================
   DOCUMENTOS LEGAIS, AVISOS DO FORMULÁRIO E LINKS DO RODAPÉ
   ===================================================================== */
.captcha__load {
    width: 100%;
    height: 100%;
    border: 1px dashed #b9c2bf;
    border-radius: 4px;
    background: #fff;
    color: var(--green-ink);
    font: 600 max(13px, calc(16 * var(--f))) / 1.3 "Noka", Arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}
.captcha__load:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.captcha__note,
.consent__note,
.invite-companion__note {
    margin: calc(10 * var(--f)) 0 0;
    max-width: calc(610 * var(--f));
    font-family: "Poppins", "Noka", Arial, sans-serif;
    font-size: max(12px, calc(14 * var(--f)));
    line-height: 1.4;
    text-transform: none;
    color: var(--consent-ink);
}
.captcha__note { margin-top: calc(24 * var(--f)); }
.consent__note { margin-top: calc(14 * var(--f)); padding-left: calc(49 * var(--f)); max-width: calc(659 * var(--f)); }
.consent__text a, .captcha__note a, .consent__note a, .invite-companion__note a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.consent__text a:focus-visible, .captcha__note a:focus-visible, .consent__note a:focus-visible, .invite-companion__note a:focus-visible,
.footer__legal a:focus-visible, .legal a:focus-visible, .legal-top a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.footer__legal {
    position: absolute;
    right: calc(165 * var(--u));
    top: calc(152 * var(--u));
    display: flex;
    gap: calc(28 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: 1.2;
    text-transform: uppercase;
}
.footer__legal a { color: #fff; text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

/* Páginas legais: leitura confortável, mesma identidade (Noka nos títulos, Poppins no texto). */
.legal-body { background: var(--form-bg); }
.legal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px max(16px, calc((100% - 960px) / 2));
    background: var(--green-footer);
    color: #fff;
}
.legal-top__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; }
.legal-top__brand img { width: auto; height: 48px; } /* escudo 698 × 870: mantém a proporção */
.legal-top__back { color: #fff; font-size: 15px; }
.legal {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 16px 64px;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-transform: none;
    color: #1a2424;
}
.legal h1, .legal h2 { font-family: "Noka", Arial, sans-serif; text-transform: uppercase; color: var(--green-ink); line-height: 1.2; }
.legal__title { margin: 0 0 6px; font-size: clamp(28px, 4vw, 40px); }
.legal__meta { margin: 0 0 18px; color: #4d625b; font-size: 14px; }
.legal__docs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 28px; padding: 12px 0; border-block: 1px solid #d8dfdc; font-size: 15px; }
.legal__docs a { color: var(--green); }
.legal__docs a[aria-current="page"] { color: var(--green-ink); font-weight: 600; text-decoration: none; }
.legal__lead { font-size: 18px; }
.legal__section { margin-top: 32px; }
.legal__section h2 { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 24px); }
.legal a { color: var(--green); text-underline-offset: 2px; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal code { font-size: 14px; background: #eef1ef; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.legal__table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid #d8dfdc; border-radius: 10px; background: #fff; }
.legal__table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.legal__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.legal__table th { background: var(--green-footer); color: #fff; text-align: left; font-weight: 600; padding: 10px 12px; }
.legal__table td { padding: 10px 12px; border-top: 1px solid #e3e8e6; vertical-align: top; }
.legal-draft { margin: 0 0 28px; padding: 14px 18px; border: 2px solid #b54708; border-radius: 10px; background: #fffaeb; color: #7a2e0e; font-size: 15px; }
.legal-draft p { margin: 0 0 8px; }
.legal-draft ul { margin: 0 0 8px; }
.legal-pending { background: #fef0c7; color: #7a2e0e; border-radius: 4px; padding: 0 4px; font-weight: 600; }
.legal-pending-block { padding: 10px 14px; border-left: 4px solid #b54708; background: #fffaeb; }
.legal-body .footer { margin-top: 0; }

@media (max-width: 1023.98px) {
    .footer__legal { position: static; flex-wrap: wrap; justify-content: center; gap: 10px 20px; font-size: 14px; }
    .consent__note { padding-left: 0; max-width: none; font-size: 13px; }
    .captcha__note { max-width: none; font-size: 13px; }
    .legal-top__brand span { display: none; }
}

/* Aceite: caixa centralizada com a linha do texto e borda visível sobre o fundo claro do formulário. */
.consent { display: flex; align-items: center; min-height: calc(34.8 * var(--f)); }
.consent__box {
    top: 50%;
    transform: translateY(-50%);
    border-color: #7d8f89;
    background-color: #fff;
}
.consent__box:hover { border-color: var(--green); }
.consent__box:checked { border-color: var(--green); }
.consent__box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent__box[aria-invalid="true"] { border-color: var(--error); }

/* Mensagem de presença confirmada: cartão verde com ícone, para não passar despercebida. */
.rsvp__status .is-success {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--f));
    margin: 0;
    padding: calc(20 * var(--f)) calc(24 * var(--f));
    border: 2px solid var(--green);
    border-radius: calc(16 * var(--f));
    background: #e8f5ed;
    color: var(--green-ink);
    font-size: max(16px, calc(21 * var(--f)));
    line-height: 1.35;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(0, 131, 56, 0.12);
}
.rsvp__status .is-success::before {
    content: "";
    flex: 0 0 auto;
    width: max(32px, calc(44 * var(--f)));
    height: max(32px, calc(44 * var(--f)));
    border-radius: 50%;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* Seletor de idioma (canto superior direito, sobre a arte): select com bandeira + sigla */
.lang-switch {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.lang-switch__select {
    min-height: 40px;
    padding: 0 38px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(3, 30, 20, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat;
    color: #fff;
    font: 600 15px/1 "Noka", Arial, sans-serif;
    letter-spacing: 0.04em;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.lang-switch__select:hover { background-color: rgba(3, 30, 20, 0.7); }
.lang-switch__select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lang-switch__select option { color: var(--green-ink); background: #fff; }
.lang-switch__go { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--green-ink); font-weight: 600; cursor: pointer; }

.legal-lang-note { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--green); background: #e8f5ed; font-size: 15px; }
/* "INVITACIÓN" (es, 1ª linha) e "INVITATION" (en, 2ª linha) são mais longos que "CONVITE"/"OFICIAL":
   no celular, reduz só essa palavra para respeitar a margem lateral. */
@media (max-width: 1023.98px) {
    html[lang="es"] .hero__title span:first-child,
    html[lang="en"] .hero__title span:last-child { font-size: 0.86em; }
}

/* Dica de telefone internacional (texto absoluto sob o campo): espaço antes do aceite dos Termos. */
.invite-contact .field:has(.field__hint) { margin-bottom: max(22px, calc(26 * var(--f))); }

/* ---------- Telefone: código do país + número (phone-country.js) ---------- */
fieldset.phone-field { margin-inline: 0; padding: 0; border: 0; min-width: 0; }
.phone-field__row { display: flex; gap: calc(12 * var(--f)); margin-top: calc(16.7 * var(--f)); }
.phone-field__country { position: relative; flex: 0 0 auto; }
.phone-field__number { flex: 1 1 auto; min-width: 0; }
.phone-field__number .field__control { margin-top: 0; }
.phone-field__country select { height: calc(75 * var(--f)); border: 2px solid transparent; border-radius: calc(16 * var(--f)); background: #fff; font: inherit; padding: 0 12px; }
.phone-country__native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.phone-country { position: relative; }
.phone-country__button {
    display: inline-flex; align-items: center; gap: 10px;
    height: calc(75 * var(--f)); min-height: 48px; padding: 0 calc(18 * var(--f));
    border: 2px solid transparent; border-radius: calc(16 * var(--f)); background: #fff;
    color: var(--green-ink); font: 600 max(16px, calc(20 * var(--f))) / 1 "Noka", Arial, sans-serif; cursor: pointer;
}
.phone-country__button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.phone-country__flag { font-size: 1.35em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.phone-country__caret { width: 10px; height: 10px; margin-left: 4px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.phone-country__button[aria-expanded="true"] .phone-country__caret { transform: translateY(3px) rotate(-135deg); }
.phone-country__panel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
    width: min(420px, calc(100vw - 32px)); padding: 12px;
    border: 1px solid #dfe5e2; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(3, 30, 20, 0.16);
    text-transform: none;
}
.phone-country__search {
    width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid #cdd8d3; border-radius: 10px;
    font: 400 16px "Poppins", Arial, sans-serif; color: var(--green-ink);
}
.phone-country__search:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.phone-country__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.phone-country__option {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
    font: 400 15px "Poppins", Arial, sans-serif; color: #1a2424;
}
.phone-country__option.is-active, .phone-country__option:hover { background: #e8f5ed; }
.phone-country__option[aria-selected="true"] { font-weight: 600; }
.phone-country__dial { color: #64736e; }
.phone-country__empty { margin: 10px 4px; font: 400 14px "Poppins", Arial, sans-serif; color: #64736e; }
@media (max-width: 1023.98px) {
    .phone-field__row { gap: 10px; margin-top: 10px; }
    .phone-country__button { padding: 0 12px; }
}
.phone-country__option[hidden], .phone-country__panel[hidden], .phone-country__empty[hidden] { display: none; }