/* ==========================================================================
   PARQUE DE LAS CIENCIAS BY TOROVERDE - DESIGN SYSTEM & STYLESHEET
   Brand Palette:
     - Indigo Cósmico: #1B1464
     - Celeste Ciencia: #5CCEF2
     - Coral Energía: #FF4A2A
     - Verde Urban + Adventure: #63B84F
     - Negro: #000000 | Blanco: #FFFFFF
   Theme: High-Energy Entertainment, Discovery & Science Park
   ========================================================================== */

:root {
  /* Brand Palette */
  --indigo-cosmico: #1B1464;
  --indigo-dark: #0D0838;
  --indigo-deep: #080524;
  --indigo-light: #2A218A;
  
  --celeste-ciencia: #5CCEF2;
  --celeste-glow: rgba(92, 206, 242, 0.35);
  
  --coral-energia: #FF4A2A;
  --coral-hover: #E63D1F;
  --coral-glow: rgba(255, 74, 42, 0.4);
  
  --verde-urban: #63B84F;
  --verde-hover: #52A03F;
  --verde-glow: rgba(99, 184, 79, 0.35);
  
  --ink-primary: #0F0A3E;
  --ink-secondary: #4A4668;
  --ink-muted: #6E6A8A;
  
  --cream-bg: #F7FAFC;
  --card-bg: #FFFFFF;
  --border-line: #E2E8F0;
  --border-glass: rgba(255, 255, 255, 0.16);
  
  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(27, 20, 100, 0.06);
  --shadow-md: 0 12px 28px rgba(27, 20, 100, 0.1);
  --shadow-lg: 0 24px 50px rgba(13, 8, 56, 0.18);
  --shadow-coral: 0 10px 25px rgba(255, 74, 42, 0.35);
  --shadow-cyan: 0 10px 25px rgba(92, 206, 242, 0.3);
  
  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--cream-bg);
  color: var(--ink-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

/* Language Toggle Display Handlers - Strict Cross-Language Isolation */
[data-lang] {
  display: none !important;
}

body.lang-en [data-lang="es"],
body.lang-es [data-lang="en"] {
  display: none !important;
}

body.lang-es [data-lang="es"],
body.lang-en [data-lang="en"] {
  display: block !important;
}

body.lang-es span[data-lang="es"],
body.lang-en span[data-lang="en"],
body.lang-es a[data-lang="es"],
body.lang-en a[data-lang="en"],
body.lang-es button[data-lang="es"],
body.lang-en button[data-lang="en"],
body.lang-es .section-kicker[data-lang="es"],
body.lang-en .section-kicker[data-lang="en"] {
  display: inline-flex !important;
}

body.lang-es div[data-lang="es"],
body.lang-en div[data-lang="en"] {
  display: block !important;
}

body.lang-es .price-disclaimer[data-lang="es"],
body.lang-en .price-disclaimer[data-lang="en"],
body.lang-es .upsell-disclaimer[data-lang="es"],
body.lang-en .upsell-disclaimer[data-lang="en"],
body.lang-es .sticky-disclaimer[data-lang="es"],
body.lang-en .sticky-disclaimer[data-lang="en"] {
  display: block !important;
}

body.lang-es .restaurant-expand-trigger span[data-lang="es"],
body.lang-en .restaurant-expand-trigger span[data-lang="en"] {
  display: inline !important;
}

/* Common Typography & Kickers */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin-top: 0;
  color: var(--ink-primary);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--verde-urban);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.light-section .section-kicker {
  color: var(--verde-urban);
}

.section-header {
  margin-bottom: 48px;
  max-width: 820px;
}

.section-header h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.25rem);
  margin: 8px 0 16px;
  letter-spacing: -0.01em;
}

.section-header p.intro {
  font-size: 1.15rem;
  color: var(--ink-secondary);
  margin: 0;
}


/* Navbar y footer: ver assets/website/site2026/chrome.css (compartido por todo el sitio). */

/* Misma anchura que el chrome para que la barra de anclas alinee con el navbar. */
.anchor-bar .container.anchor-inner {
  width: calc(100% - 48px);
  max-width: 1600px;
}

.park-mark {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--indigo-cosmico);
  padding: 6px 14px;
  background: #EEF8FD;
  border: 1px solid rgba(92, 206, 242, 0.3);
  border-radius: 99px;
}

.park-mark-icon {
  width: 15px;
  height: 15px;
  color: var(--coral-energia);
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid transparent;
}

.btn-coral {
  background: var(--coral-energia);
  color: #FFFFFF;
  border-color: var(--coral-energia);
  box-shadow: 0 8px 24px rgba(255, 74, 42, 0.35);
}

.btn-coral:hover {
  background: var(--coral-hover);
  border-color: var(--coral-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 74, 42, 0.5);
}

.btn-green {
  background: var(--verde-urban);
  color: #FFFFFF;
  border-color: var(--verde-urban);
  box-shadow: 0 8px 24px rgba(99, 184, 79, 0.35);
}

.btn-green:hover {
  background: var(--verde-hover);
  border-color: var(--verde-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(99, 184, 79, 0.5);
}

.btn-navy {
  background: var(--indigo-cosmico);
  color: #FFFFFF;
  border-color: var(--indigo-cosmico);
  box-shadow: 0 8px 20px rgba(27, 20, 100, 0.25);
}

.btn-navy:hover {
  background: var(--indigo-light);
  border-color: var(--indigo-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(27, 20, 100, 0.35);
}

.btn-coral-blue,
.btn-cyan {
  background: var(--celeste-ciencia);
  color: var(--indigo-deep);
  border-color: var(--celeste-ciencia);
  box-shadow: 0 8px 24px rgba(92, 206, 242, 0.35);
  font-weight: 800;
}

.btn-coral-blue:hover,
.btn-cyan:hover {
  background: #73D7F5;
  border-color: #73D7F5;
  color: var(--indigo-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(92, 206, 242, 0.5);
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* ==========================================================================
   SECONDARY ANCHOR UTILITY BAR (#2 Anchor bar - Prominent & Alive)
   ========================================================================== */
.anchor-bar {
  background: linear-gradient(90deg, #09042A 0%, #160D56 30%, #1A1064 50%, #160D56 70%, #09042A 100%);
  color: #FFFFFF;
  border-top: 2px solid rgba(92, 206, 242, 0.35);
  border-bottom: 2px solid rgba(92, 206, 242, 0.35);
  position: relative;
  z-index: 40;
  box-shadow: 0 14px 40px rgba(9, 4, 42, 0.6), 0 0 30px rgba(92, 206, 242, 0.2);
  margin-bottom: 0;
}

.anchor-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 20px;
  position: relative;
}

.anchor-links-left,
.anchor-links-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.anchor-links-left {
  justify-content: flex-end;
}

.anchor-links-right {
  justify-content: flex-start;
}

.anchor-link {
  font-size: 0.925rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.anchor-link:hover {
  background: rgba(92, 206, 242, 0.18);
  color: var(--celeste-ciencia);
  border-color: var(--celeste-ciencia);
  box-shadow: 0 4px 18px rgba(92, 206, 242, 0.35);
  transform: translateY(-2px);
}

/* Entre tablet y laptop chica los 6 links no entraban y la barra generaba
   scroll horizontal en todo el home: se achican por escalones. */
@media (max-width: 1360px) {
  .anchor-links-left,
  .anchor-links-right { gap: 8px; }
  .anchor-link { padding: 8px 12px; font-size: 0.78rem; letter-spacing: 0.02em; }
}

/* Debajo de 960px no entra: la navegacion queda en el menu hamburguesa y la
   barra fija de compra (igual que en movil). */
@media (max-width: 960px) {
  .anchor-bar { display: none; }
}

@media (max-width: 1100px) {
  .anchor-inner { gap: 10px; }
  .anchor-links-left,
  .anchor-links-right { gap: 6px; }
  .anchor-link { padding: 7px 9px; font-size: 0.68rem; letter-spacing: 0; }
  .anchor-brand { padding: 0 8px; }
}

.anchor-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  position: relative;
  z-index: 15;
}

/* Big, Proud Circular Emblem Medallion with Cosmic Energy Orbit */
.anchor-circle-badge {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -16px;
  margin-bottom: -16px;
  cursor: pointer;
  perspective: 600px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  animation: cosmicPulse 4s ease-in-out infinite;
}

/* 1. Orbiting Cosmic Brand Energy Ring (Continuously Spins around Badge) */
.anchor-circle-badge::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--coral-energia) 18%,
    var(--celeste-ciencia) 38%,
    var(--verde-urban) 58%,
    var(--coral-energia) 78%,
    var(--celeste-ciencia) 92%,
    transparent 100%
  );
  animation: cosmicOrbit 7s linear infinite;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.5px);
}

/* 2. Inner Cosmic Core Shield */
.anchor-circle-badge::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #26188A 0%, #140B54 60%, #0A0430 100%);
  border: 1.5px solid rgba(99, 184, 79, 0.5);
  box-shadow: 
    inset 0 0 18px rgba(99, 184, 79, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.2);
  z-index: 2;
  transition: all 0.3s ease;
}

/* 3. The Logo Inside - Stays Perfectly Upright, Sharp & Interactive */
.anchor-circle-badge img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

/* 4. Interactive Hover State: 3D Hologram Tilt, Orbit Speed-Up & Solar Flare */
.anchor-circle-badge:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 
    0 16px 45px rgba(0, 0, 0, 0.8),
    0 0 38px rgba(255, 74, 42, 0.85),
    0 0 55px rgba(99, 184, 79, 0.75),
    0 0 75px rgba(92, 206, 242, 0.5);
}

.anchor-circle-badge:hover::before {
  animation: cosmicOrbit 2s linear infinite;
  inset: -6px;
  filter: blur(1.5px) brightness(1.35);
}

.anchor-circle-badge:hover::after {
  background: radial-gradient(circle at 35% 35%, #301EA6 0%, #1A0E6E 60%, #0C053B 100%);
  border-color: #FFFFFF;
}

.anchor-circle-badge:hover img {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7)) brightness(1.2);
}

/* Keyframe Animations for Cosmic Orbit & Pulse */
@keyframes cosmicOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cosmicPulse {
  0%, 100% {
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.7),
      0 0 24px rgba(255, 74, 42, 0.5),
      0 0 35px rgba(92, 206, 242, 0.4);
  }
  50% {
    box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.75),
      0 0 32px rgba(99, 184, 79, 0.65),
      0 0 45px rgba(255, 74, 42, 0.7),
      0 0 60px rgba(92, 206, 242, 0.5);
  }
}

/* ==========================================================================
   HERO SECTION (With hero-video.mp4 Background - Fitted Above The Fold)
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100vh - 90px - 76px);
  display: flex;
  align-items: center;
  padding: 44px 0 36px;
  color: #FFFFFF;
  overflow: hidden;
  background: #000000;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Crystal-Clear Natural Vignette Overlay - No heavy blue blanket, video shines! */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(7, 4, 25, 0.78) 0%, rgba(7, 4, 25, 0.42) 42%, rgba(7, 4, 25, 0.08) 70%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 35%, transparent 70%, rgba(9, 4, 32, 0.6) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 3;
  max-width: 820px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--celeste-ciencia);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  color: #FFFFFF;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 25px rgba(0, 0, 0, 0.8);
}

.hero-desc {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin-bottom: 26px;
  line-height: 1.55;
  max-width: 680px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 4px 16px rgba(0, 0, 0, 0.8);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   PARQUE DE LA MAGIA ASIDE BANNER (#3 Parque de la Magia)
   ========================================================================== */
.magic-aside {
  position: relative;
  background: #FFFFFF;
  color: var(--ink-primary);
  padding: 64px 0 68px;
  border-bottom: 1px solid rgba(22, 16, 75, 0.08);
  overflow: hidden;
  margin-bottom: 0;
}

.magic-grid {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: 40px;
}

.magic-poster-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 38px -10px rgba(27, 20, 100, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(22, 16, 75, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.magic-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.magic-aside:hover .magic-poster-wrap {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -10px rgba(27, 20, 100, 0.22);
}

.magic-aside:hover .magic-poster-wrap img {
  transform: scale(1.04);
}

.magic-copy .section-kicker {
  color: var(--coral-energia);
  margin-bottom: 6px;
  font-weight: 800;
}

.magic-copy h2 {
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  color: var(--indigo-cosmico);
  margin: 4px 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.magic-copy p {
  color: var(--ink-secondary);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   COSMIC CANVAS & CELESTIAL BACKGROUNDS
   ========================================================================== */
.cosmic-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   FEATURED EVENTS SECTION (#4 Events) - PLANETARIUM DOME THEME
   ========================================================================== */
.section-events {
  position: relative;
  background: radial-gradient(circle at 50% 12%, #1b1254 0%, #0d0838 55%, #05031a 100%);
  padding: 110px 0 120px;
  overflow: hidden;
  color: #FFFFFF;
  border-top: 1px solid rgba(92, 206, 242, 0.25);
}

.section-events .container {
  position: relative;
  z-index: 2;
}

.section-events .section-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--celeste-ciencia);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.lang-es .section-events .section-kicker[data-lang="es"],
body.lang-en .section-events .section-kicker[data-lang="en"] {
  display: inline-flex !important;
}

.section-events h2 {
  color: #FFFFFF;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.section-events .intro {
  color: #D4D0ED;
}

.section-events .btn-navy {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.section-events .btn-navy:hover {
  background: var(--celeste-ciencia);
  border-color: var(--celeste-ciencia);
  color: var(--indigo-dark);
  box-shadow: 0 6px 22px rgba(92, 206, 242, 0.45);
  transform: translateY(-2px);
}

.events-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 40px;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.event-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -10px rgba(92, 206, 242, 0.26), 0 8px 24px rgba(0, 0, 0, 0.5);
  border-color: rgba(92, 206, 242, 0.55);
}

.event-media-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #080424;
}

.event-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover .event-media-wrap img {
  transform: scale(1.06);
}

.event-content {
  padding: 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.event-category-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(99, 184, 79, 0.14);
  color: #265B1B;
  border: 1px solid rgba(99, 184, 79, 0.35);
  margin-bottom: 10px;
}

.event-content h3 {
  font-size: 1.3rem;
  margin: 0 0 8px;
  color: var(--indigo-cosmico);
}

.event-date-line {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--verde-urban);
  margin-bottom: 12px;
}

.event-teaser {
  font-size: 0.92rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
  flex: 1;
}

.event-btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--indigo-cosmico);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.event-btn-detail:hover {
  color: var(--verde-urban);
  transform: translateX(4px);
}

/* ==========================================================================
   TICKETS & PACKAGES SECTION (#5 Tickets) - PREMIUM CAROUSEL RAIL
   ========================================================================== */
.section-tickets {
  background: radial-gradient(circle at 85% 10%, rgba(92, 206, 242, 0.06) 0%, transparent 45%),
              radial-gradient(circle at 15% 90%, rgba(99, 184, 79, 0.06) 0%, transparent 45%),
              #FFFFFF;
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
}

.section-tickets .container {
  position: relative;
  z-index: 2;
}

.tickets-orbital-decor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 1400px;
  height: 900px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.tickets-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 32px;
}

.tickets-header-text {
  max-width: 680px;
}

.tickets-rail-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.rail-controls-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-secondary);
  letter-spacing: -0.01em;
}

.rail-buttons-group {
  display: flex;
  gap: 10px;
}

.rail-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 20, 100, 0.16);
  background: #FFFFFF;
  color: var(--indigo-cosmico);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(27, 20, 100, 0.06);
}

.rail-nav-btn:hover:not(:disabled) {
  background: var(--verde-urban);
  border-color: var(--verde-urban);
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(99, 184, 79, 0.35);
}

.rail-nav-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.rail-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(27, 20, 100, 0.08);
}

.tickets-rail {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 6px 36px;
  margin: 0 -6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 184, 79, 0.4) transparent;
}

.tickets-rail::-webkit-scrollbar {
  height: 6px;
}

.tickets-rail::-webkit-scrollbar-track {
  background: rgba(27, 20, 100, 0.04);
  border-radius: 99px;
}

.tickets-rail::-webkit-scrollbar-thumb {
  background: rgba(99, 184, 79, 0.4);
  border-radius: 99px;
}

.tickets-rail::-webkit-scrollbar-thumb:hover {
  background: var(--verde-urban);
}

/* Luxury Ticket Card */
.ticket-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(27, 20, 100, 0.08);
  box-shadow: 0 10px 30px -10px rgba(27, 20, 100, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Refined Premium Hover: Card stays firmly planted, delicate aura glow, NO clumsy vertical lifting */
.ticket-card:hover {
  border-color: rgba(99, 184, 79, 0.45);
  box-shadow: 0 20px 42px -12px rgba(27, 20, 100, 0.14), 0 4px 16px rgba(99, 184, 79, 0.12);
}

.ticket-card.featured-card {
  border: 2px solid var(--verde-urban);
  box-shadow: 0 16px 40px -10px rgba(99, 184, 79, 0.28), 0 4px 14px rgba(0, 0, 0, 0.04);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCF9 100%);
}

.ticket-card.featured-card:hover {
  box-shadow: 0 22px 50px -10px rgba(99, 184, 79, 0.38), 0 6px 20px rgba(99, 184, 79, 0.16);
}

.featured-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: var(--verde-urban);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 99px;
  box-shadow: 0 4px 14px rgba(99, 184, 79, 0.5);
}

/* Card Concept Image Media */
.ticket-figure {
  margin: 0;
  padding: 0;
  height: 230px;
  background: #0E1626;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.ticket-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-card:hover .ticket-figure img {
  transform: scale(1.05);
}

.concept-caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  background: rgba(9, 16, 20, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  pointer-events: none;
}

.ticket-poster-figure {
  background: #EAEBF7;
}

.ticket-poster-figure img {
  object-fit: contain;
  padding: 8px;
}

/* Card Body Content */
.ticket-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ticket-status-tag {
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--verde-urban);
  margin-bottom: 8px;
  display: inline-block;
}

.ticket-card h3 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
  line-height: 1.15;
  margin: 0 0 8px;
  font-family: var(--font-heading);
}

.ticket-subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.ticket-desc {
  font-size: 0.92rem;
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
  min-height: 48px;
}

.ticket-rates-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 0.88rem;
}

.ticket-rates-list li {
  padding: 7px 0;
  border-bottom: 1px dashed rgba(27, 20, 100, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-secondary);
}

.ticket-rates-list li strong {
  color: var(--indigo-cosmico);
  font-weight: 800;
}

.ticket-price-box {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-price-box small {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.price-disclaimer {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  margin-top: 4px;
}

.btn-ticket-action {
  background: var(--coral-energia);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 14px 20px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 16px rgba(255, 74, 42, 0.35);
  transition: all 0.25s ease;
  width: 100%;
  display: block;
}

.btn-ticket-action:hover {
  background: var(--coral-hover);
  box-shadow: 0 8px 24px rgba(255, 74, 42, 0.5);
  transform: translateY(-2px);
}

.btn-ticket-action:active {
  transform: translateY(0);
}

.btn-ticket-action span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

body.lang-es figcaption.concept-caption[data-lang="es"],
body.lang-en figcaption.concept-caption[data-lang="en"] {
  display: block !important;
}

/* ==========================================================================
   ADDITIONAL ATTRACTIONS (#6 Complementa tu visita)
   ========================================================================== */
.section-additional {
  background: linear-gradient(180deg, #F8FAFD 0%, #EFF4F9 100%);
  padding: 95px 0 105px;
  border-top: 1px solid var(--border-line);
  position: relative;
  overflow: hidden;
}

.section-additional .section-kicker {
  color: var(--verde-urban);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 8px;
  width: fit-content;
}

.section-additional .container {
  position: relative;
  z-index: 2;
}

.additional-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.additional-card {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid rgba(22, 16, 75, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px -10px rgba(14, 10, 56, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.additional-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 44px -12px rgba(14, 10, 56, 0.13), 0 4px 14px rgba(99, 184, 79, 0.12);
  border-color: rgba(99, 184, 79, 0.4);
}

.additional-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0E0A38;
}

.additional-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.additional-card:hover .additional-media img {
  transform: scale(1.06);
}

.additional-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 10, 56, 0.25) 0%, transparent 40%, rgba(14, 10, 56, 0.35) 100%);
  pointer-events: none;
}

.additional-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(14, 10, 56, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 99px;
}

.additional-tag.tag-aero {
  border-color: rgba(92, 206, 242, 0.45);
  color: #E0F2FE;
}

.additional-tag.tag-lake {
  border-color: rgba(99, 184, 79, 0.45);
  color: #DCFCE7;
}

.additional-addon-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--indigo-cosmico);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.additional-content {
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.additional-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.additional-spec {
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.additional-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  font-family: var(--font-heading);
}

.additional-desc {
  font-size: 0.915rem;
  line-height: 1.58;
  color: #525B6F;
  margin: 0 0 20px;
  flex-grow: 1;
}

.additional-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #EEF2F6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.additional-availability {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.additional-availability::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-urban);
  box-shadow: 0 0 0 3px rgba(99, 184, 79, 0.22);
}

.additional-status-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--indigo-cosmico);
  background: #EEF3F9;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(22, 16, 75, 0.08);
}

/* ==========================================================================
   12 PARK AREAS & GALLERIES (#7 Áreas del parque)
   ========================================================================== */
.section-areas {
  background: radial-gradient(circle at 50% 15%, #181152 0%, #0c0836 55%, #05031b 100%);
  color: #FFFFFF;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}

.section-areas .container {
  position: relative;
  z-index: 2;
}

.section-areas h2 {
  color: #FFFFFF;
}

.section-areas p.intro {
  color: #D3CEE8;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.area-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.area-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(92, 206, 242, 0.55);
  box-shadow: 0 12px 30px rgba(92, 206, 242, 0.2);
  transform: translateY(-4px);
}

.area-card h3 {
  font-size: 1.2rem;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.area-card p {
  font-size: 0.88rem;
  color: #E2DEED;
  margin: 0 0 16px;
  flex: 1;
  line-height: 1.5;
}

.area-gallery-btn {
  background: transparent;
  border: 1px solid rgba(92, 206, 242, 0.4);
  color: var(--celeste-ciencia);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 800;
  align-self: flex-start;
  transition: all 0.2s ease;
  cursor: pointer;
}

.area-gallery-btn:hover {
  background: var(--celeste-ciencia);
  color: var(--indigo-deep);
}

/* ==========================================================================
   BOOKING CALENDAR & UPSELL WIDGET (#8 Booking)
   ========================================================================== */
.section-booking {
  color: #FFFFFF;
  background: linear-gradient(110deg, rgba(16, 31, 54, 0.96), rgba(16, 37, 60, 0.92)), url('../img/discovery.webp') 50%/cover no-repeat;
  padding: 100px 0;
  position: relative;
  border-top: 3px solid var(--verde-urban);
}

.v2-booking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 64px;
  position: relative;
}

.v2-booking-left .section-kicker {
  color: #C7B7FF !important;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.v2-booking-left h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 16px;
}

.v2-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #E0E6F2;
  margin-bottom: 24px;
}

.v2-steps {
  padding-left: 20px;
  margin-bottom: 32px;
  color: #E0E6F2;
  font-size: 0.95rem;
  line-height: 1.8;
}

.v2-steps li {
  margin-bottom: 6px;
}

.v2-booking-packages {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.v2-upsell {
  color: #182329;
  background: #FFFFFF;
  border-left: 5px solid var(--verde-urban);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 12px 32px rgba(2, 11, 24, 0.25);
}

.v2-upsell-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-cosmico);
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
}

.v2-upsell h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--indigo-cosmico);
}

.v2-upsell p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.v2-upsell-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.v2-upsell-price {
  color: #182329;
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 !important;
}

.v2-upsell .upsell-disclaimer {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.v2-upsell .v2-upsell-add-btn {
  width: 100%;
  margin-bottom: 10px;
}

.v2-recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.v2-recommendation-actions button {
  color: var(--indigo-cosmico);
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.v2-recommendation-actions button:hover {
  color: var(--coral-energia);
}

.v2-all-packages {
  color: #D2C4FF;
  margin-top: 24px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: underline;
  display: inline-block;
  transition: color 0.2s;
}

.v2-all-packages:hover {
  color: #FFFFFF;
}

/* Right column widget */
.v2-widget {
  background: #FFFFFF;
  border-top: 4px solid var(--indigo-cosmico);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 50px rgba(27, 20, 100, 0.15);
  color: #182329;
}

.v2-status {
  display: inline-block;
  background: #EEF8FD;
  color: var(--indigo-cosmico);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 16px;
}

.v2-cart-intro {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.v2-note {
  font-size: 0.78rem;
  color: #665D7E;
  margin-bottom: 18px;
  line-height: 1.45;
}

.v2-field-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--indigo-cosmico);
  margin-bottom: 18px;
}

.v2-field-label span {
  display: block;
  margin-bottom: 6px;
}

.v2-select,
.v2-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #DED7E7;
  background-color: #FAFAFD;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink-primary);
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.v2-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B1464' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 15px 15px;
  padding-right: 48px;
  cursor: pointer;
}

.v2-select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E889B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  cursor: not-allowed;
  opacity: 0.72;
}

.v2-select:focus,
.v2-input:focus {
  border-color: var(--indigo-cosmico);
  background-color: #FFFFFF;
}

.v2-month {
  text-transform: capitalize;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 16px;
  display: flex;
}

.v2-month strong {
  font-size: 1.05rem;
  color: var(--indigo-cosmico);
}

.v2-month button {
  color: var(--indigo-cosmico);
  background: #F4F2F9;
  border: 1px solid #DED7E7;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-month button:hover {
  background: var(--indigo-cosmico);
  color: #FFFFFF;
}

.v2-calendar {
  text-align: center;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  display: grid;
  margin-bottom: 20px;
}

.v2-cal-dow {
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 800;
  color: #6B607C;
}

.v2-cal-blank {
  height: 40px;
}

.v2-calendar button {
  color: var(--indigo-cosmico);
  background: #FAF9FD;
  border: 1px solid #EEE8F5;
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-calendar button:hover {
  background: #EEF8FD;
  border-color: var(--celeste-ciencia);
}

.v2-calendar button.selected {
  color: #FFFFFF;
  background: var(--indigo-cosmico);
  border-color: var(--indigo-cosmico);
  box-shadow: 0 4px 12px rgba(27, 20, 100, 0.3);
}

.v2-cart-add {
  align-items: flex-end;
  gap: 16px;
  margin-top: 20px;
  display: flex;
}

.v2-qty-label {
  flex: 0 0 130px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--indigo-cosmico);
}

.v2-qty-label span {
  display: block;
  margin-bottom: 6px;
}

.v2-cart-add-btn {
  flex: 1;
  min-height: 46px;
  font-size: 0.88rem;
}

.v2-cart-feedback {
  color: var(--verde-urban);
  min-height: 22px;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: opacity 0.3s;
}

/* Summary container */
.v2-summary {
  border-top: 1px solid #DED7E7;
  margin-top: 24px;
  padding-top: 22px;
}

.v2-summary h3 {
  margin-bottom: 12px;
  font-size: 1.4rem;
  color: var(--indigo-cosmico);
}

.v2-summary p {
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.v2-empty-cart-msg {
  background: #F8FAFD;
  border: 1px dashed #DED7E7;
  border-radius: 10px;
  padding: 14px;
  font-style: italic;
  color: #6B607C;
  text-align: center;
}

.v2-cart-lines {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.v2-cart-lines li {
  border-bottom: 1px solid #DED7E7;
  padding: 16px 0;
}

.v2-cart-lines li > div:first-child {
  gap: 4px;
  display: grid;
}

.v2-cart-lines li strong {
  font-size: 0.95rem;
  color: var(--indigo-cosmico);
}

.v2-cart-lines span {
  color: #6B607C;
  font-size: 0.82rem;
}

.v2-cart-line-controls {
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  display: flex;
}

.v2-cart-line-controls label {
  width: 90px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v2-cart-line-controls .v2-line-qty {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #DED7E7;
  font-size: 0.88rem;
  font-weight: 700;
}

.v2-cart-line-controls strong {
  font-size: 1rem;
  color: var(--indigo-cosmico);
}

.v2-cart-line-controls button {
  color: var(--coral-energia);
  background: transparent;
  border: 0;
  min-height: 36px;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.v2-cart-line-controls button:hover {
  opacity: 0.8;
}

.v2-total-box {
  justify-content: space-between;
  padding: 18px 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
  display: flex;
  border-top: 2px solid var(--indigo-cosmico);
  margin-top: 16px;
}

.v2-summary-disclaimer {
  display: block;
  color: #6B607C;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-bottom: 20px;
}

.v2-payment {
  width: 100%;
  font-size: 1rem;
  font-weight: 800;
  padding: 14px 24px;
}

.v2-payment:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   WIDGET DE RESERVA REAL (Livewire) - viste el markup de los componentes
   booking.calendar, booking.ticket-selection, booking.booking-summary y
   cart.cart-component con el look del diseño. Todo scoped a .v2-widget.
   ========================================================================== */
.v2-widget .v2-booking-step {
  margin-top: 8px;
}

/* Calendario */
.v2-widget .calendar .month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 14px;
}

.v2-widget .calendar .month-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
  text-transform: capitalize;
}

.v2-widget .calendar .month button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--indigo-cosmico);
  background: #F4F2F9;
  border: 1px solid #DED7E7;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-widget .calendar .month button:hover:not(:disabled) {
  background: var(--indigo-cosmico);
  color: #FFFFFF;
}

.v2-widget .calendar .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.v2-widget .calendar .weekdays li {
  padding: 8px 0;
  font-size: 12px;
  font-weight: 800;
  color: #6B607C;
}

.v2-widget .calendar .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 20px;
}

.v2-widget .calendar .days .day,
.v2-widget .calendar .days .blank {
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.v2-widget .calendar .days button.day {
  color: var(--indigo-cosmico);
  background: #FAF9FD;
  border: 1px solid #EEE8F5;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-widget .calendar .days button.day:hover:not(:disabled) {
  background: #EEF8FD;
  border-color: var(--celeste-ciencia);
}

/* Dias pasados o sin cupo */
.v2-widget .calendar .days div.day.blank {
  color: #B9B3C7;
  background: transparent;
}

.v2-widget .calendar .days.opacity-50 {
  opacity: 0.5;
}

.v2-widget .calendar .alert {
  margin-bottom: 12px;
}

/* Boletos: una fila por tipo con stepper */
.v2-widget .ticket-selector .ticket-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--cream-bg);
  border: 1px solid var(--border-line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.v2-widget .ticket-type .label-control {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.v2-widget .ticket-type .label-control span:first-child {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--indigo-cosmico);
}

.v2-widget .ticket-type .label-control .text-small {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.v2-widget .input-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.v2-widget .input-control button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--indigo-cosmico);
  background: #FFFFFF;
  color: var(--indigo-cosmico);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.v2-widget .input-control button:hover:not(:disabled) {
  background: var(--indigo-cosmico);
  color: #FFFFFF;
}

.v2-widget .input-control button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.v2-widget .input-control input.no-spinner {
  width: 44px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.v2-widget .input-control input.no-spinner::-webkit-outer-spin-button,
.v2-widget .input-control input.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Resumen de la seleccion actual (booking-summary) y boton de anadir */
.v2-widget .v2-booking-widget > .summary,
.v2-widget .v2-booking-widget .summary {
  border-top: 1px solid #DED7E7;
  margin-top: 18px;
  padding-top: 16px;
}

.v2-widget .summary p {
  margin: 6px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.v2-widget .summary p strong {
  font-size: 1.05rem;
  color: var(--indigo-cosmico);
}

.v2-widget .summary #subtotal-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
}

.v2-widget .alert {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
  background: #F8FAFD;
  color: var(--ink-secondary);
}

.v2-widget .alert-success { background: #EAF6E7; color: #2F6B22; }
.v2-widget .alert-danger { background: #FCEDEA; color: #A3301B; }
.v2-widget .alert-warning { background: #FFF6DD; color: #7A5B00; }
.v2-widget .alert-info { background: #EEF8FD; color: var(--indigo-cosmico); }
.v2-widget .alert p { margin: 2px 0; }

.v2-widget .continue-btn,
.v2-widget .submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  padding: 13px 26px;
  border: 2px solid var(--coral-energia);
  border-radius: 999px;
  background: var(--coral-energia);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-coral);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.v2-widget .continue-btn:hover,
.v2-widget .submit-btn:hover {
  background: var(--coral-hover);
  border-color: var(--coral-hover);
  transform: translateY(-2px);
}

.v2-widget .submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Avisos propios del home (error de booking, resultado de pago) */
.v2-alert {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFF6DD;
  border: 1px solid #E8D48A;
  color: #5E4700;
  font-size: 0.88rem;
  line-height: 1.5;
}

.v2-alert p { margin: 4px 0 0; }

.v2-alert button {
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--indigo-cosmico);
  background: transparent;
  color: var(--indigo-cosmico);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.v2-alert button:hover:not(:disabled) { background: var(--indigo-cosmico); color: #FFFFFF; }
.v2-alert button:disabled { opacity: 0.5; cursor: wait; }

/* Checkout embebido: cart real + pago */
.v2-checkout {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 2px solid var(--indigo-cosmico);
}

.v2-checkout .main-container,
.v2-checkout .cart-booking,
.v2-checkout .cart-booking .container {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.v2-checkout .cart-booking .header h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: var(--indigo-cosmico);
  text-align: left;
}

.v2-checkout hr {
  border: none;
  border-top: 1px solid var(--border-line);
  margin: 10px 0 14px;
}

.v2-checkout .cart-booking .header p {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-align: left;
}

.v2-checkout #cart-countdown {
  font-weight: 800;
  color: var(--coral-energia);
  font-variant-numeric: tabular-nums;
}

.v2-checkout .ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--cream-bg);
  border: 1px solid var(--border-line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.v2-checkout .ticket-item .ticket-details { text-align: left; min-width: 0; }

.v2-checkout .ticket-item .ticket-details h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--indigo-cosmico);
  text-align: left;
}

.v2-checkout .ticket-item .ticket-details p {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.v2-checkout .ticket-item .ticket-details a {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--coral-energia);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.v2-checkout .ticket-item .ticket-pricing {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.v2-checkout .ticket-item .ticket-pricing p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.v2-checkout .ticket-item .ticket-pricing p:last-child {
  font-weight: 800;
  font-size: 1rem;
  color: var(--indigo-cosmico);
}

.v2-checkout .ticket-item .ticket-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: #FFFFFF;
  border: 2px solid var(--indigo-cosmico);
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--indigo-cosmico);
}

/* Totales del cart (el .summary del cart, no el del booking-summary) */
.v2-checkout .cart-booking .summary {
  background: var(--cream-bg);
  border: 1px solid var(--border-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 16px;
}

.v2-checkout .cart-booking .summary > p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 8px 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.v2-checkout .cart-booking .summary > p:last-of-type {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--indigo-cosmico);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--indigo-cosmico);
}

.v2-checkout .cart-booking .summary > .continue-btn {
  width: auto;
  margin: 0 0 12px;
  padding: 10px 22px;
  min-height: 0;
  background: transparent;
  color: var(--indigo-cosmico);
  border-color: var(--indigo-cosmico);
  box-shadow: none;
  font-size: 0.85rem;
}

.v2-checkout .cart-booking .summary > .continue-btn:hover {
  background: var(--indigo-cosmico);
  color: #FFFFFF;
}

/* Codigo de descuento */
.v2-checkout .discount-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 14px 0;
  border-top: 1px dashed var(--border-line);
  border-bottom: 1px dashed var(--border-line);
}

.v2-checkout .discount-section label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--indigo-cosmico);
  white-space: nowrap;
}

.v2-checkout .discount-section input {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  border: 1px solid #DED7E7;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink-primary);
}

.v2-checkout .discount-section button {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--indigo-cosmico);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.v2-checkout .discount-section button:hover { background: var(--indigo-light); }

.v2-checkout .discount-section p {
  width: 100%;
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--verde-hover);
}

/* Formulario de pago */
.v2-checkout .payment-form { width: 100%; text-align: left; }

.v2-checkout .payment-form > h2 {
  margin: 24px 0 16px;
  font-size: 1.4rem;
  color: var(--indigo-cosmico);
  text-align: left;
}

.v2-checkout .payment-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.v2-checkout .payment-form .form-group { margin: 0; min-width: 0; }
.v2-checkout .payment-form .form-group.full-width { grid-column: 1 / -1; }

.v2-checkout .payment-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--indigo-cosmico);
}

.v2-checkout .payment-form input:not([type='checkbox']),
.v2-checkout .payment-form select,
.v2-checkout .payment-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #DED7E7;
  border-radius: 10px;
  background: #FAFAFD;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink-primary);
  outline: none;
}

.v2-checkout .payment-form input:not([type='checkbox']):focus,
.v2-checkout .payment-form select:focus,
.v2-checkout .payment-form textarea:focus {
  border-color: var(--indigo-cosmico);
  background: #FFFFFF;
}

.v2-checkout .payment-form .char-count {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  text-align: right;
  color: var(--ink-muted);
}

.v2-checkout .payment-form .col-12 p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.v2-checkout .payment-form label[for='acceptSalePolicy'],
.v2-checkout .payment-form label[for='acceptSafetyPolicy'] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--cream-bg);
  border: 1px solid var(--border-line);
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  cursor: pointer;
}

.v2-checkout .payment-form input[type='checkbox'] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 19px;
  height: 19px;
  min-width: 19px;
  margin: 1px 0 0;
  accent-color: var(--coral-energia);
  cursor: pointer;
}

.v2-checkout .payment-form .grid hr { margin: 18px 0; }

.v2-checkout .error,
.v2-checkout .text-red-500 {
  color: #B02A2A;
  font-size: 0.8rem;
}

/* Acciones del pago: "Pagar" primero (accion principal), "Cancelar" como secundario. */
.v2-checkout .payment-form .summary .flex {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 10px;
}

.v2-checkout .payment-form .cancel-btn {
  width: 100%;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 20, 100, 0.25);
  background: transparent;
  color: var(--indigo-cosmico);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.v2-checkout .payment-form .cancel-btn:hover {
  border-color: var(--indigo-cosmico);
  background: rgba(27, 20, 100, 0.05);
}

/* Rechazo de la API al iniciar el pago (session('error')). */
.v2-checkout .payment-form .payment-error {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FDECEC;
  border: 1px solid #F3C4C4;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Panel de compra aprobada */
.v2-success {
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  background: #EAF6E7;
  border: 1px solid #BFE0B7;
  color: #2F6B22;
}

.v2-success h3 { margin: 0 0 8px; font-size: 1.5rem; color: #2F6B22; }
.v2-success p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; }
.v2-success ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.v2-success li { padding: 4px 0; }

@media (max-width: 640px) {
  .v2-widget .ticket-selector .ticket-type { flex-direction: column; align-items: flex-start; }
  .v2-widget .calendar .days .day,
  .v2-widget .calendar .days .blank { height: 38px; font-size: 13px; }
  .v2-checkout .ticket-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .v2-checkout .ticket-item .ticket-pricing { width: 100%; justify-content: flex-end; }
  .v2-checkout .payment-form .form-grid { grid-template-columns: 1fr; }
  .v2-checkout .payment-form .form-group.full-width { grid-column: auto; }
}

/* ==========================================================================
   INSTAGRAM / SOCIAL SECTION (#9 Instagram)
   ========================================================================== */
.section-instagram {
  background: #F8FAFC;
  padding: 100px 0;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Feed de Elfsight: reserva alto para que la pagina no salte al cargar. */
.instagram-widget {
  min-height: 320px;
}

.social-card {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-line);
}

.social-card-img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
}

.social-card-body {
  padding: 16px;
  font-size: 0.85rem;
  color: var(--ink-secondary);
}

/* ==========================================================================
   GROUPS, SCHOOLS & CELEBRATIONS (#10 Groups)
   ========================================================================== */
.section-groups {
  background: var(--indigo-dark);
  color: #FFFFFF;
  padding: 100px 0;
}

.section-groups h2 {
  color: #FFFFFF;
}

.section-groups p.intro {
  color: #D3CEE8;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.group-tile {
  background: #FFFFFF;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 42px -10px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.group-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.48);
}

.group-tile-img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.group-tile:hover .group-tile-img {
  transform: scale(1.04);
}

.group-tile-content {
  padding: 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.group-tile-content h3 {
  font-size: 1.45rem;
  color: var(--indigo-cosmico);
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.25;
  transition: color 0.25s ease;
}

.group-tile:hover .group-tile-content h3 {
  color: var(--coral-energia);
}

.group-tile-content p {
  color: #4A4668;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 24px;
  flex: 1;
}

.group-cta-link {
  color: var(--indigo-cosmico);
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #EDF2F7;
  transition: color 0.25s ease, transform 0.25s ease;
}

.group-cta-link:hover {
  color: var(--coral-energia);
  transform: translateX(4px);
}

/* ==========================================================================
   RESTAURANTS SECTION (#11 Restaurants)
   ========================================================================== */
.section-restaurants {
  background: #FFFFFF;
  padding: 100px 0;
}

.restaurants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}

.restaurant-card {
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(22, 16, 75, 0.08);
  box-shadow: 0 10px 30px -10px rgba(14, 10, 56, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.restaurant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -12px rgba(14, 10, 56, 0.14);
}

.restaurant-media {
  height: 290px;
  position: relative;
  background: #0D0838;
  overflow: hidden;
}

.restaurant-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.restaurant-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: scale(1.03);
  cursor: zoom-in;
}

.restaurant-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 1;
}

.restaurant-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.restaurant-expand-trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(13, 8, 56, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.restaurant-expand-trigger:hover {
  background: var(--coral-energia);
  border-color: var(--coral-energia);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 74, 42, 0.4);
}

.restaurant-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13, 8, 56, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0 2px 0;
  transition: all 0.25s ease;
}

.restaurant-slider-arrow:hover {
  background: var(--verde-urban);
  border-color: var(--verde-urban);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 14px rgba(99, 184, 79, 0.4);
}

.restaurant-slider-arrow.prev {
  left: 14px;
}

.restaurant-slider-arrow.next {
  right: 14px;
}

.restaurant-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 4px 8px;
  background: rgba(13, 8, 56, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 99px;
}

.restaurant-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restaurant-dot.active {
  width: 20px;
  background: #FFFFFF;
}

.restaurant-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(13, 8, 56, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 99px;
}

.restaurant-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.restaurant-body h3 {
  font-size: 1.6rem;
  color: var(--indigo-cosmico);
  margin: 0 0 10px;
}

.restaurant-body p {
  color: var(--ink-secondary);
  font-size: 0.95rem;
  margin: 0 0 20px;
  flex: 1;
}

/* ==========================================================================
   OTHER TOROVERDE PARKS (#12 Other parks)
   ========================================================================== */
.section-other-parks {
  background: #F4F7FB;
  padding: 100px 0;
}

.parks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.park-card {
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-line);
  display: flex;
  flex-direction: column;
}

.park-card-img {
  height: 240px;
  width: 100%;
  object-fit: cover;
}

.park-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.park-card-location {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--verde-urban);
  margin-bottom: 6px;
}

.park-card-body h3 {
  font-size: 1.5rem;
  color: var(--indigo-cosmico);
  margin: 0 0 10px;
}

.park-card-body p {
  font-size: 0.95rem;
  color: var(--ink-secondary);
  margin: 0 0 20px;
  flex: 1;
}

/* ==========================================================================
   FINAL INVITATION CTA SECTION (#13 Closing invitation)
   ========================================================================== */
.section-final-cta {
  position: relative;
  background: 
    radial-gradient(ellipse at center, rgba(13, 8, 56, 0.35) 0%, rgba(13, 8, 56, 0.62) 100%),
    linear-gradient(180deg, rgba(13, 8, 56, 0.22) 0%, rgba(13, 8, 56, 0.45) 100%),
    url('../img/cta-final.webp') center/cover no-repeat;
  color: #FFFFFF;
  text-align: center;
  padding: 135px 0 140px;
  overflow: hidden;
}

.section-final-cta .container {
  position: relative;
  z-index: 2;
}

.section-final-cta h2 {
  color: #FFFFFF;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  max-width: 840px;
  margin: 0 auto 16px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.section-final-cta p {
  font-size: 1.25rem;
  color: #F4F1FA;
  max-width: 680px;
  margin: 0 auto 36px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   MOBILE STICKY ACTION BAR
   ========================================================================== */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #FFFFFF;
  border-top: 1px solid var(--border-line);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(15, 10, 62, 0.15);
  align-items: center;
  justify-content: space-between;
}

.mobile-sticky-bar .sticky-price {
  font-weight: 800;
  color: var(--indigo-cosmico);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
}

.sticky-disclaimer {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--coral-energia);
  line-height: 1.1;
  margin-top: 2px;
}

/* ==========================================================================
   MODAL DIALOGS & POPUPS (Event, Ticket Detail, Gallery, Menu)
   ========================================================================== */
.pdc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13, 8, 56, 0.84);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pdc-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pdc-modal-container {
  background: #FFFFFF;
  border-radius: 24px;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-top: 6px solid var(--celeste-ciencia);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdc-modal-overlay.active .pdc-modal-container {
  transform: translateY(0) scale(1);
}

.pdc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-line);
  background: #F1F5F9;
  color: var(--indigo-cosmico);
  font-size: 1.4rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdc-modal-close:hover {
  background: var(--coral-energia);
  color: #FFFFFF;
}

/* ==========================================================================
   FULL-SCREEN RESTAURANT IMAGE LIGHTBOX
   ========================================================================== */
.pdc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.pdc-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 36, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  padding: 0 0 4px 0;
}

.lightbox-close:hover {
  background: var(--coral-energia);
  border-color: var(--coral-energia);
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 4px 18px rgba(255, 74, 42, 0.45);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 8, 56, 0.7);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-arrow:hover {
  background: var(--coral-energia);
  border-color: var(--coral-energia);
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 6px 22px rgba(255, 74, 42, 0.45);
}

.lightbox-arrow.prev {
  left: 28px;
}

.lightbox-arrow.next {
  right: 28px;
}

.lightbox-stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  pointer-events: auto;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 30px 75px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.lightbox-img {
  max-width: 82vw;
  max-height: 66vh;
  object-fit: contain;
  display: block;
  user-select: none;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 82vw;
  margin-top: 14px;
  color: #FFFFFF;
}

.lightbox-caption-text h4 {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin: 0 0 3px;
  font-weight: 800;
}

.lightbox-caption-text p {
  font-size: 0.88rem;
  color: #D3CEE8;
  margin: 0;
}

.lightbox-counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--celeste-ciencia);
  background: rgba(92, 206, 242, 0.16);
  border: 1px solid rgba(92, 206, 242, 0.35);
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.lightbox-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
}

.lightbox-thumb {
  width: 62px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  opacity: 0.6;
  background: #000;
  padding: 0;
  transition: all 0.25s ease;
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-thumb.active {
  opacity: 1;
  border-color: var(--coral-energia);
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(255, 74, 42, 0.6);
}

.lightbox-thumb:hover {
  opacity: 1;
  border-color: #FFFFFF;
}

@media (max-width: 768px) {
  .lightbox-arrow {
    width: 44px;
    height: 44px;
  }
  .lightbox-arrow.prev {
    left: 10px;
  }
  .lightbox-arrow.next {
    right: 10px;
  }
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .lightbox-img {
    max-width: 92vw;
    max-height: 58vh;
  }
  .lightbox-caption {
    max-width: 92vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .lightbox-thumb {
    width: 50px;
    height: 36px;
  }
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  .events-grid,
  .areas-grid,
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tickets-grid,
  .groups-grid {
    grid-template-columns: 1fr;
  }
  
  .additional-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }
  
  .booking-layout,
  .v2-booking {
    grid-template-columns: 1fr;
  }
  
  .magic-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .magic-poster-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .park-mark {
    display: none;
  }

  /* 2. Hero Section (#about) */
  .hero {
    min-height: auto;
    padding: 50px 0 44px;
  }

  .hero h1 {
    font-size: clamp(2rem, 7vw, 2.7rem);
    line-height: 1.12;
  }

  .hero-desc {
    font-size: 1.02rem;
    line-height: 1.5;
    margin-bottom: 22px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* 3. Anchor bar */
  .anchor-bar {
    display: none; /* Mobile navigation uses primary header + bottom sticky bar */
  }
  
  /* 4. Events Section (#events) */
  .section-events {
    padding: 75px 0 85px;
  }

  .events-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
  }

  .events-header-row .btn {
    width: 100%;
    justify-content: center;
  }

  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .event-card {
    border-radius: 20px;
  }

  .event-content {
    padding: 20px 18px;
  }

  /* 5. Tickets Section (#tickets) */
  .section-tickets {
    padding: 75px 0 85px;
  }

  .tickets-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .tickets-rail-controls {
    width: 100%;
    justify-content: space-between;
  }

  .ticket-card {
    flex: 0 0 min(310px, 86vw);
    border-radius: 22px;
  }

  .ticket-figure {
    height: 190px;
  }

  .ticket-card-body {
    padding: 20px 18px 24px;
  }

  .ticket-price-box {
    font-size: 1.85rem;
  }

  /* 6. Special Experiences (#complementa) */
  .section-additional {
    padding: 75px 0 85px;
  }

  .additional-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .additional-card {
    border-radius: 20px;
  }

  .additional-content {
    padding: 20px 18px;
  }

  /* 7. Park Areas (#experiences) */
  .section-areas {
    padding: 75px 0 85px;
  }

  .areas-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .area-card {
    padding: 20px 18px;
    border-radius: 18px;
  }

  /* 8. Booking Calendar & Cart Widget (#booking) */
  .section-booking {
    padding: 75px 0 85px;
  }

  .v2-booking {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .v2-booking-left h2 {
    font-size: clamp(1.8rem, 6.5vw, 2.3rem);
  }

  .v2-upsell {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .v2-widget {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .v2-calendar {
    gap: 4px;
  }

  .v2-cal-dow {
    padding: 6px 2px;
    font-size: 11px;
  }

  .v2-calendar button {
    height: 38px;
    font-size: 13px;
  }

  .v2-cal-blank {
    height: 38px;
  }

  .v2-cart-add {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .v2-qty-label {
    width: 100%;
    flex: none;
  }

  .v2-cart-add-btn {
    width: 100%;
  }

  .v2-cart-line-controls {
    flex-wrap: wrap;
    gap: 10px;
  }

  .v2-cart-line-controls label {
    width: 80px;
  }

  .v2-total-box {
    font-size: 1.15rem;
    padding: 14px 0;
  }

  /* 9. Instagram Section (#instagram) */
  .section-instagram {
    padding: 75px 0 85px;
  }

  .social-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 10. Groups & Celebrations (#groups) */
  .section-groups {
    padding: 75px 0 85px;
  }

  .groups-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .group-tile-content {
    padding: 24px 20px;
  }

  /* 11. Restaurants Section (#restaurants) */
  .section-restaurants {
    padding: 75px 0 85px;
  }

  .restaurants-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .restaurant-media {
    height: 240px;
  }

  .restaurant-body {
    padding: 22px 18px;
  }

  /* 12. Other Parks */
  .section-other-parks {
    padding: 75px 0 85px;
  }

  .parks-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .park-card-img {
    height: 210px;
  }

  .park-card-body {
    padding: 22px 18px;
  }

  /* 13. Final CTA Section */
  .section-final-cta {
    padding: 85px 0 95px;
  }

  .section-final-cta h2 {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem);
  }

  .section-final-cta p {
    font-size: 1rem;
  }

  .section-final-cta .btn {
    width: 100%;
    max-width: 340px;
  }

  /* 14. Mobile Sticky Bar */
  .mobile-sticky-bar {
    display: flex;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }

  /* Modals on Mobile */
  .pdc-modal-container {
    padding: 24px 18px;
    width: min(520px, 94%);
    max-height: 86vh;
    border-radius: 18px;
  }

  .pdc-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .container {
    width: calc(100% - 30px);
  }

  .v2-widget {
    padding: 18px 14px;
  }

  .v2-calendar button {
    height: 36px;
    font-size: 12px;
  }

  .v2-cal-blank {
    height: 36px;
  }

  .v2-month strong {
    font-size: 0.95rem;
  }

  .v2-month button {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }

  .ticket-card {
    flex: 0 0 calc(100vw - 44px);
  }
}


/* ==========================================================================
   PAGINAS INTERNAS 2026 (layouts/website-2026: hero, info y contenido heredado)
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 64px 0;
  color: #FFFFFF;
  background: var(--indigo-dark) center / cover no-repeat;
  overflow: hidden;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 4, 25, 0.82) 0%, rgba(7, 4, 25, 0.5) 50%, rgba(7, 4, 25, 0.15) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(9, 4, 32, 0.55) 100%);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.page-hero-inner > * {
  max-width: 820px;
}

.page-hero-kicker {
  margin: 0 0 14px;
  color: var(--celeste-ciencia);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.page-hero h1 {
  margin: 0 0 14px;
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 25px rgba(0, 0, 0, 0.8);
}

.page-hero-date {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--celeste-ciencia, #5CCEF2);
}

.page-hero-lead {
  max-width: 680px;
  margin: 0 0 22px;
  font-size: 1.15rem;
  line-height: 1.55;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.page-hero-price {
  margin: 0 0 24px;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.page-hero-price small {
  font-size: 1rem;
  font-weight: 700;
  margin-right: 4px;
}

.page-hero-disclaimer {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
}

.page-info {
  padding: 56px 0;
}

.page-info-card,
.event-content-legacy {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px;
  background: var(--card-bg);
  border: 1px solid var(--border-line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  color: var(--ink-secondary);
}

.page-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.page-info-card h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--indigo-cosmico);
}

.page-info-card p {
  margin: 0 0 12px;
}

.page-info-muted {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* content_2026: contenido de eventos reescrito al estilo nuevo. */
.page-info-rich .rich-intro p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-primary, var(--indigo-cosmico));
  margin-bottom: 24px;
}

.page-info-rich .rich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.page-info-rich .rich-block {
  margin-bottom: 24px;
}

.page-info-rich .rich-muted {
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.page-info-rich .rich-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.page-info-rich .rich-chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(27, 20, 100, 0.06);
  color: var(--indigo-cosmico);
  font-size: 0.875rem;
  font-weight: 700;
}

.page-info-rich .rich-list {
  margin: 0;
  padding-left: 20px;
}

.page-info-rich .rich-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.page-info-rich .rich-callout {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FFF4E5;
  border: 1px solid #F5D3A3;
  color: #7A4A0F;
  font-size: 0.95rem;
}

.page-info-rich a {
  color: var(--indigo-cosmico);
  font-weight: 700;
}

/* HTML heredado de tickets.json: se deja intacto, solo se viste. */
.event-content-legacy {
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* El hero ya muestra el titulo: se oculta el h1 simple que abre el content
   heredado. Los h1 anidados en disenos propios (ej. Bollywood) no se tocan. */
.event-content-legacy > .about-us-text > h1:first-child {
  display: none;
}

.event-content-legacy h1 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--indigo-cosmico);
  line-height: 1.2;
}

.event-content-legacy h2,
.event-content-legacy h3 {
  margin: 28px 0 12px;
  color: var(--indigo-cosmico);
}

.event-content-legacy img,
.event-content-legacy video,
.event-content-legacy iframe {
  max-width: 100%;
}

.event-content-legacy ul {
  padding-left: 20px;
}

.event-content-legacy ul.tour-include-list,
.event-content-legacy ul.ticket-icons-list,
.event-content-legacy ul li.icons {
  list-style: none;
  padding-left: 0;
}

.event-content-legacy li.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
}

.event-content-legacy .icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 104px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.event-content-legacy .icon-container img.icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 340px;
    padding: 44px 0;
  }

  .page-hero-inner {
    width: min(1200px, calc(100% - 32px));
  }

  .page-info {
    padding: 32px 0;
  }

  .page-info-card,
  .event-content-legacy {
    padding: 22px 16px;
  }
}

/* Modal "Ver que incluye" del home: reutiliza el bloque de la pagina de detalle. */
.ticket-detail-popup .page-info-card,
.ticket-detail-popup .event-content-legacy {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.ticket-detail-charges {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.ticket-detail-actions {
  margin-top: 20px;
}

/* Al bajar al widget (modal o upsell), que el navbar fijo no lo tape. */
#booking-widget {
  scroll-margin-top: 110px;
}

/* Fecha fija del evento en la seccion de compra. */
.v2-event-date {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(92, 206, 242, 0.15);
  border: 1px solid rgba(92, 206, 242, 0.35);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.9rem;
}

/* Acento tematico de Bollywood Fest (dorado y magenta) sobre la estructura
   comun de content_2026. */
.page-info-rich .theme-bollywood h2 {
  color: #A8741A;
}

.page-info-rich .theme-bollywood .rich-chips li {
  background: rgba(212, 175, 55, 0.14);
  color: #7A4F0B;
}

.page-info-rich .theme-bollywood .rich-list li::marker {
  color: #D63384;
}

.page-info-rich .theme-bollywood .ticket-rates-list strong {
  color: #A8741A;
}

.page-info-rich .rich-callout-accent {
  background: linear-gradient(90deg, #FFF3D6, #FCE4F0);
  border-color: #E8C77A;
  color: #6B2142;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Menu de platos dentro de content_2026 (nombre, frase y descripcion). */
.page-info-rich .rich-menu-group {
  margin: 22px 0 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo-cosmico);
}

.page-info-rich .rich-menu-group span {
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}

.page-info-rich .rich-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-info-rich .rich-menu li {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-line);
  background: #FBFAFD;
}

.page-info-rich .rich-menu h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--indigo-cosmico);
}

.page-info-rich .rich-menu p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.page-info-rich .rich-quote {
  font-style: italic;
  color: var(--ink-muted);
}

/* Acento gotico de La Mesa de los Addams (morado oscuro y carmesi). */
.page-info-rich .theme-addams h2,
.page-info-rich .theme-addams .rich-menu h3,
.page-info-rich .theme-addams .rich-menu-group {
  color: #4A1D5C;
}

.page-info-rich .theme-addams .rich-chips li {
  background: rgba(74, 29, 92, 0.08);
  color: #4A1D5C;
}

.page-info-rich .theme-addams .rich-menu li {
  background: #FAF7FB;
  border-color: rgba(74, 29, 92, 0.15);
  border-left: 3px solid #8E1B2E;
}

.page-info-rich .theme-addams .ticket-rates-list strong {
  color: #8E1B2E;
}

.page-info-rich .theme-addams .rich-callout-accent {
  background: linear-gradient(90deg, #2A1033, #4A1D5C);
  border-color: #4A1D5C;
  color: #F3E8F6;
  font-style: italic;
}

/* Funcion agotada dentro de los chips de horarios. */
.page-info-rich .rich-chips li.chip-soldout {
  background: #F1F1F4;
  color: #8A8796;
  text-decoration: line-through;
}