/* =====================================================================
   Jet Life — Camada de polimento (marketplace-clean, premium)
   Carregada DEPOIS de tailwind.min.css. CSS puro, sem build.
   Preserva a identidade (teal + slate). Eleva tipografia, hierarquia,
   estados de interação e ritmo — sem mudar a arquitetura.
   ===================================================================== */

:root {
  --jl-brand-300: #5eead4;
  --jl-brand-400: #2dd4bf;
  --jl-brand-500: #14b8a6;
  --jl-brand-600: #0d9488;
  --jl-brand-700: #0f766e;

  --jl-ink:        #0b1220;  /* títulos */
  --jl-body:       #374151;  /* corpo (≥4.5:1 em branco) */
  --jl-muted:      #6b7280;  /* secundário, ainda ≥4.5:1 em branco */
  --jl-bg:         #f5f7f9;  /* fundo geral, frio e limpo */
  --jl-surface:    #ffffff;
  --jl-line:       #e6eaee;  /* bordas de card */
  --jl-line-strong:#d6dce2;

  --jl-dark-950:   #020617;

  --jl-radius:     16px;
  --jl-radius-lg:  22px;
  --jl-shadow-sm:  0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --jl-shadow-md:  0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --jl-shadow-lg:  0 22px 40px -16px rgba(13, 148, 136, .18), 0 8px 20px -10px rgba(16, 24, 40, .12);

  --jl-ring:       0 0 0 3px rgba(20, 184, 166, .38);
  --jl-ease:       cubic-bezier(.22, .61, .36, 1);   /* ease-out-quart */
  --jl-ease-soft:  cubic-bezier(.32, .72, 0, 1);
}

/* ---------------------------------------------------------------------
   1. Fundação — a fonte da marca (Plus Jakarta Sans) finalmente aplicada.
   O <link> dela já carregava mas NADA a usava (regra vivia no style.css
   órfão). Isto sozinho recompõe toda a tipografia do site.
   --------------------------------------------------------------------- */
html, body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background-color: var(--jl-bg);
  color: var(--jl-body);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
}
button, input, select, textarea, optgroup { font-family: inherit; }

::selection { background: rgba(20, 184, 166, .22); color: var(--jl-ink); }

/* Foco acessível, consistente e da marca (substitui o outline cru do browser) */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--jl-ring);
  border-radius: 10px;
}

/* Rolagem suave + barra discreta no desktop */
@media (pointer: fine) {
  html { scroll-behavior: smooth; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #cdd5dd; border-radius: 999px; border: 2px solid var(--jl-bg); }
  ::-webkit-scrollbar-thumb:hover { background: #b6c0ca; }
}

/* ---------------------------------------------------------------------
   2. Tipografia — hierarquia por escala + peso, sem linhas órfãs
   --------------------------------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.018em; }

/* Título de seção "Nossa Frota" e similares ganham mais presença */
main#boats > .flex h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  line-height: 1.1;
  color: var(--jl-ink);
  font-weight: 800;
}

/* ---------------------------------------------------------------------
   3. Header — refino do sticky e do CTA
   --------------------------------------------------------------------- */
header.sticky { transition: padding .3s var(--jl-ease), background-color .3s var(--jl-ease); }
header.sticky.scrolled { padding-top: .35rem; padding-bottom: .35rem; }

/* Âncoras não aterrissam atrás do header sticky (vale também no mobile/bottom-nav) */
html { scroll-padding-top: 72px; }

/* ---------------------------------------------------------------------
   4. Hero — mais limpo. O degradê no texto do título foi removido no
   markup (legibilidade + ban); aqui só refinamos respiro e profundidade.
   --------------------------------------------------------------------- */
section.min-h-\[85vh\] h1 { letter-spacing: -0.04em; }
.hero-headline-accent { color: var(--jl-brand-300); }

/* ---------------------------------------------------------------------
   5. Filtros — pills e selects com toque mais "marketplace"
   --------------------------------------------------------------------- */
.cat-btn {
  transition: border-color .2s var(--jl-ease), color .2s var(--jl-ease),
              background-color .2s var(--jl-ease), transform .12s var(--jl-ease);
}
.cat-btn:not(.active):hover { transform: translateY(-1px); }
.cat-btn.active { box-shadow: 0 4px 12px -4px rgba(2, 6, 23, .35); }

#filter-people, #filter-price { transition: border-color .2s var(--jl-ease), box-shadow .2s var(--jl-ease); }

/* ---------------------------------------------------------------------
   6. Grid de embarcações — a unidade de comparação. Hierarquia clara
   de preço/capacidade, borda limpa, sombra calma, hover preciso.
   --------------------------------------------------------------------- */
main#boats .grid { gap: 1.1rem; }

.boat-card {
  background: var(--jl-surface);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius-lg);
  box-shadow: var(--jl-shadow-sm);
  transition: transform .28s var(--jl-ease), box-shadow .28s var(--jl-ease),
              border-color .28s var(--jl-ease);
}
.boat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--jl-shadow-lg);
  border-color: rgba(20, 184, 166, .35);
}
.boat-card:active { transform: translateY(-2px); }

/* Imagem com cantos coerentes com o card e leve zoom no hover */
.boat-card > .relative { border-radius: 0; overflow: hidden; }
.boat-card > .relative > img {
  transition: transform .5s var(--jl-ease);
  will-change: transform;
}
.boat-card:hover > .relative > img { transform: scale(1.045); }

/* Badge de tipo: pílula mais sólida e legível */
.boat-card .relative > span.absolute[class*="tag-"],
.boat-card .relative > span[class*="tag-"] {
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(2, 6, 23, .25);
  backdrop-filter: saturate(1.1);
}

/* Pílula de preço na imagem: vidro branco nítido, número em destaque */
.boat-card .relative .absolute.bottom-3.right-3 {
  box-shadow: 0 6px 18px -6px rgba(2, 6, 23, .35);
  border: 1px solid rgba(255, 255, 255, .6);
}

/* Selo "MAIS RESERVADO": menos berrante, mais confiável */
.boat-card .relative .bg-amber-400 {
  background: #f59e0b !important;
  color: #fff !important;
  letter-spacing: .03em;
  box-shadow: 0 4px 12px -3px rgba(245, 158, 11, .5);
}

/* Corpo do card: nome forte, preço/pessoa como destaque secundário */
.boat-card h3 { color: var(--jl-ink); letter-spacing: -0.015em; }
.boat-card .text-teal-700 { color: var(--jl-brand-700); }

/* Botão "Ver todas" mais sólido */
#show-more-wrap button { transition: background-color .2s var(--jl-ease), transform .12s var(--jl-ease); }
#show-more-wrap button:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   7. Botões / CTAs — estados consistentes (hover, active, focus)
   --------------------------------------------------------------------- */
button, a { -webkit-tap-highlight-color: transparent; }

button[onclick], a[href^="https://wa.me"], .boat-card, .cat-btn, select { cursor: pointer; }

/* Estado desabilitado deixa de ser invisível (feedback de submit/loading) */
button:disabled, [disabled] { opacity: .6; cursor: not-allowed; }

/* CTA primário verde do WhatsApp (form + página): brilho e profundidade */
#booking-form button[type="submit"],
form#booking-form .from-green-500 {
  box-shadow: 0 14px 30px -12px rgba(16, 185, 129, .55);
  transition: transform .14s var(--jl-ease), box-shadow .25s var(--jl-ease), filter .2s var(--jl-ease);
}
#booking-form button[type="submit"]:hover { transform: translateY(-2px); filter: saturate(1.06); }
#booking-form button[type="submit"]:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   8. Modal de reserva + formulário — acabamento e foco
   --------------------------------------------------------------------- */
#modal-panel {
  box-shadow: 0 -24px 60px -20px rgba(2, 6, 23, .45);
}
#modal-panel input, #modal-panel select {
  transition: border-color .18s var(--jl-ease), box-shadow .18s var(--jl-ease), background-color .18s var(--jl-ease);
}
#modal-panel input:focus, #modal-panel select:focus {
  border-color: var(--jl-brand-400);
  box-shadow: var(--jl-ring);
  background: #fff;
}
#modal-name { letter-spacing: -0.02em; color: var(--jl-ink); }

/* Stepper de horas extras: alvos de toque ≥44px e feedback */
#extra-hours-section button { transition: transform .12s var(--jl-ease), background-color .18s var(--jl-ease); }
#extra-hours-section button:active { transform: scale(.92); }

/* ---------------------------------------------------------------------
   9. Bottom nav + back-to-top (regras que viviam no style.css órfão)
   --------------------------------------------------------------------- */
.bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), .5rem); }
#back-to-top { opacity: 0; pointer-events: none; transition: opacity .3s var(--jl-ease), transform .3s var(--jl-ease); transform: translateY(8px); }
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#cookie-banner { transition: opacity .3s var(--jl-ease), transform .3s var(--jl-ease); }

/* ---------------------------------------------------------------------
   10. Footer — texto cinza-claro estava ~1.3:1 em branco; agora AA
   --------------------------------------------------------------------- */
footer p { color: var(--jl-muted) !important; }   /* #6b7280 ≈ 4.6:1 */
footer p a { color: var(--jl-body) !important; }  /* #374151, link mais escuro */
footer a[href]:hover { color: var(--jl-brand-600) !important; }

/* ---------------------------------------------------------------------
   11. Blog / conteúdo longo — leitura confortável
   --------------------------------------------------------------------- */
article p, .prose p, .blog-content p { max-width: 72ch; }

/* ---------------------------------------------------------------------
   13. Card de embarcação — variante "bold" marketplace (Booking-clean).
   Estrutura .jlc aplicada em includes/boats.php. Decisão em 2s:
   o que é · pra quantos · quanto · reservar.
   --------------------------------------------------------------------- */
.jlc {
  display: flex; flex-direction: column;
  background: var(--jl-surface);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-radius-lg);
  overflow: hidden;
  box-shadow: var(--jl-shadow-sm);
  transition: transform .28s var(--jl-ease), box-shadow .28s var(--jl-ease), border-color .28s var(--jl-ease);
  cursor: pointer;
}
.jlc:hover { transform: translateY(-5px); box-shadow: var(--jl-shadow-lg); border-color: rgba(20, 184, 166, .4); }
.jlc:active { transform: translateY(-2px); }

.jlc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f4; }
.jlc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--jl-ease); }
.jlc:hover .jlc-media img { transform: scale(1.05); }
.jlc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 6, 23, .30), transparent 42%); pointer-events: none; }

.jlc-badge { position: absolute; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 5px 10px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; }
.jlc-type   { top: 12px; left: 12px; color: #fff; box-shadow: 0 3px 10px rgba(2, 6, 23, .28); }
.jlc-hot    { top: 12px; right: 12px; background: #f59e0b; color: #422006; box-shadow: 0 4px 12px -2px rgba(245, 158, 11, .5); } /* texto escuro sobre amber = ~7:1 (era branco ~2:1) */
.jlc-photos { bottom: 12px; left: 12px; background: rgba(2, 6, 23, .6); color: #fff; backdrop-filter: blur(4px); font-size: 10.5px; padding: 4px 9px; }

/* Badges de tipo: fundos escurecidos pra texto branco passar AA (eram 3.0–3.4:1) */
.jlc-type.tag-lancha   { background: #115e59; } /* teal-800  ~5.3:1 */
.jlc-type.tag-iate     { background: #4f46e5; } /* indigo-600 ~5.6:1 */
.jlc-type.tag-catamara { background: #7c3aed; } /* violet-600 ~5.2:1 */
.jlc-type.tag-escuna   { background: #c2410c; } /* orange-700 ~4.9:1 */
.jlc-type.tag-jetski   { background: #dc2626; } /* red-600   ~4.5:1 */

/* Contagem de barcos: gray-400 sobre gray-100 era ~2:1 */
#boat-count { color: #4b5563 !important; } /* gray-600 ~5:1 */

/* Micro-texto cinza-claro restante nas seções claras (sobre/contato) → AA.
   Escopado a superfícies claras pra não tocar o gray-400 sobre fundo escuro. */
#sobre .text-gray-400, #contato .text-gray-400 { color: #6b7280 !important; }

.jlc-body { display: flex; flex-direction: column; gap: .5rem; padding: 15px 16px 15px; flex: 1; }
.jlc-name { font-size: 16.5px; font-weight: 800; color: var(--jl-ink); letter-spacing: -.018em; line-height: 1.18; }
.jlc-meta { display: flex; align-items: center; gap: .5rem; font-size: 12px; color: var(--jl-muted); font-weight: 600; }
.jlc-meta svg { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; }
.jlc-dot { color: #cbd5e1; }
.jlc-feats { font-size: 11px; color: #64748b; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #64748b ≈ 4.76:1 (era #94a3b8 ~2.5:1) */

.jlc-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--jl-line); display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.jlc-price { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.jlc-price-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #64748b; } /* AA (era #9aa6b2 ~2.5:1) */
.jlc-price-value { font-size: 21px; font-weight: 800; color: var(--jl-ink); letter-spacing: -.02em; margin-top: 2px; }
.jlc-price-pp { font-size: 11px; font-weight: 700; color: var(--jl-brand-700); margin-top: 3px; }
.jlc-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--jl-brand-500), var(--jl-brand-400));
  color: var(--jl-dark-950); font-weight: 800; font-size: 12.5px;
  padding: 9px 15px; border-radius: 12px; border: 0; cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(13, 148, 136, .5);
  transition: transform .14s var(--jl-ease), box-shadow .25s var(--jl-ease), filter .2s var(--jl-ease);
}
.jlc:hover .jlc-cta { filter: saturate(1.08); }
.jlc-cta:hover { transform: translateY(-1px); }
.jlc-cta i { font-style: normal; transition: transform .2s var(--jl-ease); }
.jlc:hover .jlc-cta i { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   14. Hero — CTAs no mesmo sistema do card; ghost mais limpo
   --------------------------------------------------------------------- */
.hero-cta-primary {
  box-shadow: 0 16px 34px -14px rgba(13, 148, 136, .6) !important;
  transition: transform .16s var(--jl-ease), box-shadow .25s var(--jl-ease), filter .2s var(--jl-ease) !important;
}
.hero-cta-primary:hover { transform: translateY(-2px); filter: saturate(1.06); }
.hero-cta-primary:active { transform: translateY(0); }

.hero-cta-ghost {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .04) !important;
  transition: transform .16s var(--jl-ease), background-color .2s var(--jl-ease), border-color .2s var(--jl-ease) !important;
}
.hero-cta-ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3) !important; }

/* Headline do hero: respiro e equilíbrio de linha */
section.min-h-\[85vh\] h1 { text-wrap: balance; }

/* ---------------------------------------------------------------------
   15. Modal de reserva — passo final do funil, clareza Booking-clean
   --------------------------------------------------------------------- */
#modal-name { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.6rem); letter-spacing: -.025em; line-height: 1.12; }
#modal-desc { color: #64748b; }

/* Caixa de preço dos specs ganha destaque (é a âncora da decisão) */
#modal-price { font-size: 1.18rem; letter-spacing: -.02em; color: var(--jl-brand-700); }

/* Inputs do formulário: cantos, hover e foco coerentes */
#booking-form input, #booking-form select { border-radius: 13px; }
#booking-form input:hover:not(:focus), #booking-form select:hover:not(:focus) { border-color: #cbd5e1; }
#booking-form label { color: #475569; }

/* "Incluso no passeio": pills mais legíveis */
#modal-features .pill { background: #f1f5f9; color: #475569; border-radius: 999px; padding: 4px 10px; }

/* Carrossel: contador e dots mais nítidos */
#modal-counter { font-weight: 700; letter-spacing: .02em; }
#modal-dots button { box-shadow: 0 1px 3px rgba(2, 6, 23, .35); }

/* Botão de fechar com alvo de toque confortável */
#modal-panel .sticky button[onclick="closeModal()"] { width: 36px; height: 36px; }

/* CTA final (WhatsApp): clímax do funil */
#booking-form button[type="submit"] { letter-spacing: .01em; border-radius: 16px; }

/* Contraste AA no botão-clímax: branco sobre verde SÓLIDO (5.02:1).
   O gradiente green-500→400 dava só 2.28:1 (falha WCAG AA). Vale modal + página da embarcação. */
#booking-form button[type="submit"],
.jl-reserva-form button[type="submit"] { background: #15803d !important; }
#booking-form button[type="submit"]:hover,
.jl-reserva-form button[type="submit"]:hover { background: #166534 !important; }

/* ---------------------------------------------------------------------
   16. Página da embarcação — form de reserva e specs no mesmo padrão
   --------------------------------------------------------------------- */
.jl-reserva-form input, .jl-reserva-form select {
  border-radius: 13px;
  transition: border-color .18s var(--jl-ease), box-shadow .18s var(--jl-ease), background-color .18s var(--jl-ease);
}
.jl-reserva-form input:hover:not(:focus), .jl-reserva-form select:hover:not(:focus) { border-color: #cbd5e1; }
.jl-reserva-form input:focus, .jl-reserva-form select:focus {
  border-color: var(--jl-brand-400);
  box-shadow: var(--jl-ring);
  background: #fff;
}
/* Preço dos specs como âncora da decisão */
main [itemprop="price"] { font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.1; }

/* ---------------------------------------------------------------------
   17. Cards de listagem — blog e corporativo no mesmo idioma do card
   --------------------------------------------------------------------- */
.jl-post-card, .jl-corp-card {
  box-shadow: var(--jl-shadow-sm);
  transition: transform .28s var(--jl-ease), box-shadow .28s var(--jl-ease), border-color .28s var(--jl-ease);
}
.jl-post-card:hover, .jl-corp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jl-shadow-md);
  border-color: rgba(20, 184, 166, .35) !important;
}
.jl-post-card img, .jl-corp-card img { transition: transform .5s var(--jl-ease); }
.jl-post-card:hover img, .jl-corp-card:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------------
   18. Seletor de idioma (jlLangSwitcher) — variante dark e pill
   --------------------------------------------------------------------- */
.jl-langs { display: inline-flex; align-items: center; gap: 2px; border-radius: 10px; overflow: hidden; }
.jl-lang {
  font-size: 10px; font-weight: 800; letter-spacing: .03em; line-height: 1;
  padding: 9px 12px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: background-color .18s var(--jl-ease), color .18s var(--jl-ease);
  text-decoration: none;
}
/* Dark (sobre hero/header escuro) */
.jl-langs-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 2px; }
.jl-langs-dark .jl-lang { color: rgba(255,255,255,.45); }
.jl-langs-dark .jl-lang:hover { color: rgba(255,255,255,.85); }
.jl-langs-dark .jl-lang.is-active { background: rgba(255,255,255,.18); color: #fff; }
/* Pill (sobre fundo claro) */
.jl-langs-pill { background: #fff; border: 1px solid var(--jl-line); padding: 2px; box-shadow: var(--jl-shadow-sm); }
.jl-langs-pill .jl-lang { color: var(--jl-muted); }
.jl-langs-pill .jl-lang:hover { color: var(--jl-ink); }
.jl-langs-pill .jl-lang.is-active { background: var(--jl-brand-500); color: #fff; }

/* ---------------------------------------------------------------------
   12. Movimento reduzido — respeita a preferência do sistema
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .fade-up-delay { opacity: 1 !important; transform: none !important; }
  .boat-card:hover > .relative > img { transform: none; }
}

/* ---------------------------------------------------------------------
   13. View Transitions nativas (transição entre páginas, estilo app)
       + reveal dos cards no scroll. Zero JS/lib, degrada sozinho.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: jl-vt-out .20s ease both; }
  ::view-transition-new(root) { animation: jl-vt-in .34s var(--jl-ease, cubic-bezier(.22, 1, .36, 1)) both; }

  /* Cards da frota revelam ao entrar na viewport — scroll-driven, na thread do compositor */
  @supports (animation-timeline: view()) {
    .jlc {
      animation: jl-card-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}
@keyframes jl-vt-out { to { opacity: 0; translate: 0 -6px; } }
@keyframes jl-vt-in  { from { opacity: 0; translate: 0 12px; } }
/* usa `translate` (propriedade independente) p/ NÃO conflitar com o transform do .jlc:hover */
@keyframes jl-card-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0; } }

/* ---------------------------------------------------------------------
   14. Hero: Ken Burns (zoom/pan lento na foto) — vida sem peso de vídeo
   --------------------------------------------------------------------- */
/* Só o slide ATIVO faz Ken Burns (antes: ~10 imgs full-bleed animando em loop +
   will-change permanente = pressão de compositor no mobile). O JS do hero alterna .is-active. */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide-img.is-active { animation: jl-kenburns 20s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes jl-kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.13) translate(-1.5%, -1.2%); }
}
/* legibilidade do texto do hero sobre foto mais clara (seguro p/ fotos brilhantes) */
.hero-content h1, .hero-content p { text-shadow: 0 2px 18px rgba(8, 15, 25, .5); }

/* Revelação do título do hero palavra-a-palavra (CSS, sem lib, escalonado por animation-delay inline) */
.hero-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* base opacity 1 (à prova de falha: visível se a animação não rodar); `backwards` esconde só durante o delay */
  .hero-word { animation: jl-word-in .7s var(--jl-ease, cubic-bezier(.22, 1, .36, 1)) backwards; }
}
@keyframes jl-word-in { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } }

/* Failsafe de visibilidade: .fade-up vinha de opacity:0 + animation forwards no CSS compilado.
   Se a animação não rodar (sem suporte, keyframe ausente), o conteúdo (CTA/H1) ficava invisível.
   Base opacity:1; esconde só quando há motion, com fill `backwards` (sem flash no delay). */
.fade-up, .fade-up-delay { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up       { animation: fadeUp 0.6s ease backwards; }
  .fade-up-delay { animation: fadeUp 0.7s ease 0.15s backwards; }
}

/* ---------------------------------------------------------------------
   15. "Pedido enviado" — animação de sucesso (SVG draw + pop) no overlay de reserva
   --------------------------------------------------------------------- */
.jl-sent { text-align: center; padding: 16px 8px 6px; }
.jl-sent-mark { width: 86px; height: 86px; display: block; margin: 0 auto 14px; animation: jl-sent-pop .45s var(--jl-ease, cubic-bezier(.22, 1, .36, 1)) both; }
.jl-sent-ring { fill: none; stroke: var(--jl-brand-500, #14b8a6); stroke-width: 3; stroke-dasharray: 170; stroke-dashoffset: 170; animation: jl-draw .55s var(--jl-ease, ease) forwards; }
.jl-sent-check { fill: none; stroke: var(--jl-brand-500, #14b8a6); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: jl-draw .4s var(--jl-ease, ease) .45s forwards; }
.jl-sent-title { font-size: 17px; font-weight: 800; color: #0b1220; margin: 0 0 4px; }
.jl-sent-sub { font-size: 13px; color: #6b7280; margin: 0; }
@keyframes jl-draw { to { stroke-dashoffset: 0; } }
@keyframes jl-sent-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .jl-sent-ring, .jl-sent-check { animation: none; stroke-dashoffset: 0; }
  .jl-sent-mark { animation: none; }
}

/* ---------------------------------------------------------------------
   16. Mobile — inputs abaixo de 16px disparam zoom automático no iOS Safari
   ao focar. Afetava o formulário de reserva inteiro (nome, telefone, data,
   roteiro...) e os selects de filtro. Só reescreve o tamanho, mantém o
   resto do estilo (padding/cor/borda) intacto.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}