/* Giacomin — reserva do rodízio de inauguração.
   Projetado em 390px; o desktop é que ganha espaço.

   A paleta e a tipografia saem da identidade real da marca, extraídas dos
   materiais da própria Giacomin: o creme da logo, o carvão do selo e o dourado
   dos criativos. A Jost cobre o desenho geométrico do wordmark.
   Nada de CDN: fonte e imagem são servidas daqui. */

/* Jost, de Owen Earl. SIL Open Font License 1.1 (ver assets/fontes/LICENCA.txt). */
@font-face {
  font-family: "Jost";
  src: url("../fontes/jost-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fontes/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fontes/jost-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --carvao: #100C09;        /* o preto do selo da marca */
  --carvao-2: #1A1310;      /* superfície um degrau acima do fundo */
  --creme: #EFE8DE;         /* a tinta da logo */
  --creme-suave: #C4B7A7;   /* texto secundário, 10,4:1 no carvão */
  --dourado: #E09600;       /* o dourado dos criativos da casa */
  --dourado-claro: #F5B542;
  --dourado-fundo: rgba(224, 150, 0, .13);
  --verde: #7F9046;
  --alerta: #D4482A;
  --linha: rgba(239, 232, 222, .15);
  --raio: 14px;
  /* altura do cabeçalho, descontada do hero: sem isso o hero de 100svh soma
     com o topo e empurra o botão para fora da dobra (medido em 1440x900). */
  --topo-h: 70px;
  --sans: "Jost", "Avenir Next", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carvao);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip; /* hidden quebraria position:sticky */
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-weight: 300; line-height: 1.1; margin: 0 0 .5rem;
  letter-spacing: -.005em;
}
a { color: var(--dourado-claro); }

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--linha);
  background: var(--carvao);
  min-height: var(--topo-h);
}
.topo .logo { height: 30px; width: auto; }
.local { margin: 0; font-size: .74rem; color: var(--creme-suave); text-transform: uppercase; letter-spacing: .14em; }

/* ── Hero ─────────────────────────────────────────────────────────────
   100svh, nunca dvh: com dvh a barra do navegador móvel faz a altura pular
   durante o scroll. */
.hero { position: relative; min-height: calc(100svh - var(--topo-h)); display: flex; align-items: flex-end; }
.hero > picture { position: absolute; inset: 0; }
.hero picture img, .hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,12,9,.97) 6%, rgba(16,12,9,.86) 34%, rgba(16,12,9,.34) 66%, rgba(16,12,9,.58) 100%);
}
.hero-txt { position: relative; z-index: 1; padding: 0 1.15rem 2.4rem; width: 100%; }
.tarja {
  display: inline-block; margin: 0 0 1rem;
  background: var(--dourado); color: var(--carvao);
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .42rem .8rem; border-radius: 3px;
}
.hero h1 { font-size: clamp(2.3rem, 11.5vw, 3.3rem); max-width: 14ch; }
.sub { margin: .9rem 0 1rem; color: var(--creme-suave); font-size: 1.04rem; max-width: 36ch; font-weight: 300; }
.hero-nota {
  /* caixa normal, não versal: em maiúsculas a linha ocupava duas e competia
     com o título, que é quem tem que puxar o olho aqui. */
  margin: 0 0 1.3rem; font-size: .92rem; color: var(--creme-suave);
  font-weight: 400;
}

.btn-hero, .btn-enviar, .btn-secundario {
  display: block; width: 100%; text-align: center;
  padding: 1.05rem 1.2rem; border-radius: var(--raio);
  font-size: 1.08rem; font-weight: 600; font-family: var(--sans);
  letter-spacing: .02em;
  border: 0; cursor: pointer; text-decoration: none;
  min-height: 56px; /* alvo de toque confortável */
}
/* Dourado da marca com texto carvão: 7,9:1, e é a combinação que a Giacomin
   já usa nos criativos dela. */
.btn-hero, .btn-enviar { background: var(--dourado); color: var(--carvao); }
.btn-hero:active, .btn-enviar:active { background: var(--dourado-claro); }
.btn-secundario { background: transparent; color: var(--creme); border: 1px solid var(--linha); }

/* ── Fatos ─────────────────────────────────────────────────────────── */
.fatos { padding: 1.8rem 1.15rem; border-bottom: 1px solid var(--linha); }
.fatos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.fatos li { display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 2px solid var(--dourado); }
.fatos strong { font-size: 1.04rem; font-weight: 600; }
.fatos span { color: var(--creme-suave); font-size: .93rem; font-weight: 300; }

/* ── Formulário ────────────────────────────────────────────────────── */
.reserva { padding: 2.4rem 1.15rem 2.8rem; background: var(--carvao-2); }
.reserva h2 { font-size: 1.9rem; }
.linha-vagas {
  margin: 0 0 1.5rem; font-size: .88rem; color: var(--creme-suave);
  display: flex; align-items: center; gap: .5rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.linha-vagas::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 3px rgba(127, 144, 70, .25);
}
form label, .faixas legend {
  display: block; margin: 1.2rem 0 .45rem;
  font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-suave);
}
input[type="text"], input[type="tel"] {
  width: 100%; padding: .95rem 1rem; min-height: 54px;
  background: rgba(0,0,0,.3); color: var(--creme);
  border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: 1.06rem; font-family: var(--sans);
}
input[type="text"]:focus, input[type="tel"]:focus { outline: 2px solid var(--dourado); outline-offset: 1px; }
input.invalido { border-color: var(--alerta); }
.ajuda { margin: .5rem 0 0; font-size: .85rem; color: var(--creme-suave); font-weight: 300; }
.rodape-form { text-align: center; margin-top: 1rem; }

.contador { display: flex; align-items: stretch; gap: .55rem; }
.contador input {
  flex: 1; text-align: center; font-size: 1.35rem; font-weight: 600;
  padding: .8rem; min-height: 54px; background: rgba(0,0,0,.3);
  color: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio);
  -moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.passo {
  width: 58px; min-height: 54px; font-size: 1.5rem; line-height: 1;
  background: rgba(239,232,222,.07); color: var(--creme);
  border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer;
}
.passo:active { background: rgba(239,232,222,.16); }
.passo[disabled] { opacity: .35; cursor: default; }

.faixas { border: 0; padding: 0; margin: .5rem 0 0; }
.faixas legend { padding: 0; }
.faixa {
  display: flex; align-items: center; gap: .6rem;
  padding: .95rem 1rem; margin-bottom: .55rem; min-height: 56px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: rgba(0,0,0,.24); cursor: pointer;
}
.faixa input { accent-color: var(--dourado); width: 20px; height: 20px; margin: 0 .2rem 0 0; }
.faixa .hora { font-size: 1.18rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.faixa .vaga { margin-left: auto; font-size: .84rem; color: var(--creme-suave); text-transform: uppercase; letter-spacing: .05em; }
.faixa:has(input:checked) { border-color: var(--dourado); background: var(--dourado-fundo); }
.faixa.lotada { opacity: .42; cursor: not-allowed; }
.faixa.lotada .vaga { color: var(--alerta); }

.erro {
  margin: 1.1rem 0 0; padding: .85rem 1rem;
  background: rgba(212, 72, 42, .16); border: 1px solid rgba(212, 72, 42, .5);
  border-radius: var(--raio); font-size: .95rem;
}
.btn-enviar { margin-top: 1.6rem; }
.btn-enviar[disabled] { opacity: .6; cursor: progress; }

/* ── Confirmação ───────────────────────────────────────────────────── */
.pronto { text-align: center; padding: 1.5rem 0 .5rem; }
.pronto .marca-selo { height: 46px; width: auto; margin: 0 auto 1.4rem; }
.selo {
  display: inline-block; margin: 0 0 1rem; padding: .42rem .85rem;
  background: var(--verde); color: #fff; border-radius: 3px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.pronto h3 { font-size: 1.7rem; }
.pronto-nota { color: var(--creme-suave); font-size: .9rem; margin: 1rem 0 1.5rem; font-weight: 300; }
.esgotado { font-size: 1.15rem; margin: 0 0 .6rem; }

/* ── Onde / perguntas / rodapé ─────────────────────────────────────── */
.onde { padding: 2.4rem 1.15rem; }
.endereco { font-size: 1.08rem; margin: 0 0 1.2rem; font-weight: 300; }
.foto-2 { margin-top: 1.6rem; border-radius: var(--raio); overflow: hidden; }
.perguntas { padding: 1rem 1.15rem 2.6rem; }
.perguntas h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.resposta-curta { color: var(--creme-suave); margin: 0 0 2rem; font-weight: 300; }
.titulo-perguntas { font-size: 1.35rem; margin-top: 2.2rem; }
details { border-top: 1px solid var(--linha); padding: .3rem 0; }
details:last-of-type { border-bottom: 1px solid var(--linha); }
summary {
  cursor: pointer; font-weight: 500; list-style: none;
  padding: .75rem 1.6rem .75rem 0; position: relative; min-height: 44px;
  display: flex; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--dourado); }
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 .9rem; color: var(--creme-suave); font-size: .96rem; font-weight: 300; }

footer { padding: 2rem 1.15rem 2.6rem; border-top: 1px solid var(--linha); color: var(--creme-suave); font-size: .85rem; font-weight: 300; }
footer .logo-rodape { height: 26px; width: auto; margin-bottom: 1rem; opacity: .8; }
footer p { margin: 0 0 .4rem; }
.ig { color: var(--dourado-claro); }
.legais { margin-top: .9rem; }

/* ── Barra fixa de ação no celular ─────────────────────────────────────
   Some quando o formulário está na tela: dois botões iguais competindo é
   ruído, e a barra taparia o campo que a pessoa está preenchendo. */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: .7rem 1.15rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(16, 12, 9, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha);
}
@media (min-width: 720px) { .barra-fixa { display: none; } }

/* ── Páginas legais ────────────────────────────────────────────────── */
.texto-legal { display: block; max-width: 680px; margin: 0 auto; }
.texto-legal h1 { font-size: 2rem; margin-bottom: 1rem; }
.texto-legal h2 { font-size: 1.2rem; margin: 1.9rem 0 .4rem; font-weight: 500; }
.texto-legal p { color: var(--creme-suave); margin: 0 0 .6rem; font-weight: 300; }

/* ── Telas maiores. O celular é a base; aqui o layout só ganha ar. ─── */
@media (min-width: 720px) {
  body { font-size: 18px; }
  .topo { padding: 1.1rem 2.5rem; }
  .topo .logo { height: 34px; }
  /* 2rem, não 3.5: com 3.5 o botão passava de 900px de altura e ficava
     cortado na dobra do laptop, medido em 1440x900. */
  .hero-txt { padding: 0 2.5rem 2rem; max-width: 780px; }
  .hero h1 { font-size: 3.7rem; }
  .btn-hero { display: inline-block; width: auto; padding: 1.05rem 2.6rem; }
  .fatos ul { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; padding: 0 1.35rem; }
  .fatos, .reserva, .onde, .perguntas, footer { padding-left: 2.5rem; padding-right: 2.5rem; }
  .reserva, .onde, .perguntas { max-width: 720px; margin: 0 auto; }
  .reserva { border-radius: var(--raio); }
  .onde { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .onde h2 { grid-column: 1 / -1; }
  .foto-2 { margin-top: 0; }
  .btn-secundario { display: inline-block; width: auto; padding: .9rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}