/* =====================================================
   GUIDE v3 · BIBLIOTECA DE COMPONENTES · JATIÚCA
   Classes .jat-* · consome tokens.css v3 (semânticos)
   -----------------------------------------------------
   Edição 03 (bancada DSv2 17/07): tipografia oficial
   News Gothic BT (Bold títulos · Roman corpo · Demi
   ênfase) + Fredoka SÓ no universo kids (pendência
   Clubinho). Formas: seixo e vela (compat estrutural).
   Hover CLAREIA. CTA fala como pessoa (sentence case ·
   primeira pessoa). Caps SÓ no motor de reserva.
   Assinatura de textura: a onda da Jangada.
   ===================================================== */

/* ── BASE ───────────────────────────────────────────── */
.jat-root {
  font-family: var(--jat-font-body);
  color: var(--jat-text);
  background: var(--jat-bg);
  font-size: var(--jat-text-body);
  line-height: var(--jat-leading-normal);
  font-weight: var(--jat-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.jat-container {
  max-width: var(--jat-container);
  margin-inline: auto;
  padding-inline: var(--jat-gutter);
}
.jat-container--narrow { max-width: var(--jat-container-narrow); }

/* ── TIPOGRAFIA ─────────────────────────────────────── */
.jat-display, .jat-h1, .jat-h2, .jat-h3 {
  font-family: var(--jat-font-display);
  font-optical-sizing: auto;
  margin: 0;
}
.jat-display {
  font-size: var(--jat-text-display);
  font-weight: var(--jat-display-weight);
  line-height: var(--jat-leading-tight);
  letter-spacing: var(--jat-tracking-tight);
}
.jat-h1 { font-size: var(--jat-text-h1); font-weight: var(--jat-display-weight); line-height: var(--jat-leading-tight); letter-spacing: var(--jat-tracking-tight); }
.jat-h2 { font-size: var(--jat-text-h2); font-weight: var(--jat-display-weight); line-height: var(--jat-leading-snug); }
.jat-h3 { font-size: var(--jat-text-h3); font-weight: 600; line-height: var(--jat-leading-snug); }

/* Eyebrow v2 · micro-onda + sentence case (caps morreu) */
.jat-eyebrow {
  font-family: var(--jat-font-body);
  font-size: 1.02rem;
  font-weight: var(--jat-weight-bold);
  color: var(--jat-eyebrow-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.jat-eyebrow::before {
  content: "";
  width: 26px; height: 8px; flex: none;
  background: var(--jat-onda-tick) no-repeat center / contain;
}
.theme-mar .jat-eyebrow::before,
[data-theme="mar"] .jat-eyebrow::before { background-image: var(--jat-onda-tick-claro); }

.jat-lead {
  font-size: var(--jat-text-sub);
  font-weight: var(--jat-weight-light);
  line-height: var(--jat-leading-relaxed);
  color: var(--jat-text-soft);
}
.jat-body  { font-size: var(--jat-text-body); color: var(--jat-text); }
.jat-muted { color: var(--jat-text-muted); }

/* Números v3 · zero mono · News Gothic tabular (Bold no herói) */
.jat-num   { font-variant-numeric: var(--jat-nums); }
.jat-preco {
  font-family: var(--jat-font-display);
  font-weight: var(--jat-display-weight);
  font-variant-numeric: var(--jat-nums);
  color: var(--jat-mar-800);
  font-size: 2rem;
  line-height: 1;
}
.jat-preco small { font-family: var(--jat-font-body); font-weight: 500; font-size: .85rem; color: var(--jat-text-soft); }

/* ── BOTÕES v2 · seixo e vela ───────────────────────── */
.jat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jat-space-2);
  font-family: var(--jat-font-body);
  font-size: var(--jat-text-button);
  font-weight: var(--jat-weight-bold);
  text-decoration: none;
  padding: var(--jat-btn-y) var(--jat-btn-x);
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: var(--jat-radius-seixo);      /* seixo rolado · assinatura */
  transition: background var(--jat-transition-base), border-radius var(--jat-transition-base), transform var(--jat-transition-fast), box-shadow var(--jat-transition-base);
}
.jat-btn:hover  { transform: translateY(-2px); border-radius: var(--jat-radius-vela); }
.jat-btn:active { transform: translateY(0); }
.jat-btn:focus-visible { outline: var(--jat-border-focus); outline-offset: 3px; }

/* primário azul-mar · hover CLAREIA */
.jat-btn--mar {
  background: var(--jat-accent);
  color: var(--jat-on-accent);
  box-shadow: var(--jat-shadow-card);
}
.jat-btn--mar:hover { background: var(--jat-accent-hover); box-shadow: var(--jat-shadow-elevated); }

/* sol (dourado) · texto TINTA sempre (AA) · hover clareia */
.jat-btn--sol {
  background: var(--jat-accent-2);
  color: var(--jat-tinta);
  box-shadow: var(--jat-shadow-card);
}
.jat-btn--sol:hover { background: var(--jat-accent-2-hover); }

/* brisa (ghost) · contorno com onda no hover */
.jat-btn--brisa {
  background: transparent;
  color: var(--jat-accent);
  border-color: currentColor;
}
.jat-btn--brisa:hover { background: var(--jat-mar-100); }

/* reverso (dentro do tema mar) */
.jat-btn--reverso { background: var(--jat-branco); color: var(--jat-mar-800); }
.jat-btn--reverso:hover { background: var(--jat-mar-100); }

/* motor de reserva · ÚNICO lugar com caps (utilitário) */
.jat-btn--motor {
  text-transform: uppercase;
  letter-spacing: var(--jat-tracking-wide);
  font-size: 0.85rem;
  border-radius: var(--jat-radius-sm);
  background: var(--jat-accent);
  color: var(--jat-on-accent);
}
.jat-btn--motor:hover { background: var(--jat-accent-hover); border-radius: var(--jat-radius-sm); }

/* aliases compat v1 (peça velha não quebra) */
.jat-btn--primary { background: var(--jat-accent); color: var(--jat-on-accent); box-shadow: var(--jat-shadow-card); }
.jat-btn--primary:hover { background: var(--jat-accent-hover); }
.jat-btn--gold { background: var(--jat-accent-2); color: var(--jat-tinta); }
.jat-btn--gold:hover { background: var(--jat-accent-2-hover); }
.jat-btn--ghost { background: transparent; color: var(--jat-accent); border-color: currentColor; }
.jat-btn--reverse { background: var(--jat-branco); color: var(--jat-mar-800); }

/* ── HEADER / NAV ───────────────────────────────────── */
.jat-header {
  position: sticky; top: 0;
  z-index: var(--jat-z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--jat-space-6);
  padding: var(--jat-space-4) var(--jat-gutter);
  background: color-mix(in srgb, var(--jat-areia) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--jat-line);
}
.jat-header__logo { height: 40px; display: block; }
.jat-nav { display: flex; gap: var(--jat-space-6); align-items: center; }
.jat-nav a {
  font-size: var(--jat-text-body-sm);
  font-weight: var(--jat-weight-semibold);
  color: var(--jat-text);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color var(--jat-transition-fast);
}
.jat-nav a:hover {
  color: var(--jat-accent);
  background: var(--jat-onda-tick) no-repeat bottom center / 22px 6px;
}

/* ── HERO ───────────────────────────────────────────── */
.jat-hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  align-items: end;
  padding: var(--jat-section-y) var(--jat-gutter);
  color: var(--jat-branco);
  background: linear-gradient(180deg, rgba(0,39,50,0) 30%, rgba(0,39,50,.82) 100%), var(--jat-mar-800);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.jat-hero__inner { max-width: var(--jat-container); margin-inline: auto; width: 100%; }
.jat-hero .jat-eyebrow { color: var(--jat-dourado-300); }
.jat-hero .jat-eyebrow::before { background-image: var(--jat-onda-tick-claro); }
.jat-hero .jat-display { color: var(--jat-branco); max-width: 16ch; }
.jat-hero__sub { color: rgba(255,255,255,.9); max-width: 46ch; margin-top: var(--jat-space-4); }
.jat-hero__cta { margin-top: var(--jat-space-8); display: flex; gap: var(--jat-space-4); flex-wrap: wrap; }

/* ── SEÇÃO + DIVISOR DE ONDA ────────────────────────── */
.jat-section { padding: var(--jat-section-y) 0; background: var(--jat-bg); position: relative; }
.jat-section--soft  { background: var(--jat-bg-soft); }
.jat-section--cream { background: var(--jat-bg-cream); }
.jat-section--mar   { background: var(--jat-mar-900); color: #eafafc; }
.jat-section__head { max-width: 60ch; margin-bottom: var(--jat-space-12); display: grid; gap: var(--jat-space-4); }

/* divisor: onda rolante · pinta com background-color via mask */
.jat-divisor {
  height: 48px;
  border: 0; margin: 0;
  background-color: var(--jat-bg);
  -webkit-mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
          mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
}
.jat-divisor--flip { transform: scaleY(-1); }
[data-register="cerimonia"] .jat-divisor {
  -webkit-mask: none; mask: none;
  height: 1px; background: var(--jat-dourado-600); opacity: .45;
  margin: var(--jat-space-8) auto; max-width: 220px;
}

/* ── CARD ───────────────────────────────────────────── */
.jat-card {
  background: var(--jat-surface);
  border: 1px solid var(--jat-line);
  border-radius: var(--jat-radius-lg);
  box-shadow: var(--jat-shadow-card);
  overflow: hidden;
  transition: transform var(--jat-transition-base), box-shadow var(--jat-transition-base);
}
.jat-card:hover { transform: translateY(-4px); box-shadow: var(--jat-shadow-elevated); }
.jat-card__media { aspect-ratio: 4 / 3; background: var(--jat-mar-200); background-size: cover; background-position: center; position: relative; }
/* fio de onda no pé da foto · assinatura */
.jat-card__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 14px;
  background-color: var(--jat-surface);
  -webkit-mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
          mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
}
.jat-card__body { padding: var(--jat-card-pad); display: grid; gap: var(--jat-space-3); }
.jat-card__title { font-family: var(--jat-font-display); font-size: var(--jat-text-h3); font-weight: 600; }

.jat-grid { display: grid; gap: var(--jat-card-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── SELO (badge v2 · borda de maré) ────────────────────
   Selo de correio de praia: borda esquerda escalopada
   (mask) + micro-onda como pista não-cromática. */
.jat-selo {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--jat-text-badge);
  font-weight: var(--jat-weight-bold);
  padding: 0.42em 1em 0.42em 1.15em;
  border-radius: 0 var(--jat-radius-sm) var(--jat-radius-sm) 0;
  background: var(--jat-mar-100);
  color: var(--jat-mar-800);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 0 4px, #000 4.6px) 0 0 / 100% 12px repeat-y;
          mask: radial-gradient(circle at 0 50%, transparent 0 4px, #000 4.6px) 0 0 / 100% 12px repeat-y;
}
.jat-selo::before {
  content: ""; width: 18px; height: 6px; flex: none;
  background: var(--jat-onda-tick) no-repeat center / contain;
}
.jat-selo--sol   { background: var(--jat-dourado-100); color: var(--jat-dourado-700); }
.jat-selo--coral { background: var(--jat-coral-soft); color: #8f2917; }
.jat-selo--mar-fundo { background: rgba(234,250,252,.14); color: #eafafc; }
/* alias compat v1 */
.jat-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--jat-text-badge); font-weight: 700; padding: .42em 1em; border-radius: var(--jat-radius-sm); background: var(--jat-mar-100); color: var(--jat-mar-800); }
.jat-badge--gold  { background: var(--jat-dourado-100); color: var(--jat-dourado-700); }
.jat-badge--coral { background: var(--jat-coral-soft); color: #8f2917; }
.jat-badge--family::before { content: ""; width: 18px; height: 6px; background: var(--jat-onda-tick) no-repeat center/contain; }

/* ── POSICIONAMENTO · fio de sol ── */
.jat-selo-pos {
  display: inline-flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--jat-dourado-500);
  padding-left: var(--jat-space-4);
}
.jat-selo-pos b { font-weight: var(--jat-weight-bold); }

/* ── HORÁRIOS (zero mono · News Gothic tabular) ─────── */
.jat-hours { display: grid; gap: var(--jat-space-2); }
.jat-hours__row {
  display: flex; justify-content: space-between; gap: var(--jat-space-4);
  padding: var(--jat-space-2) 0;
  border-bottom: 1px dashed var(--jat-line);
}
.jat-hours__row span:first-child { font-weight: var(--jat-weight-semibold); }
.jat-hours__row span:last-child  { font-variant-numeric: var(--jat-nums); color: var(--jat-text-soft); font-weight: 500; }

/* ── RESERVA / CTA-BLOCO ────────────────────────────── */
.jat-reserve {
  display: grid; gap: var(--jat-space-4);
  background: var(--jat-mar-900);
  color: #eafafc;
  border-radius: var(--jat-radius-xl);
  padding: var(--jat-space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.jat-reserve::before {   /* crista de onda no topo do bloco */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 16px;
  background-color: rgba(125, 209, 220, .35);
  -webkit-mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
          mask: var(--jat-divisor-onda) no-repeat center / 100% 100%;
  transform: scaleY(-1);
}
.jat-reserve .jat-h2 { color: var(--jat-branco); }
.jat-reserve .jat-eyebrow { color: var(--jat-dourado-300); justify-content: center; }
.jat-reserve .jat-eyebrow::before { background-image: var(--jat-onda-tick-claro); }

/* ── SUB-MARCAS · CARDÁPIO ──────────────────────────── */
.jat-menu { display: grid; gap: var(--jat-space-5); }
.jat-menu__item {
  display: grid; grid-template-columns: 1fr auto; gap: var(--jat-space-2) var(--jat-space-6);
  align-items: baseline;
  padding-bottom: var(--jat-space-3);
  border-bottom: 1px dashed var(--jat-line);
}
.jat-menu__name  { font-weight: var(--jat-weight-semibold); }
.jat-menu__price { font-variant-numeric: var(--jat-nums); font-weight: var(--jat-weight-bold); color: var(--jat-mar-800); }
.jat-menu__desc  { grid-column: 1 / -1; color: var(--jat-text-soft); font-size: var(--jat-text-body-sm); font-weight: var(--jat-weight-light); }
.jat-submark {
  font-family: var(--jat-font-display);
  display: inline-flex; align-items: center; gap: var(--jat-space-2);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--jat-accent);
}
.jat-submark::after { content: ""; width: 26px; height: 8px; background: var(--jat-onda-tick) no-repeat center/contain; }

/* ── KIDS CLUB (kids · Fredoka mora AQUI) ──── */
.jat-kids {
  font-family: var(--jat-font-kids);
  background: linear-gradient(135deg, var(--jat-dourado-300), var(--jat-dourado-500));
  color: var(--jat-tinta);
  border-radius: var(--jat-radius-seixo);
  padding: var(--jat-space-8);
  display: grid; gap: var(--jat-space-3);
}
.jat-kids .jat-h3, .jat-kids h3 { font-family: var(--jat-font-kids); font-weight: 600; margin: 0; }
.jat-kids .jat-eyebrow { color: #8b4400; font-family: var(--jat-font-kids); font-weight: 600; }
.jat-kids .jat-eyebrow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 5.5C3.5 1.5 6 1.5 8.5 5.5S13.5 9.5 16 5.5 21 1.5 25 5.5' fill='none' stroke='%238b4400' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.jat-kids__pill {
  justify-self: start;
  font-family: var(--jat-font-kids);
  background: rgba(255,255,255,.6);
  border-radius: var(--jat-radius-full);
  padding: 0.3em 0.95em;
  font-size: var(--jat-text-caption); font-weight: 600;
}

/* ── FOOTER ─────────────────────────────────────────── */
.jat-footer {
  background: var(--jat-mar-900);
  color: #a9cfd4;
  padding: var(--jat-space-16) var(--jat-gutter) var(--jat-space-8);
  position: relative;
}
.jat-footer a { color: #eafafc; text-decoration: none; }
.jat-footer__logo { height: 44px; margin-bottom: var(--jat-space-6); }

/* ── UTIL ───────────────────────────────────────────── */
.jat-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.jat-visually-hidden:focus-visible {
  position: fixed !important; top: 12px; left: 12px;
  width: auto; height: auto; margin: 0; padding: .8rem 1.4rem;
  clip: auto; white-space: normal; z-index: var(--jat-z-modal);
  background: var(--jat-branco); color: var(--jat-mar-800);
  font-weight: var(--jat-weight-bold); border-radius: var(--jat-radius-sm);
  outline: var(--jat-border-focus);
}

/* ── RESPONSIVO ─────────────────────────────────────── */
@media (max-width: 720px) {
  .jat-nav { display: none; }
  .jat-hero { min-height: 68vh; }
  .jat-reserve { padding: var(--jat-space-8); }
}