/* ExpoCatólica 2026 · Sorteio Paróquia Conectada
   Paleta tirada da identidade oficial do evento.
   Formulário de página única: sem troca de telas, nada aparece/desaparece
   durante o preenchimento. */

:root {
  --marinho:      #0B1F52;
  --marinho-esc:  #071638;
  --azul:         #2A64D4;
  --ciano:        #00A6F0;
  --ciano-claro:  #4FC8FF;
  --laranja:      #F2A65A;
  --branco:       #FFFFFF;
  --névoa:        rgba(255, 255, 255, .68);
  --névoa-fraca:  rgba(255, 255, 255, .40);
  --vidro:        rgba(255, 255, 255, .05);
  --vidro-forte:  rgba(255, 255, 255, .08);
  --vidro-borda:  rgba(255, 255, 255, .14);
  --erro:         #FF8A8A;
  --ok:           #38D39F;

  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --raio: 12px;
  --topo-altura: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Precisa vencer o `display` das classes abaixo, senão o atributo hidden não esconde nada. */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  color: var(--branco);
  font-family: var(--fonte);
  background: var(--marinho-esc);
  -webkit-font-smoothing: antialiased;
}

/* ── Fundo ───────────────────────────────────────────────── */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 720px at 88% 0%,  rgba(242, 166, 90, .15), transparent 60%),
    radial-gradient(1000px 780px at 0% 100%, rgba(0, 166, 240, .22), transparent 60%),
    linear-gradient(160deg, var(--marinho) 0%, var(--marinho-esc) 100%);
}

/* Elemento da ExpoCatólica no canto inferior direito. */
.fundo::after {
  content: "";
  position: absolute;
  right: -12vmin;
  bottom: -18vmin;
  width: 68vmin;
  height: 68vmin;
  background: url("assets/elemento-branco.png") center / contain no-repeat;
  opacity: .04;
}

/* Elemento da Paróquia Conectada no lado oposto (canto superior esquerdo). */
.fundo::before {
  content: "";
  position: absolute;
  left: -10vmin;
  top: -12vmin;
  width: 60vmin;
  height: 60vmin;
  background: url("assets/elemento-parcon.png") center / contain no-repeat;
  opacity: .04;
}

/* ── Topo ────────────────────────────────────────────────── */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topo-altura);
  padding: 0 26px;
  background: rgba(7, 22, 56, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* .logo é o logotipo do evento; .marca (lá embaixo) é o indicador do
   checkbox/rádio. Nomes distintos de propósito: já colidiram uma vez. */
.logos { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-parcon { height: 40px; width: auto; }
.logos-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .18); }
.logo { height: 30px; width: auto; opacity: .92; }

.topo-dir { display: flex; align-items: center; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: var(--vidro);
  color: var(--névoa);
  font: inherit;
  font-size: 13px;
}

.chip svg { width: 14px; height: 14px; fill: currentColor; opacity: .8; }
.chip b { color: var(--branco); font-size: 14px; }
.contador b { color: var(--ciano-claro); }

button.chip { cursor: pointer; transition: 180ms; }
button.chip:hover { color: var(--branco); border-color: rgba(255, 255, 255, .34); }

/* ── Quem está digitando ─────────────────────────────────── */

/* Os três ficam sempre à vista: quem está aceso se lê num relance, e um
   cadastro sair no nome errado exige ignorar três rostos, não um. */
.operadores {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: var(--vidro);
  transition: border-color 180ms, background-color 180ms;
}

.operadores-titulo {
  margin-right: 4px;
  color: var(--névoa-fraca);
  font-size: 12px;
  white-space: nowrap;
}

/* Some assim que alguém é escolhido: vira ruído quando a resposta está na tela. */
.operadores:has(input:checked) .operadores-titulo { display: none; }

.operador {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 3px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  color: var(--névoa-fraca);
  font-size: 13px;
  cursor: pointer;
  transition: 180ms;
}

.operador input { position: absolute; opacity: 0; width: 0; height: 0; }

.operador img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .5;
  transition: 180ms;
}

.operador:hover { color: var(--névoa); }
.operador:hover img { filter: grayscale(.4); opacity: .8; }

.operador:has(input:checked) {
  border-color: rgba(242, 166, 90, .55);
  background: rgba(242, 166, 90, .14);
  color: var(--branco);
  font-weight: 600;
}

.operador:has(input:checked) img { filter: none; opacity: 1; }
.operador:has(input:focus-visible) { outline: 2px solid var(--ciano-claro); outline-offset: 2px; }

.operadores.erro {
  border-color: var(--erro);
  background: rgba(255, 138, 138, .12);
  animation: chamar 480ms ease-in-out 2;
}

.operadores.erro .operadores-titulo { color: var(--erro); }

@keyframes chamar {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(255, 255, 255, .07);
}

.progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--azul), var(--ciano) 65%, var(--laranja));
  transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}

/* ── Página ──────────────────────────────────────────────── */

.pagina {
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 26px 60px;
}

.capa {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 26px;
}

.elemento-hero {
  flex: 0 0 auto;
  width: 66px;
  filter: drop-shadow(0 6px 20px rgba(0, 166, 240, .3));
}

.sobrancelha {
  margin-bottom: 8px;
  color: var(--ciano-claro);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  max-width: none;
  font-size: clamp(23px, 3vw, 37px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* "DE GRAÇA" é o gancho: inline na 2ª linha, maiúsculo e colorido, um pouco
   maior que o resto pra chamar sem quebrar a linha. */
h1 em {
  font-style: normal;
  font-size: 1.18em;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #FFD79A, var(--laranja) 55%, #FF8A3C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(242, 140, 60, .28));
}

.lead {
  margin-top: 8px;
  color: var(--névoa);
  font-size: 15px;
  line-height: 1.55;
}

.lead b { color: var(--branco); font-weight: 600; }

/* ── Cartões ─────────────────────────────────────────────── */

.cartao {
  padding: 22px 24px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--vidro-borda);
  border-radius: 16px;
  background: var(--vidro);
}

.titulo-cartao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--ciano-claro);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.titulo-cartao.interno, .titulo-cartao.alerta { color: var(--laranja); }

.cartao-interno { border-style: dashed; border-color: rgba(242, 166, 90, .28); }

/* Card do Instagram: borda em gradiente da marca (truque padding-box/border-box)
   sobre um painel escuro levemente arroxeado — o card inteiro "veste" o IG. */
.cartao-validacao {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(19, 14, 40, .62), rgba(19, 14, 40, .62)) padding-box,
    linear-gradient(120deg, #F5A623, #F26C21 22%, #C1359D 55%, #6A4BD4 80%, #2A64D4) border-box;
}

.cartao-validacao .painel-qr { background: rgba(10, 8, 26, .38); border-color: rgba(216, 90, 158, .22); }
.cartao-validacao .passos::marker { color: #E85FA6; }

/* ── Instagram ───────────────────────────────────────────── */

/* Gradiente da marca puxado pro "look Instagram": laranja da logo -> rosa/roxo
   -> azul da logo. Ancorado nas cores da Paróquia Conectada. */
.ig-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(100deg, #F5A623 0%, #F26C21 24%, #C1359D 56%, #6A4BD4 80%, #2A64D4 100%);
  box-shadow: 0 12px 32px rgba(193, 53, 157, .28);
}

.ig-icone { flex: 0 0 auto; display: grid; place-items: center; }
.ig-icone svg { width: 46px; height: 46px; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }

.ig-texto { min-width: 0; }

.ig-titulo {
  color: #fff;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: none;
  padding: 0;
  margin: 0;
  border: none;
}

.ig-titulo em {
  display: block;
  font-style: normal;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.ig-handle {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color 160ms;
}

.ig-handle:hover { background: rgba(255, 255, 255, .3); }

.selo-interno {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(242, 166, 90, .16);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
}

/* ── Grade de perguntas ──────────────────────────────────── */

/* Duas colunas fixas, não auto-fit: com auto-fit a grade virava 3 colunas e
   deixava buracos, porque as perguntas têm alturas bem diferentes. */
.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  align-items: start;
}

.pergunta { border: none; min-width: 0; }
.pergunta.larga { grid-column: 1 / -1; }
.pergunta-uf { max-width: 130px; }

.rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--branco);
  font-size: 15px;
  font-weight: 600;
}

.rotulo i { color: var(--névoa-fraca); font-style: normal; font-weight: 400; font-size: 13.5px; }

.num {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: rgba(0, 166, 240, .18);
  color: var(--ciano-claro);
  font-size: 11.5px;
  font-weight: 700;
}

.ajuda {
  margin: -3px 0 9px;
  color: var(--névoa-fraca);
  font-size: 13px;
}

/* ── Campos ──────────────────────────────────────────────── */

.campo {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--vidro-borda);
  border-radius: var(--raio);
  background: rgba(7, 22, 56, .5);
  color: var(--branco);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 160ms, box-shadow 160ms;
}

.campo::placeholder { color: rgba(255, 255, 255, .26); }

.campo:focus {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(0, 166, 240, .16);
}

.campo-extra { margin-top: 10px; }

.campo-area { resize: vertical; min-height: 62px; line-height: 1.5; }

.campo-uf { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234FC8FF'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}

.campo-uf option { background: var(--marinho); color: var(--branco); }

.campo.invalido { border-color: var(--erro); box-shadow: 0 0 0 3px rgba(255, 138, 138, .12); }

/* ── Opções ──────────────────────────────────────────────── */

.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.opcoes-largas { grid-template-columns: 1fr 1fr; }

.opcao {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1.5px solid var(--vidro-borda);
  border-radius: var(--raio);
  background: var(--vidro-forte);
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}

.opcao:hover { border-color: rgba(79, 200, 255, .5); }
.opcao b { font-weight: 600; }
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }

.opcao:has(input:checked) {
  border-color: var(--ciano);
  background: rgba(0, 166, 240, .16);
}

.opcao:has(input:focus-visible) { outline: 2px solid var(--ciano-claro); outline-offset: 2px; }

.opcao-verde:has(input:checked) { border-color: var(--ok); background: rgba(56, 211, 159, .12); }

/* Caixinha "já sigo": marcada, veste o gradiente do Instagram (não verde). */
.opcao-ig { border-color: rgba(216, 90, 158, .3); background: rgba(216, 90, 158, .06); }
.opcao-ig:hover { border-color: rgba(232, 95, 166, .6); }
.opcao-ig:has(input:checked) { border-color: rgba(232, 95, 166, .7); background: rgba(216, 90, 158, .16); }

.marca {
  flex: 0 0 auto;
  position: relative;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, .32);
  border-radius: 5px;
  transition: border-color 160ms, background-color 160ms;
}

.marca-radio { border-radius: 50%; }

.marca::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--marinho-esc);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 150ms cubic-bezier(.22, 1.6, .36, 1);
}

.marca-radio::after {
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: none;
  border-radius: 50%;
  background: var(--marinho-esc);
  transform: translate(-50%, -50%) scale(0);
}

.opcao:has(input:checked) .marca { border-color: var(--ciano); background: var(--ciano); }
.opcao:has(input:checked) .marca::after { transform: rotate(45deg) scale(1); }
.opcao:has(input:checked) .marca-radio::after { transform: translate(-50%, -50%) scale(1); }
.opcao-verde:has(input:checked) .marca { border-color: var(--ok); background: var(--ok); }
.opcao-ig:has(input:checked) .marca {
  border-color: transparent;
  background: linear-gradient(135deg, #F26C21, #C1359D 55%, #6A4BD4);
}
.opcao-ig:has(input:checked) .marca::after { border-color: #fff; }

.opcoes.invalido .opcao, .opcao.invalido { border-color: rgba(255, 138, 138, .55); }

.opcional { color: var(--névoa-fraca); font-style: normal; font-weight: 400; }

/* ── QR / Instagram ──────────────────────────────────────── */

.painel-qr {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  background: rgba(7, 22, 56, .4);
}

.qr-caixa {
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 10px;
  background: var(--branco);
}

.qr-caixa img { display: block; width: 118px; height: 118px; }

.passos { margin: 0; padding-left: 19px; color: var(--névoa); font-size: 14.5px; line-height: 1.7; }
.passos b { color: var(--branco); font-weight: 600; }
.passos::marker { color: var(--laranja); font-weight: 700; }

/* ── Erros ───────────────────────────────────────────────── */

.erro-campo {
  margin-top: 7px;
  color: var(--erro);
  font-size: 13px;
}

.resumo-erros {
  flex: 1;
  min-width: 240px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 138, 138, .38);
  border-radius: var(--raio);
  background: rgba(255, 138, 138, .1);
  color: var(--erro);
  font-size: 14px;
}

/* ── Envio ───────────────────────────────────────────────── */

.barra-envio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--vidro-borda);
  border-radius: 16px;
  background: rgba(7, 22, 56, .55);
}

/* Consentimento (obrigatório) mora aqui, colado no botão de enviar. */
.opcao-consentimento { font-size: 14.5px; }

.envio-linha {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-principal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(96deg, var(--azul), var(--ciano));
  color: var(--branco);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 120, 200, .3);
  transition: transform 160ms, box-shadow 160ms;
}

.btn-principal:hover  { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 140, 230, .4); }
.btn-principal:active { transform: translateY(0); }
.btn-principal:disabled { opacity: .55; cursor: progress; transform: none; }
.btn-principal svg { width: 17px; height: 17px; fill: currentColor; }

.btn-enviar { background: linear-gradient(96deg, var(--laranja), #E8873C); box-shadow: 0 8px 22px rgba(232, 135, 60, .32); }
.btn-enviar:hover { box-shadow: 0 12px 28px rgba(232, 135, 60, .44); }

.dica-teclado { color: var(--névoa-fraca); font-size: 12.5px; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--vidro-borda);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  font-family: inherit;
  font-size: .88em;
  font-weight: 600;
  color: var(--névoa);
}

/* ── Sucesso ─────────────────────────────────────────────── */

.sucesso {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 22, 56, .86);
  backdrop-filter: blur(10px);
  animation: surgir 200ms ease-out both;
}

@keyframes surgir { from { opacity: 0; } }

.sucesso-caixa {
  max-width: 520px;
  padding: 44px 40px;
  border: 1px solid var(--vidro-borda);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--marinho), var(--marinho-esc));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  text-align: center;
}

.selo-ok {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ok), #1FA97C);
  box-shadow: 0 0 0 10px rgba(56, 211, 159, .12);
  animation: pulo 460ms cubic-bezier(.22, 1.6, .36, 1) both;
}

.selo-ok svg { width: 40px; height: 40px; fill: var(--branco); }

@keyframes pulo { from { transform: scale(0); } }

.sucesso h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -.02em; }
.sucesso .lead { margin: 12px 0 22px; font-size: 17px; }
.sucesso .dica-teclado { margin-top: 14px; }
#contagem { color: var(--ciano-claro); }

.aviso {
  margin-bottom: 20px;
  padding: 10px 15px;
  border: 1px solid rgba(242, 166, 90, .4);
  border-radius: var(--raio);
  background: rgba(242, 166, 90, .1);
  color: var(--laranja);
  font-size: 13.5px;
}

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

/* ── Telas estreitas ─────────────────────────────────────── */

@media (max-width: 760px) {
  .topo { padding: 0 14px; gap: 10px; }
  /* Cabeçalho aperta: fica só a logo da Paróquia, e os operadores viram fotos
     (o nome sai; a foto e o destaque em laranja já dizem quem está marcado). */
  .logo-parcon { height: 30px; }
  .logos-sep, .logo { display: none; }
  .operadores { padding: 4px; gap: 2px; }
  .operadores-titulo { display: none; }
  .operador { padding: 3px; }
  .operador span { display: none; }
  .pagina { padding: 22px 16px 50px; }
  .capa { gap: 16px; }
  .elemento-hero { width: 48px; }
  .cartao { padding: 18px 16px 20px; }
  .grade, .opcoes, .opcoes-largas { grid-template-columns: 1fr; }
  .capa { flex-direction: column; align-items: flex-start; }
  .painel-qr { flex-direction: column; align-items: flex-start; }
  .pergunta-uf { max-width: none; }
}