/* ─────────────────────────────────────────────────────────────────
   hero-salon.css — Salón 3D como ambient cálido global + manteles
   blancos flotantes (paleta luxe champagne).

   Estrategia:
   - Canvas 3D position:fixed full-viewport (visible en TODA la landing).
   - Velo champagne semitransparente sobre el canvas → convierte el salón
     oscuro en ambient cálido luminoso, no en fondo dominante.
   - Cada sección de contenido es un MANTEL blanco flotante con sombra
     dorada y borde sutil — el luxe nace del contraste mantel/ambient.
   - Los gaps entre manteles dejan respirar el ambient cálido.
   ───────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   Canvas 3D fijo cubriendo TODO el viewport — visible en toda la
   landing al hacer scroll. Velo champagne global lo aclara.
   ─────────────────────────────────────────────────────────────── */
#hero-canvas-wrapper {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  background: #F4ECDB;
  pointer-events: none;
  overflow: hidden;
}

/* Velo champagne global: convierte el salón dark en ambient luminoso */
#hero-canvas-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(250, 249, 246, 0.55) 0%,
      rgba(250, 249, 246, 0.78) 60%,
      rgba(244, 236, 219, 0.86) 100%);
  pointer-events: none;
}

.hero-canvas-wrapper::before {
  display: none !important;
}

/* Body transparente — el canvas fixed se ve a través */
body {
  background: transparent !important;
}

/* Hero loader — bg champagne mientras carga */
.hero-loader {
  background: #F4ECDB !important;
}

/* Todo main por encima del canvas */
main, header, footer {
  position: relative;
  z-index: 1;
}

/* ───────────────────────────────────────────────────────────────
   HERO — el salón se ve más nítido aquí (menos velo local)
   ─────────────────────────────────────────────────────────────── */
.hero {
  background: transparent;
  position: relative;
  z-index: 1;
  isolation: auto;
}

.hero-content {
  position: relative;
  z-index: 4;
}

/* En el hero, restamos un poco del velo global para que el dorado
   del salón respire como signature opening */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(244, 236, 219, 0) 0%,
    rgba(244, 236, 219, 0.10) 70%,
    rgba(244, 236, 219, 0.25) 100%);
  pointer-events: none;
}

/* Eyebrow chip translúcido */
.hero .hero-eyebrow {
  color: var(--color-accent-deep);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(156, 132, 74, 0.4);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(156, 132, 74, 0.10);
}

/* Title MUNDUS — gradient luxe con halo dorado suave */
.hero .hero-title {
  background: linear-gradient(
    100deg,
    #7B6739 0%,
    #9C844A 25%,
    #C9B47A 50%,
    #9C844A 75%,
    #7B6739 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 6px 24px rgba(156, 132, 74, 0.22));
}

.hero .hero-description {
  color: var(--color-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 1;
}

/* CTAs hero — primary dorado sólido, outline blanco con borde dorado */
.hero .hero-ctas .btn-primary {
  background: var(--color-accent-deep);
  color: var(--color-bg);
  border: 1px solid var(--color-accent-deep);
  box-shadow: 0 10px 28px rgba(156, 132, 74, 0.30);
}

.hero .hero-ctas .btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
}

.hero .hero-ctas .btn-outline {
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-accent-deep);
  border: 1px solid rgba(156, 132, 74, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(156, 132, 74, 0.10);
}

.hero .hero-ctas .btn-outline:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.hero-loader-orb {
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-title {
    background-position: 50% 50%;
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────
   HEADER — glassmorphism cream luxe
   ─────────────────────────────────────────────────────────────── */
.site-header {
  background: rgba(250, 249, 246, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(156, 132, 74, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 4px 24px rgba(156, 132, 74, 0.08);
  position: sticky;
  z-index: 950;
}

/* Header CTA Llamar — outline dorado sobre vidrio */
.btn-call {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(156, 132, 74, 0.5) !important;
  color: var(--color-accent-deep) !important;
  box-shadow: 0 4px 14px rgba(156, 132, 74, 0.18) !important;
  backdrop-filter: blur(10px);
}
.btn-call .number {
  color: var(--color-primary) !important;
}
.btn-call:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
}

/* ───────────────────────────────────────────────────────────────
   MANTELES — cada sección de contenido se vuelve un panel blanco
   flotante con borde dorado y shadow champagne. Los gaps entre
   manteles dejan respirar el ambient del salón.
   ─────────────────────────────────────────────────────────────── */

/* Discovery (search + filtros) — mantel pill */
.discovery {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 1px solid rgba(156, 132, 74, 0.22);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 50px rgba(156, 132, 74, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.04);
  padding: var(--sp-8) var(--sp-6) !important;
  margin-top: var(--sp-12) !important;
  margin-bottom: var(--sp-10) !important;
}

/* Menu grid — cada categoría es un mantel propio (la card ya tiene bg) */
#menu-container {
  position: relative;
  z-index: 1;
}

.category-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF !important;
  border: 1px solid rgba(156, 132, 74, 0.22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 40px rgba(156, 132, 74, 0.12),
    0 3px 10px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-luxury),
    box-shadow var(--dur-base) var(--ease-luxury),
    border-color var(--dur-base) var(--ease-luxury);
}

.category-card:hover {
  border-color: rgba(156, 132, 74, 0.45) !important;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 22px 60px rgba(156, 132, 74, 0.20),
    0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Visit-section — mantel mayor */
.visit-section {
  position: relative;
  z-index: 1;
  background: #FFFFFF !important;
  border: 1px solid rgba(156, 132, 74, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 22px 60px rgba(156, 132, 74, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.05) !important;
  max-width: 1100px;
  margin: var(--sp-16) auto !important;
}

/* Events / Sala Privada — mantel con énfasis dorado */
.events-section {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, #FFFFFF, #FFFBF1) !important;
  border: 1px solid rgba(156, 132, 74, 0.32) !important;
  border-radius: 24px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 64px rgba(156, 132, 74, 0.20),
    0 6px 16px rgba(0, 0, 0, 0.05) !important;
  max-width: 1100px;
  margin: var(--sp-16) auto var(--sp-16) !important;
  padding: var(--sp-16) var(--sp-8) !important;
}

/* Botón "Reservar sala" sólido dorado */
.events-section .btn-call,
.visit-section .btn-call {
  background: var(--color-accent-deep) !important;
  border: 1px solid var(--color-accent-deep) !important;
  color: var(--color-bg) !important;
  box-shadow: 0 10px 28px rgba(156, 132, 74, 0.32) !important;
}
.events-section .btn-call .number,
.visit-section .btn-call .number {
  color: var(--color-bg) !important;
}
.events-section .btn-call:hover,
.visit-section .btn-call:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ───────────────────────────────────────────────────────────────
   Divisores ornamentales entre secciones
   ─────────────────────────────────────────────────────────────── */
.discovery::after,
.visit-section::before,
.events-section::before {
  content: "❦";
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-accent);
  opacity: 0.6;
  margin: 0 auto var(--sp-4);
  letter-spacing: 0;
}

.visit-section::before,
.events-section::before {
  margin-top: calc(-1 * var(--sp-4));
  margin-bottom: var(--sp-6);
}

.discovery::after {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────────────
   FOOTER — ink negro con borde dorado superior (cierre elegante)
   ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  border-top: 1px solid rgba(156, 132, 74, 0.45);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%
  );
}

/* ───────────────────────────────────────────────────────────────
   Responsive — menos padding lateral en móvil para los manteles
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .discovery,
  .visit-section,
  .events-section {
    border-radius: 18px !important;
    margin-left: var(--sp-3) !important;
    margin-right: var(--sp-3) !important;
  }
  .category-card {
    border-radius: 14px !important;
  }
}