:root {
    /* ---- Paleta de marca ----
       Solo --primary se captura en Ajustes; el resto lo deriva js/marca.js
       y lo inyecta en tiempo de ejecución. Estos valores son el default del
       producto (azul) y son los que se ven si la agencia no eligió color. */
    --primary: #2563EB;          /* rellenos: botones, barras, iconos */
    --primary-rgb: 37, 99, 235;  /* el mismo, en componentes, para rgba() de sombras */
    --primary-hover: #1D4ED8;    /* hover de rellenos */
    --primary-text: #2563EB;     /* TEXTO: versión con contraste AA sobre blanco */
    --primary-soft: #93C5FD;     /* acentos sobre fondos OSCUROS (hero) */
    --primary-light: #DBEAFE;    /* tinte: fondos de etiquetas de estado */
    --primary-lighter: #EFF6FF;  /* tinte suave: fondos de chips y hovers */
    --footer-bg: #111827;        /* fondo del footer, armonizado con la marca */
    --secondary: #F3F4F6;
    --text-dark: #111827;
    --text-muted: #6B7280;
    --white: #FFFFFF;
    --success: #10B981;
    --radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; }
body { background-color: var(--secondary); color: var(--text-dark); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .logo, .card-title, .hero-title { font-family: 'Poppins', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 5%; background-color: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; }
/* Al scrollear, el header se vuelve glassmorphism */
.navbar.scrolled { background: rgba(255,255,255,0.72); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 6px 24px rgba(17,24,39,0.09); border-bottom: 1px solid rgba(255,255,255,0.5); }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--primary-text); display: flex; align-items: center; gap: 8px; letter-spacing: -0.5px; }
.logo-img { height: 56px; width: auto; display: block; object-fit: contain; transition: height 0.3s ease; }
.navbar.scrolled .logo-img { height: 48px; }
nav a { text-decoration: none; color: var(--text-muted); margin-right: 25px; font-weight: 500; transition: color 0.2s; }
nav a:hover { color: var(--primary-text); }
.btn-login { background-color: var(--primary); color: var(--white); border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: background 0.2s; }
.btn-login:hover { background-color: var(--primary-hover); }

/* Menú hamburguesa + Dropdown glassmorphism (pill deslizable) */
/* Ocupa todo el alto del header para que el dropdown ancle a su borde inferior (a ras, no encima) */
.nav-menu-wrap { position: relative; align-self: stretch; display: flex; align-items: center; }
.menu-toggle { position: relative; z-index: 320; background: none; border: none; font-size: 1.6rem; color: var(--text-dark); cursor: pointer; padding: 6px 12px; line-height: 1; border-radius: 12px; transition: color 0.25s ease, background 0.25s ease; }
.menu-toggle:hover { background: var(--secondary); }
.menu-toggle.open { color: var(--primary-text); }
.menu-toggle .icon-close { display: none; }
.menu-toggle.open .icon-open { display: none; }
.menu-toggle.open .icon-close { display: inline-block; }

/* Overlay transparente: solo captura el tap-fuera para cerrar (sin oscurecer, mantiene el feel de pill).
   z-index por DEBAJO de la navbar (100) para que el botón y el dropdown sigan recibiendo clics. */
.drawer-overlay { position: fixed; inset: 0; background: transparent; z-index: 90; }

/* Panel flotante que se despliega hacia abajo con vidrio esmerilado */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 232px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    /* Casi sólido: mantiene el toque glass sin que se pierdan los botones con el fondo */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(229, 231, 235, 0.9);
    box-shadow: 0 22px 48px -14px rgba(17, 24, 39, 0.32);
    z-index: 310;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-14px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Cada botón se desliza hacia abajo en cascada (stagger) */
.drawer-link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: 12px;
    text-decoration: none; color: var(--text-dark); font-weight: 500;
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
}
.nav-dropdown.open .drawer-link { opacity: 1; transform: translateY(0); }
.nav-dropdown.open .drawer-link:nth-child(1) { transition-delay: 0.06s; }
.nav-dropdown.open .drawer-link:nth-child(2) { transition-delay: 0.12s; }
.nav-dropdown.open .drawer-link:nth-child(3) { transition-delay: 0.18s; }
.nav-dropdown.open .drawer-link:nth-child(4) { transition-delay: 0.24s; }
.nav-dropdown.open .drawer-link:nth-child(5) { transition-delay: 0.30s; }
.drawer-link:hover { background: rgba(243, 244, 246, 0.9); }
.drawer-link i { color: var(--primary-text); width: 20px; text-align: center; }
/* Reset para los items que son <button> (Mis Reservas, AbordApp) */
button.drawer-link { border: none; width: 100%; font: inherit; cursor: pointer; text-align: left; background: transparent; color: var(--text-dark); }
.drawer-link-primary, button.drawer-link.drawer-link-primary { background: var(--primary); color: #fff; margin-top: 4px; box-shadow: 0 8px 20px -8px rgba(var(--primary-rgb), 0.7); }
.drawer-link-primary:hover, button.drawer-link.drawer-link-primary:hover { background: var(--primary-hover); }
.drawer-link-primary i { color: #fff; }

/* Logo como acceso discreto al panel admin (sin subrayado ni highlight) */
.logo-link { display: inline-flex; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown, .drawer-link { transition: opacity 0.2s ease; transform: none; }
}

/* ==========================================
   HERO CARRUSEL DE BANNERS (promociona tours)
========================================== */
.hero-carousel { position: relative; overflow: hidden; background: #0B0E14; }
.hero-track { display: flex; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-slide { position: relative; min-width: 100%; min-height: 480px; overflow: hidden; display: flex; align-items: center; }
/* Capa de fondo con efecto Ken Burns (zoom lento continuo) */
.hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: hero-kb 16s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.14); } }
.hero-slide-content { position: relative; z-index: 2; max-width: 1200px; width: 100%; margin: 0 auto; padding: 3rem 8%; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); padding: 7px 16px; border-radius: 30px; margin-bottom: 20px; backdrop-filter: blur(4px); }
.hero-title { font-size: 3rem; line-height: 1.08; margin-bottom: 14px; font-weight: 800; color: var(--white); text-wrap: balance; max-width: 640px; }
.hero-title .accent { color: var(--primary-soft); }
.hero-slide-meta { display: flex; gap: 20px; flex-wrap: wrap; margin: 6px 0 24px; font-size: 1rem; color: rgba(255,255,255,0.92); font-weight: 500; }
.hero-slide-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-slide-meta i { color: var(--primary-soft); }
.hero-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-price { font-size: 1rem; color: rgba(255,255,255,0.85); }
.hero-price strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.1; }
.hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; border: none; padding: 14px 30px; border-radius: 12px; font-size: 1.05rem; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: 0 10px 25px -5px rgba(var(--primary-rgb), 0.6); transition: transform 0.2s, background 0.2s; font-family: inherit; }
.hero-cta:hover { background: var(--primary-hover); transform: translateY(-2px); }

/* Flechas y puntos */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16); color: #fff; font-size: 1rem; cursor: pointer; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.hero-arrow:hover { background: rgba(255,255,255,0.32); }
.hero-prev { left: 16px; } .hero-next { right: 16px; }
.hero-carousel.single .hero-arrow, .hero-carousel.single .hero-dots { display: none; }
.hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.45); cursor: pointer; transition: width 0.3s, background 0.3s, border-radius 0.3s; padding: 0; }
.hero-dot.active { background: #fff; width: 26px; border-radius: 6px; }

@media (max-width: 768px) {
    .hero-slide { min-height: 420px; }
    .hero-title { font-size: 2rem; }
    /* Flechas abajo (sobre los dots) para que no se empalmen con el título/datos */
    .hero-arrow { width: 38px; height: 38px; top: auto; bottom: 46px; transform: none; }
}

/* Footer */
/* El fondo va en su propia variable (no en --text-dark, que es el color de TODO
   el texto del sitio) para poder teñirlo con la marca sin tocar la tipografía. */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,0.75); text-align: center; padding: 44px 5% 36px; margin-top: 50px; }
.footer-logo { height: 62px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: 14px; }
.footer-contact { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 16px; }
.footer-contact i { color: #25D366; }
.footer-copy { font-size: 0.88rem; margin-bottom: 4px; }
.footer-powered { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.footer-powered strong { color: var(--primary-soft); font-weight: 600; }

/* Redes sociales dinámicas del footer */
.footer-socials { display: flex; justify-content: center; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.footer-socials:empty { display: none; }
.footer-social { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); color: #fff; font-size: 1.15rem; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.footer-social:hover { transform: translateY(-3px); }
.footer-social.fb:hover { background: #1877F2; }
.footer-social.ig:hover { background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888); }
.footer-social.tt:hover { background: #000; }
.footer-social.wa:hover { background: #25D366; }

/* En columna de pago, el bloque de transferencia no necesita margen superior */
.checkout-col .payment-info { margin-top: 0; }

/* Catalog & Grid */
.catalog-section { padding: 3rem 5%; max-width: 1200px; margin: 0 auto; }
.catalog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
.catalog-header h2 { font-size: 1.8rem; font-weight: 700; }
.filters { display: flex; gap: 10px; }
.filter-btn { padding: 8px 16px; border: 1px solid #E5E7EB; background: var(--white); border-radius: 20px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--text-dark); color: var(--white); border-color: var(--text-dark); }

.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }

/* DISEÑO DE TARJETAS (CARDS) — PREMIUM */
.trip-card { position: relative; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid #EEF0F3; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.trip-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
/* Filtrar oculta la card en vez de borrarla del DOM: así la foto ya cargada
   se conserva y no se vuelve a pedir al servidor en cada tecleo. */
.trip-card.oculta { display: none; }

/* El marco se adapta a la proporción real de la 1ª foto del tour (--media-ar, lo
   calcula ajustarAltoMedia() en main.js). Así la imagen LLENA la card sin barras
   y sin recorte. El tope está en 4/3 para que un flyer cuadrado no dispare el
   alto de la card; el piso en 16/9 para que un panorámico no quede como franja. */
.card-media { position: relative; width: 100%; aspect-ratio: var(--media-ar, 3 / 2); overflow: hidden; background: var(--secondary); }
/* Dos capas apiladas para un fundido (crossfade) suave + Ken Burns entre imágenes */
.card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; display: block; opacity: 0; transition: opacity 0.7s ease; will-change: opacity, transform; backface-visibility: hidden; }
.card-image.is-base { opacity: 1; }
.card-image.kb-in { animation: kb-in 5s ease forwards; }
.card-image.kb-out { animation: kb-out 5s ease forwards; }
/* Ken Burns suave: con 1.12 la foto se quedaba visiblemente acercada entre rotaciones. */
@keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes kb-out { from { transform: scale(1.04); } to { transform: scale(1); } }
.card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,24,39,0.38), transparent 45%); pointer-events: none; z-index: 1; }

.card-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 20px; color: var(--white); letter-spacing: 0.3px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: inline-flex; align-items: center; gap: 5px; }
.card-badge.is-available { background: var(--success); }
.card-badge.is-last { background: #F59E0B; }
.card-badge.is-sold { background: #EF4444; }

.card-photos { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 0.72rem; font-weight: 600; padding: 5px 9px; border-radius: 20px; background: rgba(17,24,39,0.6); color: var(--white); display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(2px); }

.card-content { padding: 18px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); line-height: 1.3; }

.card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* Ruta ciudad origen → destino en la card del tour */
.card-route { display: flex; align-items: center; gap: 10px; background: var(--secondary); border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; }
.card-route-city { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; }
.card-route-city:first-child { text-align: left; }
.card-route-city:last-child { text-align: right; }
.route-ico { width: 46px; height: 17px; flex-shrink: 0; }
.route-pin { fill: var(--primary); }
.route-hole { fill: var(--white); }
.route-line { stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 2 2.6; stroke-linecap: round; opacity: 0.6; }
.card-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: var(--secondary); padding: 6px 11px; border-radius: 8px; }
.card-meta-item i { color: var(--primary-text); }

.card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 16px; border-top: 1px solid #EEF0F3; gap: 12px; }
.card-price-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.card-price-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.card-price { font-size: 1.45rem; font-weight: 800; color: var(--text-dark); }
.card-price small { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.card-deposit { font-size: 0.75rem; color: var(--success); font-weight: 600; margin-top: 3px; }

.btn-reserve { background: var(--primary); color: var(--white); padding: 11px 22px; border-radius: 10px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s; white-space: nowrap; }
.btn-reserve:hover { background: var(--primary-hover); }
.btn-reserve:active { transform: scale(0.97); }

/* Estado AGOTADO */
.trip-card.is-sold-out .card-image { filter: grayscale(0.7); }
.trip-card.is-sold-out .btn-reserve { background: #E5E7EB; color: var(--text-muted); cursor: not-allowed; }
.trip-card.is-sold-out .btn-reserve:hover { background: #E5E7EB; }

/* Skeleton loading (shimmer) */
.skeleton-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid #EEF0F3; }
.skeleton-media { aspect-ratio: 3 / 2; }
.skeleton-line { height: 14px; border-radius: 6px; margin: 12px 20px; }
.skeleton-line.short { width: 50%; }
.skeleton-line.tall { height: 30px; width: 45%; margin: 22px 20px 20px; }
.skeleton-media, .skeleton-line { background: linear-gradient(90deg, #EEF0F3 25%, #E2E5EA 37%, #EEF0F3 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================
   MODALES SMARTTRIP (PREMIUM UI)
========================================= */
.hidden { display: none !important; }

.modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(17, 24, 39, 0.75); 
    display: flex; justify-content: center; align-items: center; 
    z-index: 1000; padding: 20px; 
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--white); padding: 30px;
    border-radius: var(--radius); width: 100%; max-width: 450px;
    text-align: center; position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh; overflow-y: auto;
}

.close-btn { 
    position: absolute; top: 15px; right: 20px; 
    font-size: 1.5rem; cursor: pointer; color: var(--text-muted); 
    transition: color 0.2s; 
}
.close-btn:hover { color: var(--text-dark); }

.btn-back { position: absolute; top: 15px; left: 20px; background: none; border: none; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; font-family: inherit; }
.btn-back:hover { color: var(--primary-text); }

.modal-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.modal-header p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px; }

/* =========================================
   UI DE RESERVAS Y FORMULARIOS (SMARTTRIP)
========================================= */
.counter-container {
    display: flex; align-items: center; justify-content: center;
    background: var(--secondary); border-radius: 8px; padding: 5px;
    width: 100%; max-width: 200px; margin: 0 auto;
}
.counter-btn {
    background: var(--white); border: none; width: 40px; height: 40px;
    border-radius: 6px; font-size: 1.2rem; cursor: pointer; color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: 0.2s;
}
.counter-btn:hover { background: var(--text-dark); color: var(--white); }
.counter-value { flex-grow: 1; text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--primary-text); }

.input-group { display: flex; flex-direction: column; text-align: left; margin-bottom: 15px; }
.input-group label { font-size: 0.9rem; margin-bottom: 8px; font-weight: 600; color: var(--text-dark); }

.premium-input, .premium-select {
    width: 100%; padding: 12px 15px; border: 1px solid #E5E7EB; border-radius: 8px;
    font-size: 1rem; color: var(--text-dark); background: #F9FAFB; transition: border 0.3s;
}
.premium-input:focus, .premium-select:focus {
    outline: none; border-color: var(--primary); background: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.checkout-form { text-align: left; }
/* Checkout en 2 columnas en pantallas grandes (aprovecha el espacio) */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.checkout-col { display: flex; flex-direction: column; }
.booking-head { text-align: center; margin-bottom: 18px; }
.booking-head h2 { font-size: 1.6rem; color: var(--text-dark); }
.booking-head p { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; }
.booking-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; text-align: left; }
.booking-left, .booking-right { display: flex; flex-direction: column; }

/* Puntos de abordaje como botones */
.boarding-options { display: flex; flex-direction: column; gap: 8px; }
.boarding-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 2px solid #E5E7EB; border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.boarding-option:hover { border-color: var(--primary); }
.boarding-option.selected { border-color: var(--primary); background: var(--primary-lighter); }
.boarding-option-name { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.boarding-option-time { font-weight: 700; font-size: 0.8rem; color: var(--primary-text); background: var(--primary-lighter); padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.boarding-option.selected .boarding-option-time { background: var(--white); }

/* Selector de tipo de precio */
.tier-options { display: flex; flex-direction: column; gap: 8px; }
.tier-option { display: flex; justify-content: space-between; align-items: center; border: 2px solid #E5E7EB; border-radius: 10px; padding: 11px 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.tier-option:hover { border-color: var(--primary); }
.tier-option.selected { border-color: var(--primary); background: var(--primary-lighter); }
.tier-option-name { font-weight: 600; font-size: 0.92rem; color: var(--text-dark); }
.tier-option-price { font-weight: 800; color: var(--primary-text); font-variant-numeric: tabular-nums; }

/* Multi-precio: cada tipo con su propio contador de boletos */
.tier-option-multi { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 2px solid #E5E7EB; border-radius: 10px; padding: 10px 14px; }
.tier-multi-info { display: flex; flex-direction: column; gap: 2px; }
.tier-option-multi .tier-option-price { font-size: 0.82rem; font-weight: 700; }
.tier-qty { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tier-qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--primary); background: #fff; color: var(--primary-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: background 0.15s, color 0.15s, transform 0.12s; }
.tier-qty-btn:hover { background: var(--primary); color: #fff; }
.tier-qty-btn:active { transform: scale(0.92); }
.tier-qty-val { font-weight: 800; font-size: 1.05rem; color: var(--text-dark); min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }

/* Chip del tipo de pasajero en el checkout */
.pax-tipo-chip { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--primary-text); background: var(--primary-lighter); padding: 2px 8px; border-radius: 20px; margin-left: 4px; vertical-align: middle; }

/* Datos rápidos de la reserva (Aparta con / Liquidar antes del) */
.reserva-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.reserva-fact { background: var(--secondary); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.reserva-fact-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.reserva-fact-label i { color: var(--primary-text); }
/* El valor (fecha de liquidación) nunca parte en 2 líneas: se encoge con la pantalla */
.reserva-fact-value { font-size: clamp(0.72rem, 2.7vw, 0.92rem); font-weight: 700; color: var(--text-dark); line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Fechas del tour en el modal: chips centrados en UNA sola fila (se reduce el tamaño para no romper en móvil) */
/* Fecha + pill de unidad en la misma línea (envuelven si no caben) */
.booking-head-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.booking-head-meta #modal-trip-dates { margin: 0; }
.modal-unit-line { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--primary-text); background: var(--primary-lighter); padding: 5px 12px; border-radius: 20px; }
.modal-unit-line i { color: var(--primary-text); }
#modal-trip-dates { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: clamp(4px, 1.5vw, 8px); color: var(--text-muted); font-size: 0.9rem; }
#modal-trip-dates > i { color: var(--primary-text); flex-shrink: 0; }
.date-chip { background: var(--primary-lighter); color: var(--primary-text); font-weight: 600; font-size: clamp(0.56rem, 2.6vw, 0.8rem); padding: 4px clamp(6px, 1.8vw, 11px); border-radius: 20px; white-space: nowrap; }
.date-arrow { color: var(--text-muted); font-size: clamp(0.55rem, 2.3vw, 0.78rem); flex-shrink: 0; }

/* En pantallas muy chicas los facts se apilan para que la fecha quepa en 1 fila */
@media (max-width: 460px) {
    .reserva-facts { grid-template-columns: 1fr; }
}

/* =========================================
   MIS RESERVAS (consulta del cliente por WhatsApp)
========================================= */
.mr-result { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.mr-card { border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px 16px; }
.mr-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mr-folio { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-weight: 700; background: var(--secondary); color: var(--text-dark); padding: 3px 9px; border-radius: 6px; font-size: 0.82rem; letter-spacing: 0.5px; }
.mr-tour { font-weight: 700; color: var(--text-dark); font-size: 1rem; margin-bottom: 5px; line-height: 1.3; }
.mr-meta { font-size: 0.85rem; color: var(--text-muted); }
.mr-meta p { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 5px; line-height: 1.4; }
.mr-meta p:last-child { margin-bottom: 0; }
.mr-meta i { color: var(--primary-text); width: 16px; text-align: center; flex-shrink: 0; margin-top: 2px; }

/* Lista de pasajeros: uno por línea */
.mr-pax { margin-top: 12px; background: var(--secondary); border-radius: 10px; padding: 11px 14px; }
.mr-pax-title { font-size: 0.8rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mr-pax-title i { color: var(--primary-text); }
.mr-pax-list { margin: 0; padding-left: 20px; }
.mr-pax-list li { font-size: 0.85rem; color: var(--text-muted); padding: 2px 0; line-height: 1.35; }
.mr-estado { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mr-estado.revision { background: #FEF3C7; color: #B45309; }
.mr-estado.aprobada { background: #D1FAE5; color: #047857; }
.mr-estado.cancelada { background: #E5E7EB; color: #4B5563; }
.mr-estado.rechazada { background: #FEE2E2; color: #B91C1C; }
.mr-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mr-btn { width: 100%; padding: 10px; border-radius: 8px; border: none; font-weight: 600; font-family: inherit; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, opacity 0.2s; }
.mr-btn-boleto { background: var(--primary); color: #fff; }
.mr-btn-boleto:hover { background: var(--primary-hover); }
.mr-btn-abonar { background: #fff; color: var(--primary-text); border: 1.5px solid var(--primary); }
.mr-btn-abonar:hover { background: var(--primary-lighter); }
.mr-note { font-size: 0.8rem; color: var(--text-muted); background: var(--secondary); padding: 9px 12px; border-radius: 8px; margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.mr-note i { color: var(--primary-text); margin-top: 2px; flex-shrink: 0; }
.mr-empty, .mr-loading { text-align: center; color: var(--text-muted); padding: 20px; font-size: 0.9rem; }

/* Verificación por SMS de Mis Reservas (el cliente prueba que el número es suyo) */
.mr-privacidad { font-size: 0.8rem; color: var(--text-muted); background: var(--secondary); padding: 9px 12px; border-radius: 8px; margin: 0 0 12px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; text-align: left; }
.mr-privacidad i { color: var(--primary-text); margin-top: 2px; flex-shrink: 0; }
.mr-privacidad strong { color: var(--text-dark); }
.mr-link-btn { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--primary-text); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 6px; border-radius: 8px; transition: background 0.2s ease; }
.mr-link-btn:hover { background: var(--secondary); }
#mr-codigo { text-align: center; letter-spacing: 0.4em; font-size: 1.3rem; font-weight: 700; }
/* El reCAPTCHA es invisible: no debe ocupar espacio ni empujar el layout */
#recaptcha-container { display: flex; justify-content: center; }

/* Scroll reveal tipo landing: las cards aparecen al entrar en viewport */
.st-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.st-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .st-reveal { opacity: 1; transform: none; transition: none; }
    .hero-slide-bg, .card-image, .carousel-img { animation: none; }
}

/* Timeline del itinerario */
.itinerary-timeline { display: flex; flex-direction: column; }
.itinerary-item { display: flex; gap: 12px; }
.itinerary-item-marker { display: flex; flex-direction: column; align-items: center; }
.itinerary-item-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.itinerary-item-line { width: 2px; flex: 1; min-height: 12px; background: #E5E7EB; margin: 4px 0; }
.itinerary-item:last-child .itinerary-item-line { display: none; }
.itinerary-item-text { font-size: 0.88rem; color: var(--text-muted); padding: 3px 0 14px; line-height: 1.45; }
.itinerary-item:last-child .itinerary-item-text { padding-bottom: 0; }

.payment-info { background-color: var(--secondary); padding: 15px; border-radius: 8px; border-left: 4px solid var(--primary); margin-top: 10px; margin-bottom: 15px;}
.payment-info h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--primary-text); }
.payment-info p { margin-bottom: 5px; font-size: 0.9rem; }

/* Monto a transferir */
.transfer-amount { display: flex; justify-content: space-between; align-items: center; background: var(--white); border: 1px dashed var(--primary); border-radius: 8px; padding: 10px 14px; margin: 4px 0 12px; }
.transfer-amount-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.transfer-amount-value { display: block; font-size: 1.35rem; font-weight: 800; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.transfer-amount i { font-size: 1.5rem; color: var(--primary-text); opacity: 0.45; }

/* Número de cuenta copiable */
.copy-account { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: var(--white); border: 1px solid var(--primary); border-radius: 8px; cursor: pointer; font-family: inherit; transition: background 0.2s, border-color 0.2s; }
.copy-account:hover { background: var(--primary-lighter); }
.copy-account-number { flex: 1; min-width: 0; text-align: center; font-size: clamp(0.82rem, 3.6vw, 1.05rem); font-weight: 700; letter-spacing: 0.5px; color: var(--text-dark); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-account-icon { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--primary-text); white-space: nowrap; }
.copy-account.copied { background: #ECFDF5; border-color: var(--success); }
.copy-account.copied .copy-account-icon { color: var(--success); }

/* =========================================
   FILTROS DEL CATÁLOGO (buscador + meses)
========================================= */
.catalog-filtros { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }

.filtros-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.buscador-tours { position: relative; display: flex; align-items: center; max-width: 460px; width: 100%; flex: 1 1 260px; }

/* Ordenar por fecha o precio. Va un <select> nativo a propósito: en el celular
   abre la rueda del sistema, que se usa mejor que cualquier menú propio. */
.orden-tours { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.orden-tours > i:first-child { position: absolute; left: 15px; color: var(--text-muted); font-size: 0.85rem; pointer-events: none; }
.orden-tours .orden-flecha { position: absolute; right: 15px; color: var(--text-muted); font-size: 0.72rem; pointer-events: none; }
.orden-tours select { appearance: none; -webkit-appearance: none; padding: 13px 38px 13px 40px; border: 1px solid #E5E7EB; border-radius: 30px; background: var(--white); font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-dark); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.orden-tours select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14); }
.orden-tours select:hover { border-color: var(--primary); }
.buscador-tours i.fa-magnifying-glass { position: absolute; left: 16px; color: var(--text-muted); font-size: 0.9rem; pointer-events: none; }
.buscador-tours input { width: 100%; padding: 13px 42px 13px 42px; border: 1px solid #E5E7EB; border-radius: 30px; font-family: inherit; font-size: 0.95rem; color: var(--text-dark); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
.buscador-tours input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14); }
.buscador-tours input::-webkit-search-cancel-button { display: none; } /* usamos nuestro propio botón */
.buscador-limpiar { position: absolute; right: 8px; width: 28px; height: 28px; border: none; background: var(--secondary); color: var(--text-muted); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: background 0.2s, color 0.2s; }
.buscador-limpiar:hover { background: var(--primary-lighter); color: var(--primary-text); }

/* Los meses hacen scroll horizontal en móvil en vez de amontonarse */
.filtro-meses { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filtro-meses::-webkit-scrollbar { display: none; }
.chip-mes { flex-shrink: 0; padding: 9px 18px; border-radius: 30px; border: 1px solid #E5E7EB; background: var(--white); color: var(--text-muted); font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s; }
.chip-mes:hover { border-color: var(--primary); color: var(--primary-text); }
.chip-mes:active { transform: scale(0.97); }
.chip-mes.activo { background: var(--primary); border-color: var(--primary); color: var(--white); box-shadow: 0 8px 18px -8px rgba(var(--primary-rgb), 0.7); }
.chip-mes-conteo { opacity: 0.75; font-weight: 500; margin-left: 3px; }

/* Mensaje cuando el filtro no arroja resultados */
.sin-resultados { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--text-muted); }
.sin-resultados i { font-size: 2.2rem; color: var(--primary-light); margin-bottom: 14px; display: block; }
.sin-resultados strong { display: block; color: var(--text-dark); font-size: 1.05rem; margin-bottom: 5px; }

@media (max-width: 768px) {
    .buscador-tours { max-width: 100%; }
    /* En celular el selector baja a su propio renglón y ocupa todo el ancho:
       apretado junto al buscador quedaría ilegible. */
    .orden-tours { width: 100%; }
    .orden-tours select { width: 100%; }
}

/* Términos importantes: informan dentro del detalle del tour, bajo las
   recomendaciones. Estética de advertencia a propósito: son condiciones de
   dinero y cancelación y deben saltar a la vista. La aceptación va aparte,
   en el checkout. */
.terminos-box { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 12px 14px; text-align: left; }
.terminos-titulo { font-size: 0.9rem; font-weight: 700; color: #B91C1C; margin-bottom: 9px; }
.terminos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.terminos-lista li { position: relative; padding-left: 22px; font-size: 0.82rem; color: #7F1D1D; line-height: 1.55; }
/* La viñeta va en CSS para que el admin capture texto limpio, sin emojis */
.terminos-lista li::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: #DC2626; font-size: 0.74rem; }

/* Depósito con tarjeta: bloque opcional bajo la transferencia */
.pay-tarjeta { margin-top: 16px; }
.pay-tarjeta-sep { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.pay-tarjeta-sep::before, .pay-tarjeta-sep::after { content: ''; flex: 1; height: 1px; background: var(--border, #E5E7EB); }

/* =========================================
   BOLETO DIGITAL PREMIUM DEL CLIENTE
========================================= */
.ticket-bg { background-color: transparent !important; box-shadow: none !important; padding: 0 !important; }

.boleto { width: 100%; max-width: 360px; margin: 0 auto; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 26px 60px -14px rgba(0,0,0,0.6); position: relative; text-align: left; }
.boleto-top { position: relative; overflow: hidden; background: linear-gradient(150deg, #262B33 0%, #14171F 45%, #0A0C11 100%); color: #fff; padding: 30px 24px 32px; text-align: center; }
.boleto-hero { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
.boleto-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(150deg, rgba(23,27,35,0.80) 0%, rgba(15,18,26,0.90) 48%, rgba(10,12,17,0.95) 100%); }
/* Brillo sutil tipo carbón pulido */
.boleto-top::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.10), transparent 60%); pointer-events: none; }
.boleto-logo { position: relative; height: 82px; width: auto; object-fit: contain; filter: brightness(0) invert(1); margin: 0 auto 16px; display: block; }
.boleto-estado { position: absolute; top: 16px; right: 16px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 5px 11px; border-radius: 20px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(4px); }
/* El NOMBRE DEL TOUR es el protagonista */
.boleto-tour { position: relative; font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* El folio queda discreto debajo */
.boleto-folio { position: relative; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; margin-top: 8px; color: rgba(255,255,255,0.62); }

/* Perforación con muescas (troquel) */
.boleto-perf { position: relative; height: 0; border-top: 2px dashed #E5E7EB; }
.boleto-perf::before, .boleto-perf::after { content: ''; position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: rgba(17, 24, 39, 0.78); }
.boleto-perf::before { left: -12px; }
.boleto-perf::after { right: -12px; }

.boleto-body { padding: 22px 24px 26px; }
.boleto-data { display: flex; flex-direction: column; margin-bottom: 20px; }
.boleto-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid #F1F3F6; }
.boleto-row:last-child { border-bottom: none; }
.boleto-row span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.boleto-row strong { font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--text-dark); font-weight: 700; text-align: right; }
/* Pasajeros del boleto: uno por línea, alineados a la izquierda */
.boleto-row-pax { flex-direction: column; align-items: flex-start; gap: 6px; }
.boleto-pax { width: 100%; }
.boleto-pax div { font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--text-dark); font-weight: 700; padding: 1px 0; }

.boleto-qr-wrap { display: flex; justify-content: center; }
.boleto-qr { display: inline-flex; padding: 14px; background: #fff; border: 1px solid #EEF0F3; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); line-height: 0; }
.boleto-qr img, .boleto-qr canvas { display: block; }
.boleto-scan { text-align: center; font-size: 0.74rem; color: var(--text-muted); margin-top: 12px; letter-spacing: 0.3px; }
.boleto-scan i { color: var(--primary-text); }

.ticket { background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 100%; max-width: 380px; margin: 0 auto; position: relative; }
.ticket-header { background: var(--primary); color: var(--white); padding: 25px 20px; text-align: center; border-bottom: 3px dashed rgba(255, 255, 255, 0.4); position: relative; }
.ticket-header h3 { color: var(--white); margin: 10px 0 5px 0; font-weight: 800; font-size: 1.6rem; }
.ticket-body { padding: 25px 20px; display: flex; flex-direction: column; gap: 15px; background: #fff; }
.ticket-info p { margin-bottom: 10px; font-size: 0.95rem; color: var(--text-dark); text-align: left; border-bottom: 1px solid #E5E7EB; padding-bottom: 5px; }
.ticket-qr { text-align: center; padding-top: 10px; }
.ticket-qr img { border: 5px solid #fff; border-radius: 10px; box-shadow: var(--shadow); }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 130px; width: 30px; height: 30px; background-color: rgba(17, 24, 39, 0.75); border-radius: 50%; z-index: 10; }
.ticket::before { left: -15px; }
.ticket::after { right: -15px; }

/* =========================================
   ESTILOS COMPLEMENTARIOS DEL CARRUSEL
========================================= */
/* Mismo criterio que la card del catálogo: el marco toma la proporción real de
   la 1ª foto (--car-ar, lo calcula ajustarAltoCarrusel() en main.js) en vez de
   los 230px fijos que traía, que recortaban los flyers y los dejaban con zoom. */
.carousel-container { position: relative; width: 100%; aspect-ratio: var(--car-ar, 3 / 2); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: #E5E7EB; }
.carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.carousel-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; flex-shrink: 0; will-change: transform; backface-visibility: hidden; }
/* Animación al cambiar de foto. Ojo, TERMINA en scale(1): a diferencia del Ken
   Burns de las cards (que se queda en el estado final), aquí el avance es manual
   y la imagen se queda fija mucho rato, así que no puede quedar acercada. */
.carousel-img.entra { animation: car-entra 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes car-entra { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Flechas: ahora son el ÚNICO control (ya no hay avance solo), así que se
   ocultan cuando el tour trae una sola foto — no llevarían a ningún lado. */
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; border: none; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.carousel-arrow:hover { background: rgba(0,0,0,0.72); }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.carousel-container.single .carousel-arrow { display: none; }

/* =========================================
   RESPONSIVE DESIGN (CLIENTE Y ADMIN)
========================================= */
@media (max-width: 768px) {
    /* CLIENTE */
    .navbar { flex-direction: row; justify-content: space-between; padding: 1rem 5%; }
    .catalog-header { flex-direction: column; align-items: flex-start; }
    .filters { overflow-x: auto; padding-bottom: 5px; width: 100%; }
    .filter-btn { white-space: nowrap; }
    
    .booking-grid { grid-template-columns: 1fr; gap: 20px; }
    /* En móvil el precio y los datos rápidos se centran (en desktop van a la izquierda) */
    .booking-right #modal-trip-price { text-align: center; }
    .reserva-fact { align-items: center; text-align: center; }
    .checkout-grid { grid-template-columns: 1fr; gap: 16px; }
    .modal { align-items: flex-start; overflow-y: auto; }
    .modal-content { max-height: none; }
}

/* =========================================
   TEMA OSCURO (cliente) — se activa con data-theme="dark" en <html>
   Nota: --white se mantiene blanco (texto sobre primario); las superficies
   que usaban var(--white) como fondo se sobrescriben aquí explícitamente.
========================================= */
:root[data-theme="dark"] {
    --secondary: #242427;       /* chips y superficies sutiles (carbón) */
    --text-dark: #ECECEE;
    --text-muted: #A1A1AA;
    --shadow: 0 6px 16px -6px rgba(0,0,0,0.7);
    --shadow-hover: 0 18px 34px -12px rgba(0,0,0,0.75);
    color-scheme: dark;
}
:root[data-theme="dark"] body { background-color: #0C0C0E; }

/* Superficies que en claro eran var(--white) — tonos carbón/negro */
:root[data-theme="dark"] .navbar { background-color: #141416; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
:root[data-theme="dark"] .navbar.scrolled { background: rgba(20,20,22,0.85); border-bottom-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .trip-card,
:root[data-theme="dark"] .skeleton-card { background: #1A1A1D; border-color: #2E2E33; }
:root[data-theme="dark"] .modal-content { background: #1A1A1D; box-shadow: 0 24px 50px -12px rgba(0,0,0,0.8); }

/* Menú hamburguesa */
:root[data-theme="dark"] .menu-toggle { color: var(--text-dark); }
:root[data-theme="dark"] .menu-toggle:hover { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .nav-dropdown { background: rgba(24,24,27,0.98); border-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .drawer-link:hover { background: rgba(255,255,255,0.07); }

/* Filtros del catálogo */
:root[data-theme="dark"] .filter-btn { background: #1A1A1D; border-color: #2E2E33; }
:root[data-theme="dark"] .filter-btn.active,
:root[data-theme="dark"] .filter-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Buscador, selector de orden y chips de mes: los tres usaban var(--white) de
   fondo, que en oscuro SIGUE siendo blanco, así que quedaban como parches
   claros sobre la página. El select era el peor caso: fondo blanco con
   color:var(--text-dark), que en oscuro es casi blanco → texto invisible.
   Se igualan al gris carbón de las cards para no romper lo visual. */
:root[data-theme="dark"] .buscador-tours input,
:root[data-theme="dark"] .orden-tours select,
:root[data-theme="dark"] .chip-mes { background: #1A1A1D; border-color: #2E2E33; }
:root[data-theme="dark"] .buscador-tours input,
:root[data-theme="dark"] .orden-tours select { color: var(--text-dark); }
:root[data-theme="dark"] .buscador-tours input::placeholder { color: #71717A; }
/* El desplegable nativo: color-scheme ya lo oscurece en casi todos, esto cubre
   los que no hacen caso cuando el select trae fondo propio. */
:root[data-theme="dark"] .orden-tours select option { background: #1A1A1D; color: var(--text-dark); }
:root[data-theme="dark"] .buscador-limpiar { background: #2E2E33; }
/* Sobre fondo oscuro el acento va con --primary-soft: --primary-text es la
   versión con contraste pensada para fondos CLAROS y aquí se apaga. */
:root[data-theme="dark"] .buscador-limpiar:hover { background: rgba(var(--primary-rgb), 0.28); color: var(--primary-soft); }
:root[data-theme="dark"] .chip-mes:hover { color: var(--primary-soft); }
:root[data-theme="dark"] .sin-resultados i { color: var(--primary-soft); }

/* Inputs / selects */
:root[data-theme="dark"] .premium-input,
:root[data-theme="dark"] .premium-select { background: #141416; border-color: #2E2E33; color: var(--text-dark); }
:root[data-theme="dark"] .premium-input:focus,
:root[data-theme="dark"] .premium-select:focus { background: #141416; }
:root[data-theme="dark"] .premium-input::placeholder { color: #71717A; }

/* Contornos claros y chips hardcoded */
:root[data-theme="dark"] .boarding-option,
:root[data-theme="dark"] .tier-option,
:root[data-theme="dark"] .tier-option-multi,
:root[data-theme="dark"] .mr-card { border-color: #2E2E33; }
:root[data-theme="dark"] .boarding-option.selected,
:root[data-theme="dark"] .tier-option.selected { background: rgba(255,255,255,0.06); }

/* Contador +/- del modal (antes: blanco sobre blanco → invisible) */
:root[data-theme="dark"] .counter-container { background: #141416; }
:root[data-theme="dark"] .counter-btn { background: #2E2E33; color: var(--text-dark); box-shadow: none; }
:root[data-theme="dark"] .counter-btn:hover { background: var(--primary); color: #fff; }

/* Hora del abordaje en blanco (no azul) */
:root[data-theme="dark"] .boarding-option-time { color: #fff; background: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .boarding-option.selected .boarding-option-time { background: rgba(255,255,255,0.16); }

/* Otros chips claros */
:root[data-theme="dark"] .tier-qty-btn { background: #141416; }
:root[data-theme="dark"] .date-chip,
:root[data-theme="dark"] .modal-unit-line { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .modal-unit-line, :root[data-theme="dark"] .modal-unit-line i { color: var(--text-dark); }
/* Al .date-chip se le oscureció el fondo pero se le quedó el texto en
   --primary-text (pensado para fondo blanco): quedaba acento oscuro sobre
   oscuro. Su pareja en oscuro es --primary-soft. */
:root[data-theme="dark"] .date-chip { color: var(--primary-soft); }

/* Número de cuenta / CLABE (antes: texto claro sobre recuadro blanco) */
:root[data-theme="dark"] .copy-account { background: #141416; border-color: var(--primary); }
:root[data-theme="dark"] .copy-account:hover { background: #1A1A1D; }
:root[data-theme="dark"] .copy-account-number { color: var(--text-dark); }
/* Se quedaba en --primary-text (contraste para fondo claro) sobre el carbón */
:root[data-theme="dark"] .copy-account-icon { color: var(--primary-soft); }

/* El monto a transferir seguía en blanco dentro del modal oscuro, y su
   etiqueta usa --text-muted, que en oscuro es gris CLARO: sobre blanco casi
   no se leía. */
:root[data-theme="dark"] .transfer-amount { background: #141416; }
:root[data-theme="dark"] .transfer-amount-value,
:root[data-theme="dark"] .transfer-amount i { color: var(--primary-soft); }

/* Resto de superficies claras que se quedaban atoradas en el tema oscuro.
   Todas caían en el mismo error: fondo claro fijo con un color de texto que SÍ
   cambia con el tema, así que en oscuro quedaba claro sobre claro. */
:root[data-theme="dark"] .copy-account.copied { background: rgba(16,185,129,0.18); }
:root[data-theme="dark"] .tier-qty-btn { color: var(--primary-soft); }
:root[data-theme="dark"] .mr-btn-abonar { background: #141416; color: var(--primary-soft); }
/* Botón de tour agotado: gris claro con texto gris claro, ilegible */
:root[data-theme="dark"] .trip-card.is-sold-out .btn-reserve,
:root[data-theme="dark"] .trip-card.is-sold-out .btn-reserve:hover { background: #2E2E33; color: #71717A; }
:root[data-theme="dark"] .itinerary-item-line { background: #2E2E33; }
/* Fondo del marco mientras carga la foto: en claro pasa desapercibido, en
   oscuro parpadeaba un rectángulo gris claro al abrir el modal. */
:root[data-theme="dark"] .carousel-container { background: #141416; }

/* Footer: se mantiene oscuro fijo */
:root[data-theme="dark"] .site-footer { background: #060607; }

/* NOTA: los estilos del panel de administración (.sidebar, .menu-item,
   .admin-*, .panel, .stat-*, .tour-box, .reserva-*, .ticket-pro, etc.)
   viven ahora en css/admin.css para mantener cliente y admin aislados. */