/* ============================================================
   ALINE & DANIEL · 23.01.2027
   O CSS obedece ao plano-de-design.md. Mudou lá, muda aqui.

   Paleta: buquê (lilás, verde-sálvia), quartos da fazenda
   (vinho), janelas (azul), papel do save-the-date (creme),
   e a ameixa do experimento dela.
   ============================================================ */
:root{
  --papel:#F2EFE7;
  --tinta:#261A1E;
  --bordo-escuro:#451528;
  --bordo:#6E2440;
  --verde:#A9AE3B;
  --verde-fundo:#6B7028;
  --lilas:#C9A8E0;      /* pontual: seleção de texto, e só */
  --azul:#A9C6D6;
  --pad:clamp(18px,4.4vw,64px);

  /* A ESCALA — nove degraus, e nada fora deles */
  --t-nome:clamp(56px,9.5vw,150px);     /* os nomes, na capa dividida */
  --t-h1:clamp(34px,5.4vw,88px);        /* título de página, AZEDREIFUS */
  --t-manchete:clamp(24px,3.6vw,54px);
  --t-h2:clamp(26px,3.6vw,56px);
  --t-dado:clamp(19px,2.1vw,30px);      /* data, valor, número */
  --t-sub:clamp(16.5px,1.6vw,21px);
  --t-corpo:clamp(16.5px,1.35vw,19.5px);
  --t-mini:clamp(13.5px,1.15vw,15.5px);

  /* a abertura usa estes nomes */
  --bg:#F2EFE7; --ac:#241C26; --sans:'Fraunces',serif;
  --viva:var(--bordo); --funda:var(--bordo);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papel);color:var(--tinta);
  font-family:'EB Garamond',Georgia,serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--lilas);color:var(--tinta)}

/* o grão fica ligado o tempo todo */
.grao{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.12;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}

.gigante{font-family:'Fraunces',serif;font-weight:400;line-height:.94;letter-spacing:-.028em}
.prosa{font-size:var(--t-corpo);line-height:1.6;max-width:50ch}
.prosa + .prosa{margin-top:.8em}
.prosa i,.prosa em{font-style:italic}
.prosa b,.prosa strong{font-weight:500}
h1,h2,h3{font-weight:400}

.link,.leva{text-decoration:none;color:var(--bordo);
  box-shadow:inset 0 -.13em 0 currentColor;transition:box-shadow .3s}
.link:hover,.leva:hover{box-shadow:inset 0 -.5em 0 color-mix(in srgb,var(--verde) 55%,transparent)}
.leva{display:inline-block;margin-top:clamp(12px,1.8vh,22px);
  font-size:var(--t-corpo);font-style:italic}

/* ---------- barra ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;padding:12px var(--pad);
  font-size:var(--t-mini);background:var(--bordo-escuro);color:var(--papel);
  transform:translateY(-105%);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
body.rolou .bar,body.sempre-bar .bar{transform:none}
.bar nav{display:flex;gap:clamp(10px,1.7vw,26px);flex-wrap:wrap}
.bar a{text-decoration:none}
.bar a:hover,.bar a[aria-current]{color:var(--verde)}
.bar .marca{font-family:'Fraunces',serif;letter-spacing:-.02em;font-size:var(--t-sub)}
@media(max-width:700px){.bar .data{display:none}}

/* ============================================================
   BLOCOS
   ============================================================ */
.bloco{position:relative;padding:clamp(38px,6vw,104px) var(--pad);
  background:var(--fundo);color:var(--frente);
  border-bottom:2px solid var(--tinta);
  --fundo:var(--papel); --frente:var(--tinta); --realce:var(--bordo);
  --fio:rgba(36,28,38,.24)}
.bloco.escuro{--fundo:var(--bordo-escuro); --frente:var(--papel); --realce:var(--verde);
  --fio:rgba(242,239,231,.3); border-bottom-color:var(--bordo-escuro)}
.bloco.vinho{--fundo:var(--bordo); --frente:var(--papel); --realce:var(--papel);
  --fio:rgba(242,239,231,.35); border-bottom-color:var(--bordo)}
.bloco.azul{--fundo:var(--azul); --frente:var(--tinta); --realce:var(--bordo)}
.bloco:last-of-type{border-bottom:0}
.bloco h2{font-family:'Fraunces',serif;letter-spacing:-.028em;
  font-size:var(--t-h2);line-height:1;max-width:20ch}
.bloco > .prosa{margin-top:clamp(10px,1.6vh,18px)}
.bloco .link,.bloco .leva{color:var(--realce)}

/* ============================================================
   CAPA DIVIDIDA — ameixa à esquerda, foto à direita
   ============================================================ */
.capa{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--bordo-escuro);color:var(--papel);border-bottom:2px solid var(--bordo-escuro)}
.capa .lado{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(70px,11vh,120px) clamp(22px,3.5vw,56px) clamp(40px,7vh,80px) var(--pad)}
.capa .nome{color:var(--verde)}
.capa .nome span{display:block;font-size:var(--t-nome);line-height:.92}
.capa .nome .e{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;
  color:var(--papel);font-size:clamp(26px,3.4vw,54px);line-height:1;letter-spacing:0;
  margin:.06em 0 .06em .1em}
.capa .quando{margin-top:clamp(22px,4vh,46px);font-family:'Fraunces',serif;
  letter-spacing:-.02em;font-size:clamp(26px,3.2vw,48px);line-height:1}
.capa .detalhe{margin-top:.6em;font-size:var(--t-sub);line-height:1.45;opacity:.92}
.capa .detalhe i{font-style:italic}
.capa .foto{position:relative;overflow:hidden;min-height:44svh}
.capa .foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .capa{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .capa .lado{padding-top:clamp(64px,10vh,90px)}
}

/* a banda do onde — vinho, uma linha de informação */
.banda{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em clamp(14px,2.4vw,32px);
  padding:clamp(16px,2.6vh,26px) var(--pad)}
.banda .rotulo{font-style:italic;font-size:var(--t-sub);opacity:.85}
.banda .lugar{font-family:'Fraunces',serif;letter-spacing:-.02em;font-size:var(--t-dado)}
.banda .resto{font-size:var(--t-mini);line-height:1.5;opacity:.9}
.banda .resto i{font-style:italic}

/* ============================================================
   A MANCHETE — a história e o sobrenome
   ============================================================ */
.manchete{text-align:center}
.manchete .intro{margin:0 auto;max-width:34ch;font-style:italic;
  font-size:var(--t-manchete);line-height:1.25}
.manchete .familia{margin:clamp(14px,2.4vh,28px) auto 0;width:110%;margin-left:-5%;
  font-family:'Fraunces',serif;letter-spacing:-.028em;line-height:.92;
  font-size:var(--t-h1);color:var(--bordo)}
.manchete .aspas{font-family:'EB Garamond',serif;font-style:italic;letter-spacing:0}

/* faixa de apoio */
.apoio p{margin:0 auto;max-width:42ch;text-align:center;font-style:italic;
  line-height:1.3;font-size:var(--t-sub)}
.bloco.apoio{padding-top:clamp(26px,3.6vw,52px);padding-bottom:clamp(26px,3.6vw,52px)}

/* ============================================================
   DUAS COLUNAS · FOTOS
   ============================================================ */
.duo{display:grid;grid-template-columns:.72fr 1fr;align-items:center;
  gap:clamp(20px,3.4vw,56px)}
.duo.invertido{direction:rtl}
.duo.invertido > *{direction:ltr}
.duo .pf{aspect-ratio:4/5;max-height:clamp(240px,42vh,420px);width:100%}
.duo h2{font-family:'Fraunces',serif;letter-spacing:-.028em;line-height:.98;
  font-size:var(--t-h2);max-width:16ch}
.duo .prosa{margin-top:clamp(10px,1.6vh,18px)}
@media(max-width:760px){
  .duo,.duo.invertido{grid-template-columns:1fr;direction:ltr}
  .duo .pf{aspect-ratio:3/2;max-height:none}
}

/* fotos em COR NATURAL — só o grão por cima (o p&b era da direção abandonada) */
.pf{position:relative;overflow:hidden}
.pf img{width:100%;height:100%;object-fit:cover}
.pf.alto img{object-position:50% 15%}
.pf.baixo img{object-position:50% 86%}
.pf.vazio{display:flex;align-items:flex-end;padding:10px 12px;max-width:300px;
  aspect-ratio:4/3;border:1px dashed var(--fio)}
.pf.vazio span{font-style:italic;font-size:var(--t-mini);line-height:1.3}
/* a tira de fotos: três lado a lado, cortes diferentes */
.tira{margin-top:clamp(20px,3vh,40px);display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(8px,1vw,16px)}
.tira .pf{aspect-ratio:4/3}
.tira .pf:nth-child(2){aspect-ratio:3/4;margin-top:clamp(14px,2.4vh,30px)}
@media(max-width:760px){.tira{grid-template-columns:1fr 1fr}.tira .pf:first-child{grid-column:1/-1}}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.topo-pag{padding-top:clamp(84px,13vh,150px)}
.topo-pag h1{font-family:'Fraunces',serif;letter-spacing:-.028em;line-height:.96;
  font-size:var(--t-h1);max-width:14ch;color:var(--realce)}
.topo-pag .dado{margin-top:clamp(12px,1.8vh,20px);font-family:'Fraunces',serif;
  letter-spacing:-.02em;font-size:var(--t-dado);line-height:1.15;max-width:30ch}
.topo-pag .prosa{margin-top:clamp(12px,1.8vh,22px)}

.lista{margin-top:clamp(12px,1.8vh,22px);max-width:56ch;list-style:none}
.lista li{padding:10px 0 10px 24px;position:relative;
  font-size:var(--t-corpo);line-height:1.55}
.lista li::before{content:'—';position:absolute;left:0;color:var(--realce)}
.lista li b{font-weight:500}
.lista.alerta li::before{content:'!';font-family:'Fraunces',serif}

.mapas{margin-top:clamp(16px,2.2vh,26px);display:flex;gap:10px;flex-wrap:wrap}
.mapas a{text-decoration:none;background:var(--frente);color:var(--fundo);
  padding:.5em 1.1em;font-size:var(--t-corpo);font-style:italic;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mapas a:nth-child(2){background:var(--realce);color:var(--fundo)}
.mapas a:hover{transform:translate(-2px,-2px)}
.endereco{margin-top:clamp(12px,1.8vh,20px);font-size:var(--t-sub);line-height:1.45}
.endereco b{font-weight:500}

/* ============================================================
   HOSPEDAGEM — as duas opções, lado a lado
   ============================================================ */
.opcoes{margin-top:clamp(22px,3.4vh,44px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(18px,2.6vw,40px)}
.opcao{border:2.5px solid var(--frente);padding:clamp(18px,2.6vw,32px)}
.opcao.destaque{border-color:var(--realce)}
.opcao .tag{display:inline-block;font-style:italic;font-size:var(--t-mini);
  background:var(--azul);color:var(--tinta);padding:.25em .7em;transform:rotate(-1deg)}
.opcao.destaque .tag{background:var(--verde)}
.opcao h3{margin-top:.6em;font-family:'Fraunces',serif;font-weight:400;
  letter-spacing:-.025em;font-size:clamp(22px,2.4vw,34px);line-height:1}
.opcao .periodo{margin-top:.3em;font-style:italic;font-size:var(--t-sub)}
.opcao .preco{margin-top:clamp(12px,1.8vh,20px);line-height:1}
.opcao .preco small{font-size:var(--t-mini);font-style:italic;display:block;margin-bottom:.2em}
.opcao .preco b{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(34px,3.8vw,54px);color:var(--realce)}
.opcao .preco span{font-size:var(--t-sub)}
.opcao .parc{margin-top:.3em;font-size:var(--t-mini);opacity:.85}
.opcao .lista{margin-top:clamp(12px,1.8vh,20px);max-width:none}
.opcao .lista li{padding:7px 0 7px 24px;font-size:var(--t-mini);line-height:1.5}
.opcao .lista li::before{content:'✓';color:var(--verde);font-family:'Fraunces',serif}
.bloco.escuro .opcao .lista li::before{color:var(--verde)}
.opcao .pe{margin-top:clamp(12px,1.8vh,20px);padding-top:10px;border-top:1px solid var(--fio);
  font-size:var(--t-mini);font-style:italic;opacity:.8;line-height:1.5}

/* a disponibilidade — quadradinhos + restam N (Space Mono: é dado real) */
.disp{margin-top:clamp(18px,2.6vh,34px);display:grid;gap:clamp(12px,1.8vh,20px)}
.disp .linha{display:grid;grid-template-columns:minmax(130px,220px) 1fr auto;
  gap:clamp(10px,1.6vw,22px);align-items:center}
.disp .qnome{font-size:var(--t-sub);line-height:1.25}
.disp .qnome i{display:block;font-style:italic;font-size:var(--t-mini);opacity:.75}
.disp .celulas{display:flex;flex-wrap:wrap;gap:4px}
.disp .celulas i{width:clamp(12px,1.3vw,18px);aspect-ratio:1;background:transparent;
  border:1.5px solid var(--frente);opacity:.85}
.disp .celulas i.ocupado{background:var(--realce);border-color:var(--realce)}
.disp .resta{font-family:'Space Mono',monospace;font-size:var(--t-mini);white-space:nowrap}
@media(max-width:640px){.disp .linha{grid-template-columns:1fr auto}.disp .celulas{grid-column:1/-1}}

.selo{margin-top:clamp(16px,2.4vh,30px);display:inline-block;background:var(--verde);
  color:var(--tinta);padding:.35em .8em;font-size:var(--t-sub);font-style:italic;
  transform:rotate(-1.1deg)}
.fino{margin-top:1em;font-size:var(--t-mini);line-height:1.6;max-width:66ch;opacity:.78}

/* ---------- confirmação ---------- */
.rsvp h2{font-family:'Fraunces',serif;letter-spacing:-.028em;line-height:.96;
  font-size:var(--t-h1);max-width:10ch;color:var(--realce)}
.form{margin-top:clamp(18px,2.6vh,32px);max-width:44ch;display:flex;flex-direction:column;
  gap:clamp(13px,1.8vh,20px)}
.form label,.form .rot{font-style:italic;font-size:var(--t-sub)}
.form input[type=text]{width:100%;margin-top:6px;background:transparent;border:0;
  border-bottom:2px solid var(--frente);padding:6px 0;font-family:'EB Garamond',serif;
  font-size:var(--t-sub);color:inherit}
.form input[type=text]:focus{outline:none;border-bottom-color:var(--realce)}
.escolha{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.escolha button{background:transparent;border:2px solid var(--frente);color:inherit;
  cursor:pointer;padding:.36em .9em;font-family:'EB Garamond',serif;font-style:italic;
  font-size:var(--t-corpo);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.escolha button:hover{transform:translate(-2px,-2px)}
.escolha button[aria-pressed=true]{background:var(--realce);border-color:var(--realce);
  color:var(--fundo)}
.form .enviar{align-self:flex-start;background:var(--frente);color:var(--fundo);border:0;
  cursor:pointer;padding:.45em 1.1em;font-family:'Fraunces',serif;letter-spacing:-.02em;
  font-size:var(--t-dado);transform:rotate(-.9deg);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.form .enviar:hover{transform:rotate(-.9deg) translate(-3px,-3px)}
.form .enviar[disabled]{opacity:.4;cursor:not-allowed;transform:rotate(-.9deg)}
.recado{margin-top:.9em;font-style:italic;font-size:var(--t-corpo);line-height:1.5;max-width:44ch}

/* ---------- rodapé ---------- */
.rodape{text-align:center;border-bottom:0}
.rodape .data-grande{font-family:'Fraunces',serif;letter-spacing:-.028em;line-height:.96;
  font-size:var(--t-h1);color:var(--verde)}
.rodape .lugar{margin-top:.4em;font-size:var(--t-sub);line-height:1.45}
.rodape .meta{margin-top:clamp(16px,2.4vh,28px);font-style:italic;
  font-size:var(--t-mini);line-height:1.8;opacity:.85}
.rodape .meta a{text-decoration:none;box-shadow:inset 0 -.12em 0 var(--verde)}

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


/* ============================================================
   FRAUNCES — pesos por papel (a Anton saiu: era a fonte de IA)
   ============================================================ */
.gigante,.manchete .familia,.rodape .data-grande,.rsvp h2,.topo-pag h1{font-weight:900}
.bloco h2,.duo h2,.opcao h3,.capa .quando,.banda .lugar,.topo-pag .dado,
.opcao .preco b,.form .enviar,.bar .marca,.lista.alerta li::before{font-weight:700}
.gigante,.bloco h2,.duo h2{letter-spacing:-.015em}

/* ============================================================
   CENTRO — seções simétricas param de viver grudadas à esquerda
   ============================================================ */
.centro{text-align:center}
.centro .prosa,.centro .fino,.centro .form,.centro .lista,.centro h2{margin-inline:auto}
.centro .lista{text-align:left;max-width:46ch}
.topo-pag{text-align:center}
.topo-pag h1,.topo-pag .dado,.topo-pag .prosa{margin-inline:auto}

/* ============================================================
   OS 60 LUGARES — 30 quartos × sexta e sábado
   ============================================================ */
.gq{margin-top:clamp(20px,3vh,40px);display:grid;gap:clamp(20px,3vh,38px);
  justify-items:center}
.gq .cat{width:100%;max-width:820px}
.gq .cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.3em 18px}
.gq .cab .nm{font-family:'Fraunces',serif;font-weight:700;font-size:var(--t-sub)}
.gq .cab .esc{font-style:italic;font-size:var(--t-mini)}
.gq .noite{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;
  margin-top:8px}
.gq .noite .rot{font-family:'Space Mono',monospace;font-size:11px;opacity:.75}
.gq .cels{display:flex;flex-wrap:wrap;gap:4px}
.gq .cels i{width:clamp(14px,1.5vw,19px);aspect-ratio:1;border:1.5px solid var(--frente);
  opacity:.9}
.gq .cels i.ocupado{background:var(--realce);border-color:var(--realce)}
.gq .livres{margin-top:6px;font-family:'Space Mono',monospace;font-size:11.5px;opacity:.8}