/* =========================================
   ESTILOS GENERALES Y RESETEO (ANTI-OVERFLOW)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body { background-color: #f4f6f8; color: #333; line-height: 1.6; overflow-x: hidden; width: 100%; position: relative; }
/* Regla de oro para imágenes en móviles: nunca exceden su contenedor */
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   ENCABEZADO Y MENÚ DE NAVEGACIÓN
   ========================================= */
header { background-color: #2c3e50; color: white; display: flex; justify-content: space-between; align-items: center; padding: 15px 50px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.logo h1 { font-weight: 300; font-size: 24px; }
.logo span { font-weight: 600; color: #27ae60; }

nav .menu { list-style: none; display: flex; }
nav .menu > li { position: relative; margin-left: 20px; }
nav .menu a { color: white; text-decoration: none; font-weight: 600; padding: 10px 15px; display: block; transition: color 0.3s ease; }
.active-link { color: #27ae60 !important; }

nav .menu > li > a { position: relative; }
nav .menu > li > a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: #27ae60; border-radius: 2px; transition: width 0.3s ease; }
nav .menu > li > a:hover { color: #27ae60; }
nav .menu > li > a:hover::after { width: 70%; }

.dropdown-content { display: none; position: absolute; background-color: #34495e; min-width: 180px; box-shadow: 0px 8px 20px rgba(0,0,0,0.3); z-index: 1; list-style: none; border-radius: 8px; top: 100%; left: 0; overflow: hidden; }
.dropdown-content li a { position: relative; color: white; padding: 12px 20px; border-bottom: 1px solid #2c3e50; transition: all 0.3s ease; z-index: 1; overflow: hidden; font-weight: 500;}
.dropdown-content li a:hover { padding-left: 30px; color: #ffffff; background-color: #27ae60; }
.dropdown:hover .dropdown-content { display: block; animation: fadeInMenu 0.3s ease-in-out; }
@keyframes fadeInMenu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   BANNERS HERO (PORTADAS)
   ========================================= */
.hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('img/playa.png') center/cover no-repeat; min-height: 70vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; padding: 40px 20px; position: relative; }
.hero-interna { min-height: 40vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; padding: 40px 20px; }
.hero-localidades { background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.7)), url('img/info/localidades.jpg') center/cover no-repeat; }
.hero-circuitos { background: linear-gradient(rgba(39, 174, 96, 0.8), rgba(44, 62, 80, 0.9)), url('img/circuitos/circuitos.jpg') center/cover no-repeat; }
.hero-servicios { background: linear-gradient(rgba(211, 84, 0, 0.8), rgba(44, 62, 80, 0.9)), url('img/circuitos/rural.jpg') center/cover no-repeat; }
.hero-eventos { background: linear-gradient(rgba(26, 37, 47, 0.85), rgba(44, 62, 80, 0.9)), url('img/eventos.jpg') center/cover no-repeat; }

.hero-content { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 800px; }
.hero-content h2 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); font-weight: 700; line-height: 1.2; }
.hero-interna .hero-content h2 { font-size: 2.5rem; color: #2ecc71; }
.hero-subtitle { font-family: 'Playfair Display', serif; font-style: italic; color: #f1c40f; font-size: 1.5rem; margin-bottom: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.hero-separator { width: 60px; height: 3px; background-color: #2ecc71; margin: 10px 0 20px 0; border-radius: 2px; }

/* Indicador Scroll Bouncing */
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: white; animation: bounce 2s infinite; z-index: 10; opacity: 0.8; }
.scroll-indicator svg { width: 35px; height: 35px; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-15px) translateX(-50%); } 60% { transform: translateY(-7px) translateX(-50%); } }

/* Botones y Animaciones */
.btn { background-color: #27ae60; color: white; padding: 12px 25px; text-decoration: none; font-weight: 600; border-radius: 30px; transition: all 0.3s; display: inline-block; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.4); margin-top: 15px; }
.btn:hover { background-color: #219150; transform: translateY(-2px); }
.btn-secundario { display: inline-block; color: #27ae60; text-decoration: none; font-weight: 600; border: 2px solid #27ae60; padding: 8px 20px; border-radius: 30px; transition: all 0.3s; margin-top: 15px; }
.btn-secundario:hover { background-color: #27ae60; color: white; }

.animate-fade-up { animation: fadeUp 1s ease-out forwards; opacity: 0; transform: translateY(20px); }
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* =========================================
   PÁGINA DE INICIO: INTRODUCCIÓN MODERNA
   ========================================= */
main#descubre { padding: 60px 20px; max-width: 1200px; margin: 0 auto; width: 100%; overflow: hidden; }

.intro-moderna { display: flex; align-items: center; gap: 60px; margin-bottom: 80px; padding: 20px 0; }
.intro-text { flex: 1; }
.intro-subtitle { font-family: 'Playfair Display', serif; font-style: italic; color: #27ae60; font-size: 1.2rem; display: block; margin-bottom: 5px; }
.intro-text h2 { font-size: 3rem; color: #2c3e50; font-family: 'Georgia', serif; line-height: 1.2; margin-bottom: 10px; }
.intro-text h2 span { color: #d35400; font-style: italic; }
.separador-hoja { font-size: 1.5rem; margin-bottom: 20px; }
.intro-text p { font-size: 1.1rem; color: #555; margin-bottom: 15px; line-height: 1.7; }

.intro-images { flex: 1; position: relative; min-height: 450px; width: 100%; display: flex; justify-content: center; align-items: center; }
.intro-images img { border-radius: 12px; object-fit: cover; position: absolute; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.img-main { width: 75%; height: 85%; right: 0; top: 0; z-index: 1; border: 8px solid white; }
.img-sec { width: 55%; height: 60%; left: 0; bottom: 0; z-index: 2; border: 8px solid white; }

.experience-badge { position: absolute; top: 30px; left: 10px; background: #27ae60; color: white; padding: 15px; border-radius: 50%; width: 100px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 3; box-shadow: 0 10px 20px rgba(39, 174, 96, 0.4); border: 4px solid white; }
.experience-badge .number { font-weight: 700; font-size: 1.8rem; line-height: 1; }
.experience-badge .text { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; line-height: 1.1; margin-top: 2px;}

/* Títulos centrados */
.section-title-center { text-align: center; margin-bottom: 40px; }
.section-title-center h2 { font-size: 2.5rem; color: #2c3e50; font-family: 'Georgia', serif; margin-bottom: 10px; }
.section-title-center h2 span { color: #27ae60; font-style: italic; }
.section-title-center p { color: #7f8c8d; font-size: 1.1rem; }

/* =========================================
   GRILLAS: TARJETAS INMERSIVAS (INICIO Y LOCALIDADES)
   ========================================= */
/* El min() asegura que nunca supere el 100% de la pantalla del celular */
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 25px; width: 100%; }

.card-inmersiva { position: relative; border-radius: 16px; overflow: hidden; height: 320px; display: block; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); cursor: pointer; background: #2c3e50; }
.card-inmersiva img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.card-inmersiva:hover img { transform: scale(1.1); }

.card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: white; transition: background 0.3s ease; }
.card-inmersiva:hover .card-overlay { background: linear-gradient(to top, rgba(39,174,96,0.95) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); }

.card-icon { font-size: 2rem; margin-bottom: 10px; transform: translateY(20px); opacity: 0; transition: all 0.4s ease; }
.card-inmersiva:hover .card-icon { transform: translateY(0); opacity: 1; }
.card-overlay h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.card-overlay p { font-size: 0.9rem; color: #ecf0f1; margin-bottom: 15px; line-height: 1.5; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.card-inmersiva .card-accion { position: relative; color: #f1c40f; font-size: 0.9rem; display: inline-block; font-weight: 600; }
.card-inmersiva:hover .card-accion { color: white; }

/* Tags para Localidades */
.card-inmersiva .card-tags { margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
.card-inmersiva .tag-circuito { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.5); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; text-decoration: none; backdrop-filter: blur(5px); transition: 0.3s; }
.card-inmersiva .tag-circuito:hover { background: #27ae60; border-color: #27ae60; }

/* =========================================
   SECCIÓN SEMANA SANTA Y PLANIFICACIÓN
   ========================================= */
.ss-magdalena-section { background-color: #fcfafc; padding: 70px 20px; border-top: 2px solid #512B58; border-bottom: 2px solid #512B58; margin: 70px 0; border-radius: 12px; box-shadow: 0 10px 40px rgba(81, 43, 88, 0.05); }
.ss-container { max-width: 1100px; margin: 0 auto; width: 100%; }
.ss-header { text-align: center; margin-bottom: 50px; }
.ss-badge { display: inline-block; background-color: #D4AF37; color: #fff; padding: 6px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; }
.ss-header h2 { color: #512B58; font-size: 2.8rem; margin: 0 0 15px 0; font-family: 'Georgia', serif; }
.ss-header p { color: #555; max-width: 800px; margin: 0 auto; }

.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 30px; width: 100%; }
.ss-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.06); border-bottom: 4px solid #512B58; display: flex; flex-direction: column; }
.ss-card-image { position: relative; height: 220px; width: 100%; }
.ss-card-image img { width: 100%; height: 100%; object-fit: cover; }
.ss-category { position: absolute; bottom: 15px; left: 15px; background: rgba(81, 43, 88, 0.95); color: #fff; padding: 6px 14px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }
.ss-card-content { padding: 25px; flex-grow: 1; }
.ss-card-content h3 { color: #2c3e50; font-size: 1.3rem; margin-bottom: 10px; }
.ss-location { color: #D4AF37; font-size: 0.9rem; font-weight: 600; margin-bottom: 15px; }
.ss-description { color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }

.planifica-visita, .mapa-ubicacion { padding: 60px 20px; background-color: #fafafa; border-top: 1px solid #eeeeee; }
.planifica-header { max-width: 900px; margin: 0 auto 50px auto; text-align: center; }
.planifica-header h2 { font-family: 'Georgia', serif; font-size: 3rem; color: #2c3e50; }
.planifica-header h2 span { color: #d35400; font-style: italic; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; width: 100%; }
.info-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 30px 20px; display: flex; align-items: flex-start; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.info-card svg { width: 28px; height: 28px; fill: none; stroke: #d35400; stroke-width: 2; flex-shrink: 0;}
.mapa-iframe-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 5px solid #d35400; }
.mapa-iframe-wrapper iframe { display: block; width: 100%; height: 400px; }

/* =========================================
   PÁGINA LOCALIDADES (TOWN INTRO)
   ========================================= */
.main-content { padding: 60px 20px; max-width: 1200px; margin: 0 auto; width: 100%; }
.town-intro { text-align: center; max-width: 800px; margin: 0 auto 40px auto; padding: 0 15px; animation: fadeInUp 0.6s ease-out; }
.town-intro h2 { font-family: 'Georgia', serif; font-size: 2.8rem; color: #2c3e50; margin-bottom: 10px; }
.town-intro h2 span { color: #27ae60; font-style: italic; }
.town-intro p { font-size: 1.1rem; color: #555; line-height: 1.7; }
.town-separator { width: 50px; height: 3px; background-color: #d35400; margin: 20px auto; border-radius: 2px; }

/* Menú de filtros localidades */
.filtros-container { display: flex; justify-content: center; margin-bottom: 40px; width: 100%; overflow-x: auto; padding-bottom: 10px; }
.servicios-filtros { display: flex; gap: 10px; flex-wrap: nowrap; /* Evita que se rompan en movil, hace scroll */ }
.filtro-btn { background: transparent; border: 2px solid #27ae60; color: #27ae60; padding: 8px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.filtro-btn:hover, .filtro-btn.activo { background: #27ae60; color: white; }

/* =========================================
   PÁGINA CIRCUITOS (OVERLAP EDITORIAL)
   ========================================= */
.circuitos-editorial-container { padding: 80px 20px; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 100px; width: 100%; overflow: hidden; }
.circuito-item { display: flex; align-items: center; position: relative; width: 100%; }
.circuito-item.reverse { flex-direction: row-reverse; }

.circuito-visual { width: 55%; height: 450px; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0,0,0,0.1); z-index: 1; }
.circuito-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.circuito-item:hover .circuito-visual img { transform: scale(1.05); }

.circuito-icono { position: absolute; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.9); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.circuito-item.reverse .circuito-icono { left: auto; right: 20px; }

/* Caja que se superpone a la imagen */
.circuito-info { width: 50%; background: #ffffff; padding: 50px 40px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); z-index: 2; margin-left: -5%; border-top: 5px solid #27ae60; }
.circuito-item.reverse .circuito-info { margin-left: 0; margin-right: -5%; border-top-color: #d35400; }

.circuito-label { display: block; font-family: 'Playfair Display', serif; font-style: italic; color: #7f8c8d; font-size: 1.1rem; margin-bottom: 5px; }
.circuito-titulo { font-family: 'Georgia', serif; font-size: 2.5rem; color: #2c3e50; margin-bottom: 15px; line-height: 1.2; }
.circuito-linea { width: 50px; height: 3px; background-color: #27ae60; margin-bottom: 20px; border-radius: 2px; }
.circuito-item.reverse .circuito-linea { background-color: #d35400; }
.circuito-desc { color: #555; font-size: 1.05rem; line-height: 1.7; margin-bottom: 30px; }

.circuito-destinos { background: #f8f9fa; padding: 15px 20px; border-radius: 12px; border: 1px solid #edf2f7; }
.destinos-titulo { display: block; font-size: 0.85rem; text-transform: uppercase; color: #a0aec0; font-weight: 700; margin-bottom: 10px; }
.destinos-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.destinos-tags a { background: white; color: #2c3e50; border: 1px solid #e2e8f0; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
.destinos-tags a:hover { background: #27ae60; color: white; border-color: #27ae60; transform: translateY(-2px); }
.circuito-item.reverse .destinos-tags a:hover { background: #d35400; border-color: #d35400; }

.reveal { opacity: 0; transform: translateY(60px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* =========================================
   DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
   ========================================= */

/* Menú móvil rápido (Solo visible en pantallas pequeñas) */
.mobile-quick-nav { display: none; }

@media (max-width: 992px) {
    header { flex-direction: column; padding: 15px; }
    header nav { width: 100%; margin-top: 15px; }
    nav .menu { flex-wrap: wrap; justify-content: center; gap: 10px; }
    nav .menu > li { margin-left: 0; }
    .dropdown-content { position: static; display: none; min-width: 100%; background: #2c3e50; margin-top: 5px; }
    
    /* Inicio Intro */
    .intro-moderna { flex-direction: column; gap: 40px; }
    .intro-text { text-align: center; }
    .intro-images { min-height: 400px; }
    .img-main { width: 80%; right: 10%; }
    .img-sec { width: 60%; left: 5%; }
    
    /* Circuitos */
    .circuitos-editorial-container { gap: 60px; padding: 40px 15px; }
    .circuito-item, .circuito-item.reverse { flex-direction: column; }
    .circuito-visual { width: 100%; height: 350px; }
    .circuito-info, .circuito-item.reverse .circuito-info { width: 90%; margin-left: auto; margin-right: auto; margin-top: -60px; padding: 40px 30px; }
}

@media (max-width: 768px) {
    /* Barra Rápida Móvil */
    .mobile-quick-nav { display: flex; gap: 10px; padding: 15px; overflow-x: auto; scrollbar-width: none; background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-radius: 12px; margin: -20px 15px 30px 15px; position: relative; z-index: 10; -webkit-overflow-scrolling: touch; }
    .mobile-quick-nav::-webkit-scrollbar { display: none; }
    .mqn-item { flex: 0 0 auto; background-color: #f4f6f8; padding: 10px 16px; border-radius: 30px; color: #2c3e50; text-decoration: none; font-weight: 600; font-size: 0.9rem; border: 1px solid #e2e8f0; }
    
    .hero { min-height: 60vh; padding: 60px 15px; }
    .hero-content h2 { font-size: 2.2rem; }
    main#descubre, .main-content { padding: 40px 15px; }
    .ss-magdalena-section { padding: 40px 15px; }
    .ss-header h2 { font-size: 2.2rem; }
}

@media (max-width: 576px) {
    /* Ajustes finos para celulares pequeños */
    .intro-text h2 { font-size: 2.2rem; }
    .intro-images { min-height: 280px; }
    .img-main { width: 100%; right: 0; border-width: 4px; }
    .img-sec { display: none; /* Oculta la 2da imagen en celulares muy chicos para evitar overflow vertical */ }
    .experience-badge { width: 80px; height: 80px; top: -10px; padding: 5px; }
    .experience-badge .number { font-size: 1.4rem; }
    
    .town-intro h2 { font-size: 2rem; }
    .section-title-center h2 { font-size: 2rem; }
    
    /* Circuitos */
    .circuito-visual { height: 250px; border-radius: 12px; }
    .circuito-info, .circuito-item.reverse .circuito-info { width: 95%; padding: 30px 20px; margin-top: -40px; border-radius: 12px; }
    .circuito-titulo { font-size: 1.8rem; }
    .circuito-desc { font-size: 0.95rem; }
}

/* =========================================
   FOOTER Y BOTÓN IR ARRIBA
   ========================================= */
footer { background-color: #2c3e50; color: white; text-align: center; padding: 25px 20px; border-top: 4px solid #27ae60; width: 100%; }
footer p { font-size: 0.9rem; color: #cbd5e1; }

.btn-scroll-top { position: fixed; bottom: 30px; right: 30px; background-color: #27ae60; color: white; width: 50px; height: 50px; border-radius: 50%; border: none; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s; }
.btn-scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-scroll-top:hover { background-color: #219150; transform: translateY(-5px); }
@media (max-width: 768px) { .btn-scroll-top { bottom: 20px; right: 20px; width: 45px; height: 45px; } }


/* =========================================
   SECCIÓN: SERVICIOS (TARJETAS Y FILTROS)
   ========================================= */
.servicios-main { padding: 60px 20px; max-width: 1350px; margin: 0 auto; width: 100%; }
.filtros-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px; align-items: center; }
.filtro-grupo { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; }
.filtro-label { font-weight: 700; color: #2c3e50; font-size: 1.1rem; }
.servicios-filtros { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; }
.filtro-btn { background-color: transparent; border: 2px solid #27ae60; color: #27ae60; padding: 8px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; white-space: nowrap; }
.filtro-btn:hover, .filtro-btn.activo { background-color: #27ae60; color: white; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3); }

/* Grilla Servicios con minmax dinámico */
.servicios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }

.servicio-card { background-color: white; border-radius: 12px; padding: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); border-top: 4px solid #2c3e50; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; display: flex; flex-direction: column; position: relative; }
.servicio-card:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.12); border-top: 4px solid #d35400; }
.servicio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.categoria-alojamiento { background-color: #e8f5e9; color: #2e7d32; } 
.categoria-gastronomia { background-color: #fff3e0; color: #e65100; } 
.categoria-utilidad    { background-color: #e3f2fd; color: #1565c0; } 
.categoria-transporte  { background-color: #f3e5f5; color: #6a1b9a; } 
.categoria-museo       { background-color: #e3f2fd; color: #1565c0; }
.categoria-salud       { background-color: #ffebee; color: #c62828; }
.categoria-recreacion  { background-color: #f1f8e9; color: #558b2f; }
.localidad { background-color: #f1f2f6; color: #576574; border: 1px solid #dfe4ea; }

.servicio-titulo { font-size: 1.15rem; color: #2c3e50; margin-bottom: 8px; font-weight: 700; line-height: 1.2; }
.servicio-desc { color: #555; font-size: 0.85rem; line-height: 1.5; margin-bottom: 10px; flex-grow: 1; }
.servicio-footer { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 12px; border-top: 1px dashed #ddd; }
.info-hover-container { position: relative; display: inline-block; }
.btn-info { background-color: #f1f2f6; color: #2c3e50; border: 1px solid #dfe4ea; padding: 5px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; outline: none; }
.btn-info:hover { background-color: #27ae60; color: white; border-color: #27ae60; box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3); }

/* Tooltip Servicios */
.info-tooltip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px); background-color: #2c3e50; padding: 15px 20px; border-radius: 8px; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 10; min-width: 240px; text-align: left; }
.info-hover-container::before { content: ''; position: absolute; width: 100%; height: 15px; top: -15px; left: 0; z-index: 9; }
.info-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; }
.info-hover-container:hover .info-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.info-tooltip-text p { font-size: 0.85rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; color: #ecf0f1; word-break: break-word;}
.info-tooltip-text a { color: #2ecc71; text-decoration: none; font-weight: 600; transition: color 0.3s; }
.info-tooltip-text a:hover { color: #27ae60; text-decoration: underline; }

.info-tooltip-socials { display: flex; justify-content: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; }
.info-tooltip-socials a { color: white; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); transition: background-color 0.3s, transform 0.3s; flex-shrink: 0;}
.info-tooltip-socials a:hover { background-color: #27ae60; transform: scale(1.15); }
.info-tooltip-socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Botón Ver Más Servicios */
.ver-mas-container { width: 100%; text-align: center; margin-top: 50px; }
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(39, 174, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}
.btn-ver-mas { background-color: #27ae60; color: white; border: none; padding: 16px 45px; font-size: 1.1rem; font-weight: 700; border-radius: 50px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3); display: inline-flex; align-items: center; gap: 12px; animation: pulse-btn 2.5s infinite; }
.btn-ver-mas:hover { background-color: #219150; transform: translateY(-4px); box-shadow: 0 15px 25px rgba(39, 174, 96, 0.4); animation: none; }
.btn-ver-mas svg { width: 22px; height: 22px; transition: transform 0.3s ease; }
.btn-ver-mas:hover svg { transform: translateY(4px); }



/* =========================================
   DISEÑO DE EVENTOS / AGENDA
   ========================================= */
.agenda-main { max-width: 1200px; padding: 60px 20px; width: 100%; }
.agenda-filtros-container { margin-bottom: 50px; display: flex; justify-content: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; width: 100%; overflow: hidden;}
.filtro-scroll-wrapper { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 5px; -webkit-overflow-scrolling: touch; width: 100%;}
.filtro-scroll-wrapper::-webkit-scrollbar { display: none; } 
.agenda-filtro-btn { background: none; border: none; font-size: 1rem; font-weight: 600; color: #a0aec0; cursor: pointer; padding: 8px 12px; position: relative; transition: color 0.3s ease; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; }
.agenda-filtro-btn:hover { color: #4a5568; }
.agenda-filtro-btn.activo { color: #2c3e50; }
.agenda-filtro-btn::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 3px; background-color: #27ae60; transform: scaleX(0); transition: transform 0.3s ease; }
.agenda-filtro-btn.activo::after { transform: scaleX(1); }

/* Grilla Eventos */
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 30px; }

.agenda-card { background: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); padding: 35px 30px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all 0.4s ease; border: 1px solid #f0f0f0; border-left: 4px solid #27ae60; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.agenda-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-left-color: #d35400; }
.agenda-num { position: absolute; top: -10px; right: 10px; font-family: 'Playfair Display', serif; font-size: 8rem; font-weight: 700; color: rgba(44, 62, 80, 0.03); line-height: 1; z-index: 0; pointer-events: none; transition: color 0.4s ease; }
.agenda-card:hover .agenda-num { color: rgba(211, 84, 0, 0.06); }
.agenda-card-header { position: relative; z-index: 1; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #edf2f7; }
.agenda-mes { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #2d3748; margin-bottom: 10px; line-height: 1.1;}
.agenda-desc { font-size: 0.95rem; color: #718096; line-height: 1.6; }
.agenda-card-body { position: relative; z-index: 1; flex-grow: 1; }
.agenda-lista { list-style: none; padding: 0; margin: 0; }
.agenda-lista li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; font-size: 0.95rem; padding: 8px 10px; border-radius: 8px; transition: background-color 0.3s ease; }
.agenda-lista li:hover { background-color: #f8f9fa; }
.agenda-lista li:last-child { margin-bottom: 0; }
.agenda-lista time { font-weight: 700; color: #d35400; white-space: nowrap; min-width: 60px; font-size: 0.9rem; letter-spacing: 0.5px; }
.agenda-lista span { color: #2d3748; font-weight: 500; line-height: 1.4; }

/* Eventos Vista Unificada (Al clickear un mes) */
.agenda-grid.single-view { display: flex; justify-content: center; align-items: center; width: 100%; }
.agenda-grid.single-view .agenda-card { width: 100%; max-width: 750px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); margin: 20px 0; }
.agenda-grid.single-view .agenda-card:hover { transform: translateY(-5px) scale(1.02) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); }
.agenda-grid.single-view .agenda-mes { font-size: 2.8rem; }
.agenda-grid.single-view .agenda-desc { font-size: 1.1rem; }
.agenda-grid.single-view .agenda-card::before { content: '✕ Volver al calendario'; position: absolute; top: 25px; right: 30px; font-size: 0.8rem; color: #a0aec0; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0; transition: opacity 0.3s ease, color 0.3s ease; z-index: 10; }
.agenda-grid.single-view .agenda-card:hover::before { opacity: 1; color: #d35400; }



/* =========================================
   AJUSTES RESPONSIVOS (SERVICIOS Y EVENTOS)
   ========================================= */

@media (max-width: 768px) {
    .servicios-main, .agenda-main { padding: 40px 15px; }
}

@media (max-width: 576px) {
    /* Filtros Servicios y Localidades */
    .filtros-container { gap: 20px; }
    .filtro-grupo { flex-direction: column; align-items: center; gap: 10px; }
    .servicios-filtros { justify-content: center; gap: 8px; }
    .filtro-btn { padding: 6px 14px; font-size: 0.9rem; }

    /* Tarjetas de servicios */
    .servicio-card { padding: 15px; }
    
    /* FIX: Tooltip centrado en pantallas pequeñas para evitar scroll horizontal */
    .info-tooltip { left: 50%; right: auto; transform: translateX(-50%) translateY(10px); width: max-content; max-width: 85vw; min-width: 200px; text-align: center; }
    .info-tooltip::after { left: 50%; transform: translateX(-50%); }
    .info-hover-container:hover .info-tooltip { transform: translateX(-50%) translateY(0); }
    .info-tooltip-socials { justify-content: center; }

    /* Agenda Eventos */
    .agenda-filtros-container { padding-bottom: 5px; }
    .agenda-filtro-btn { font-size: 0.85rem; padding: 6px 10px; }
    .agenda-card { padding: 25px 20px; }
    .agenda-mes { font-size: 1.8rem; }
    .agenda-grid.single-view .agenda-mes { font-size: 2.2rem; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   EXPERIENCIA MÓVIL HORIZONTAL — DISEÑO NATIVO APP          ║
   ║   Aplica en pantallas < 768px                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {

    /* ─────────────────────────────────────────────
       BODY: espacio inferior para la nav fija
       ───────────────────────────────────────────── */
    body {
        padding-bottom: 74px; /* altura de .mob-nav */
    }

    /* ─────────────────────────────────────────────
       HEADER: compacto, solo logo
       ───────────────────────────────────────────── */
    header {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px !important;
        min-height: 54px;
    }
    header .logo h1 { font-size: 18px; }

    /* Ocultar menú de navegación horizontal en móvil */
    header nav { display: none !important; }

    /* ─────────────────────────────────────────────
       BARRA DE NAVEGACIÓN INFERIOR — TIPO APP
       ───────────────────────────────────────────── */
    .mob-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 64px;
        background: #1a2a3a;
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -6px 24px rgba(0,0,0,.25);
        z-index: 9998;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: rgba(255,255,255,.45);
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        transition: color .2s;
        -webkit-tap-highlight-color: transparent;
        padding: 4px 0;
    }
    .mob-nav-item svg {
        width: 22px; height: 22px;
        stroke: currentColor; fill: none;
        stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round;
        transition: stroke .2s;
    }
    .mob-nav-item:active,
    .mob-nav-item.activo {
        color: #27ae60;
    }
    .mob-nav-item.activo svg { stroke: #27ae60; }
    /* Indicador activo */
    .mob-nav-item.activo::before {
        content: '';
        position: absolute;
        top: 0;
        width: 28px; height: 3px;
        background: #27ae60;
        border-radius: 0 0 3px 3px;
    }
    .mob-nav-item { position: relative; }

    /* ─────────────────────────────────────────────
       OCULTAR quick-nav vieja y botón scroll-top
       ───────────────────────────────────────────── */
    .mobile-quick-nav { display: none !important; }
    .btn-scroll-top { bottom: 78px !important; right: 14px !important; width: 40px !important; height: 40px !important; }

    /* ─────────────────────────────────────────────
       HERO — pantalla completa, centrado
       ───────────────────────────────────────────── */
    .hero {
        min-height: 55vh !important;
        padding: 30px 20px 50px !important;
    }
    .hero-content h2 { font-size: 1.85rem !important; }
    .hero-interna { min-height: 30vh !important; padding: 30px 16px !important; }
    .hero-interna .hero-content h2 { font-size: 1.6rem !important; }
    .hero-subtitle { font-size: 1rem !important; }

    /* ─────────────────────────────────────────────
       CARRUSEL HORIZONTAL UNIVERSAL
       Para cualquier grid de cards en móvil
       ───────────────────────────────────────────── */
    .h-scroll-row {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 14px;
        padding: 10px 16px 20px;
        /* Ocultar scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Permite que se vea el card siguiente (peek) */
        margin: 0 -16px;
    }
    .h-scroll-row::-webkit-scrollbar { display: none; }

    /* Cada card dentro de un carrusel */
    .h-scroll-row > * {
        flex: 0 0 82vw !important;
        max-width: 320px !important;
        min-width: 260px !important;
        scroll-snap-align: start;
        height: auto !important;
    }

    /* ─────────────────────────────────────────────
       GRILLAS → CARRUSEL en móvil
       ───────────────────────────────────────────── */
    .location-grid,
    .servicios-grid,
    .agenda-grid,
    .ss-grid,
    .cards-container,
    .info-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 10px 16px 20px !important;
        margin: 0 -16px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        flex-wrap: nowrap !important;
    }
    .location-grid::-webkit-scrollbar,
    .servicios-grid::-webkit-scrollbar,
    .agenda-grid::-webkit-scrollbar,
    .ss-grid::-webkit-scrollbar,
    .cards-container::-webkit-scrollbar,
    .info-grid::-webkit-scrollbar { display: none !important; }

    /* Cards individuales en carrusel */
    .location-grid > *,
    .servicios-grid > *,
    .ss-grid > *,
    .cards-container > *,
    .info-grid > * {
        flex: 0 0 78vw !important;
        max-width: 300px !important;
        min-width: 240px !important;
        scroll-snap-align: start !important;
        height: auto !important;
    }

    /* Cards de agenda: un poco más anchas */
    .agenda-grid > * {
        flex: 0 0 85vw !important;
        max-width: 340px !important;
        min-width: 260px !important;
        scroll-snap-align: start !important;
    }

    /* Altura fija para cards inmersivas (localidades) */
    .card-inmersiva {
        height: 260px !important;
        min-height: 260px !important;
    }

    /* ─────────────────────────────────────────────
       INDICADOR "DESLIZÁ" (hint visual)
       ───────────────────────────────────────────── */
    .swipe-hint {
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-size: .72rem;
        color: #999;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        margin-bottom: 4px;
        padding-left: 2px;
    }
    .swipe-hint svg {
        width: 16px; height: 16px;
        fill: none; stroke: #bbb; stroke-width: 2;
        animation: swipeAnim 1.8s ease-in-out infinite;
    }
    @keyframes swipeAnim {
        0%,100% { transform: translateX(0); opacity: .5; }
        50%      { transform: translateX(5px); opacity: 1; }
    }

    /* ─────────────────────────────────────────────
       CIRCUITOS: scroll horizontal en móvil
       ───────────────────────────────────────────── */
    .circuitos-editorial-container {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding: 20px 16px 30px !important;
        margin: 0 -16px !important;
        scrollbar-width: none !important;
        align-items: stretch !important;
    }
    .circuitos-editorial-container::-webkit-scrollbar { display: none !important; }

    /* Cada circuito = card compacta vertical */
    .circuito-item,
    .circuito-item.reverse {
        flex: 0 0 82vw !important;
        max-width: 320px !important;
        min-width: 270px !important;
        flex-direction: column !important;
        scroll-snap-align: start !important;
        background: #fff;
        border-radius: 20px !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
        overflow: hidden;
        border-top: 4px solid #27ae60 !important;
        height: auto !important;
    }
    .circuito-item.reverse { border-top-color: #d35400 !important; }

    .circuito-visual {
        width: 100% !important;
        height: 200px !important;
        border-radius: 0 !important;
        position: relative !important;
    }
    .circuito-info,
    .circuito-item.reverse .circuito-info {
        width: 100% !important;
        margin: 0 !important;
        padding: 22px 20px !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
    }
    .circuito-titulo { font-size: 1.5rem !important; }
    .circuito-desc { font-size: .9rem !important; }

    /* ─────────────────────────────────────────────
       PLANIFICA — stack vertical en móvil
       ───────────────────────────────────────────── */
    .planifica-visita { padding: 40px 16px !important; }
    .planifica-header h2 { font-size: 1.9rem !important; }

    /* ─────────────────────────────────────────────
       MAPA: ancho completo, más bajo
       ───────────────────────────────────────────── */
    .mapa-ubicacion { padding: 30px 16px !important; }
    .mapa-contenedor { flex-direction: column !important; gap: 20px !important; }
    .mapa-iframe-wrapper iframe { height: 240px !important; }

    /* ─────────────────────────────────────────────
       SECCIÓN SERVICIOS
       ───────────────────────────────────────────── */
    .servicios-main { padding: 30px 16px !important; }
    .filtros-container { gap: 12px !important; margin-bottom: 24px !important; }
    .filtro-grupo { gap: 8px !important; }

    /* Filtros en scroll horizontal */
    .servicios-filtros {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        padding-bottom: 4px;
    }
    .servicios-filtros::-webkit-scrollbar { display: none; }
    .filtro-btn { flex-shrink: 0; font-size: .82rem !important; padding: 7px 14px !important; }

    /* ─────────────────────────────────────────────
       EVENTOS — filtros en scroll
       ───────────────────────────────────────────── */
    .agenda-main { padding: 30px 16px !important; }
    .filtro-scroll-wrapper { gap: 12px !important; }
    .agenda-filtro-btn { font-size: .8rem !important; padding: 6px 10px !important; }

    /* ─────────────────────────────────────────────
       SS MAGDALENA SECTION
       ───────────────────────────────────────────── */
    .ss-magdalena-section { padding: 40px 16px !important; margin: 30px 0 !important; }
    .ss-header h2 { font-size: 1.8rem !important; }

    /* ─────────────────────────────────────────────
       LOCALIDADES: Intro de pueblo
       ───────────────────────────────────────────── */
    .main-content { padding: 30px 16px !important; }
    .town-intro h2 { font-size: 2rem !important; }

    /* ─────────────────────────────────────────────
       INTRO MODERNA (INICIO)
       ───────────────────────────────────────────── */
    .intro-moderna { flex-direction: column !important; gap: 24px !important; margin-bottom: 40px !important; }
    .intro-text { text-align: center !important; }
    .intro-text h2 { font-size: 1.9rem !important; }
    .intro-images { min-height: 240px !important; }
    .img-sec { display: none !important; }
    .img-main { width: 90% !important; right: 5% !important; height: 100% !important; }

    /* ─────────────────────────────────────────────
       TOOLTIP SERVICIOS — orientado al móvil
       ───────────────────────────────────────────── */
    .info-hover-container:hover .info-tooltip,
    .info-hover-container:focus-within .info-tooltip {
        opacity: 1; visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .info-tooltip {
        left: 50% !important; right: auto !important;
        transform: translateX(-50%) translateY(10px) !important;
        max-width: 88vw !important; min-width: 200px !important;
    }

    /* ─────────────────────────────────────────────
       AGENDA SINGLE VIEW
       ───────────────────────────────────────────── */
    .agenda-grid.single-view {
        flex-direction: column !important;
        overflow-x: hidden !important;
    }
    .agenda-grid.single-view > * {
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }

    /* ─────────────────────────────────────────────
       BENTO GRID (INICIO REDISEÑADO)
       ───────────────────────────────────────────── */
    .bento-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 10px 16px 20px !important;
        margin: 0 -5% !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        grid-template-columns: unset !important;
    }
    .bento-grid::-webkit-scrollbar { display: none !important; }
    .bento-card,
    .bento-c1, .bento-c2, .bento-c3,
    .bento-c4, .bento-c5, .bento-c6 {
        flex: 0 0 78vw !important;
        max-width: 300px !important;
        min-width: 250px !important;
        min-height: 280px !important;
        grid-column: unset !important;
        grid-row: unset !important;
        scroll-snap-align: start !important;
    }

    /* STATS en fila scrollable */
    .stats-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }
    .stats-grid::-webkit-scrollbar { display: none !important; }
    .stat-item {
        flex: 0 0 45vw !important;
        border-right: 1px solid rgba(255,255,255,.1);
        padding: 30px 16px !important;
    }
    .stat-divider { display: none !important; }

    /* Quick links en fila */
    .quick-links-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 10px 16px 20px !important;
        margin: 0 -5% !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    .quick-links-grid::-webkit-scrollbar { display: none !important; }
    .ql-card {
        flex: 0 0 82vw !important;
        max-width: 310px !important;
        min-height: 240px !important;
        scroll-snap-align: start !important;
    }

    /* Planifica V2 en fila */
    .planifica-v2-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 10px 16px 20px !important;
        margin: 0 -5% !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    .planifica-v2-grid::-webkit-scrollbar { display: none !important; }
    .pv2-card {
        flex: 0 0 72vw !important;
        max-width: 260px !important;
        scroll-snap-align: start !important;
    }

    /* SS V2 en fila */
    .ss-v2-cards {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 10px 16px 20px !important;
        margin: 0 -5% !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    .ss-v2-cards::-webkit-scrollbar { display: none !important; }
    .ss-v2-card {
        flex: 0 0 82vw !important;
        max-width: 310px !important;
        min-height: 360px !important;
        scroll-snap-align: start !important;
    }

    /* Mapa V2: columna simple */
    .mapa-v2-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .mapa-v2-frame iframe { height: 240px !important; }
    .mapa-v2-text h2 { font-size: 1.9rem !important; }

} /* fin @media 768px */


/* ─────────────────────────────────────────────────────────────────
   MOB-NAV: oculto en escritorio
   ───────────────────────────────────────────────────────────────── */
.mob-nav { display: none; }

/* Clase helper para secciones con hint de swipe */
.swipe-hint { display: none; }



/* =========================================
   ESTILOS ESPECÍFICOS DE EVENTOS
   Complementa a style.css
   ========================================= */

.evento-link {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.78em;
    font-weight: 600;
    color: #fff;
    background-color: var(--color-primary, #8B6914);
    padding: 2px 9px;
    border-radius: 20px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.2s, transform 0.2s;
    vertical-align: middle;
    white-space: nowrap;
}

.evento-link:hover {
    background-color: var(--color-accent, #5a3e0a);
    transform: translateX(2px);
}

/* =========================================
   FOOTER LEGAL (Privacidad / Términos)
   ========================================= */
.footer-legal {
    margin-top: 10px;
    font-size: 0.78rem;
    opacity: 0.65;
}
.footer-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}
.footer-legal a:hover {
    opacity: 1;
    color: #fff;
}