/* luar.css — Tema "Luar sobre Areia" (Fusão C+A) | regras de elemento
   ----------------------------------------------------------------------------
   Os TOKENS do tema (cores, tipografia, spacing, radius, shadows, grid,
   componentes…) vivem em tokens.css — fonte única, carregado ANTES deste.
   Aqui ficam apenas as regras de ELEMENTO que sobrescrevem cores hardcoded do
   design-system (l.css) para o tema luar, consumindo os tokens.

   Ordem nas páginas: t.css → c.css → l.css → tokens.css → luar.css
   Aprovado por Vitor a partir de _preview-CA.html#h1 (2026-06-20).
   ---------------------------------------------------------------------------- */

/* Barra de navegação: vidro de areia (em vez do branco padrão do l.css) */
:root[data-theme="luar"] .landing-nav {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--nav-blur));
  backdrop-filter: blur(var(--nav-blur));
}

/* Scrim do hero: véu ardósia → azul-luar (paleta luar), mais escuro à esquerda
   onde fica o texto, garantindo legibilidade do branco sobre a foto. */
:root[data-theme="luar"] .landing-hero-overlay {
  background: linear-gradient(135deg, rgba(28,36,46,.72) 0%, rgba(88,107,130,.45) 100%);
}

/* CTA de reserva: "Midnight Blue Metallic" (Porsche 39C). Gradiente luz→sombra
   evoca o efeito metálico. Exclusivo dos botões que levam à reserva (hero,
   "Reservar" da navbar, "Buscar"/"Reservar e segurar" do reservar.html).
   WhatsApp continua verde — decisão fixa. Aqui (e não no editorial.css) para
   funcionar em todas as páginas da landing. */
:root[data-theme="luar"] .btn-reserve {
  background: linear-gradient(165deg, var(--reserve-lite), var(--reserve) 55%, var(--reserve-dark));
  color: #fff;
  border-color: var(--reserve-dark);
  box-shadow: 0 6px 20px rgba(20, 29, 52, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: filter var(--motion-fast), transform var(--motion-base), box-shadow var(--motion-base);
}
:root[data-theme="luar"] .btn-reserve:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(var(--hover-lift));
  box-shadow: 0 10px 28px rgba(20, 29, 52, .36), inset 0 1px 0 rgba(255, 255, 255, .16);
}