/* ==========================================================================
   Roger 50's Sunset Party — RSVP
   Paleta amostrada do proprio convite; estrutura tipografica do barreto.ai
   (Fraunces display + IBM Plex Mono em caixa-alta espacada).

   RITMO VERTICAL EM dvh: a pagina cabe em uma tela, do iPhone SE (667) ao
   Pro Max (956), sem rolagem. Espacos e alturas sao clamp(min, Ndvh, max);
   `dvh` e nao `vh` porque desconta a barra do Safari, que e justamente o que
   some e volta. Os campos de texto nunca descem de 16px, senao o Safari da
   zoom ao focar.
   ========================================================================== */

:root{
  --papel:#fbf9f5;
  --navy:#0e2340;
  --navy-fundo:#071628;
  --navy-70:rgba(14,35,64,.70);
  --navy-50:rgba(14,35,64,.50);
  --linha:rgba(14,35,64,.16);
  --linha-forte:rgba(14,35,64,.30);
  --ouro:#c9a253;
  --ouro-tinta:#a8802f;
  --brasa:#a15115;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;

  --gut:22px;
  --raio:10px;
  --raio-btn:14px;

  /* escala vertical */
  --h-faixa:clamp(46px,8.4dvh,104px);
  --h-rodape:clamp(26px,4.8dvh,84px);
  --h-campo:clamp(44px,6.2dvh,56px);
  --sp-1:clamp(5px,1dvh,11px);
  --sp-2:clamp(10px,1.9dvh,20px);
  --sp-3:clamp(14px,2.9dvh,32px);
}

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

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

body{
  background:var(--papel);
  color:var(--navy);
  font-family:var(--serif);
  font-optical-sizing:auto;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grao sutil — mesma textura da landing barreto.ai */
.grain{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{
  position:relative;z-index:1;isolation:isolate;
  max-width:440px;margin:0 auto;
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}

/* marca d'agua: o mesmo convite, borrado ate virar so pintura, aparecendo no
   miolo da tela. A mascara deixa forte no centro e some nas pontas. */
.page::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0;
  background:url("assets/fundo.webp") center/100% 100% no-repeat;
  opacity:.17;
  -webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 30%,#000 68%,transparent 92%);
          mask-image:linear-gradient(to bottom,transparent 8%,#000 30%,#000 68%,transparent 92%);
}

/* --------------------------------------------------------------- faixas   */
.faixa{
  display:block;width:100%;flex:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 100%);
}
.faixa--topo{height:var(--h-faixa);object-fit:cover;object-position:62% 50%}
.faixa--base{
  height:var(--h-rodape);object-fit:cover;object-position:34% 50%;
  transform:scaleY(-1);opacity:.45;margin-top:auto;
}

/* --------------------------------------------------------------- capa     */
.capa{padding:var(--sp-1) var(--gut) 0;text-align:center;flex:none}

.marca{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,min(14vw,7dvh),64px);
  line-height:.94;letter-spacing:.055em;text-indent:.055em;
  text-transform:uppercase;color:var(--navy);
}

.sub{margin-top:2px;display:flex;align-items:baseline;justify-content:center;gap:.26em}
.sub-num{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,min(7vw,3.5dvh),33px);letter-spacing:.02em;color:var(--ouro-tinta);
}
.sub-script{
  font-family:var(--script);font-weight:400;
  font-size:clamp(31px,min(10.4vw,5.1dvh),50px);line-height:1;color:var(--ouro-tinta);
}

/* regua dourada com losango, como no convite */
.regua{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:var(--sp-2) auto;width:min(190px,62%)}
.regua span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--ouro),transparent)}
.regua i{width:5px;height:5px;background:var(--ouro);transform:rotate(45deg)}

.dados{font-family:var(--mono);text-transform:uppercase}
.dados-dia{font-size:clamp(11px,1.6dvh,13px);letter-spacing:.19em;color:var(--navy-70)}
.dados-dia b{font-weight:500;color:var(--navy)}
.dados-hora{margin-top:var(--sp-1);font-size:clamp(11px,1.6dvh,13px);
  letter-spacing:.24em;color:var(--ouro-tinta);font-weight:500}
.dados-local{margin-top:var(--sp-2);font-size:clamp(10.5px,1.5dvh,12px);
  line-height:1.75;letter-spacing:.12em;color:var(--navy-70)}

/* --------------------------------------------------------------- blocos   */
.bloco{padding:0 var(--gut);margin-top:var(--sp-3);flex:none}

.secao{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-weight:500;font-size:clamp(10.5px,1.5dvh,12px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--navy-70);
  margin-bottom:var(--sp-2);
}
.secao::before,.secao::after{content:"";flex:1;height:1px;background:var(--linha)}
.secao span{white-space:nowrap}

/* --------------------------------------------------------------- campos   */
.campo{margin-bottom:var(--sp-2)}

.rot{
  display:block;
  font-family:var(--mono);font-size:clamp(10.5px,1.5dvh,12px);letter-spacing:.10em;
  text-transform:uppercase;color:var(--navy-70);margin-bottom:var(--sp-1);
  text-wrap:balance;
}

.txt{
  width:100%;height:var(--h-campo);padding:0 14px;
  font-family:var(--serif);font-size:clamp(16px,2.4dvh,19px);font-weight:400;color:var(--navy);
  background:rgba(255,255,255,.92);
  border:1px solid var(--linha-forte);border-radius:var(--raio);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.txt::placeholder{color:var(--navy-50);font-size:.88em}
.txt:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,35,64,.10)}
.txt:focus-visible{outline:none}

/* --------------------------------------------- segmented control (radios) */
.seg{border:0;margin-bottom:var(--sp-2)}
.seg legend{padding:0}

.seg-trilho{
  display:grid;grid-template-columns:1fr 1.45fr;
  border:1px solid var(--linha-forte);border-radius:var(--raio-btn);
  overflow:hidden;background:rgba(255,255,255,.92);
}
.seg-trilho input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.seg-trilho label{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--h-campo);padding:6px;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(11px,min(3.4vw,1.7dvh),13.5px);letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-70);text-align:center;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .22s ease,color .22s ease;
}
.seg-trilho label + input + label{border-left:1px solid var(--linha)}
.seg-trilho input:checked + label{background:var(--navy);color:#fbf9f5;letter-spacing:.11em}
.seg-trilho label:first-of-type{border-radius:calc(var(--raio-btn) - 1px) 0 0 calc(var(--raio-btn) - 1px)}
.seg-trilho label:last-of-type{border-radius:0 calc(var(--raio-btn) - 1px) calc(var(--raio-btn) - 1px) 0}
.seg-trilho input:focus-visible + label{outline:2px solid var(--ouro-tinta);outline-offset:-3px}

/* ------------------------------------------------------- select nativo    */
.campo--qtd{transition:opacity .25s ease}
.campo--qtd[hidden]{display:none}

.sel{position:relative;width:118px}
.sel::after{
  content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;
  margin-top:-5px;border-right:1.5px solid var(--navy-70);border-bottom:1.5px solid var(--navy-70);
  transform:rotate(45deg);pointer-events:none;
}
.sel select{
  -webkit-appearance:none;appearance:none;
  width:100%;height:var(--h-campo);padding:0 38px 0 15px;
  font-family:var(--serif);font-size:clamp(16px,2.5dvh,20px);color:var(--navy);
  background:rgba(255,255,255,.92);
  border:1px solid var(--linha-forte);border-radius:var(--raio);cursor:pointer;
}
.sel select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,35,64,.10)}

/* --------------------------------------------------------------- frase    */
.frase{
  min-height:clamp(22px,3.2dvh,30px);margin:0 0 var(--sp-2);
  font-family:var(--serif);font-size:clamp(17px,2.6dvh,21px);font-weight:300;
  line-height:1.3;letter-spacing:.005em;color:var(--navy);
}
.frase b{font-weight:500;color:var(--ouro-tinta)}

/* --------------------------------------------------------------- cta      */
.cta{
  display:block;margin:0 auto;
  min-width:236px;max-width:100%;min-height:var(--h-campo);padding:6px 34px;
  font-family:var(--mono);font-weight:500;font-size:clamp(11.5px,1.7dvh,13px);
  letter-spacing:.15em;text-transform:uppercase;color:#fbf9f5;
  background:linear-gradient(180deg,#22406c 0%,var(--navy) 62%,#091a31 100%);
  border:1px solid var(--navy);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 20px -10px rgba(14,35,64,.80);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .2s ease,transform .12s ease,box-shadow .2s ease,opacity .2s ease;
}
.cta:active{
  transform:translateY(2px);
  background:linear-gradient(180deg,var(--navy) 0%,#091a31 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 12px -10px rgba(14,35,64,.80);
}
.cta:focus-visible{outline:2px solid var(--ouro-tinta);outline-offset:3px}
.cta[disabled]{opacity:.55;cursor:default}
.cta[disabled]:active{transform:none}

.erro{
  margin-top:var(--sp-1);padding:10px 14px;
  font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.03em;
  color:var(--brasa);background:rgba(161,81,21,.09);
  border-left:2px solid var(--brasa);border-radius:0 var(--raio) var(--raio) 0;
}
.erro[hidden]{display:none}

/* --------------------------------------------------------------- fim      */
.bloco--fim{text-align:center;margin-top:var(--sp-3)}
.bloco--fim[hidden]{display:none}

.selo{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 auto var(--sp-2);width:min(150px,50%)}
.selo span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--ouro),transparent)}
.selo i{width:5px;height:5px;background:var(--ouro);transform:rotate(45deg)}

.fim-titulo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,min(11vw,5.6dvh),52px);
  line-height:1.06;letter-spacing:-.015em;color:var(--navy);
  text-wrap:balance;
}
.fim-titulo::after{
  content:"";display:block;width:64px;height:2px;margin:var(--sp-2) auto 0;
  background:linear-gradient(to right,transparent,var(--ouro),transparent);
}
.fim-texto{
  margin-top:var(--sp-2);
  font-family:var(--mono);font-size:clamp(11.5px,1.7dvh,13px);line-height:1.5;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy-70);
}
.fim-texto .linha{display:block}
.fim-texto .linha + .linha{margin-top:.6em}
.fim-texto .destaque{color:var(--ouro-tinta);font-weight:500}

.link-discreto{
  margin-top:var(--sp-3);padding:10px 6px;
  font-family:var(--mono);font-size:clamp(10.5px,1.5dvh,12px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-50);
  background:none;border:0;border-bottom:1px solid var(--linha);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .2s ease,border-color .2s ease;
}
.link-discreto:focus-visible{outline:2px solid var(--ouro-tinta);outline-offset:3px}

/* --------------------------------------------------------------- confete  */
#confete{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:998;pointer-events:none;display:none;
}
#confete.ativo{display:block}

/* --------------------------------------------------------------- telas    */
@media (min-width:600px){
  .page{max-width:520px}
}

@media (max-width:340px){
  :root{--gut:16px}
  .dados-local{letter-spacing:.08em}
  .seg-trilho label{letter-spacing:.05em}
  .cta{letter-spacing:.12em;min-width:0;width:100%}
}

/* telas baixas — SE com a barra do Safari, aparelhos antigos. Os clamps ja
   estao no minimo aqui, entao o degrau extra vem de fixar a escala mais curta.
   Os campos ficam em 44px (piso de alvo de toque) e 16px (piso do Safari). */
@media (max-height:700px){
  :root{
    --h-faixa:34px;
    --h-rodape:18px;
    --sp-1:4px;
    --sp-2:8px;
    --sp-3:11px;
  }
  .dados-local{line-height:1.55}
  .fim-titulo::after{margin-top:8px}
}

/* telas muito baixas (paisagem): a capa encolhe primeiro */
@media (max-height:480px){
  .faixa--topo{height:34px}
  .faixa--base{display:none}
  .dados-local{display:none}
}

@media (hover:hover){
  .seg-trilho label:hover{background:rgba(14,35,64,.045)}
  .seg-trilho input:checked + label:hover{background:var(--navy)}
  .cta:hover{background:linear-gradient(180deg,#27497a 0%,#122a4d 62%,#0b1f3a 100%)}
  .link-discreto:hover{color:var(--navy);border-color:var(--navy-50)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}