/* Isabella e Ygor · identidade aprovada em arte-convite/
 *
 * Duas disciplinas governam este arquivo:
 *
 * 1. Espaço com propósito. Todo espaçamento sai da escala áurea abaixo,
 *    cada degrau 1,618 vez o anterior. Nada de valor solto: o que está
 *    junto usa degrau baixo, o que separa assunto usa degrau alto, e a
 *    distância entre dois blocos diz o quanto eles têm a ver um com o
 *    outro. Se um espaço parecer errado, troque de degrau, não invente
 *    um número no meio.
 *
 * 2. Nada de caixa alta. A hierarquia vem de tamanho, peso e cor.
 *
 * Os pisos de legibilidade não se mexem: corpo de 20px no celular e 22px
 * no desktop, nada abaixo de 16px, entrelinha 1.6 no texto corrido,
 * botões de 56px de altura e contraste AA em tudo.
 */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-var.woff2') format('woff2-variations'),
      url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-var-italic.woff2') format('woff2-variations'),
      url('../fonts/cormorant-var-italic.woff2') format('woff2');
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Great Vibes';
  src:url('../fonts/greatvibes-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* --- escala áurea de espaço, razão 1,618 --- */
  --e1:.382rem;    /* 6px   · dentro de uma mesma ideia */
  --e2:.618rem;    /* 10px  · rótulo e o que ele nomeia */
  --e3:1rem;       /* 16px  · linhas irmãs */
  --e4:1.618rem;   /* 26px  · parágrafo a parágrafo */
  --e5:2.618rem;   /* 42px  · bloco a bloco */
  --e6:4.236rem;   /* 68px  · assunto a assunto */
  --e7:6.854rem;   /* 110px · seção a seção, no desktop */

  /* --- escala tipográfica, φ nos saltos e √φ nos meios --- */
  --t-menor:1rem;      /* 16px, o piso */
  --t-corpo:1.25rem;   /* 20px */
  --t-medio:1.59rem;   /* 25px */
  --t-grande:2.02rem;  /* 32px */
  --t-titulo:2.57rem;  /* 41px */
  --t-capa:3.27rem;    /* 52px */

  --creme:#F7F3E9;
  --tinta:#5C5D2B;        /* 6,2:1 sobre o creme */
  --tinta-suave:#63622F;  /* 5,7:1 sobre o creme */
  --oliva:#78773a;        /* bordas e traços, não texto corrido */
  --oliva-fundo:#6A6933;  /* fundo de botão: 5,2:1 com o creme por cima */
  --dourado:#A9873F;      /* detalhe */
  --dourado-texto:#96742F;/* 3,9:1, só no e comercial, que é grande */
  --alerta:#8a3b2e;       /* 6,9:1 */
  --linha:rgba(120,119,58,.42);
  --linha-fina:rgba(120,119,58,.26);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --script:'Great Vibes','Snell Roundhand',cursive;
  --coluna:min(100% - var(--e5), 34rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--creme); color:var(--tinta);
  font-family:var(--serif); font-size:var(--t-corpo); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none!important}
h1,h2,p,figure,blockquote,ul{margin:0}
a{color:inherit}

.so-leitor{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.fora-de-vista{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.pular{
  position:absolute; left:var(--e3); top:-5rem; z-index:60;
  background:var(--creme); color:var(--tinta); padding:var(--e3) var(--e4);
  border:2px solid var(--oliva); font-size:1.125rem; transition:top .18s;
}
.pular:focus{top:var(--e3)}

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

/* ---------- barra ---------- */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(247,243,233,.96);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--linha-fina);
  transform:translateY(-104%); transition:transform .3s ease;
}
.barra.aparece{transform:translateY(0)}
.barra.fixa{transform:none}
.barra-interna{
  display:flex; align-items:center; gap:var(--e3);
  max-width:66rem; margin:0 auto; padding:var(--e2) var(--e4);
}
.barra-mono{display:flex; align-items:center; margin-right:auto; min-height:3rem}
.barra-mono img{width:34px; height:auto}
.barra-links{display:none; list-style:none; margin:0; padding:0; gap:var(--e5)}
.barra-links a{
  text-decoration:none; font-size:1.125rem; letter-spacing:.01em;
  color:var(--tinta); padding:var(--e2) 0;
  border-bottom:2px solid transparent;
}
.barra-links a:hover{border-bottom-color:var(--oliva)}
.botao-barra{min-height:2.9rem; padding:var(--e2) var(--e4); font-size:1.0625rem}

/* ---------- capa ---------- */
.capa{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:var(--e7) var(--e4) var(--e6); isolation:isolate;
}
.ramo{position:absolute; z-index:0; pointer-events:none; user-select:none}
.ramo-topo{
  top:-9%; right:-19%; width:74vw; max-width:520px;
  -webkit-mask-image:linear-gradient(215deg,#000 24%,rgba(0,0,0,.5) 56%,transparent 80%);
  mask-image:linear-gradient(215deg,#000 24%,rgba(0,0,0,.5) 56%,transparent 80%);
}
.ramo-base{
  bottom:-8%; left:-21%; width:72vw; max-width:500px;
  -webkit-mask-image:linear-gradient(35deg,#000 22%,rgba(0,0,0,.45) 55%,transparent 80%);
  mask-image:linear-gradient(35deg,#000 22%,rgba(0,0,0,.45) 55%,transparent 80%);
}
.clareira{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 72% 50% at 50% 50%,
    rgba(247,243,233,.98) 0%, rgba(247,243,233,.93) 48%, rgba(247,243,233,0) 80%);
}
/* A moldura recua um degrau da borda e o conteúdo recua outro, de dentro dela. */
.moldura{
  position:absolute; inset:var(--e3); z-index:2; pointer-events:none;
  border:1px solid var(--linha-fina);
}
.capa-conteudo{position:relative; z-index:3; width:var(--coluna); text-align:center}
.mono{width:88px; margin:0 auto}

.nomes{
  margin-top:var(--e5); font-weight:400; line-height:1.15;
  font-size:clamp(2.02rem, 8.6vw, var(--t-capa)); letter-spacing:.01em; color:var(--tinta);
}
.nomes .nome{display:block}
.nome-primeiro{display:block; line-height:1.05}
.nome-resto{
  display:block; font-size:.618em; letter-spacing:.02em; line-height:1.3;
  margin-top:var(--e1); text-wrap:balance;
}
.nomes .amp,.nomes .so-leitor{display:block}
.amp{
  font-family:var(--script); color:var(--dourado-texto); font-weight:400;
  font-size:.786em; line-height:1.15; margin:var(--e2) 0;
}
.capa-data{
  margin-top:var(--e5); font-size:var(--t-medio); font-weight:500;
  letter-spacing:.02em; line-height:1.4; color:var(--tinta);
}
.capa-local{
  margin-top:var(--e2); font-size:1.25rem; font-style:italic; line-height:1.6;
  color:var(--tinta-suave);
}
.botao-capa{margin-top:var(--e5)}

/* ---------- botões ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3.5rem; text-align:center; text-decoration:none; cursor:pointer;
  font-family:var(--serif); font-size:1.125rem; font-weight:500;
  letter-spacing:.01em; color:var(--tinta);
  background:transparent; border:2px solid var(--oliva);
  padding:var(--e3) var(--e5); line-height:1.4; transition:background .2s, color .2s;
}
.botao:hover{background:var(--oliva-fundo); color:var(--creme); border-color:var(--oliva-fundo)}
.botao-cheio{background:var(--oliva-fundo); color:var(--creme); border-color:var(--oliva-fundo)}
.botao-cheio:hover{background:var(--tinta); border-color:var(--tinta)}
.botao-enviar{
  width:100%; background:var(--oliva-fundo); color:var(--creme);
  border-color:var(--oliva-fundo); margin-top:var(--e4);
}
.botao-enviar:hover{background:var(--tinta); border-color:var(--tinta)}
.botao-enviar[disabled]{opacity:.65; cursor:progress}
.botao-breve{border-style:dashed; border-color:var(--linha); color:var(--tinta-suave); cursor:default}
.botao-breve:hover{background:transparent; color:var(--tinta-suave)}

/* ---------- seções ---------- */
.secao{
  position:relative; width:var(--coluna); margin:0 auto;
  padding:var(--e6) 0; text-align:center;
}
.secao + .secao{border-top:1px solid var(--linha-fina)}
/* A barra fica fixa no topo: sem isto ela cobre o começo da seção
   quando alguém chega por uma âncora. */
[id]{scroll-margin-top:5.5rem}

/* O sobretítulo é a etiqueta do título: fica colado nele. */
.sobretitulo{
  font-size:1.125rem; font-weight:500; letter-spacing:.02em; line-height:1.6;
  font-style:italic; color:var(--tinta-suave);
}
h2,.secao h1{
  margin-top:var(--e2); font-weight:400; line-height:1.25;
  font-size:clamp(var(--t-grande), 7.2vw, var(--t-titulo));
  letter-spacing:.01em; color:var(--tinta);
}
.ornamento{margin:var(--e4) auto; color:var(--oliva); width:140px}
.ornamento svg{width:100%; height:auto; display:block}
.chamada{
  font-size:1.25rem; font-style:italic; line-height:1.65; color:var(--tinta-suave);
  max-width:30rem; margin:0 auto;
}
.nota{margin-top:var(--e4); font-size:1.125rem; font-style:italic; line-height:1.6; color:var(--tinta-suave)}
.pendente{
  margin-top:var(--e3); font-size:1.125rem; font-style:italic;
  line-height:1.6; color:var(--tinta-suave);
  border:2px dashed var(--linha); padding:var(--e4) var(--e3);
}
.pendente-fotos{margin-top:var(--e3)}

.versiculo p{
  font-size:var(--t-medio); font-style:italic; line-height:1.65; color:var(--tinta);
  max-width:30rem; margin:0 auto;
}
.versiculo cite{
  display:block; margin-top:var(--e4); font-style:italic; font-size:1.125rem;
  font-weight:500; letter-spacing:.02em; color:var(--tinta-suave);
}
.divisor-folha{width:190px; margin:var(--e5) auto}

/* Hora, lugar e endereço são uma coisa só: degraus baixos entre eles,
   degrau alto antes do botão, que é outra ação. */
.igreja{width:min(100%,34rem); margin:0 auto var(--e4)}
.secao-local .hora{margin-top:var(--e1); font-size:1.25rem; font-style:italic; line-height:1.6; color:var(--tinta-suave)}
.secao-local .lugar{
  margin:var(--e4) auto 0; max-width:22rem;
  font-size:var(--t-medio); font-weight:500; line-height:1.45; color:var(--tinta);
}
.secao-local .endereco{
  margin-top:var(--e2); font-size:1.25rem; font-style:italic; line-height:1.6; color:var(--tinta-suave);
}
.secao-local .botao{margin-top:var(--e5)}

/* ---------- rsvp ---------- */
.secao-rsvp{
  position:relative; width:100%; max-width:none; margin-top:0;
  padding:var(--e6) var(--e4); overflow:hidden;
  border-top:1px solid var(--linha-fina); text-align:center;
}
.ramo-rsvp{
  position:absolute; z-index:0; pointer-events:none;
  top:-6%; right:-24%; width:58vw; max-width:340px; opacity:.5;
  -webkit-mask-image:linear-gradient(220deg,#000 12%,transparent 72%);
  mask-image:linear-gradient(220deg,#000 12%,transparent 72%);
}
.rsvp-interna{position:relative; z-index:1; width:min(100%,29rem); margin:0 auto}
.chamada-rsvp{margin-bottom:var(--e6)}
.saudacao{
  margin-bottom:var(--e3); font-size:var(--t-medio); font-weight:400;
  line-height:1.4; color:var(--tinta);
}
.saudacao + .chamada-rsvp{margin-top:0}
.aviso-convite{
  margin:calc(var(--e6) * -1 + var(--e4)) auto var(--e6); max-width:30rem;
  padding:var(--e3); border:2px dashed var(--linha);
  font-size:1.125rem; font-style:italic; line-height:1.6; color:var(--tinta-suave);
}

.form{text-align:left}
.campo{display:block; margin:0 0 var(--e5)}
.campo label,.campo legend{
  display:block; font-size:1.125rem; font-weight:500; letter-spacing:.01em;
  line-height:1.5; color:var(--tinta); margin-bottom:var(--e1); padding:0;
}
.opcional{font-style:italic; font-weight:400; color:var(--tinta-suave)}
.ajuda{
  display:block; margin:0 0 var(--e2); font-size:var(--t-menor); font-style:italic;
  line-height:1.6; color:var(--tinta-suave);
}
.campo input[type=text],.campo input[type=tel],.campo textarea{
  width:100%; font-family:var(--serif); font-size:1.25rem; line-height:1.5; color:var(--tinta);
  background:transparent; border:0; border-bottom:2px solid var(--linha);
  padding:var(--e2) 2px; min-height:3.25rem; border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.campo textarea{resize:vertical; min-height:5.5rem}
.campo input:focus,.campo textarea:focus{outline:0; border-bottom-color:var(--oliva)}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid var(--oliva); outline-offset:3px}
.campo input[aria-invalid=true],.campo textarea[aria-invalid=true]{border-bottom-color:var(--alerta)}
.erro{
  display:block; margin-top:var(--e2); font-size:1.125rem; font-style:italic;
  line-height:1.6; color:var(--alerta);
}

.campo-escolha{border:0; margin:0 0 var(--e5); padding:0}
.escolhas{display:grid; grid-template-columns:1fr; gap:var(--e2)}
.escolhas input{position:absolute; opacity:0; width:1px; height:1px}
.escolhas label{
  margin:0; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:3.5rem; padding:var(--e2) var(--e3); cursor:pointer;
  border:2px solid var(--linha); font-size:1.125rem; letter-spacing:.01em;
  line-height:1.4; color:var(--tinta); transition:all .18s;
}
.escolhas input:checked + label{background:var(--oliva-fundo); border-color:var(--oliva-fundo); color:var(--creme)}
.escolhas input:focus-visible + label{outline:3px solid var(--oliva); outline-offset:3px}

.convidado{
  position:relative; border:1px solid var(--linha-fina);
  margin:0 0 var(--e4); padding:var(--e4) var(--e4) var(--e1);
}
.convidado-titulo{
  padding:0 var(--e2); margin-left:calc(var(--e2) * -1);
  font-size:1.125rem; font-weight:500; font-style:italic; line-height:1.6;
  letter-spacing:.01em; color:var(--tinta-suave);
}
.convidado .campo-escolha{margin-bottom:var(--e4)}
.remover{
  display:block; margin:0 0 var(--e4); padding:var(--e2) 0; min-height:2.75rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:1.125rem; line-height:1.5;
  color:var(--tinta-suave); text-decoration:underline; text-underline-offset:.28em;
}
.remover:hover{color:var(--tinta)}
.botao-adicionar{width:100%; margin-bottom:var(--e6)}
.campo-contato{margin-top:0}

.aviso{margin-top:var(--e4); font-size:1.125rem; font-style:italic; line-height:1.6; color:var(--alerta); text-align:center}
.aviso:empty{margin:0}

.obrigado{text-align:center; padding:var(--e4) 0 var(--e2)}
.obrigado-titulo{font-size:var(--t-grande); font-weight:400; line-height:1.3; color:var(--tinta)}
.obrigado-texto{margin-top:var(--e4); font-size:1.25rem; font-style:italic; line-height:1.65; color:var(--tinta-suave)}
.obrigado .botao{margin-top:var(--e5)}

/* ---------- presentes ---------- */
.pix{margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid var(--linha-fina)}
.pix-titulo{
  font-size:1.125rem; font-weight:500; font-style:italic; letter-spacing:.01em;
  line-height:1.6; color:var(--tinta-suave); margin-bottom:var(--e3);
}
.pix-qr{width:220px; margin:var(--e4) auto 0; border:2px solid var(--linha-fina); padding:var(--e2); background:#fff}
.presentes-lista{list-style:none; display:grid; gap:var(--e4); margin-top:var(--e5); text-align:left}
.presente{
  border:1px solid var(--linha-fina); padding:var(--e5) var(--e4);
  display:flex; flex-direction:column;
}
.presente-nome{font-size:var(--t-medio); font-weight:500; line-height:1.4; color:var(--tinta)}
.presente-desc{margin-top:var(--e1); font-size:1.125rem; font-style:italic; line-height:1.6; color:var(--tinta-suave)}
.presente-valor{margin-top:var(--e3); font-size:1.25rem; font-weight:500; letter-spacing:.01em; color:var(--tinta)}
.presente .botao{margin-top:var(--e4); width:100%}
.marcador-exemplo{
  display:block; margin:var(--e4) auto 0; max-width:32rem; padding:var(--e3);
  border:2px dashed var(--linha); font-size:1.125rem; font-style:italic;
  line-height:1.6; color:var(--tinta-suave);
}
.voltar{margin-top:var(--e5)}

/* ---------- rodapé ---------- */
.rodape{
  position:relative; overflow:hidden; text-align:center;
  padding:var(--e6) var(--e4) var(--e5); border-top:1px solid var(--linha-fina);
}
.coroa{
  position:relative; width:min(54vw,278px); margin:var(--e6) auto 0;
  display:flex; align-items:center; justify-content:center;
}
.ramo-arco{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-62%);
  width:100%; opacity:.5; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 68% at 50% 44%,transparent 34%,#000 62%);
  mask-image:radial-gradient(ellipse 62% 68% at 50% 44%,transparent 34%,#000 62%);
}
.rodape-interna{position:relative; z-index:1}
.contagem{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e2); max-width:25rem; margin:var(--e4) auto 0}
.conta{display:flex; flex-direction:column; align-items:center; gap:var(--e1)}
.conta-n{
  font-size:clamp(var(--t-grande),7.6vw,var(--t-titulo)); font-weight:400; line-height:1;
  color:var(--tinta); font-variant-numeric:tabular-nums;
}
.conta-l{font-size:var(--t-menor); font-weight:400; font-style:italic; color:var(--tinta-suave)}
.mono-rodape{position:relative; width:56px; margin:0 auto}
.rodape-nomes{margin-top:var(--e5); font-size:var(--t-medio); font-weight:400; line-height:1.4; color:var(--tinta)}
.amp-mini{font-family:var(--script); color:var(--dourado-texto); font-size:1.15em}
.rodape-site{margin-top:var(--e2); font-size:1.125rem; font-style:italic; color:var(--tinta-suave)}

/* ---------- revelação ---------- */
.revela{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.revela.visivel{opacity:1; transform:none}

/* ---------- desktop ---------- */
@media (min-width:700px){
  :root{
    --t-corpo:1.375rem;  /* 22px */
    --t-medio:1.75rem;
    --t-grande:2.22rem;
    --t-titulo:2.83rem;
    --t-capa:3.6rem;
    --coluna:min(100% - var(--e6), 38rem);
  }
  .secao{padding:var(--e7) 0}
  .secao-rsvp{padding:var(--e7) var(--e4)}
  .moldura{inset:var(--e4)}
  .mono{width:110px}
  .divisor-folha{width:220px}
  .secao-local .lugar{max-width:none}
  .escolhas{grid-template-columns:1fr 1fr}
  .presentes-lista{grid-template-columns:1fr 1fr}
  .capa{padding:var(--e7) var(--e5) var(--e6)}
}
@media (min-width:900px){
  .barra-links{display:flex}
  .ramo-topo{top:-16%; right:-8%; width:520px}
  .ramo-base{bottom:-16%; left:-9%; width:500px}
  .clareira{background:radial-gradient(ellipse 50% 54% at 50% 50%,
    rgba(247,243,233,.98) 0%, rgba(247,243,233,.93) 50%, rgba(247,243,233,0) 82%)}
  .ramo-rsvp{top:calc(var(--e5) * -1); right:calc(var(--e6) * -1); width:330px; opacity:.55}
  .contagem{max-width:30rem; gap:var(--e3)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .revela{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}