/* -----------------------------------------------------------------
   RSVP · Arthur & Criste Paula   ·   /presenca
   Direcao: "O Sim e o Silencio"
   Sistema travado: Cinzel (display, substituiu a Italiana) · Lora (corpo) · Spectral (funcional)
   Sage #6D7B48 · Dourado #B08D57 · Marfim #F3EFE8
   ----------------------------------------------------------------- */

:root{
  --sage:#6D7B48;
  --sage-esc:#5C6A3C;
  --dourado:#B08D57;
  --marfim:#F3EFE8;
  --papel:#FAF8F4;
  --tinta:#2E3327;
  --tinta-md:rgba(46,51,39,.80);
  --tinta-fr:rgba(46,51,39,.55);
  --linha:rgba(109,123,72,.26);
  --linha-fina:rgba(109,123,72,.14);
  --erro:#8A5140;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--marfim);
  color:var(--tinta);
  font-family:'Lora',Georgia,serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- utilitarios tipograficos ---------- */
.rotulo{
  font-family:'Spectral',Georgia,serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
}
.regua{
  width:54px;height:1px;border:0;margin:26px auto;
  background:var(--dourado);opacity:.7;
}
.regua-larga{width:120px}

/* ---------- estrutura ---------- */
.pagina{
  max-width:640px;
  margin:0 auto;
  padding:56px 24px 72px;
  text-align:center;
}

/* ---------- ATO I · abertura ---------- */
.abertura{padding-bottom:6px}

.mono-caixa{
  height:150px;
  display:flex;align-items:center;justify-content:center;
}
.mono{height:150px;width:auto;overflow:visible}
.mono .tinta{fill:var(--sage)}

/* traco caligrafico: cada segmento revela sua parcela de tinta */
.mono .tr{
  stroke-dasharray:var(--l);
  stroke-dashoffset:var(--l);
  stroke-width:var(--w);
}
.js .mono .tr{
  animation:tracar var(--du) linear var(--de) forwards;
}
@keyframes tracar{to{stroke-dashoffset:0}}

/* Cinzel é mais larga que a Italiana: no celular, min() reduz levemente
   o título para manter a mesma quantidade de linhas. Nunca passa do
   tamanho original, então no computador nada muda. */
.pergunta{
  font-family:'Cinzel',Georgia,serif;
  font-weight:500;
  color:var(--sage);
  font-size:min(clamp(34px,7.6vw,52px),calc((100vw - 48px) * .1001));
  letter-spacing:.03em;
  line-height:1.12;
  margin:26px 0 0;
}
.evento{
  margin:16px 0 0;
  font-size:15px;
  color:var(--tinta-md);
}
.evento span{white-space:nowrap}
.evento .sep{color:var(--dourado);padding:0 .5em}

/* contagem regressiva: informacao de servico, nao alarme */
.contagem{
  margin:22px 0 0;
  font-family:'Spectral',Georgia,serif;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-fr);
}
.contagem b{font-weight:500;color:var(--sage);letter-spacing:.16em}

/* ---------- ATO II · a escolha ---------- */
.escolha{margin:44px 0 0}

.opcoes{
  display:grid;
  gap:14px;
  margin:0;
}
@media (min-width:560px){
  .opcoes{grid-template-columns:1fr 1fr;gap:16px}
}

.opcao{
  appearance:none;
  display:block;width:100%;
  padding:22px 18px;
  border:1px solid var(--sage);
  border-radius:2px;
  background:transparent;
  color:var(--sage);
  font-family:'Spectral',Georgia,serif;
  font-size:14px;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.5;
  cursor:pointer;
  transition:background 280ms var(--ease),color 280ms var(--ease),
             border-color 280ms var(--ease),transform 280ms var(--ease);
}
.opcao--sim{background:var(--sage);color:var(--marfim);border-color:var(--sage)}
.opcao--sim:hover,.opcao--sim:focus-visible{background:var(--sage-esc);border-color:var(--sage-esc)}
.opcao--nao:hover,.opcao--nao:focus-visible{background:rgba(109,123,72,.07)}
.opcao:active{transform:translateY(1px)}
.opcao:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}

/* prazo: cartela de aviso, abaixo da escolha.
   Tratada como a tarjeta de RSVP de uma suite impressa: papel um tom
   mais fundo que o marfim, fio sage ao redor, data em destaque. */
.prazo{
  margin:32px auto 0;
  max-width:46ch;
  padding:19px 26px 21px;
  background:#EDE8DE;
  border:1px solid rgba(109,123,72,.32);
  border-radius:2px;
  font-family:'Spectral',Georgia,serif;
  font-size:13.5px;
  line-height:1.75;
  letter-spacing:.04em;
  color:rgba(46,51,39,.84);
}
.prazo hr{
  width:40px;height:1px;border:0;margin:0 auto 15px;
  background:var(--dourado);opacity:.85;
}
.prazo strong{
  display:block;
  margin-bottom:7px;
  font-weight:500;
  font-size:15px;
  letter-spacing:.055em;
  color:var(--sage);
}

/* ---------- ATO III · identificacao ---------- */
.identificacao{margin:36px 0 0;text-align:left}

.escolhido{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--linha-fina);
  margin-bottom:30px;
}
.escolhido p{margin:0;font-size:15px;color:var(--tinta-md)}
.escolhido strong{font-weight:500;color:var(--sage)}
.voltar{
  flex:none;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:'Spectral',Georgia,serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-fr);
  border-bottom:1px solid var(--linha);
  transition:color 220ms var(--ease),border-color 220ms var(--ease);
}
.voltar:hover,.voltar:focus-visible{color:var(--sage);border-color:var(--sage)}

.campo{margin:0 0 30px}
.campo label{
  display:block;
  font-family:'Spectral',Georgia,serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);
  margin-bottom:9px;
}
.campo label .opt{color:var(--tinta-fr);letter-spacing:.14em}

/* campo de papel: apenas a linha de baixo */
.campo input{
  display:block;width:100%;
  padding:8px 2px 11px;
  border:0;border-bottom:1px solid var(--linha);
  border-radius:0;
  background:transparent;
  color:var(--tinta);
  font-family:'Lora',Georgia,serif;
  font-size:18px;line-height:1.5;
  transition:border-color 260ms var(--ease);
}
.campo input:focus{
  outline:0;
  border-bottom-color:var(--sage);
  border-bottom-width:1.5px;
  padding-bottom:10.5px;
}
.campo input::placeholder{color:rgba(46,51,39,.28)}

.ajuda{
  margin:9px 0 0;
  font-family:'Spectral',Georgia,serif;
  font-size:12px;letter-spacing:.04em;
  color:var(--tinta-fr);
}
.erro{
  display:none;
  margin:9px 0 0;
  font-family:'Spectral',Georgia,serif;
  font-size:12.5px;letter-spacing:.04em;
  color:var(--erro);
}
.campo.tem-erro input{border-bottom-color:var(--erro)}
.campo.tem-erro .ajuda{display:none}
.campo.tem-erro .erro{display:block}

.enviar{
  display:block;width:100%;
  margin-top:38px;padding:20px 18px;
  border:1px solid var(--sage);border-radius:2px;
  background:var(--sage);color:var(--marfim);
  font-family:'Spectral',Georgia,serif;
  font-size:13.5px;letter-spacing:.19em;text-transform:uppercase;
  cursor:pointer;
  transition:background 280ms var(--ease),opacity 280ms var(--ease);
}
.enviar:hover,.enviar:focus-visible{background:var(--sage-esc)}
.enviar:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.enviar[disabled]{opacity:.5;cursor:default}

.aviso-envio{
  display:none;
  margin:16px 0 0;text-align:center;
  font-family:'Spectral',Georgia,serif;
  font-size:12.5px;color:var(--erro);
}
.aviso-envio.visivel{display:block}

/* ---------- ATO IV · o selo ---------- */
.desfecho{padding:20px 0 0}

.selo{width:104px;height:104px;margin:0 auto 4px;display:block}
.selo circle{fill:none;stroke:var(--dourado);stroke-width:1.2}
.selo .anel{
  stroke-dasharray:308;stroke-dashoffset:308;
  transform:rotate(-90deg);transform-origin:52px 52px;
}
.js .selo .anel{animation:tracar 900ms var(--ease) 120ms forwards}
.selo .marca{fill:var(--sage);opacity:0}
.js .selo .marca{animation:surgir 700ms var(--ease) 640ms forwards}
@keyframes surgir{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

.desfecho h2{
  font-family:'Cinzel',Georgia,serif;
  font-weight:500;
  color:var(--sage);
  font-size:clamp(30px,6.6vw,42px);
  letter-spacing:.03em;
  line-height:1.2;
  margin:22px 0 0;
}
.desfecho p{
  max-width:40ch;margin:14px auto 0;
  font-size:16.5px;color:var(--tinta-md);
}
.desfecho--nao h2{font-size:clamp(24px,5.2vw,32px)}
.desfecho--nao p{font-size:16px}

.assinatura{margin:38px auto 0;display:block;width:44px;height:auto}
.assinatura .tinta{fill:var(--dourado)}

/* ---------- ATO V · encerrada ---------- */
.encerrada h2{
  font-family:'Cinzel',Georgia,serif;font-weight:500;color:var(--sage);
  font-size:clamp(28px,6vw,40px);letter-spacing:.03em;margin:24px 0 0;
}
.encerrada p{max-width:38ch;margin:14px auto 0;color:var(--tinta-md)}

/* ---------- transicoes entre atos ---------- */
.oculto{display:none}
.entra{animation:entrar 620ms var(--ease) both}
@keyframes entrar{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.sai{animation:sair 300ms var(--ease) both}
@keyframes sair{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-10px)}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
  }
  .mono .tr{stroke-dashoffset:0}
  .selo .anel{stroke-dashoffset:0}
  .selo .marca{opacity:1}
}

/* ---------- sem JavaScript ---------- */
.sem-js{
  max-width:44ch;margin:34px auto 0;
  font-family:'Spectral',Georgia,serif;font-size:13px;color:var(--tinta-fr);
}
.js .sem-js{display:none}

/* origem de transformacao para elementos SVG animados */
.selo .marca{transform-box:fill-box;transform-origin:center}

/* rotulo de secao */
.rotulo-secao{margin:0 0 16px}
/* assinatura reutiliza o caminho da tinta definido em <defs> */
.assinatura use{fill:var(--dourado)}
.selo .marca use{fill:var(--sage)}

/* Depósito invisível do desenho do monograma: o monograma de abertura saiu
   (já está no cabeçalho), mas o selo e as assinaturas reaproveitam o desenho
   definido aqui. Sem display:none de propósito — referências a máscaras de um
   SVG oculto assim falham em alguns navegadores. */
.mono-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Confirmação individual (pedido do Arthur): cada pessoa da família confirma
   por si. A frase fica sob a pergunta; o botão, na tela final, recomeça o
   formulário para o próximo nome. */
.individual{max-width:40ch;margin:14px auto 0;font-family:'Spectral',Georgia,serif;font-size:14.5px;
  line-height:1.55;color:var(--sage-esc)}
.outra-pessoa{display:block;margin:30px auto 0;padding:12px 24px;background:none;cursor:pointer;
  border:1px solid var(--sage-esc);border-radius:2px;color:var(--sage-esc);
  font-family:'Spectral',Georgia,serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s,color .25s}
.outra-pessoa:hover,.outra-pessoa:focus-visible{background:var(--sage-esc);color:var(--marfim)}
.outra-pessoa:focus-visible{outline:2px solid var(--sage-esc);outline-offset:3px}