/* ==========================================================================
   CABO PADDLE — Design system compartido (minimalista costero)
   ========================================================================== */
:root {
  /* Paleta nueva */
  --ink: #16323D;
  --ink-soft: #4C6470;
  --ink-faint: #5E7681;
  --ocean: #3C7286;
  --ocean-light: #8FBAC9;
  --ocean-pale: #E3EEF1;
  --sand: #E9DCC5;
  --sand-light: #F4EBDC;
  --cream: #FBF7F0;
  --white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.75);

  /* Dorado del logo — acento premium */
  --oro: #C9A24B;
  --oro-oscuro: #A8853A;
  --oro-suave: rgba(201, 162, 75, 0.14);

  /* Alias de compatibilidad (mismos nombres usados en bloques inline) */
  --deep-navy: var(--ink);
  --navy: var(--ink);
  --navy-glass: var(--glass-bg-strong);
  --teal: var(--ocean);
  --teal-light: var(--ocean-light);
  --gold: var(--oro);
  --gold-light: var(--oro);
  --gold-dark: var(--oro-oscuro);
  --sand-alias: var(--sand);
  --text-dark: var(--ink);
  --text-medium: var(--ink-soft);
  --text-light: var(--ink-faint);

  --transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 4px 20px rgba(22, 50, 61, 0.06);
  --shadow-md: 0 14px 44px rgba(22, 50, 61, 0.10);
  --shadow-lg: 0 30px 80px rgba(22, 50, 61, 0.16);
  --shadow-gold: 0 14px 34px rgba(201, 162, 75, 0.32);

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo hidden SIEMPRE gana, sin importar qué clase lleve el elemento.
   Sin esto, un elemento oculto con hidden pero con una clase que trae su
   propio "display" (.btn, .resena-google, etc.) se muestra igual, porque
   ambas reglas empatan en especificidad y la de la clase va después. Esto
   mordió de verdad: el botón "Vernos en Google" y el bloque "Dejar mi
   reseña" aparecían visibles con un enlace muerto (href="#") aunque
   config.js no tuviera ningún enlace real cargado. */
[hidden] { display: none !important; }

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

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

::selection { background: var(--ocean); color: var(--white); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--ocean-light); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ocean); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--ocean), var(--ocean-light));
  z-index: 1200;
  transition: width 0.1s linear;
}

/* ==========================================================================
   NAVBAR — flotante, glassmorphism
   ========================================================================== */
.navbar {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.4rem);
  max-width: 1140px;
  z-index: 1000;
  padding: 0.7rem 0.8rem 0.7rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
}
.navbar.scrolled, .navbar.solid { background: var(--glass-bg-strong); box-shadow: var(--shadow-lg); }

.navbar-logo-mini {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.navbar-logo-mini img { height: 34px; width: auto; }
.navbar-logo-mini span {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 1.7rem;
  align-items: center;
  margin-left: auto;
}

.nav-lang {
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.8rem !important;
  color: var(--ink) !important;
  letter-spacing: 0.06em;
  transition: all var(--transition) !important;
}
.nav-lang:hover { background: var(--ink); color: var(--white) !important; }
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.92rem;
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--ocean); }

.nav-cta {
  background: var(--ink);
  color: var(--white) !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: 999px;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  transition: all var(--transition) !important;
}
.nav-cta:hover {
  background: var(--oro) !important;
  color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.submenu-container { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px);
  border-radius: 18px;
  padding: 0.5rem; min-width: 200px;
  display: none; flex-direction: column; gap: 0.2rem;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  border: 1px solid var(--glass-border);
}
.submenu-container:hover .submenu { display: flex; }
.submenu a {
  display: block; padding: 0.65rem 1rem; font-size: 0.86rem;
  color: var(--ink-soft) !important; border-radius: 12px;
}
.submenu a:hover { background: var(--ocean-pale); color: var(--ocean) !important; }

.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 8px; z-index: 1001;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all var(--transition); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 900px) {
  .navbar { top: 14px; padding: 0.6rem 0.6rem 0.6rem 1.2rem; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 90px; right: 1.2rem; left: 1.2rem;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    border-radius: 24px;
    padding: 1.8rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
  }
  .nav-links.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .submenu-container:hover .submenu { display: none; }
  .submenu { position: static; transform: none; background: transparent; box-shadow: none; border: none; padding: 0.3rem 0 0 0.8rem; backdrop-filter: none; display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  width: 100%; height: 100vh; min-height: 650px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-interno { height: 62vh; min-height: 460px; }
.hero-tall { height: 85vh; min-height: 520px; }

.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.03);
  animation: subtleZoom 18s ease-in-out infinite alternate;
  /* La página elige la foto con la variable --foto. Las páginas que todavía
     ponen background-image directo en el atributo style siguen igual, porque
     el estilo en línea le gana a esta regla. */
  background-image: var(--foto);
}

/* Pantalla alta y angosta (celular vertical): si la página definió una foto
   propia para móvil, se usa esa. Si no, se queda con la misma de escritorio.
   Una foto horizontal en un teléfono vertical se recorta tanto que solo se
   alcanza a ver una franja del centro. */
@media (orientation: portrait) and (max-width: 900px) {
  .hero-bg { background-image: var(--foto-movil, var(--foto)); }

  /* ─── El botón del hero, en celular vertical ──────────────────────────
     Antes el bloque entero iba centrado y el botón caía justo encima de
     la persona de la foto, tapándola. Ahora el texto sube un poco y el
     botón se ancla ABAJO, en el agua, sin salirse de la primera pantalla
     y sin estorbar con la barra fija de precio que va pegada al borde.
     Solo aplica a la portada (.hero completo), no a los encabezados
     cortos de las páginas internas.                                      */
  .hero:not(.hero-interno):not(.hero-tall) { align-items: stretch; }
  .hero:not(.hero-interno):not(.hero-tall) > .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Empuja el texto hacia arriba del centro: le deja su espacio al botón
       de allá abajo y despeja a la persona de la foto. */
    padding-bottom: 18rem;
  }
  /* En teléfonos de pantalla corta no cabe tanto empuje: el texto se subía
     hasta quedar pegado al menú de arriba. Aquí se afloja para que respire. */
  @media (max-height: 700px) {
    .hero:not(.hero-interno):not(.hero-tall) > .hero-content { padding-bottom: 13rem; }
  }
  /* EN CELULAR NO SE ENSENA: abajo esta la barra fija con el mismo
     "Ver disponibilidad" siempre a la vista, asi que el del hero solo
     tapaba foto. En computadora si se queda, porque alla no hay barra y
     seria el unico llamado a la accion de la primera pantalla.
     Para volver a mostrarlo en celular: borra este display:none. */
  .hero:not(.hero-interno):not(.hero-tall) .hero-cta { display: none; }

  /* Si algun dia se vuelve a mostrar, aqui queda su sitio: en el agua,
     debajo de la tabla y por encima de la barra fija. */
  .hero:not(.hero-interno):not(.hero-tall) .hero-cta {
    position: absolute;
    /* Sin transform para centrarlo: el hover ya usa transform y si no,
       se pelean y el botón brinca al tocarlo. */
    left: 0; right: 0;
    margin: 0 auto;
    width: fit-content;
    /* Justo debajo de la tabla de la foto, no hasta el borde: queda a la
       altura del agua, con aire de sobra sobre la barra fija de abajo. */
    bottom: 7rem;
  }
}
@keyframes subtleZoom { from { transform: scale(1.03); } to { transform: scale(1.08); } }

/* ── Video de fondo del hero ────────────────────────────────────────────
   Va encima de la foto y debajo de la capa oscura. Arranca oculto y
   main.js lo muestra solo cuando de verdad puede reproducirse, para que
   nunca se vea un rectangulo negro si el video falla o tarda.
   En celular no existe: la foto vertical se ve mejor y no gasta datos. */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
/* Sin fundido: la foto de atras ES el primer fotograma del video, asi que
   el cambio es imperceptible. Un fundido aqui solo delataria el relevo. */
.hero-video.visible { opacity: 1; }

@media (orientation: portrait), (max-width: 900px) {
  .hero-video { display: none; }
}
/* Si el visitante pidio menos animacion en su sistema, se queda la foto. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,50,61,0.16) 0%, rgba(22,50,61,0.06) 34%, rgba(22,50,61,0.58) 100%);
  z-index: 1;
}

.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 900px; margin: 0 auto; }

.hero-logo { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.hero-logo img { width: 60px; height: 60px; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3)); }
.hero-logo-text {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--oro);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}

.hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.8rem, 7.5vw, 6.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-shadow: 0 4px 30px rgba(0,0,0,0.25);
}

/* Título de la portada. El h1 general está calibrado para una sola palabra
   ("cabopaddle"); aquí es una frase completa, así que va más contenido para
   que no ocupe media pantalla ni se parta en cuatro renglones. */
.hero-titulo {
  font-size: clamp(2.1rem, 5.2vw, 4.3rem) !important;
  margin-top: 0.4rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) { .hero-titulo { font-size: 1.95rem !important; max-width: 100%; } }

.hero-tagline, .hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.92);
  margin-top: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.hero-divider { display: none; }

/* Gancho de precio en el hero */
.hero-hook {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--oro);
  color: var(--ink);
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 1.6rem;
  box-shadow: var(--shadow-gold);
}
.hero-hook svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2.5; }

.hero-specs {
  display: block;
  margin: 0.9rem auto 1.8rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  max-width: 520px;
}
@media (max-width: 700px) { .hero-specs { font-size: 0.8rem; margin: 0.8rem auto 1.4rem; } }

/* Franja de ventajas competitivas — integrada con el entorno crema */
.ventajas-franja {
  background: var(--cream);
  padding: 3rem 2.5rem 1rem;
}
.ventajas-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.ventaja {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.ventaja:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ventaja-ic {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--oro-suave);
  display: flex; align-items: center; justify-content: center;
}
.ventaja-ic svg { width: 21px; height: 21px; stroke: var(--oro-oscuro); fill: none; stroke-width: 1.8; }
.ventaja b { display: block; font-family: 'Fraunces', serif; font-size: 0.98rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ventaja span { font-size: 0.78rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ventajas-inner { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .ventajas-franja { padding: 2.2rem 1.4rem 0.5rem; }
}
@media (max-width: 460px) {
  .ventajas-inner { grid-template-columns: 1fr; }
}

/* Etiqueta sobre la foto del encabezado.
   Antes era un cristal BLANCO al 60% con letra BLANCA encima: sobre una foto
   clara el texto desaparecía. Ahora el cristal es oscuro, así que la letra
   blanca se lee sobre cualquier foto, clara u oscura. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(22, 50, 61, 0.55);
  backdrop-filter: blur(10px);
  color: var(--white);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.35);
  margin-top: 1.4rem;
}

/* Dato suelto dentro del contenido (fondo crema), no sobre una foto. */
.dato-destacado {
  display: block;
  width: fit-content;
  margin: 0 auto;
  background: var(--oro-suave);
  color: var(--oro-oscuro);
  border: 1px solid rgba(201, 162, 75, 0.4);
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-cta {
  display: inline-block;
  background: var(--white);
  border: none;
  color: var(--ink);
  padding: 1rem 2.4rem;
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  border-radius: 999px;
  transition: all var(--transition);
  cursor: pointer;
  margin-top: 1.8rem;
  box-shadow: var(--shadow-lg);
}
.hero-cta:hover { background: var(--oro); color: var(--ink); transform: translateY(-3px); }


.hero-onda { display: none; }

/* ── Divisor de ola animado: "mar vivo" en 3 capas ── */
.wave-divider {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 90px;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.wave-divider svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%; height: 100%;
  display: block;
}
.wave-divider path { fill: var(--cream); }
.wave-divider::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--cream);
}
.wave-divider .wave-back  { opacity: 0.32; animation: waveDrift 18s linear infinite; }
.wave-divider .wave-mid   { opacity: 0.55; height: 86%; animation: waveDrift 11s linear infinite reverse; }
.wave-divider .wave-front { height: 72%; animation: waveDrift 8s linear infinite; }
@keyframes waveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .wave-divider { height: 54px; }
  .hero-logo img { display: none; }
  .hero-logo-text { font-size: 2rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero-tagline, .hero-sub { font-size: 1rem; }
  .footer-bottom { padding-bottom: 4.5rem; }
  .footer-simple { padding-bottom: 5rem; }
}

/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */
.section { padding: 6.5rem 2.5rem; max-width: 1200px; margin: 0 auto; }
.section-narrow { max-width: 900px; }
@media (max-width: 768px) { .section { padding: 4.2rem 1.4rem; } }

.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-navy { background: var(--ink); color: var(--sand-light); }
.bg-sand { background: var(--sand-light); }

.section-label {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ocean); margin-bottom: 0.8rem;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800; color: var(--ink); line-height: 1.08; margin-bottom: 1.1rem; letter-spacing: -0.02em;
}
.bg-navy .section-title { color: var(--white); }
.bg-navy .section-label { color: var(--ocean-light); }
.section-subtitle, .section-text {
  font-weight: 400; font-size: 1.05rem; color: var(--ink-soft); max-width: 640px; line-height: 1.7; margin-bottom: 2.6rem;
}
.bg-navy .section-subtitle, .bg-navy .section-text { color: rgba(244,235,220,0.82); }
.section-divider { display: none; }
.center { text-align: center; }
.center .section-subtitle, .center .section-text { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   PACKAGE CARDS (tarjetas de actividades / tours)
   ========================================================================== */
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.pkg-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow);
  display: flex; flex-direction: column;
}
.pkg-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pkg-media { position: relative; height: 320px; }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; }
.pkg-price-tag {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: var(--glass-bg-strong); backdrop-filter: blur(10px);
  padding: 0.5rem 1.1rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; color: var(--ink);
  border: 1px solid var(--glass-border);
}
.pkg-body { padding: 2.2rem 2rem 2.4rem; flex: 1; display: flex; flex-direction: column; }
.pkg-body h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-bottom: 0.7rem; letter-spacing: -0.01em; }
.pkg-body p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.7; margin-bottom: 1.4rem; }
.pkg-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.pkg-list li { background: var(--ocean-pale); color: var(--ocean); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 600; }
.pkg-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; }

@media (max-width: 860px) {
  .pkg-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
  padding: 0.85rem 1.9rem; border-radius: 999px; border: none; cursor: pointer;
  transition: all var(--transition);
}
.btn-gold { background: var(--oro); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: var(--ink); color: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.btn-outline-light { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline-light:hover { background: var(--ink); color: var(--white); }
.btn-whatsapp {
  background: #25D366; color: white; padding: 0.85rem 2.2rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 10px 28px rgba(37,211,102,0.3); text-decoration: none;
}
.btn-whatsapp:hover { background: #128C7E; transform: translateY(-3px); box-shadow: 0 16px 38px rgba(37,211,102,0.42); }
.btn-whatsapp svg { width: 20px; height: 20px; fill: white; }

/* ==========================================================================
   RAZONES / POR QUÉ ELEGIRNOS
   ========================================================================== */
/* 4 razones: 4 en fila, o 2 y 2 — nunca 3 y una sola abajo. */
.razones-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1rem; }
@media (max-width: 1000px) { .razones-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; } }
@media (max-width: 520px)  { .razones-grid { grid-template-columns: 1fr; } }
.razon-item { text-align: left; padding: 1.8rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.razon-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.razon-icono {
  width: 52px; height: 52px; border-radius: 16px; background: var(--ocean-pale);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; transition: all var(--transition);
}
.razon-item:hover .razon-icono { background: var(--ink); }
.razon-item:hover .razon-icono svg { stroke: var(--white); }
.razon-icono svg { width: 24px; height: 24px; stroke: var(--ocean); fill: none; stroke-width: 1.8; transition: stroke var(--transition); }
.razon-item h4 { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.razon-item p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================================
   PASOS DE RESERVA (index)
   ========================================================================== */
.pasos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 1rem; }
.paso-card {
  position: relative; background: var(--cream); border-radius: var(--radius);
  padding: 2.1rem 1.8rem 1.9rem; box-shadow: var(--shadow-sm);
  transition: all var(--transition); overflow: hidden;
}
.paso-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.paso-numero {
  position: absolute; top: 0.9rem; right: 1.3rem;
  font-family: 'Fraunces', serif; font-size: 3.4rem; font-weight: 800;
  color: var(--oro); opacity: 0.25; line-height: 1;
}
.paso-icono {
  width: 52px; height: 52px; border-radius: 16px; background: var(--oro-suave);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem;
}
.paso-icono svg { width: 24px; height: 24px; stroke: var(--oro-oscuro); fill: none; stroke-width: 1.8; }
.paso-card h4 { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.paso-card p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; }

/* ==========================================================================
   RESEÑAS (index) — estilo Google
   ========================================================================== */
.google-rating {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  flex-wrap: wrap; margin: 0.5rem 0 2.2rem;
}
.google-rating .g-logo { width: 30px; height: 30px; flex-shrink: 0; }
.google-rating .g-nota { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.google-rating .g-estrellas { color: #FBBC05; font-size: 1.1rem; letter-spacing: 2px; }
.google-rating .g-texto { font-size: 0.82rem; color: var(--ink-soft); }
.google-rating .g-texto b { color: var(--ink); }

.resenas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 1rem; }
.resena-card {
  background: var(--white); border-radius: var(--radius); padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-sm); transition: all var(--transition);
  display: flex; flex-direction: column;
}
.resena-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.resena-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.resena-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--ocean); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
}
.resena-nombre { font-weight: 700; color: var(--ink); font-size: 0.9rem; line-height: 1.2; }
.resena-nombre span { display: block; font-weight: 500; color: var(--ink-faint); font-size: 0.75rem; margin-top: 0.1rem; }
.resena-top .g-mini { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; }
.resena-estrellas { color: #FBBC05; font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 0.6rem; }
.resena-texto { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; }
.resena-autor { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.resena-autor span { display: block; font-weight: 500; color: var(--ink-faint); font-size: 0.78rem; margin-top: 0.1rem; }

/* ==========================================================================
   BANDA DE TEMPORADA (promo editable)
   ========================================================================== */
.promo-temporada {
  background: var(--ink);
  color: var(--sand-light);
  text-align: center;
  padding: 0.75rem 3rem 0.75rem 1.2rem;
  font-size: 0.9rem; font-weight: 500;
  position: relative;
}
.promo-temporada a { color: var(--oro); font-weight: 700; text-decoration: underline; }
.promo-temporada .promo-cerrar {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--sand-light); font-size: 1.3rem;
  cursor: pointer; line-height: 1; opacity: 0.7; padding: 0.2rem 0.4rem;
}
.promo-temporada .promo-cerrar:hover { opacity: 1; }

/* ==========================================================================
   REFERIDOS
   ========================================================================== */
.referidos {
  max-width: 1000px; margin: 0 auto;
  background: linear-gradient(135deg, var(--ocean-pale), var(--sand-light));
  border-radius: var(--radius-lg);
  padding: 2.8rem 2.4rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.referidos-ic {
  width: 58px; height: 58px; border-radius: 50%; background: var(--oro);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.referidos-ic svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.referidos h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.referidos p { font-size: 0.98rem; color: var(--ink-soft); max-width: 480px; margin-bottom: 1.6rem; line-height: 1.6; }
.referidos .destaca { color: var(--oro-oscuro); font-weight: 700; }

/* ==========================================================================
   INSTAGRAM (index)
   ========================================================================== */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.ig-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; display: block; box-shadow: var(--shadow-sm); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ig-tile:hover img { transform: scale(1.07); }
.ig-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22,50,61,0); opacity: 0;
  transition: all var(--transition);
}
.ig-tile:hover .ig-overlay { opacity: 1; background: rgba(22,50,61,0.35); }
.ig-overlay svg { width: 34px; height: 34px; fill: #fff; }
.btn-instagram {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; padding: 0.9rem 2.2rem; border-radius: 999px;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  box-shadow: 0 10px 28px rgba(204,35,102,0.35);
  transition: all var(--transition);
}
.btn-instagram:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(204,35,102,0.45); }
.btn-instagram svg { width: 20px; height: 20px; fill: #fff; }
.ig-embeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; margin-top: 1rem; justify-items: center; }
.ig-embeds .instagram-media { min-width: 0 !important; max-width: min(100%, 400px) !important; }

/* ==========================================================================
   REELS LIGEROS (sin script de Instagram = velocidad 10)
   ========================================================================== */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 1rem; justify-items: center; }
.reel-card {
  position: relative; display: block; width: 100%; max-width: 380px;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.reel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.reel-card img { width: 100%; height: 100%; object-fit: cover; }
.reel-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, transparent 55%, rgba(22,50,61,0.55) 100%);
}
.reel-play span {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.reel-card:hover .reel-play span { background: var(--oro); transform: scale(1.08); }
.reel-play svg { width: 22px; height: 22px; fill: var(--ink); margin-left: 3px; }
.reel-etiqueta {
  position: absolute; bottom: 1rem; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 0.82rem; font-weight: 600;
}

/* ==========================================================================
   GUÍA + PUNTO DE ENCUENTRO (confianza)
   ========================================================================== */
.guia-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.6rem; margin-top: 1rem; align-items: stretch; }
.guia-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.guia-card img { width: 100%; height: 260px; object-fit: cover; }
.guia-card-body { padding: 1.5rem 1.6rem 1.7rem; }
.guia-card-body h4 { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.guia-card-body .guia-cert { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--oro-suave); color: var(--oro-oscuro); font-size: 0.76rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.7rem; }
.guia-card-body p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; }
.mapa-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 300px; display: flex; flex-direction: column; }
.mapa-card iframe { width: 100%; flex: 1; border: 0; min-height: 260px; }
.mapa-pie { background: var(--white); padding: 0.9rem 1.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.mapa-pie strong { color: var(--ink); }
@media (max-width: 800px) {
  .guia-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA FINAL (banda de cierre)
   ========================================================================== */
.cta-final { position: relative; overflow: hidden; padding: 7.5rem 2rem; text-align: center; }
.cta-final-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-final-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,50,61,0.84), rgba(22,50,61,0.62)); }
.cta-final-content { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.cta-final-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.32);
  color: var(--white); padding: 0.45rem 1.25rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 1.7rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-final h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800;
  color: var(--white); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1.1rem;
}
.cta-final p { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 480px; margin: 0 auto 2.2rem; }
.cta-final-botones { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-grande { padding: 1.05rem 2.6rem; font-size: 1rem; }

/* ==========================================================================
   REDES SOCIALES (footer)
   ========================================================================== */
.redes-sociales { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.red-social {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); text-decoration: none;
}
.red-social svg { width: 18px; height: 18px; fill: var(--sand-light); transition: fill var(--transition); }
.red-social:hover { background: var(--oro); border-color: var(--oro); transform: translateY(-3px); }
.red-social:hover svg { fill: var(--ink); }
.footer-simple .redes-sociales { justify-content: center; margin: 1rem auto 0; }

/* ==========================================================================
   TIMELINE / ITINERARIO
   ========================================================================== */
.itinerario-lista { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; position: relative; padding-left: 2rem; border-left: 2px solid var(--ocean-pale); }
.itinerario-paso { position: relative; padding-left: 2.2rem; }
.itinerario-paso::before {
  content: ''; position: absolute; left: -2.6rem; top: 0.35rem; width: 16px; height: 16px;
  background: var(--ocean); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--ocean-pale); z-index: 2;
  transition: transform var(--transition);
}
.itinerario-paso:hover::before { transform: scale(1.25); }
.itinerario-hora { font-size: 0.8rem; font-weight: 700; color: var(--ocean); text-transform: uppercase; letter-spacing: 0.04em; }
.itinerario-paso h4 { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0.15rem 0 0.3rem; }
.itinerario-paso p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; }

/* ==========================================================================
   DETALLES / INCLUYE / QUÉ LLEVAR
   ========================================================================== */
.detalles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 1rem; }
.detalle-item {
  background: var(--white); border-radius: var(--radius); padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm); transition: all var(--transition);
  text-align: left;
}
.detalle-item.center { text-align: center; }
.detalle-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.detalle-icono { width: 44px; height: 44px; border-radius: 14px; background: var(--ocean-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.detalle-item.center .detalle-icono { margin-left: auto; margin-right: auto; }
.detalle-icono svg { width: 20px; height: 20px; stroke: var(--ocean); fill: none; stroke-width: 1.8; }
.detalle-item h5 { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.detalle-item p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }

/* 6 elementos: 3 y 3 (o 2, 2 y 2). Con auto-fit quedaba una fila coja. */
.incluye-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .incluye-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .incluye-grid { grid-template-columns: 1fr; } }
.incluye-card {
  background: var(--white); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--shadow-sm); transition: all var(--transition);
}
.incluye-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.incluye-icon { width: 36px; height: 36px; background: var(--ocean-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.incluye-icon svg { width: 16px; height: 16px; stroke: var(--ocean); fill: none; stroke-width: 2; }
.incluye-card span { font-size: 0.9rem; font-weight: 500; color: var(--ink); }

/* 4 cosas que llevar: 4 en fila, o 2 y 2. */
.llevar-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 0.5rem; }
@media (max-width: 900px) { .llevar-lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .llevar-lista { grid-template-columns: 1fr; } }
.llevar-lista li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.93rem; color: var(--ink-soft); background: var(--white); padding: 0.7rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.llevar-lista li svg { width: 18px; height: 18px; stroke: var(--ocean); fill: none; stroke-width: 2; flex-shrink: 0; }

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs-nav { display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 2.3rem; flex-wrap: wrap; }
.tab-btn {
  background: var(--white); border: none; color: var(--ink-soft); font-weight: 600;
  font-size: 0.88rem; padding: 0.65rem 1.8rem;
  border-radius: 999px; cursor: pointer; transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.tab-btn.active { background: var(--ink); color: var(--white); }
.tab-btn:hover { color: var(--ocean); }
.tab-btn.active:hover { color: var(--white); }
.tab-content { display: none; animation: fadeInTab 0.5s ease forwards; }
.tab-content.active { display: block; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   TARJETAS DE EXPERIENCIA (Colaboraciones)
   ========================================================================== */
.experiencias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; margin-top: 1rem; }
.experiencia-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 2.6rem 2.2rem; box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow); text-align: center; position: relative; overflow: hidden;
}
.experiencia-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.experiencia-icono {
  width: 74px; height: 74px; border-radius: 22px; background: var(--ocean-pale); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 1.6rem; transition: background var(--transition);
}
.experiencia-card:hover .experiencia-icono { background: var(--ink); }
.experiencia-card:hover .experiencia-icono svg { stroke: var(--white); }
.experiencia-icono svg { width: 32px; height: 32px; stroke: var(--ocean); fill: none; stroke-width: 1.6; transition: stroke var(--transition); }
.experiencia-card h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.experiencia-card p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.7rem; }
.experiencia-precio { font-size: 1.35rem; font-weight: 800; color: var(--ocean); margin-bottom: 1.6rem; font-family: 'Fraunces', serif; }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testimonio-card { background: var(--white); border-radius: var(--radius-lg); padding: 2.4rem; box-shadow: var(--shadow-sm); text-align: center; max-width: 700px; margin: 0 auto; }
.testimonio-texto { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-bottom: 1.1rem; line-height: 1.45; }
.testimonio-autor { font-weight: 600; color: var(--ocean); font-size: 0.92rem; }
.testimonios-wrap { display: flex; flex-direction: column; gap: 1.4rem; }

/* ==========================================================================
   PAQUETES (precios con decoy)
   ========================================================================== */
/* La rejilla se centra sola con las tarjetas que haya. Antes estaba fija en
   4 columnas (de cuando había 4 planes), así que al quedar 3 dejaba una
   columna vacía a la derecha y todo se veía recorrido. Con auto-fit y
   justify-content:center da igual si algún día son 2, 3 o 4. */
.paq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
  justify-content: center;
  gap: 1.1rem; margin-top: 1.5rem; align-items: stretch;
}
.paq-card {
  position: relative; background: var(--white); border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem; box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
  display: flex; flex-direction: column;
  transition: all var(--transition);
}
.paq-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.paq-card.destacado {
  border-color: var(--oro);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.paq-card.destacado:hover { transform: scale(1.03) translateY(-6px); }
.paq-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--oro); color: var(--ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.35rem 1.1rem; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--shadow-gold);
}
.paq-nombre { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.paq-precio { font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.paq-precio small { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); font-family: 'DM Sans', sans-serif; }
.paq-sub { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 1.4rem; line-height: 1.4; }

/* Las filas que se repiten en TODAS las tarjetas, para que precio, lista y
   botón queden alineados aunque una tarjeta tenga menos que decir. */
.paq-quien { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.9rem; line-height: 1.4; }
.paq-pill {
  align-self: flex-start; margin: 0 0 0.7rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--sand); color: var(--ink-soft); line-height: 1.3;
}
.paq-pill.ahorro { background: var(--oro-suave); border-color: var(--oro); color: var(--oro-oscuro); }
.paq-antes { margin: 0; min-height: 1.5rem; font-size: 0.95rem; color: var(--ink-faint); line-height: 1.5; }
.paq-antes s { text-decoration-thickness: 1.5px; }

/* Reglas generales de precio, debajo de las tarjetas. */
.paq-notas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  max-width: 1000px; margin: 2.4rem auto 0; padding-top: 1.7rem;
  border-top: 1px solid var(--sand);
}
.paq-nota { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.paq-nota svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; stroke: var(--oro-oscuro); fill: none; stroke-width: 1.8; }
.paq-nota strong { display: block; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.1rem; }
@media (max-width: 800px) { .paq-notas { grid-template-columns: 1fr; gap: 1.1rem; } }
.paq-lista { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.8rem; flex: 1; }
.paq-lista li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; }
.paq-lista li svg { width: 17px; height: 17px; stroke: var(--oro-oscuro); fill: none; stroke-width: 2.5; flex-shrink: 0; margin-top: 2px; }
.paq-card .btn { width: 100%; justify-content: center; margin-top: auto; }
@media (max-width: 1000px) {
  .paq-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); gap: 1.2rem; }
  .paq-card.destacado { transform: scale(1); }
  .paq-card.destacado:hover { transform: translateY(-6px); }
}
@media (max-width: 760px) {
  /* En escritorio la preferida va en medio; apilada en el teléfono, primero. */
  .paq-card.destacado { order: -1; }
}
@media (max-width: 560px) {
  .paq-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   COLLAGE DE FOTOS (mosaico de 5)
   ========================================================================== */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.collage figure {
  margin: 0; overflow: hidden; border-radius: var(--radius);
  position: relative; box-shadow: var(--shadow-sm);
}
.collage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
.collage figure:hover img { transform: scale(1.06); }
.collage figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .collage figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* ==========================================================================
   PAQUETES EN MINIATURA (fondo de páginas de plan)
   ========================================================================== */
.planes-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-top: 1.4rem; }
.plan-mini {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--white); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.plan-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--oro); }
.plan-mini.actual { border-color: var(--oro); background: var(--oro-suave); }
.plan-mini b { font-family: 'Fraunces', serif; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.plan-mini span { font-size: 0.85rem; color: var(--ocean); font-weight: 600; }
.plan-mini small { font-size: 0.75rem; color: var(--ink-faint); }

/* ==========================================================================
   CARRUSEL DE GALERÍA (index)
   ========================================================================== */
.carrusel { position: relative; margin-top: 1rem; }
.carrusel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  height: min(64vh, 620px);
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
.carrusel-viewport.arrastrando { cursor: grabbing; }
.carrusel-viewport:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--ocean-light); }
.carrusel-track {
  display: flex;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.carrusel-slide { flex: 0 0 100%; height: 100%; position: relative; }
.carrusel-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.carrusel-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 74%, rgba(22,50,61,0.32) 100%);
  pointer-events: none;
}
.carrusel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.carrusel-btn svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-btn:hover { background: var(--ocean); border-color: var(--ocean); transform: translateY(-50%) scale(1.07); }
.carrusel-btn:hover svg { stroke: #fff; }
.carrusel-btn.prev { left: 1.2rem; }
.carrusel-btn.next { right: 1.2rem; }
.carrusel-contador {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding: 0.35rem 1rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
.carrusel-pausa {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  color: var(--ink); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.carrusel-pausa:hover { background: var(--oro); }
.carrusel-dots { display: flex; justify-content: center; gap: 0.55rem; margin-top: 1.6rem; }
.carrusel-dot {
  width: 10px; height: 10px; border-radius: 999px; border: none; padding: 0;
  background: var(--ocean-light); opacity: 0.55; cursor: pointer;
  transition: all var(--transition);
}
.carrusel-dot:hover { opacity: 0.85; }
.carrusel-dot.activo { width: 30px; opacity: 1; background: var(--ocean); }
@media (max-width: 700px) {
  .carrusel-viewport { height: 58vw; min-height: 250px; border-radius: var(--radius); }
  .carrusel-btn { width: 42px; height: 42px; }
  .carrusel-btn.prev { left: 0.7rem; }
  .carrusel-btn.next { right: 0.7rem; }
  .carrusel-contador { top: 0.8rem; right: 0.8rem; }
}

/* ==========================================================================
   GALERÍA + LIGHTBOX
   ========================================================================== */
.galeria-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 0.9rem; margin-top: 1rem; }
.galeria-grid.compacto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; }
.galeria-item { border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer; transition: all var(--transition); }
.galeria-item:hover { transform: scale(1.015); box-shadow: var(--shadow-lg); z-index: 2; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.galeria-item:hover img { transform: scale(1.08); }
.galeria-item::after {
  content: '\2795'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem; background: rgba(22,50,61,0.0); opacity: 0; transition: all var(--transition);
}
.galeria-item:hover::after { opacity: 1; background: rgba(22,50,61,0.25); }
.galeria-item.big { grid-column: span 2; }

@media (max-width: 900px) {
  .galeria-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 500px) {
  .galeria-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; grid-auto-rows: 160px; }
  .galeria-item.big { grid-column: span 2; }
}

/* ── Visor de fotos a pantalla completa ────────────────────────────────── */

/* La lupa avisa que la foto se puede abrir. En la cuadrícula las fotos van
   recortadas para que todo quede parejo; al abrirlas se ven completas. */
.foto-ampliable { cursor: zoom-in; }
.foto-ampliable:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(22,50,61,0.92); z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 2rem;
  backdrop-filter: blur(8px);
}
.lightbox-overlay.open { display: flex; animation: fadeInTab 0.25s ease; }

.lightbox-figura {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  max-width: 100%;
}
/* object-fit:contain garantiza que se vea la toma entera, sin recortar
   ningún borde, sea la foto vertical u horizontal. */
.lightbox-overlay img {
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-figura figcaption {
  color: rgba(255,255,255,0.88);
  font-size: 0.86rem; text-align: center; max-width: 60ch; line-height: 1.5;
}

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(22,50,61,0.55); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.3rem; transition: all 0.25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--ocean); color: var(--white); }
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox-overlay { padding: 1rem; }
  .lightbox-overlay img { max-height: 74vh; }
  .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } .lightbox-close { top: 0.8rem; right: 0.8rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item { background: var(--white); border-radius: var(--radius); padding: 1.4rem 1.6rem; cursor: pointer; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-pregunta { font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; user-select: none; }
.faq-pregunta svg { width: 20px; height: 20px; stroke: var(--ocean); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 1rem; }
.faq-item.active .faq-pregunta svg { transform: rotate(45deg); }
.faq-respuesta { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }
.faq-item.active .faq-respuesta { max-height: 240px; padding-top: 0.8rem; }

/* ==========================================================================
   CONFIANZA / PRECIO
   ========================================================================== */
/* Aquí vivía un diseño anterior de la barra de confianza (.confianza-grid).
   Ya no lo usa ninguna página, pero su ".confianza-item { text-align:center;
   max-width:200px }" seguía cayendo sobre la barra nueva de reservas y la
   dejaba a medias: el icono a la izquierda y el texto centrado. Eliminado. */

/* Bloque de enlace cruzado entre Tour Privado y Bienestar. Antes ninguna de
   las dos páginas mencionaba a la otra: quien entraba a una nunca se enteraba
   de que existía la segunda. */
.cruce-bloque {
  max-width: 860px; margin: 0 auto;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem 2.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.6rem; flex-wrap: wrap;
}
.cruce-bloque h3 {
  font-family: 'Fraunces', serif; font-size: 1.45rem; font-weight: 700;
  color: var(--ink); margin-bottom: 0.35rem; letter-spacing: -0.01em;
}
.cruce-bloque p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.cruce-bloque .btn { flex-shrink: 0; }
.cruce-nota {
  text-align: center; font-size: 0.87rem; color: var(--ink-faint);
  margin: 1.4rem auto 0;
}
.cruce-nota a { color: var(--ocean); font-weight: 600; text-decoration: none; }
.cruce-nota a:hover { color: var(--oro-oscuro); text-decoration: underline; }
@media (max-width: 700px) {
  .cruce-bloque { flex-direction: column; align-items: flex-start; padding: 1.6rem; }
}

/* Resumen de calificación encima de las reseñas: "5.0 ★★★★★ · 5 reseñas" */
.resena-resumen {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem; font-size: 1rem; color: var(--ink-soft);
}
.resena-resumen strong { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--ink); }
.resena-estrellas-resumen { color: var(--oro); font-size: 1.15rem; letter-spacing: 0.06em; }

/* Enlace a la ficha, debajo de las reseñas */
.resena-ver-todas {
  display: inline-block; font-weight: 600; font-size: 0.9rem;
  color: var(--ocean); text-decoration: none;
  border-bottom: 2px solid rgba(60,114,134,0.28); padding-bottom: 2px;
  transition: all var(--transition);
}
.resena-ver-todas:hover { color: var(--oro-oscuro); border-bottom-color: var(--oro); }

.precio-destacado { text-align: center; }
.precio-destacado .monto { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.precio-destacado .monto span { font-size: 1.05rem; font-weight: 400; color: var(--ink-soft); font-family: 'DM Sans', sans-serif; }

/* ==========================================================================
   FORMULARIOS (reservas)
   ========================================================================== */
.form-group { margin-bottom: 1.7rem; }
label { display: block; font-weight: 600; font-size: 0.82rem; color: var(--ink); margin-bottom: 0.5rem; }
select, input, textarea {
  width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--sand); border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem; background: var(--cream); transition: border var(--transition);
  /* line-height fija: sin esto cada tipo de campo calcula su propia altura y
     quedan desalineados entre sí (el de fecha salía 2px más alto que el resto). */
  line-height: 1.4;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--ocean); background: var(--white); }

/* El campo de fecha es el más problemático en móvil: iOS y Android le ponen
   su propia apariencia, su propia altura y alinean el texto al centro, así
   que se salía de la fila y no cuadraba con "Horario disponible" de al lado. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;              /* deja que encoja dentro de la fila flexible */
  text-align: left;
}

/* Altura mínima común. Cada tipo de campo calcula su alto por su cuenta (el de
   fecha salía 53.6px, los desplegables 52.2 y los de texto 51.6), así que se
   veían escalonados uno junto a otro. Con esto los seis miden exactamente lo
   mismo en cualquier navegador. */
select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"] {
  min-height: 54px;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

.row { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.row .form-group { flex: 1; min-width: 200px; }

/* En móvil los campos van a 16px exactos. Por debajo de ese tamaño, Safari de
   iPhone hace zoom solo al tocar un campo y descuadra toda la página. */
@media (max-width: 700px) {
  select, input, textarea { font-size: 16px; }
  .row { gap: 0; }
  .row .form-group { flex: 1 1 100%; min-width: 0; }
}

/* ─── Cuánto pagar hoy: anticipo o todo ──────────────────────────────────
   Dos botones grandes, uno al lado del otro. El 40% viene marcado por
   defecto porque es el que menos fricción tiene; quien prefiere no deber
   nada el día de la salida elige "todo". El PRECIO NO CAMBIA entre uno y
   otro: es el mismo total, solo cambia cuánto se cobra hoy.
   El radio de verdad está oculto pero sigue ahí, así que funciona con
   teclado y con lector de pantalla.                                       */
.pago-etiqueta {
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  margin: 1.9rem 0 0.55rem;
}
.pago-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0 0 0.3rem; }
.pago-opciones + .pago-etiqueta { margin-top: 1.5rem; }
.pago-opcion {
  position: relative; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.95rem 1rem; border: 2px solid var(--sand);
  border-radius: var(--radius-sm); background: var(--white);
  cursor: pointer; text-align: center; transition: all var(--transition);
}
.pago-opcion:hover { border-color: var(--ocean-light); }
.pago-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.pago-opcion-titulo { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.pago-opcion-detalle { font-size: 0.8rem; color: var(--ink-faint); line-height: 1.35; }
.pago-opcion:has(input:checked) {
  border-color: var(--oro); background: var(--oro-suave);
  box-shadow: 0 0 0 1px var(--oro);
}
.pago-opcion:has(input:checked) .pago-opcion-titulo { color: var(--oro-oscuro); }
.pago-opcion input:focus-visible ~ .pago-opcion-titulo { outline: 2px solid var(--ocean); outline-offset: 3px; }
@media (max-width: 480px) { .pago-opciones { grid-template-columns: 1fr; } }

.precio-box { background: var(--ocean-pale); border-radius: var(--radius); padding: 2rem; margin: 2.3rem 0; text-align: center; }
.precio-box h2 { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.precio-box .total { font-size: 2.4rem; font-weight: 800; color: var(--ocean); font-family: 'Fraunces', serif; }
.precio-box .detalle { font-size: 0.9rem; color: var(--ink-soft); }

.mensaje-exito { background: #d4edda; color: #155724; padding: 1.2rem; border-radius: var(--radius-sm); margin-top: 2rem; display: none; font-weight: 500; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: var(--sand-light); padding: 4rem 2.5rem 2.5rem; border-radius: 40px 40px 0 0; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer-brand img { height: 40px; }
.footer-brand span { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 800; color: var(--white); }
.footer-col p { font-size: 0.88rem; opacity: 0.7; line-height: 1.7; }
.footer-col h5 { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ocean-light); margin-bottom: 1rem; font-weight: 700; }
.footer-col a { display: block; font-size: 0.9rem; color: var(--sand-light); text-decoration: none; margin-bottom: 0.6rem; opacity: 0.85; transition: all var(--transition); }
.footer-col a:hover { color: var(--ocean-light); opacity: 1; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 1.6rem; text-align: center; font-size: 0.85rem; opacity: 0.6; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer { border-radius: 28px 28px 0 0; } }

.footer-simple { background: var(--ink); color: var(--sand-light); text-align: center; padding: 3rem 2rem; font-size: 0.9rem; border-radius: 40px 40px 0 0; }
.footer-simple a { color: var(--ocean-light); text-decoration: none; }
.footer-simple a:hover { color: var(--white); }

/* ==========================================================================
   CTA FIJO EN MÓVIL (barra inferior de reserva)
   ========================================================================== */
.cta-movil { display: none; }
@media (max-width: 760px) {
  .cta-movil {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 995;
    display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(22,50,61,0.08);
    box-shadow: 0 -6px 24px rgba(22,50,61,0.12);
    animation: ctaSube 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes ctaSube { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .cta-movil-info { line-height: 1.2; min-width: 0; }
  .cta-movil-info b {
    display: block; font-family: 'Fraunces', serif; font-size: 1.05rem;
    font-weight: 700; color: var(--ink); white-space: nowrap;
  }
  /* En pantallas angostas esta línea se partía en tres renglones y la barra
     crecía tanto que se comía el botón del hero. Con una sola línea la
     barra mantiene su altura y todo lo de arriba sigue cuadrando. */
  .cta-movil-info span {
    font-size: 0.72rem; color: var(--ink-soft);
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* En un teléfono de 360px el texto mide justo lo mismo que el hueco y se
     cortaba con puntos suspensivos. Una pizca más chico y entra completo. */
  @media (max-width: 380px) {
    .cta-movil-info span { font-size: 0.66rem; }
  }
  .cta-movil .btn { padding: 0.7rem 1.5rem; font-size: 0.86rem; white-space: nowrap; flex-shrink: 0; }
  .footer-bottom { padding-bottom: 1.6rem; }
  .footer-simple { padding-bottom: 2.5rem; }
}

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.burbuja-whatsapp {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  width: 58px; height: 58px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37,211,102,0.4); transition: all 0.3s ease; cursor: pointer; text-decoration: none;
}
.burbuja-whatsapp:hover { transform: scale(1.1); box-shadow: 0 14px 34px rgba(37,211,102,0.5); }
/* En celular la burbuja se pega un poco más a la orilla. */
@media (max-width: 760px) {
  .burbuja-whatsapp { right: 1rem; }
}
.burbuja-whatsapp svg { width: 28px; height: 28px; fill: white; }

/* ==========================================================================
   ANIMACIONES DE ENTRADA
   ========================================================================== */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in.stagger.visible { transition-delay: var(--stagger-delay, 0s); }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   MÓVIL: menos ruido (auditoría) — va al final para ganar la cascada
   ========================================================================== */
@media (max-width: 700px) {
  /* Jerarquía tipográfica: solo el hero grita */
  .section-title { font-size: 1.85rem; }
  .section-label { font-size: 0.72rem; letter-spacing: 0.06em; }
  .section-subtitle, .section-text { font-size: 0.98rem; }

  /* Razones compactas: cuadrícula 2×2 de icono + título */
  .razones-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .razon-item { padding: 1.2rem 0.9rem; text-align: center; }
  .razon-item p { display: none; }
  .razon-icono { margin: 0 auto 0.7rem; }
  .razon-item h4 { font-size: 0.92rem; margin-bottom: 0; }

  /* Instagram: un solo reel en móvil */
  .ig-embeds > *:nth-child(2) { display: none !important; }

  /* La barra fija de reserva no debe tapar contenido ni chocar con WhatsApp */
  body:has(.cta-movil) { padding-bottom: 78px; }
  body:has(.cta-movil) .burbuja-whatsapp { bottom: 6.2rem; }

}

/* ==========================================================================
   FORMULARIO DE RESERVA — avisos y reglas
   ========================================================================== */
.incluye-box {
  background: var(--ocean-pale);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin: -0.6rem 0 1.7rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.incluye-box strong { color: var(--ink); }

/* Aviso ámbar: algo impide reservar (grupo fuera de rango, sin horarios…) */
.aviso-reserva {
  background: #FDF3E3;
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  color: var(--ink);
  margin: -0.8rem 0 1.7rem;
  line-height: 1.55;
}
.aviso-reserva a { color: var(--ocean); font-weight: 700; }

/* Las tarifas y descuentos, justo debajo de las casillas de personas. */
.nota-fijo {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.6;
  border-left: 3px solid var(--ocean-light);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: -0.4rem 0 1.7rem;
}
.nota-fijo strong { color: var(--ink); font-weight: 700; }

.nota-confirmacion {
  background: var(--ocean-pale);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.3rem;
  font-size: 0.87rem;
  color: var(--ink);
  line-height: 1.6;
}
.nota-confirmacion ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.nota-confirmacion li { margin-bottom: 0.35rem; }
.nota-confirmacion li:last-child { margin-bottom: 0; }

.nota-pago {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.nota-pago svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--ocean); stroke-width: 2; }

/* ─── El recibo del recuadro de precio ───────────────────────────────────
   Una línea por concepto: lo que cuesta cada cosa, lo que se descuenta y el
   total. Así el cliente puede comprobar la cuenta con sus propios ojos.   */
.precio-box h2 { margin-bottom: 0.6rem; }
.desglose { text-align: left; font-size: 0.92rem; margin: 0.4rem 0 0.2rem; }
.desglose:empty { display: none; }
.desglose-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(22,50,61,0.1);
  color: var(--ink-soft);
}
.desglose-fila b { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.desglose-fila.dto, .desglose-fila.dto b { color: var(--ocean); }
.desglose-fila.total-fila { color: var(--ink); font-weight: 700; border-bottom-width: 2px; border-bottom-color: rgba(22,50,61,0.22); }
.desglose-fila.total-fila b { font-weight: 800; }
.pagar-hoy { padding-top: 1.1rem; }
.pagar-hoy-etq {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.precio-box .pagar-hoy .total { line-height: 1.15; margin-top: 0.15rem; }
.precio-box #detalleDisplay { margin-top: 0.35rem; font-weight: 600; }
/* En celular la caja ocupa casi todo el ancho: menos relleno para que cada
   renglón del recibo quepa en una sola línea. */
@media (max-width: 520px) {
  .precio-box { padding: 1.5rem 1.05rem; }
  .desglose { font-size: 0.86rem; }
  .desglose-fila { gap: 0.6rem; }
  .precio-box .pagar-hoy .total { font-size: 2.1rem; }
}

select:disabled {
  background: var(--sand-light);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ==========================================================================
   PÁGINA DE CONFIRMACIÓN
   ========================================================================== */
.conf-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
  background: var(--cream);
}
.conf-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  padding: 3rem 2.4rem;
  text-align: center;
}
.conf-icono {
  width: 80px; height: 80px;
  background: var(--oro-suave);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.conf-icono svg { width: 38px; height: 38px; stroke: var(--oro-oscuro); fill: none; stroke-width: 2.5; }
.conf-card h1 {
  font-family: 'Fraunces', serif;
  font-size: 2rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}
.conf-intro { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.8rem; }

.conf-resumen {
  background: var(--ocean-pale);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.conf-fila {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(22, 50, 61, 0.07);
  font-size: 0.9rem;
}
.conf-fila:last-of-type { border-bottom: 0; }
.conf-fila span { color: var(--ink-soft); flex-shrink: 0; }
.conf-fila b { color: var(--ink); text-align: right; }
.conf-fila-pagado b { color: var(--oro-oscuro); font-size: 1.05rem; }
.conf-referencia {
  margin-top: 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid rgba(22, 50, 61, 0.07);
  font-size: 0.74rem; color: var(--ink-faint);
  word-break: break-all;
}

.conf-siguiente { text-align: left; margin-bottom: 1.8rem; }
.conf-siguiente-titulo {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 0.6rem;
}
.conf-siguiente ol { padding-left: 1.2rem; }
.conf-siguiente li { color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.35rem; font-size: 0.9rem; }

.conf-pie { margin-top: 1.6rem; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.7; }
.conf-pie a { color: var(--ocean); font-weight: 600; text-decoration: none; }
.conf-pie a:hover { color: var(--oro-oscuro); }

@media (max-width: 600px) {
  .conf-card { padding: 2.2rem 1.4rem; }
  .conf-card h1 { font-size: 1.7rem; }
  .conf-fila { font-size: 0.85rem; }
}

/* ==========================================================================
   HÉROE — nota de confianza bajo el CTA
   ========================================================================== */
.hero-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.3rem auto 0;
  max-width: 620px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.5;
}
.hero-nota svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .hero-nota { font-size: 0.74rem; margin-top: 1rem; }
}

/* ==========================================================================
   RESEÑAS — origen del comentario y llamada a reseñar en Google
   ========================================================================== */
.resena-origen {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(22, 50, 61, 0.08);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.resena-origen svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  flex-shrink: 0;
}

.resena-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 2.6rem auto 0;
  padding: 1.6rem 1.9rem;
  background: var(--sand-light);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
}
.resena-google-texto { flex: 1; min-width: 240px; }
.resena-google h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.resena-google p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.resena-google .btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .resena-google { padding: 1.3rem 1.2rem; text-align: center; justify-content: center; }
  .resena-google-texto { min-width: 0; }
  .resena-google .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   DÓNDE ESTAMOS — mapa y datos de llegada
   ========================================================================== */
.mapa-bloque {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 2.4rem auto 0;
}
.mapa-marco {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  min-height: 380px;
  background: var(--ocean-pale);
}
.mapa-marco iframe { width: 100%; height: 100%; min-height: 380px; display: block; }

.mapa-datos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  box-shadow: var(--shadow-sm);
}
.mapa-dato { display: flex; gap: 1rem; align-items: flex-start; }
.mapa-dato-ic {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--oro-suave);
  display: flex; align-items: center; justify-content: center;
}
.mapa-dato-ic svg {
  width: 20px; height: 20px;
  stroke: var(--oro-oscuro); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mapa-dato h4 {
  font-family: 'Fraunces', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--ink); margin-bottom: 0.2rem;
}
.mapa-dato p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

.mapa-acciones {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
  margin-top: 0.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(22, 50, 61, 0.08);
}
.mapa-acciones .btn { flex: 1; min-width: 150px; text-align: center; }

@media (max-width: 900px) {
  .mapa-bloque { grid-template-columns: 1fr; gap: 1.2rem; }
  .mapa-marco, .mapa-marco iframe { min-height: 280px; }
  .mapa-datos { padding: 1.5rem 1.3rem; }
}

/* ==========================================================================
   PORTADA SOBRIA — más aire, menos ruido
   Se carga al final para que estas reglas manden sobre las anteriores.
   ========================================================================== */

/* Más respiración entre secciones */
.section { padding: 8rem 2.5rem; }
@media (max-width: 768px) { .section { padding: 4.8rem 1.4rem; } }

/* Cabecera de sección: centrada, angosta y con aire antes del contenido */
.section-cabecera {
  max-width: 620px;
  margin: 0 auto 3.4rem;
  text-align: center;
}
.section-cabecera .section-label { margin-bottom: 0.7rem; }
.section-cabecera .section-title { margin-bottom: 0.9rem; }
.section-cabecera .section-subtitle { margin: 0 auto; }
@media (max-width: 768px) { .section-cabecera { margin-bottom: 2.4rem; } }

/* ── HÉROE ────────────────────────────────────────────────────────────────
   Antes había seis elementos de texto peleando por la atención. Ahora son
   tres, y el buscador es lo único que resalta.                            */
.hero-tagline {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.hero-specs {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
  margin: 0 auto 2.2rem;
}
.hero-nota {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
  margin-top: 1rem;
}
.hero-nota svg { display: none; }

/* ── TARJETAS: sombras suaves y un solo movimiento ─────────────────────── */
.pkg-card:hover { transform: translateY(-5px); }
.razon-item {
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.razon-item:hover { transform: none; box-shadow: none; }
.razon-icono {
  margin-left: auto;
  margin-right: auto;
  background: var(--ocean-pale);
}
.razon-item:hover .razon-icono { background: var(--ocean-pale); }
.razon-item:hover .razon-icono svg { stroke: var(--ocean); }
.razones-grid { gap: 2.6rem 2rem; }

/* ── RESEÑAS: primero la cita, después quién la dijo ───────────────────── */
.resena-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem;
}
.resena-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.resena-estrellas { font-size: 0.85rem; margin-bottom: 0.9rem; }
.resena-texto {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  flex: 1;
}
.resena-pie {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.resena-origen {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(22, 50, 61, 0.08);
}

/* Dato de contacto que no es enlace (antes era un <a href="#"> falso) */
.footer-dato {
  display: block;
  font-size: 0.9rem;
  color: var(--sand-light);
  opacity: 0.85;
  margin-bottom: 0.6rem;
}

/* ── Menos movimiento: el fondo ya no hace zoom eterno ─────────────────── */
.hero-bg { animation: none; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* En móvil los textos de "Por qué cabopaddle" estaban ocultos para ahorrar
   espacio. Ahora que los bloques son planos sí caben, y son justo lo que
   explica el servicio a quien entra por primera vez. */
@media (max-width: 700px) {
  .razones-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .razon-item { padding: 0; }
  .razon-item p { display: block; font-size: 0.82rem; line-height: 1.5; }
  .razon-item h4 { font-size: 1rem; margin-bottom: 0.35rem; }
}
@media (max-width: 420px) {
  .razones-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ==========================================================================
   TESTIMONIOS (colaboraciones.html) — etiqueta de origen honesta
   ========================================================================== */
.testimonio-origen {
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
  font-weight: 500;
}

/* ==========================================================================
   RESERVAS — barra de confianza antes del formulario
   ========================================================================== */
.confianza-barra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.2rem;
}
/* Cada bloque va centrado: icono arriba, título debajo y texto al final,
   todo alineado al centro para que combine con la cabecera de la página. */
.confianza-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}
.confianza-item svg {
  width: 22px; height: 22px;
  stroke: var(--oro-oscuro); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.confianza-item b {
  display: block;
  font-size: 0.87rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.confianza-item span {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.confianza-item a { color: var(--ocean); font-weight: 600; }

@media (max-width: 760px) {
  .confianza-barra { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   TARJETAS EN TODO EL SITIO — mismo lenguaje sobrio que la portada
   Antes cada tarjeta tenía su propia idea de "hover": una subía 10px con
   sombra pesada, otra combinaba scale + translate. Un solo movimiento
   discreto en todas partes se siente más cuidado.
   ========================================================================== */
.experiencia-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.paq-card.destacado:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }



/* ==========================================================================
   TIPOGRAFÍA — titulares equilibrados
   ──────────────────────────────────────────────────────────────────────────
   Evita que un título deje una sola palabra suelta en la segunda línea
   ("Rema al Arco de Cabo San / Lucas"). Los navegadores que no lo entienden
   simplemente lo ignoran.
   ========================================================================== */
h1, h2, h3, .hero-titulo, .section-title, .paq-nombre { text-wrap: balance; }
.section-subtitle, .section-text, .hero-tagline, .hero-sub { text-wrap: pretty; }


/* ==========================================================================
   TABLA DE TARIFAS (página de detalle del tour)
   ========================================================================== */
.tarifas {
  max-width: 640px; margin: 0 auto 0.9rem;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 0.4rem 1.6rem;
}
.tarifa-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--sand-light);
  font-size: 0.95rem; color: var(--ink-soft);
}
.tarifa-fila:last-child { border-bottom: 0; }
.tarifa-fila b { color: var(--ink); font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarifa-fila b s { font-weight: 400; color: var(--ink-faint); margin-left: 0.4rem; }
.tarifa-fila.dto b { color: var(--oro-oscuro); }
.tarifas-nota {
  max-width: 640px; margin: 0 auto 1.8rem; text-align: center;
  font-size: 0.82rem; color: var(--ink-faint); line-height: 1.55;
}
@media (max-width: 520px) {
  .tarifas { padding: 0.3rem 1.1rem; }
  .tarifa-fila { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .tarifa-fila b { text-align: left; }
}