/* =========================================================
   SÓ CONVIDADOS — página do convidado (/c/<token>)
   Um "app" de celular: telas que trocam pelo menu de baixo,
   sem uma página comprida pra rolar. No computador, fica
   dentro de uma moldura de celular.
   ========================================================= */
html, body.convite-pg { height: 100%; }
body.convite-pg { overflow: hidden; background: var(--paper); }

.app {
  position: relative; height: 100dvh; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-rows: 1fr auto;
  background: var(--paper); overflow: hidden;
}
/* computador/tablet: moldura de celular no meio da tela */
@media (min-width: 700px) and (min-height: 640px) {
  body.convite-pg {
    display: grid; place-items: center;
    background:
      radial-gradient(circle at 20% 15%, rgba(255,201,60,.35) 0 120px, transparent 121px),
      radial-gradient(circle at 85% 80%, rgba(255,59,47,.18) 0 160px, transparent 161px),
      var(--paper);
  }
  .app {
    width: 400px; height: min(860px, calc(100dvh - 48px)); margin: 0;
    border: 10px solid var(--ink); border-radius: 46px;
    box-shadow: 0 40px 60px -30px rgba(42,22,15,.55), 0 0 0 2px rgba(42,22,15,.15);
  }
}

.carregando { align-self: center; text-align: center; font-weight: 600; color: var(--ink-2); }
.toast {
  position: absolute; z-index: 30; top: 12px; left: 12px; right: 12px; margin: 0;
  /* o .aviso do painel.css centraliza com translateX(-50%) e largura fixa; aqui quem manda é left/right */
  width: auto; transform: none; animation: toast-entra .22s ease both;
  box-shadow: 0 10px 24px -10px rgba(42,22,15,.5);
}
@keyframes toast-entra { from { opacity: 0; transform: translateY(-10px); } }

/* telas */
.telas { position: relative; overflow: hidden; }
.tela {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 18px 28px; scrollbar-width: none;
  animation: entra .28s ease both;
}
.tela::-webkit-scrollbar { display: none; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tela { animation: none; } }
.tela__topo { margin-bottom: 14px; }
.tela__topo h2 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1.05; }

/* ícones (traço, estilo Lucide) */
.ic { width: 22px; height: 22px; flex: none; }
.btn--ic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Início: a capa ---------- */
.tela--inicio {
  background: var(--red); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.6dvh, 16px); text-align: center; padding: 22px 22px 18px;
}
.tela--inicio::before { /* confete discreto no fundo */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle, var(--g-yellow) 0 3px, transparent 4px) 0 0 / 74px 74px,
    radial-gradient(circle, var(--paper) 0 2px, transparent 3px) 37px 30px / 74px 74px;
  -webkit-mask: linear-gradient(#000, transparent 32%, transparent 70%, #000);
          mask: linear-gradient(#000, transparent 32%, transparent 70%, #000);
}
.tela--inicio > * { position: relative; }
.capa-foto { width: min(64vw, 34dvh, 250px); margin: 0; flex: none; }
.capa-quem .abertura__nome { margin-top: 0; font-size: clamp(2.6rem, 1.6rem + 5dvh, 3.6rem); }
.capa-info { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; justify-items: center; }
.capa-info li { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .98rem; line-height: 1.25; }
.capa-info .ic { width: 18px; height: 18px; color: var(--g-yellow); }
.capa-info li::first-letter { text-transform: uppercase; }
.capa-botoes { display: grid; gap: 10px; width: 100%; max-width: 330px; margin-top: 4px; }
.capa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 14px 18px; font: 700 1.08rem var(--f-body);
  text-decoration: none; cursor: pointer; transition: transform .12s ease;
}
.capa-btn:active { transform: translateY(2px) scale(.99); }
.capa-btn--jogar { background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.capa-btn--jogar .ic { color: var(--red-deep); }
.capa-btn--jogar:disabled { opacity: .8; cursor: default; font-size: .95rem; box-shadow: none; }
.capa-btn--placar { background: rgba(42,22,15,.88); color: var(--paper); border: 2px solid rgba(255,243,226,.5); font-size: 1rem; padding: 12px 18px; }
.capa-btn--placar .ic { color: var(--g-yellow); }
.capa-status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  color: var(--paper); font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px;
}
.capa-status.is-ok { text-decoration: none; background: var(--g-green); color: #fff; border-radius: 999px; padding: 5px 12px 5px 8px; }
.capa-status .ic { width: 18px; height: 18px; }
@media (max-height: 620px) { .capa-foto { width: min(50vw, 28dvh); } }

/* ---------- menu de baixo ---------- */
.abas-app {
  position: relative; z-index: 5;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--card); border-top: 2px solid var(--ink);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.aba {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0; text-decoration: none; color: var(--ink-2);
  font: 700 .72rem var(--f-body); -webkit-tap-highlight-color: transparent;
}
.aba__ic { display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px; transition: background .2s ease; }
.aba__ic .ic { width: 22px; height: 22px; }
.aba.is-on { color: var(--red-deep); }
.aba.is-on .aba__ic { background: rgba(255,59,47,.14); }
.aba.is-on .aba__ic .ic { stroke-width: 2.4; }
.aba__ponto {
  position: absolute; top: 4px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--card);
}

/* ---------- folha "quem vai jogar" ---------- */
.veu, .gaveta { grid-column: 1 / -1; grid-row: 1 / -1; }
.veu { position: absolute; inset: 0; z-index: 20; background: rgba(42,22,15,.45); animation: aparece .2s ease both; }
.gaveta {
  position: absolute; z-index: 21; left: 0; right: 0; bottom: 0; width: 100%;
  max-height: 85%; overflow-y: auto; scrollbar-width: none;
  background: var(--card); border-top: 2.5px solid var(--ink); border-radius: 26px 26px 0 0;
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  animation: sobe .26s cubic-bezier(.2,.8,.2,1) both;
}
.gaveta h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; margin-top: 8px; }
.gaveta__alca { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(42,22,15,.25); margin: 0 auto; }
.gaveta__fechar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(42,22,15,.08); color: var(--ink); cursor: pointer; }
@keyframes sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.quem-joga__nomes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.quem-joga__nomes .btn { padding: .7em 1.1em; }
.quem-joga__outro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 18px; }
.quem-joga__outro .btn { margin: 0; }

/* o convite impresso, como o do hero */
.convite-papel {
  position: relative;
  background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 6px;
  box-shadow: 6px 6px 0 var(--ink);
  outline: 2px solid var(--red); outline-offset: -14px;
  padding: 38px clamp(24px, 6vw, 44px) 32px;
  text-align: center;
  margin-bottom: 30px;
  transform: rotate(-1deg);
}
.convite-papel__oi { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; }
.convite-papel__kicker { margin-top: 10px; font-style: italic; color: var(--ink-2); }
.convite-papel__nome {
  font-family: var(--f-display); font-weight: 400; color: var(--red);
  font-size: clamp(2.6rem, 2rem + 4vw, 3.6rem); line-height: .95; margin-top: 6px;
  text-shadow: 3px 3px 0 var(--ink); overflow-wrap: anywhere;
}
.convite-papel__idade { font-family: var(--f-display); font-size: 1.4rem; margin-top: 8px; }
.convite-papel__idade span { font-size: 2.4em; line-height: .8; vertical-align: -.15em; }
.convite-papel__info { margin: 20px 0 0; text-align: left; border-top: 1px dashed var(--ink); }
.convite-papel__info div { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ink); }
.convite-papel__info dt { font-family: var(--f-type); color: var(--ink-2); }
.convite-papel__info dd { font-weight: 600; overflow-wrap: anywhere; }
.convite-papel__info dd::first-letter { text-transform: uppercase; }
.convite-papel__recado { margin-top: 16px; font-style: italic; font-weight: 600; }
.stamp--convite { position: absolute; right: 10px; bottom: -18px; }
.convite-papel { margin: 6px 4px 22px; }
#mapa { margin-top: 14px; }
#mapa .ic { width: 18px; height: 18px; }
.convite-cta { width: 100%; }

/* resposta: ver o bloco "confirmação de presença" no fim */
.feito { text-align: center; margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
#mapa { margin-top: 14px; }
.jogo-festa { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.jogo-festa img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 10px; }
.jogo-festa h2 { margin-bottom: 6px; }
.jogo-festa__kicker { font-family: var(--f-type); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.jogo-festa h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; margin: 2px 0 6px; }
.jogo-festa { margin-top: 22px; }

/* ---------- placar ---------- */
.placar-lista { list-style: none; padding: 0; margin: 0 0 16px; background: var(--ink); color: var(--paper); border-radius: 16px; overflow: hidden; }
.placar-linha { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px dashed rgba(255,243,226,.22); }
.placar-linha:last-child { border-bottom: 0; }
.placar-pos { font-family: var(--f-led, var(--f-type)); color: var(--g-yellow); }
.placar-nome { font-weight: 700; overflow-wrap: anywhere; }
.placar-pts { font-family: var(--f-led, var(--f-type)); font-size: 1.2rem; color: var(--g-yellow); font-variant-numeric: tabular-nums; }
.placar-linha.is-lider { background: rgba(255,201,60,.14); }
.placar-linha.is-seu .placar-nome::after { content: " ★"; color: var(--g-yellow); }
.placar-vazio { padding: 18px 14px; }
#jogarDoPlacar { width: 100%; }

/* presentes */
.feito { text-align: center; margin-top: 22px; font-size: .88rem; color: var(--ink-2); }
.abertura__inicial {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  font: 5.5rem/1 var(--f-display); color: var(--ink); background: var(--g-yellow);
}

/* ---------- leitura ---------- */
/* capa: tijolo com texto creme (7,2:1); o vermelho vivo fica no confete e nos detalhes */
.tela--inicio { background: var(--red-fundo); }
.capa-info li { font-size: 1rem; }
.capa-status { font-size: 1rem; }
/* "faz 7 anos": texto em Familjen, só o número em Shrikhand */
.abertura__idade, .convite-papel__idade { font-family: var(--f-body); font-weight: 700; font-size: 1.15rem; }
.abertura__idade span, .convite-papel__idade span { font-family: var(--f-display); font-weight: 400; }
.convite-papel__nome { color: var(--red-titulo); }
.convite-papel__info dt { font-family: var(--f-body); font-weight: 600; }
.jogo-festa__kicker { font-family: var(--f-body); font-weight: 700; font-size: .82rem; }
.feito { font-size: 1rem; }
/* divulgação discreta na capa: leva pro site, explicando como funciona */
.capa-marca {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  padding: 6px 13px 6px 9px; border-radius: 999px;
  background: rgba(42,22,15,.35); border: 1.5px solid rgba(255,243,226,.45);
  color: var(--paper); font-size: .88rem; font-weight: 500; text-decoration: none;
}
.capa-marca .ic { width: 16px; height: 16px; color: var(--g-yellow); flex: none; }
.capa-marca b { font-weight: 700; }
.capa-marca:hover, .capa-marca:focus-visible { background: rgba(42,22,15,.6); }
/* centraliza sem cortar o topo quando a capa não cabe na tela (celular baixo, paisagem): as molas encolhem e rola desde o topo */
.tela--inicio { justify-content: flex-start; }
.capa-mola { flex: 1 0 0; min-height: 0; }
/* a arte do convite que a família mandou: inteira, sem corte, com moldura de papel */
.capa-arte { margin: 0; flex: none; max-width: min(88vw, 440px); }
.capa-arte img {
  display: block; max-width: 100%; max-height: 60dvh; width: auto; height: auto; margin: 0 auto;
  border-radius: 14px; border: 3px solid var(--paper); box-shadow: 0 10px 0 rgba(42,22,15,.35), 0 18px 40px rgba(0,0,0,.25);
}
@media (max-height: 620px) { .capa-arte img { max-height: 52dvh; } }
@media (max-height: 620px) { .capa-marca { margin-top: 0; } }

.privado a { color: inherit; }

/* ---------- paleta escolhida pela família (temas.css) ---------- */
.tela--inicio { background: var(--t-fundo); color: var(--t-texto); }
.tela--inicio::before {
  background:
    radial-gradient(circle, var(--t-conf1) 0 3px, transparent 4px) 0 0 / 74px 74px,
    radial-gradient(circle, var(--t-conf2) 0 2px, transparent 3px) 37px 30px / 74px 74px;
}
.capa-quem .abertura__nome { color: var(--t-texto); text-shadow: .05em .05em 0 var(--t-sombra-nome); }
.tela--inicio .abertura__idade span { color: var(--t-icone); text-shadow: 2px 2px 0 var(--t-borda); }
.capa-info .ic { color: var(--t-icone); }
.capa-foto { border-color: var(--t-texto); }
.capa-arte img { border-color: var(--t-texto); }

/* o botão principal da capa: confirmar presença */
.capa-rsvp { width: 100%; max-width: 340px; display: grid; justify-items: center; gap: 8px; margin-top: 6px; }
.capa-rsvp__btn {
  position: relative; overflow: hidden; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px 14px 14px; border-radius: 20px; text-align: left; text-decoration: none;
  background: var(--t-cta); color: var(--t-cta-txt);
  border: 3px solid var(--t-borda); box-shadow: 0 6px 0 var(--t-borda);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.capa-rsvp__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--t-borda); }
.capa-rsvp__btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--t-borda); }
.capa-rsvp__btn:focus-visible { outline: 3px solid var(--t-texto); outline-offset: 3px; }
.capa-rsvp__ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--t-cta-txt); color: var(--t-cta);
}
.capa-rsvp__ic .ic { width: 26px; height: 26px; stroke-width: 2.3; }
.capa-rsvp__txt { display: grid; gap: 2px; min-width: 0; }
.capa-rsvp__txt b { font: 400 1.45rem/1.05 var(--f-display); }
.capa-rsvp__txt small { font-size: .88rem; font-weight: 600; opacity: .85; }
.capa-rsvp__seta { width: 24px; height: 24px; stroke-width: 2.6; }
/* brilho que passa de tempos em tempos, só enquanto ninguém respondeu */
.capa-rsvp__btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: brilho 4.5s ease-in-out 1.2s infinite;
}
@keyframes brilho { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.capa-rsvp__btn.is-ok, .capa-rsvp__btn.is-nao { box-shadow: 0 4px 0 var(--t-borda); }
.capa-rsvp__btn.is-ok::after, .capa-rsvp__btn.is-nao::after { display: none; }
.capa-rsvp__btn.is-ok { background: #fff; color: #14532D; }
.capa-rsvp__btn.is-ok .capa-rsvp__ic { background: #1F8A50; color: #fff; }
.capa-rsvp__btn.is-ok .capa-rsvp__txt b { font-size: 1.3rem; }
.capa-rsvp__btn.is-nao { background: var(--t-sec); color: var(--t-sec-txt); border-color: var(--t-sec-borda); }
.capa-rsvp__btn.is-nao .capa-rsvp__ic { background: var(--t-sec-txt); color: var(--t-fundo); }
.capa-rsvp__btn.is-nao .capa-rsvp__txt b { font: 700 1.05rem/1.2 var(--f-body); }
.capa-rsvp__nao { color: var(--t-texto); font-weight: 700; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; padding: 4px 8px; }
@media (prefers-reduced-motion: reduce) { .capa-rsvp__btn::after { animation: none; display: none; } }

/* jogo e placar viram secundários, lado a lado */
.capa-botoes { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-width: 340px; margin-top: 2px; }
.capa-btn { padding: 11px 14px; font-size: .98rem; }
.capa-btn--jogar, .capa-btn--placar {
  background: var(--t-sec); color: var(--t-sec-txt);
  border: 2px solid var(--t-sec-borda); box-shadow: none;
}
.capa-btn--jogar .ic, .capa-btn--placar .ic { color: var(--t-icone); width: 19px; height: 19px; }
.capa-marca { background: var(--t-sec); border-color: var(--t-sec-borda); color: var(--t-sec-txt); opacity: .9; }
.capa-marca .ic { color: var(--t-icone); }
.capa-marca:hover, .capa-marca:focus-visible { background: var(--t-sec); opacity: 1; }

/* as outras telas: o destaque segue a paleta */
.aba.is-on { color: var(--t-tinta); }
.aba.is-on .aba__ic { background: color-mix(in srgb, var(--t-tinta) 15%, transparent); }
.aba__ponto { background: var(--t-tinta); }
.convite-papel { outline-color: var(--t-tinta); }
.convite-papel__nome { color: var(--t-tinta); }
.app .btn:not(.btn--ink):not(.link-btn) { background: var(--t-tinta); }
.app .btn--ink { background: var(--ink); }
.convite-cta { font-size: 1.15rem; padding: 1.1em 1.4em; }
.abertura__inicial { background: var(--t-circulo); color: var(--t-circulo-txt); }
.capa-rsvp__txt b { font-size: 1.28rem; }
@media (max-width: 350px) { .capa-rsvp__txt b { font-size: 1.12rem; } .capa-rsvp__ic { width: 40px; height: 40px; } }
/* com a arte, o botão de presença tem que aparecer sem rolar, até em celular pequeno */
.capa-arte img { max-height: min(60dvh, calc(100dvh - 340px)); min-height: 0; }
@media (max-height: 620px) { .capa-arte img { max-height: max(46dvh, calc(100dvh - 340px)); } }
/* o nome vai no topo da capa; com a arte, menor (a arte costuma trazer o nome também) */
.capa-quem .abertura__nome { line-height: .95; }
.capa-quem.is-compacto .abertura__nome { font-size: clamp(1.7rem, 1.2rem + 2.4dvh, 2.3rem); }
.capa-arte img { max-height: min(56dvh, calc(100dvh - 400px)); }
@media (max-height: 620px) { .capa-arte img { max-height: max(40dvh, calc(100dvh - 400px)); } }
/* nome preso no topo; o resto centraliza no espaço que sobra */
.tela--inicio { padding-top: clamp(18px, 3.5dvh, 34px); }
.capa-foto { width: min(60vw, 30dvh, 250px); }
@media (max-height: 700px) { .capa-marca { display: none; } }
.capa-arte img { max-height: min(52dvh, calc(100dvh - 440px)); }
@media (max-height: 700px) { .capa-arte img { max-height: max(40dvh, calc(100dvh - 380px)); } }

/* ---------- confirmação de presença ----------
   Sem moldura em volta de tudo: cartões brancos com sombra leve, campos preenchidos (sem contorno),
   escolhas em controle segmentado e o botão de enviar preso embaixo. */
.tela--rsvp { padding: 22px 16px 0; display: flex; flex-direction: column; }
.rsvp-topo { margin-bottom: 18px; }
.rsvp-topo__oi { font-weight: 700; color: var(--t-tinta); }
.rsvp-topo h2 { font-family: var(--f-display); font-weight: 400; font-size: 2.1rem; line-height: 1.05; margin-top: 2px; }
.rsvp-topo__festa { margin-top: 6px; color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.rsvp-topo__festa::first-letter { text-transform: uppercase; }
#resposta { display: flex; flex-direction: column; flex: 1; }

/* Vou / Não vou: dois blocos grandes lado a lado */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.escolha__op {
  display: grid; justify-items: center; gap: 10px; padding: 20px 10px 18px; cursor: pointer;
  background: #fff; color: var(--ink); border: 0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(42,22,15,.06), 0 8px 22px -8px rgba(42,22,15,.18);
  font: 700 1.05rem var(--f-body); -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.escolha__op:active { transform: scale(.97); }
.escolha__op:focus-visible { outline: 3px solid var(--t-tinta); outline-offset: 3px; }
.escolha__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.escolha__ic .ic { width: 26px; height: 26px; }
.escolha__op--sim .escolha__ic { background: #E3F4EA; color: #1F8A50; }
.escolha__op--nao .escolha__ic { background: rgba(42,22,15,.07); color: var(--ink-2); }
.escolha__op--sim.is-escolhido { background: var(--t-tinta); color: #fff; box-shadow: 0 10px 24px -10px var(--t-tinta); }
.escolha__op--sim.is-escolhido .escolha__ic { background: rgba(255,255,255,.2); color: #fff; }
.escolha__op--nao.is-escolhido { background: var(--ink); color: var(--paper); }
.escolha__op--nao.is-escolhido .escolha__ic { background: rgba(255,255,255,.14); color: var(--paper); }
/* escolheu um lado: o outro fica discreto */
#resposta[data-etapa="sim"] .escolha__op--nao, #resposta[data-etapa="nao"] .escolha__op--sim { opacity: .6; box-shadow: none; background: rgba(255,255,255,.6); }
.escolha .is-escolhido { outline: 0; }

.rsvp-form { display: flex; flex-direction: column; flex: 1; margin-top: 26px; }
.rsvp-form h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.rsvp-form > .pequeno { margin-top: 4px; font-size: .9rem; }
.pessoas { list-style: none; padding: 0; display: grid; gap: 12px; margin: 14px 0 0; }

/* uma pessoa = um cartão */
.pessoa {
  display: grid; gap: 12px; padding: 12px; border: 0; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(42,22,15,.06), 0 6px 18px -8px rgba(42,22,15,.16);
}
.pessoa__topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.pessoa__av {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--t-tinta) 14%, #fff); color: var(--t-tinta); font: 400 1.25rem/1 var(--f-display);
}
.tela--rsvp .pessoa input.pessoa__nome, .tela--rsvp .rsvp-campo textarea, .tela--rsvp .pessoa select {
  width: 100%; min-width: 0; border: 0; border-radius: 12px; background: #F4EFE9; color: var(--ink);
  font: 600 1.02rem var(--f-body); padding: 12px 14px; box-shadow: none; outline: 0;
  transition: box-shadow .15s ease, background .15s ease;
}
.tela--rsvp .pessoa input.pessoa__nome:focus, .tela--rsvp .rsvp-campo textarea:focus, .tela--rsvp .pessoa select:focus { background: #fff; box-shadow: 0 0 0 2px var(--t-tinta); outline: 0; }
.tela--rsvp input.pessoa__nome::placeholder, .rsvp-campo textarea::placeholder { color: #9A8D84; font-weight: 500; }
.pessoa__tirar {
  display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--ink-2);
}
.pessoa__tirar:hover { background: rgba(42,22,15,.07); color: var(--red-deep); }
.pessoa__tirar .ic { width: 18px; height: 18px; }
.pessoa__tirar[hidden] { display: none; }

/* controle segmentado (Adulto | Criança, Menino | Menina) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 4px; border-radius: 12px; background: #F4EFE9; }
.tela--rsvp .seg label {
  display: block; position: relative; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 700; font-size: .95rem; -webkit-tap-highlight-color: transparent;
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 9px; color: var(--ink-2); transition: background .15s ease, color .15s ease; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(42,22,15,.16); }
.seg input:focus-visible + span { box-shadow: 0 0 0 2px var(--t-tinta); }
.pessoa__crianca { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; align-items: stretch; }
.pessoa__crianca[hidden] { display: none; }
.pessoa select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background: #F4EFE9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
}

.rsvp-mais {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; width: 100%;
  padding: 13px; border: 0; border-radius: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--t-tinta) 10%, transparent); color: var(--t-tinta); font: 700 1rem var(--f-body);
}
.rsvp-mais .ic { width: 18px; height: 18px; }
.rsvp-form .rsvp-campo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 22px; font-weight: 700; font-size: .98rem; }
.rsvp-form .rsvp-campo textarea { flex-basis: 100%; }
.rsvp-campo .opc { font-weight: 500; }
.rsvp-campo textarea { resize: none; line-height: 1.4; }

/* enviar: preso no pé da tela enquanto rola */
.rsvp-envio {
  position: sticky; bottom: 0; z-index: 2; margin: auto -16px 0; padding: 14px 16px 12px;
  background: linear-gradient(rgba(255,243,226,0), var(--paper) 22%);
}
.rsvp-form .rsvp-envio { margin-top: 22px; }
.rsvp-enviar { width: 100%; font-size: 1.1rem; padding: 1.05em; border-width: 0; box-shadow: 0 8px 20px -8px rgba(42,22,15,.45); }
.rsvp-enviar:hover { box-shadow: 0 10px 22px -8px rgba(42,22,15,.45); }
.rsvp-enviar:active { box-shadow: 0 4px 10px -6px rgba(42,22,15,.45); }
.privado { margin-top: 8px; text-align: center; font-size: .82rem; color: var(--ink-2); }
.privado a { color: inherit; }

/* já respondeu */
.rsvp-feito {
  display: grid; justify-items: center; text-align: center; gap: 8px; padding: 26px 18px 20px;
  background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(42,22,15,.06), 0 10px 26px -10px rgba(42,22,15,.2);
}
.rsvp-feito__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #1F8A50; color: #fff; }
.rsvp-feito__ic .ic { width: 32px; height: 32px; }
.rsvp-feito.is-nao .rsvp-feito__ic { background: rgba(42,22,15,.08); color: var(--ink-2); }
.rsvp-feito__tit { font: 400 1.4rem/1.15 var(--f-display); margin-top: 4px; }
.rsvp-feito__lista { list-style: none; padding: 0; margin: 6px 0 0; width: 100%; display: grid; gap: 6px; text-align: left; }
.rsvp-feito__lista[hidden] { display: none; }
.rsvp-feito__lista li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #F7F3EE; }
.rsvp-feito__lista span { color: var(--ink-2); font-size: .92rem; }
.rsvp-feito__obs { font-style: italic; color: var(--ink-2); margin-top: 4px; }
.rsvp-feito__obs[hidden] { display: none; }
.rsvp-mudar {
  margin-top: 8px; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #F4EFE9; color: var(--ink); font: 700 .98rem var(--f-body);
}
.rsvp-feito__tit small { display: block; margin-top: 6px; font: 600 1rem var(--f-body); color: var(--ink-2); }
.tela--rsvp .pessoa select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; }
/* o style.css dá altura mínima de tela cheia a "main > section" (landing); aqui a tela cabe entre o topo e o menu */
.telas > .tela { min-height: 0; }

/* ---------- link do grupo: nome + WhatsApp na capa ---------- */
.capa-entrar { width: 100%; max-width: 340px; display: grid; gap: 12px; margin-top: 6px; }
.capa-entrar__tit { text-align: center; font: 400 1.5rem/1.1 var(--f-display); color: var(--t-texto); }
.capa-entrar__campo { display: grid; gap: 6px; font-weight: 700; font-size: 1rem; color: var(--t-texto); }
.capa-entrar__campo input {
  width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 3px solid var(--t-borda);
  background: #fff; color: #1F1713; font: 600 1.1rem/1 inherit; font-family: inherit;
}
.capa-entrar__campo input::placeholder { color: #A89A90; font-weight: 500; }
.capa-entrar__campo input:focus { outline: 3px solid var(--t-tinta); outline-offset: 1px; }
.capa-entrar__btn { grid-template-columns: 1fr auto; padding: 16px 18px; margin-top: 4px; cursor: pointer; font: inherit; }
.capa-entrar__btn:disabled { opacity: .6; }
.capa-analise { text-align: center; padding: 20px 18px; border-radius: 18px; background: rgba(255,255,255,.85); color: #2A160F; }
.capa-analise .capa-entrar__tit { color: #2A160F; }
.capa-analise__txt { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.capa-entrar__priv { text-align: center; font-size: .88rem; font-weight: 600; color: var(--t-texto); opacity: .8; }

/* ---------- tamanho da imagem na capa (o dono escolhe) ---------- */
.tela--inicio[data-tam="p"] .capa-foto { width: min(40vw, 22dvh, 160px); }
.tela--inicio[data-tam="g"] .capa-foto { width: min(86vw, 46dvh, 380px); }
.tela--inicio[data-tam="p"] .capa-arte { max-width: min(60vw, 280px); }
.tela--inicio[data-tam="p"] .capa-arte img { max-height: 36dvh; }
.tela--inicio[data-tam="g"] .capa-arte { max-width: 100%; }
.tela--inicio[data-tam="g"] .capa-arte img { max-height: 72dvh; }
/* tela toda: a imagem é o fundo, sem as nossas cores. Foto: cobre tudo, nome em cima e botão embaixo, o rosto no meio.
   Convite pronto: inteiro no meio, com uma cópia desfocada dele atrás. */
.tela--inicio.com-imagem[data-tam="tela"] { background: #000; color: #fff; }
.tela--inicio.com-imagem[data-tam="tela"]:not(.com-arte) {
  background: linear-gradient(rgba(0,0,0,.55), transparent 30%, transparent 48%, rgba(0,0,0,.75)), var(--capa-img) center / cover no-repeat, #000;
}
.tela--inicio.com-imagem[data-tam="tela"]:not(.com-arte)::before { display: none; }
.tela--inicio.com-imagem[data-tam="tela"]:not(.com-arte) .capa-foto { display: none; }
.tela--inicio.com-imagem[data-tam="tela"]:not(.com-arte) > .capa-mola:last-child { flex: 0 0 0; }
.tela--inicio.com-arte[data-tam="tela"]::before {
  opacity: 1; background: var(--capa-img) center / cover no-repeat; filter: blur(18px) brightness(.6);
  -webkit-mask: none; mask: none;
}
.tela--inicio.com-arte[data-tam="tela"] .capa-arte { max-width: 100%; }
.tela--inicio.com-arte[data-tam="tela"] .capa-arte img { max-height: 66dvh; border: 0; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.tela--inicio.com-imagem[data-tam="tela"] .abertura__nome,
.tela--inicio.com-imagem[data-tam="tela"] .abertura__idade,
.tela--inicio.com-imagem[data-tam="tela"] .abertura__idade span,
.tela--inicio.com-imagem[data-tam="tela"] .capa-info li,
.tela--inicio.com-imagem[data-tam="tela"] .capa-info .ic,
.tela--inicio.com-imagem[data-tam="tela"] .capa-rsvp__nao { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.75); }

/* resposta que se salva sozinha: o aviso curto em cima do "Pronto" */
.rsvp-salvo { min-height: 1.4em; margin-bottom: 10px; text-align: center; font-size: .95rem; font-weight: 700; color: var(--ink-2); }
.rsvp-salvo.is-ok { color: #1F8A50; }
.rsvp-salvo:empty { display: none; }
.rsvp-salvo { display: table; margin: 0 auto 10px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(42,22,15,.15); font-size: .9rem; }
.rsvp-salvo.is-ok { background: #E3F4EA; }