/* ================= FEMS ================= */

@font-face{
  font-family:'Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/garamond.woff2') format('woff2');
}
@font-face{
  font-family:'Garamond';font-style:italic;font-weight:400 600;font-display:swap;
  src:url('/fonts/garamond-italico.woff2') format('woff2');
}

:root{
  --papel:#F6F1E7;
  --papel-2:#EFE8DC;
  --tinta:#2A2621;
  --suave:#6E665A;
  --linha:#DAD1C1;
  --toque:#8C7F6B;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Garamond',Georgia,'Times New Roman',serif;
  font-weight:400;
  background:var(--papel);
  color:var(--tinta);
  font-size:21px;
  line-height:1.68;
  letter-spacing:.008em;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- tipografia ---------- */
.serifa{font-family:'Garamond',Georgia,'Times New Roman',serif;font-weight:400}

h1,h2,h3{
  font-family:'Garamond',Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.12;
}
h1{font-size:clamp(46px,11vw,104px);line-height:1.05}
h2{font-size:clamp(34px,7.6vw,62px);line-height:1.08}
h3{font-size:clamp(24px,5vw,32px);line-height:1.22}
em{font-style:italic}

p{max-width:60ch}
.grande{font-size:clamp(22px,5.4vw,27px);line-height:1.6;color:var(--tinta)}
.calma{color:var(--suave)}
.miuda{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}

/* ---------- estrutura ---------- */
.folha{
  max-width:760px;
  margin:0 auto;
  padding:0 28px;
}
section{padding:96px 0}
.risco{border:0;border-top:1px solid var(--linha);margin:0}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:calc(env(safe-area-inset-top) + 26px) 0 0;
}
.marca{
  font-family:'Garamond',Georgia,serif;font-size:26px;letter-spacing:.32em;
  text-decoration:none;color:var(--tinta);
}
.topo a.discreto{font-size:18px;color:var(--suave);text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:2px}
.topo a.discreto:hover{color:var(--tinta);border-color:var(--tinta)}

/* ---------- abertura ---------- */
.abertura{
  min-height:calc(100dvh - 90px);
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 0 90px;
}
.abertura h1{margin:26px 0 30px}
.abertura h1 em{color:var(--toque)}
.data{
  font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);
}
.abertura .grande{max-width:44ch}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:44px}

/* ---------- botões ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:19px;letter-spacing:.05em;text-transform:lowercase;
  color:var(--papel);background:var(--tinta);border:1px solid var(--tinta);
  padding:16px 34px;border-radius:999px;
  transition:background .25s ease,color .25s ease;
}
.btn:hover{background:var(--toque);border-color:var(--toque);color:var(--papel)}
.btn.vazado{background:var(--toque);border-color:var(--toque);color:var(--papel)}
.btn.vazado:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn.larga{width:100%;text-align:center;border-radius:999px}
.btn[disabled]{opacity:.4;pointer-events:none}
.obs{font-size:18px;color:var(--suave)}

/* ---------- imagina ---------- */
.imaginas{list-style:none;display:flex;flex-direction:column;gap:34px;margin-top:34px}
.imaginas li{
  font-family:'Garamond',Georgia,serif;
  font-size:clamp(25px,5.6vw,38px);
  line-height:1.34;
  max-width:26ch;
  color:var(--tinta);
}
.imaginas li em{color:var(--toque)}
.temos{
  margin-top:56px;
  font-family:'Garamond',Georgia,serif;
  font-size:clamp(34px,8vw,64px);
  line-height:1.2;
}
.temos span{display:block}
.temos .segunda{font-style:italic;color:var(--toque)}

/* ---------- listas de salas ---------- */
.salas{display:flex;flex-direction:column;margin-top:44px}
.sala{padding:34px 0;border-top:1px solid var(--linha)}
.sala:last-child{border-bottom:1px solid var(--linha)}
.sala .miuda{display:block;margin-bottom:10px}
.sala h3{margin-bottom:12px}
.sala p{color:var(--suave);max-width:52ch}

/* ---------- regras ---------- */
.regras{list-style:none;counter-reset:r;margin-top:40px;display:flex;flex-direction:column;gap:26px}
.regras li{counter-increment:r;padding-left:46px;position:relative;max-width:56ch;color:var(--suave)}
.regras li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:'Garamond',Georgia,serif;font-size:17px;color:var(--toque);letter-spacing:.08em;
}
.regras li b{font-weight:400;color:var(--tinta)}

/* ---------- plaquinhas ---------- */
.plaquinhas{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.plaquinhas span{
  border:1px solid var(--linha);border-radius:999px;
  padding:9px 20px;font-size:18px;color:var(--suave);
  transition:border-color .25s ease,color .25s ease;
}
.plaquinhas span:hover{border-color:var(--toque);color:var(--tinta)}

.pingue{margin-top:44px;max-width:420px}
.pingue dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.pingue dt,.pingue dd{padding:14px 0;border-top:1px solid var(--linha)}
.pingue dt{color:var(--suave);padding-right:28px}
.pingue dd{font-family:'Garamond',Georgia,serif;font-size:22px;text-align:right}


/* ---------- associação ---------- */
.preco{margin-top:44px}
.preco .antes{font-size:16px;color:var(--suave)}
.preco .antes s{text-decoration-thickness:1px}
.preco .numero{
  font-family:'Garamond',Georgia,serif;
  font-size:clamp(76px,20vw,150px);line-height:1;letter-spacing:-.02em;
  margin:8px 0 4px;
}
.preco .numero small{font-size:.3em;vertical-align:super;letter-spacing:.02em;color:var(--suave)}
.preco .oque{font-size:22px;color:var(--suave)}
.preco ul{list-style:none;margin:34px 0 38px;max-width:44ch}
.preco li{padding:14px 0;border-top:1px solid var(--linha);color:var(--suave);font-size:19px}
.preco li:last-child{border-bottom:1px solid var(--linha)}

/* ---------- reserva ---------- */
.form{margin-top:44px;max-width:420px;display:flex;flex-direction:column;gap:28px}
label{display:block;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:10px}
.campo-linha{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--linha);transition:border-color .25s ease}
.campo-linha:focus-within{border-color:var(--tinta)}
.arroba{font-family:'Garamond',Georgia,serif;font-size:20px;color:var(--suave)}
.campo-linha input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:'Garamond',Georgia,serif;font-size:24px;color:var(--tinta);
  padding:10px 0;letter-spacing:.01em;
}
.campo-linha input::placeholder{color:#B9AF9D}
.estado{font-size:16px;letter-spacing:.04em;color:var(--suave);white-space:nowrap}
.estado.livre{color:var(--toque)}
.estado.ocupado{color:#9A6B60}
.ajuda{font-size:17px;color:var(--suave);margin-top:10px}
.recado{font-size:18px;color:#9A6B60;min-height:22px}

.pronto{margin-top:44px;padding:40px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);max-width:420px}
.pronto .arroba-grande{font-family:'Garamond',Georgia,serif;font-size:clamp(30px,7vw,44px);word-break:break-all}
.pronto h3{margin:12px 0 8px}
.pronto p{color:var(--suave)}

/* ---------- rodapé ---------- */
.rodape{padding:70px 0 calc(env(safe-area-inset-bottom) + 60px);border-top:1px solid var(--linha)}
.rodape .marca{font-size:20px;display:inline-block;margin-bottom:14px}
.rodape p{color:var(--suave);font-size:18px}
.rodape nav{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px}
.rodape nav a{font-size:18px;color:var(--suave);text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:2px}
.rodape nav a:hover{color:var(--tinta);border-color:var(--tinta)}

/* ---------- entrada ---------- */
[data-anima]{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
[data-anima].visivel{opacity:1;transform:none}

@media (min-width:900px){
  body{font-size:22px}
  section{padding:120px 0}
  .folha{padding:0 40px}
}

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