/* MinanaFest — /convites/  ·  escrito mobile-first (base = 375px, o resto e progressivo).
   CSS proprio, sem depender de assets/minanafest.css — assim editar esta pagina nunca
   obriga a incrementar o cache-buster das outras 19. */

:root {
  --rosa: #FF69B4;          /* pigmento: preenchimento e ilustracao, NUNCA texto */
  --tinta: #A81E62;         /* 6.94:1 sobre branco — e esta a tinta rosa */
  --tinta-2: #C7317A;
  --amarelo: #FFD700;
  --escuro: #2B2130;
  --suave: #6B5C66;
  --creme: #FFF9F5;
  --linha: #F0D9E5;
  --whats: #075E54;         /* 7.7:1 com texto branco. O #25D366 da 1.98 e reprova */
  --raio-g: 28px;
  --raio-m: 18px;
  --pilula: 50px;
  --barra: 132px;   /* duas linhas de botao (52+8+52) + 20 de respiro */
}

@font-face { font-family:'MFDisplay'; font-weight:400 800; font-style:normal;
             font-display:block; src:url(fontes/baloo2.woff2) format('woff2'); }
@font-face { font-family:'MFTexto'; font-weight:400 800; font-style:normal;
             font-display:block; src:url(fontes/nunito.woff2) format('woff2'); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'MFTexto', system-ui, -apple-system, sans-serif;
  color: var(--escuro);
  background: var(--creme);
  /* espaco para a barra fixa nao cobrir o conteudo */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px) + 12px);
}

h1, h2, .display { font-family: 'MFDisplay', system-ui, sans-serif; }

/* ---------- cabecalho enxuto ---------- */

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--linha);
}
.topo img { width: 46px; height: 46px; object-fit: contain; }
.topo a { color: var(--tinta); font-weight: 700; font-size: 14px; text-decoration: none; }
.topo a:hover { text-decoration: underline; }

.intro { padding: 18px 16px 10px; }
.intro h1 { margin: 0 0 6px; font-size: 27px; line-height: 1.15; color: var(--tinta); }
.intro p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--suave); }

/* ---------- palco fixo: previa + tira de modelos ---------- */

.palco {
  position: sticky; top: 0; z-index: 20;
  background: var(--creme);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--linha);
  transition: padding .2s ease;
}

.previa {
  width: 216px; margin: 0 auto;
  border-radius: var(--raio-m); overflow: hidden;
  box-shadow: 0 6px 22px rgba(168, 30, 98, .16);
  background: #fff;
  transition: width .2s ease;
}
.previa svg { width: 100%; height: auto; display: block; }
/* o texto de exemplo aparece esmaecido — so na previa, nunca no PNG */
.previa [data-fantasma] { opacity: .55; }

/* Com 10 modelos a tira nao cabe mais em 375px, entao rola na horizontal.
   O `mask` corta a borda direita num degrade: e o que avisa que tem mais arte
   depois, sem gastar altura do palco com um segundo nivel. */
.tira {
  display: flex; gap: 8px; justify-content: flex-start;
  margin-top: 10px; padding: 3px 20px 3px 3px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 3px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
/* a classe entra por JS so quando ha mais arte a direita, e sai ao chegar no fim */
.tira.tem-mais {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tira::-webkit-scrollbar { display: none; }
.tira button { scroll-snap-align: start; }

/* Com mouse a barra tem que existir: sem ela não há nem aviso de que rola nem
   alvo para arrastar. No toque continua escondida. */
@media (pointer: fine) {
  .tira { scrollbar-width: thin; scrollbar-color: var(--tinta) transparent; }
  .tira::-webkit-scrollbar { display: block; height: 8px; }
  .tira::-webkit-scrollbar-thumb { background: var(--tinta); border-radius: 4px; }
  .tira::-webkit-scrollbar-track { background: transparent; }
}
.tira button {
  flex: 0 0 auto; width: 62px; height: 62px; padding: 0;
  border-radius: 14px; border: 2px solid var(--linha); background: #fff;
  cursor: pointer; overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.tira button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira button[aria-pressed="true"] { border-color: var(--tinta); transform: translateY(-3px); }

/* palco colapsado: quando o teclado abre, o convite vira faixa e nao some da vista */
.palco.mini { padding: 8px 16px; }
.palco.mini .previa { width: 52px; }
.palco.mini .tira { display: none; }
.palco.mini .resumo { display: block; }
.resumo {
  display: none; font-family: 'MFDisplay', sans-serif; font-weight: 700;
  font-size: 17px; color: var(--tinta); text-align: center; margin-top: 4px;
}
.palco.mini { display: flex; align-items: center; gap: 12px; }
.palco.mini .resumo { margin: 0; text-align: left; }

/* ---------- campos ---------- */

.campos { padding: 16px; display: grid; gap: 20px; }

/* Filho de grid/flex nao encolhe abaixo do proprio min-content sem isto. Sem o
   min-width:0 os 13 chips de idade empurravam a pagina para 769px num viewport de
   375 e o celular rolava de lado. `fieldset` ainda traz min-width:min-content
   embutido do user-agent, entao precisa ser explicito. */
.campos > *, .chips, .tira { min-width: 0; }
fieldset.campo { min-width: 0; }

.campo > label, .campo > legend, .rotulo {
  display: block; font-weight: 700; font-size: 15px; color: var(--escuro);
  margin: 0 0 8px; padding: 0;
}

input[type="text"], input[type="date"], input[type="time"], textarea {
  width: 100%; font: inherit; font-size: 17px;  /* 17px+ evita o zoom do iOS ao focar */
  padding: 13px 14px; border: 2px solid var(--tinta); border-radius: var(--raio-m);
  background: #fff; color: var(--escuro);
}
textarea { resize: vertical; min-height: 76px; }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: 1; }

fieldset { border: 0; margin: 0; padding: 0; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
         scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-width: 48px; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--tinta); border-radius: var(--pilula);
  background: #fff; color: var(--tinta); font: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer; white-space: nowrap;
}
.chip[aria-checked="true"] { background: var(--tinta); color: #fff; }

.dica { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--suave); }

.contador { font-size: 13px; color: var(--suave); margin-top: 6px; display: none; }
.contador.perto { display: block; }
.contador.cheio { color: var(--tinta); font-weight: 700; }

.opcionais > summary {
  list-style: none; cursor: pointer; color: var(--tinta); font-weight: 700;
  font-size: 15px; min-height: 48px; display: flex; align-items: center;
}
.opcionais > summary::-webkit-details-marker { display: none; }
.opcionais[open] > summary::before { content: '−  '; }
.opcionais:not([open]) > summary::before { content: '＋  '; }
.opcionais .campos-extra { display: grid; gap: 20px; padding-top: 4px; }

.rodape-form {
  padding: 4px 16px 20px; font-size: 14px; line-height: 1.6; color: var(--suave);
}
.rodape-form a { color: var(--tinta); font-weight: 700; }

/* ---------- barra de acoes ---------- */

/* Duas linhas no celular: o primario sozinho em cima, os dois secundarios embaixo.
   Medido: "Mandar no WhatsApp" precisa de 166px e os tres lado a lado deixavam 159px
   ate num viewport de 375 — o rotulo quebrava em 3 linhas e o botao ia a 72px de
   altura. Nao e questao de tela pequena, os tres numa fileira nunca coube. */
.acoes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 249, 245, .97); border-top: 1px solid var(--linha);
}
.acoes .botao-primario { grid-column: 1 / -1; }
.botao {
  min-height: 52px; border-radius: var(--pilula); font: inherit; font-weight: 700;
  font-size: 16px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; border: 2px solid transparent;
}
.botao-primario { background: var(--whats); color: #fff; }
.botao-secundario {
  background: #fff; color: var(--tinta); border-color: var(--tinta);
  min-width: 52px; padding: 0 12px; font-size: 15px;
}

.explica {
  max-width: 640px; margin: 0 auto; padding: 8px 16px 28px;
  font-size: 15px; line-height: 1.6; color: var(--suave);
  border-top: 1px solid var(--linha);
}
.explica h2 { font-size: 20px; color: var(--tinta); margin: 22px 0 10px; }
.explica ol { margin: 0 0 16px; padding-left: 22px; }
.explica li { margin-bottom: 8px; }
.explica strong { color: var(--escuro); }
.explica a { color: var(--tinta); font-weight: 700; }

.aviso {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 40; background: var(--escuro); color: #fff; border-radius: var(--raio-m);
  padding: 13px 16px; font-size: 15px; line-height: 1.4;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.visivel { opacity: 1; transform: none; }

/* ---------- foco visivel: anel que sobrevive sobre a arte rosa ---------- */

:focus-visible {
  outline: 3px solid var(--tinta); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--creme);
}

/* ---------- sem JS: o gerador some, o conteudo util fica ---------- */

/* Esconde pelo NEGATIVO. A versao anterior (`.js .so-com-js{display:revert}`) tinha a
   mesma especificidade de `.palco.mini{display:flex}` e, vindo depois no arquivo,
   vencia — o palco colapsado empilhava em vez de virar faixa. Assim, com JS ligado
   nenhuma regra de display toca esses elementos e nao existe colisao. */
html:not(.js) .so-com-js { display: none; }
.sem-js { padding: 0 16px 24px; }

/* ---------- telas maiores ---------- */

@media (min-width: 760px) {
  .envoltorio { max-width: 1000px; margin: 0 auto; display: grid;
                grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
  .palco { position: sticky; top: 16px; border: 0; background: transparent; padding: 16px 0; }
  .previa { width: 320px; }
  .tira button { width: 72px; height: 72px; }

  /* No desktop sobra espaço vertical, então a tira QUEBRA EM LINHAS em vez de rolar.
     Isso não é enfeite: com `justify-content: center` e overflow, os primeiros itens
     eram empurrados para fora à esquerda e ficavam inalcançáveis, porque scrollLeft
     não vai abaixo de zero. Sem rolagem, o problema deixa de existir. */
  .tira {
    flex-wrap: wrap; justify-content: center;
    overflow: visible; scroll-snap-type: none; padding: 3px;
  }
  .tira.tem-mais { -webkit-mask-image: none; mask-image: none; }
  .acoes { position: static; display: flex; gap: 8px; align-items: center;
           background: transparent; border: 0; padding: 0 16px 24px; }
  .acoes .botao-primario { flex: 1; }
  body { padding-bottom: 0; }
  .aviso { bottom: 24px; left: auto; right: 24px; max-width: 380px; }
  .intro h1 { font-size: 34px; }
}

/* ---------- preferencias do usuario ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --creme: #1A1218; --escuro: #F3E9EE; --suave: #C4AEBA;
    --tinta: #FF8FC4;              /* 7.4:1 sobre #1A1218 */
    --tinta-2: #FFA9D2; --linha: #3A2A33;
  }
  body { background: var(--creme); }
  .topo, input[type="text"], input[type="date"], input[type="time"], textarea,
  .chip, .tira button, .botao-secundario { background: #241A20; color: var(--escuro); }
  .topo { border-bottom-color: var(--linha); }
  .chip { color: var(--tinta); }
  .chip[aria-checked="true"] { background: var(--tinta); color: #241A20; }
  .acoes { background: rgba(26, 18, 24, .97); }
  /* a previa NAO inverte: o convite e o convite */
  .previa { background: #fff; }
}