:root {
    --verde-vexa: #4CAF50;
    --naranja-vibrante: #FF9800;
    --azul-divertido: #03A9F4;
    --rosa-fiesta: #E91E63;
    --rojo-fuerte: #E53935; 
    --blanco: #FFFFFF;
    --gris-suave: #f4f4f4;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    color: #333;
    background-color: var(--blanco);
}

/* ==========================================
   NAVBAR
========================================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

header img { height: 60px; }
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { 
    text-decoration: none; 
    color: #333; 
    font-family: 'Poppins', sans-serif;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: 0.3s;
}
nav a:hover { color: var(--verde-vexa); }

/* ==========================================
   HERO 
========================================== */
.hero {
    background-image: linear-gradient(rgba(76, 175, 80, 0.85), rgba(76, 175, 80, 0.85)), url('img/vexafondo.jpeg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 5% 140px 5%; 
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10; 
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; 
}

.hero-text h1 { 
    font-family: 'Poppins', sans-serif; 
    font-size: 4rem; 
    margin: 0 0 20px 0; 
    line-height: 1.2; 
    letter-spacing: 2px;
    font-weight: 800;
    font-variant-ligatures: none;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.hero-text p { 
    font-size: 1.3rem; 
    margin-bottom: 40px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.btn-reserva {
    display: inline-block;
    background: var(--naranja-vibrante);
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-reserva:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.wave { position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0; }
.wave svg { position: relative; display: block; width: calc(100% + 1.3px); height: 80px; }
.wave .shape-fill { fill: #FFFFFF; }

/* ==========================================
   PROMOCIONES (MOTOR DE BANNERS)
========================================== */
.promociones-dinamicas { padding: 60px 5%; background-color: var(--gris-suave); text-align: center; }
.promociones-dinamicas h2 { font-family: 'Poppins', sans-serif; color: var(--rosa-fiesta); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; text-transform: uppercase;}
.promociones-dinamicas p { font-size: 1.2rem; color: #555; margin-bottom: 40px; }

.carrusel-promo-contenedor { position: relative; max-width: 500px; margin: 0 auto; display: flex; align-items: center; border-radius: 20px; }
.carrusel-promo-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100%; scrollbar-width: none; border-radius: 20px;}
.carrusel-promo-pista::-webkit-scrollbar { display: none; }
.carrusel-promo-img { flex: 0 0 100%; width: 100%; max-height: 700px; object-fit: contain; scroll-snap-align: center; cursor: pointer; display: block; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); background-color: transparent;}
.btn-promo-nav { background-color: var(--rosa-fiesta); color: white; border: none; width: 50px; height: 50px; font-size: 24px; cursor: pointer; position: absolute; z-index: 10; transition: 0.3s; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 4px 10px rgba(233,30,99,0.4); top: 50%; transform: translateY(-50%);}
.btn-promo-nav:hover { transform: translateY(-50%) scale(1.1); filter: brightness(1.1); }
.btn-promo-prev { left: -25px; }
.btn-promo-next { right: -25px; }

/* ==========================================
   PAQUETES
========================================== */
.paquetes { padding: 50px 5%; text-align: center; }
.paquetes h2 { font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 800; }
.grid-paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }

.card { border: 3px solid var(--naranja-vibrante); border-radius: 20px; padding: 30px 20px; transition: 0.3s; background: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }
.card h3 { font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 700; margin: 0 0 10px 0; }
.icono-paquete { font-size: 2.5rem; margin: 5px 0; opacity: 0.85; }
.precio-card { font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 800; margin: 15px 0; line-height: 1; letter-spacing: -1px; }

.btn-ver-mas { color: white; border: none; padding: 12px 20px; border-radius: 20px; font-weight: bold; cursor: pointer; margin-top: 5px; width: 100%; transition: 0.3s; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-size: 0.9rem; }
.card:hover .btn-ver-mas { filter: brightness(1.1); transform: scale(1.03); }

/* ==========================================
   NUEVA SECCIÓN: NÖX LOUNGE (MINIMALISTA Y OSCURA)
========================================== */
.seccion-lounge { padding: 60px 5%; background-color: #1a1a1a; color: white; text-align: center; border-top: 4px solid #aaa; border-bottom: 4px solid #aaa; }
.lounge-contenedor { max-width: 1000px; margin: 0 auto; }
.lounge-logo-img { max-width: 350px; margin-bottom: 40px; filter: drop-shadow(0 0 15px rgba(255,255,255,0.1)); }

.lounge-galeria-contenedor { width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.5); margin-bottom: 40px; background: #000; }
.lounge-carrusel-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;}
.lounge-carrusel-pista::-webkit-scrollbar { display: none; }
.lounge-img-card { flex: 0 0 100%; width: 100%; height: 500px; object-fit: cover; scroll-snap-align: center; cursor: pointer; transition: 0.5s; display: block;}

.lounge-descripcion { font-size: 1.25rem; color: #e5e5e5; line-height: 1.8; font-family: 'Nunito', sans-serif; padding: 0 20px; text-align: center; font-weight: 300; }

/* BOTÓN WHATSAPP LOUNGE */
.btn-lounge-whats {
    display: inline-block;
    background: linear-gradient(90deg, #2a2a2a, #111);
    color: #e5e5e5;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    border: 1px solid #555;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-lounge-whats i {
    color: #25D366;
    font-size: 1.3rem;
    margin-right: 10px;
}
.btn-lounge-whats:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 8px 25px rgba(255,255,255,0.1);
    border-color: #888;
    color: #fff;
}

/* ==========================================
   INSTALACIONES
========================================== */
.instalaciones-section { padding: 60px 5%; text-align: center; background-color: var(--gris-suave); border-top: 3px dashed #ddd; }
.instalaciones-section h2 { font-family: 'Poppins', sans-serif; color: var(--azul-divertido); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.instalaciones-section p { font-size: 1.2rem; color: #555; margin-bottom: 30px; }
.grid-instalaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.grid-instalaciones img, .grid-instalaciones video { width: 100%; height: 250px; object-fit: cover; border-radius: 15px; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.grid-instalaciones img:hover, .grid-instalaciones video:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

/* ==========================================
   CALENDARIO INTELIGENTE (TABS DUALES)
========================================== */
.calendario-section { padding: 60px 5%; text-align: center; background-color: white; }
.calendario-section h2 { font-family: 'Poppins', sans-serif; color: #333; font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.calendario-section p { font-size: 1.2rem; color: #555; margin-bottom: 30px; }

/* ESTILOS DE LOS BOTONES DE PESTAÑAS (SWITCH) */
.calendar-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.btn-tab {
    background: #f0f2f5;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #777;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-tab:hover {
    background: #e0e0e0;
}
.btn-tab.active-jardin {
    background: var(--verde-vexa);
    color: white;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
    transform: scale(1.05);
}
.btn-tab.active-lounge {
    background: linear-gradient(90deg, #333, #111);
    color: #D4AF37;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

.calendario-container { max-width: 500px; margin: 0 auto; background: white; border: 4px solid var(--azul-divertido); border-radius: 20px; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.mes-header { display: flex; justify-content: space-between; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--rosa-fiesta); margin-bottom: 20px; transition: 0.3s; }
.mes-header span { cursor: pointer; color: #ccc; transition: 0.3s; }
.mes-header span:hover { color: var(--azul-divertido); }
.mes-header span#mes-anio-header { color: var(--rosa-fiesta); cursor: default; transition: 0.3s; }
.dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); font-weight: bold; color: #888; margin-bottom: 15px; transition: 0.3s; }
.dias-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.dia { padding: 12px 0; border-radius: 12px; font-weight: bold; font-size: 1.1rem; transition: 0.3s; }
.dia.vacio { background-color: transparent; }
.dia.disponible { background-color: #E8F5E9; color: var(--verde-vexa); cursor: pointer; border: 2px solid var(--verde-vexa); box-shadow: 0 3px 6px rgba(76, 175, 80, 0.2); }
.dia.disponible:hover { background-color: var(--verde-vexa); color: white; transform: scale(1.1) translateY(-2px); box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4); }
.dia.ocupado { background-color: #FFEBEE; color: #D32F2F; text-decoration: line-through; opacity: 0.5; cursor: not-allowed; border: 2px solid transparent;}

/* ==========================================
   ESTILOS DEL CALENDARIO TEMA LOUNGE (NÖX)
========================================== */
.theme-lounge.calendario-container {
    background-color: #1a1a1a;
    border-color: #D4AF37;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}
.theme-lounge .mes-header {
    color: #FCF6BA;
}
.theme-lounge .mes-header span#mes-anio-header {
    background: linear-gradient(90deg, #BF953F, #FCF6BA, #B38728);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.theme-lounge .mes-header span { color: #666; }
.theme-lounge .mes-header span:hover { color: #D4AF37; }
.theme-lounge .dias-semana { color: #aaa; }
.theme-lounge .dia { color: #ccc; }
.theme-lounge .dia.vacio { background-color: transparent; }
.theme-lounge .dia.disponible {
    background-color: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    border-color: #D4AF37;
    box-shadow: 0 3px 6px rgba(212, 175, 55, 0.1);
}
.theme-lounge .dia.disponible:hover {
    background: linear-gradient(90deg, #BF953F, #FCF6BA, #B38728);
    color: #111;
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.4);
    border-color: transparent;
}
.theme-lounge .dia.ocupado {
    background-color: rgba(255, 255, 255, 0.05);
    color: #555;
    border-color: transparent;
}

/* ==========================================
   GALERÍA
========================================== */
.galeria-section { padding: 60px 5%; text-align: center; background-color: var(--gris-suave); }
.galeria-section h2 { font-family: 'Poppins', sans-serif; color: var(--verde-vexa); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.galeria-section p { font-size: 1.2rem; color: #555; margin-bottom: 30px; }
.carrusel-contenedor { position: relative; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; }
.carrusel-pista { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px; scrollbar-width: none; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-img { flex: 0 0 100%; max-height: 400px; object-fit: cover; border-radius: 20px; scroll-snap-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .carrusel-img { flex: 0 0 calc(50% - 15px); } }
@media (min-width: 1024px) { .carrusel-img { flex: 0 0 calc(33.333% - 15px); } }
.carrusel-btn { background-color: var(--naranja-vibrante); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 20px; cursor: pointer; position: absolute; z-index: 10; transition: 0.3s; }
.btn-prev { left: -20px; } .btn-next { right: -20px; }

/* ==========================================
   TESTIMONIOS
========================================== */
.testimonios-section { padding: 60px 5%; text-align: center; background-color: white; }
.testimonios-section h2 { font-family: 'Poppins', sans-serif; color: var(--naranja-vibrante); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.testimonios-section p { font-size: 1.2rem; color: #555; margin-bottom: 40px; }
.grid-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.tarjeta-testimonio { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; border-top: 5px solid var(--azul-divertido); }
.tarjeta-testimonio:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.estrellas { color: #FFC107; font-size: 1.2rem; margin-bottom: 15px; }
.tarjeta-testimonio p { font-style: italic; color: #666; font-size: 1.1rem; margin-bottom: 20px; line-height: 1.6; }
.tarjeta-testimonio h4 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #333; margin: 0; }

/* ==========================================
   FAQ
========================================== */
.faq-section { padding: 60px 5%; text-align: center; background-color: var(--gris-suave); }
.faq-section h2 { font-family: 'Poppins', sans-serif; color: var(--rosa-fiesta); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.faq-section p { font-size: 1.2rem; color: #555; margin-bottom: 40px; }
.faq-container { max-width: 800px; margin: 0 auto; text-align: left; }
.faq-item { background: white; border-radius: 15px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease; }
.faq-item summary { padding: 20px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; color: #333; cursor: pointer; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--rosa-fiesta); font-weight: 800; }
.faq-item[open] summary::after { content: '-'; }
.faq-item[open] { background: white; border: 2px solid var(--rosa-fiesta); box-shadow: 0 5px 15px rgba(233, 30, 99, 0.1); }
.faq-respuesta { padding: 0 20px 20px 20px; color: #555; font-size: 1.05rem; line-height: 1.6; }

/* ==========================================
   UBICACIÓN Y CONTACTO
========================================== */
.ubicacion-section { padding: 60px 5%; text-align: center; background-color: white; }
.ubicacion-section h2 { font-family: 'Poppins', sans-serif; color: var(--azul-divertido); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.ubicacion-section p { font-size: 1.2rem; color: #555; margin-bottom: 30px; }
.mapa-container { width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 20px; overflow: hidden; border: 5px solid var(--verde-vexa); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.mapa-container iframe { display: block; width: 100%; height: 400px; border: 0; }

.redes-section { padding: 60px 5%; text-align: center; background-color: var(--gris-suave); border-top: 3px dashed var(--rosa-fiesta); }
.redes-section h2 { font-family: 'Poppins', sans-serif; color: var(--rosa-fiesta); font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }

/* ==========================================
   BOTONES FLOTANTES SOCIALES
========================================== */
.redes-flotantes { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 999; }
.flotante-item { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; color: white; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.flotante-item:hover { transform: scale(1.1) translateX(-5px); animation: none; }
.facebook-bg { background-color: #1877F2; animation: pulso-fb 2s infinite; }
.instagram-bg { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); animation: pulso-ig 2s infinite; }
.whatsapp-bg { background-color: #25D366; animation: pulso-wa 2s infinite; }

@keyframes pulso-fb { 0% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(24, 119, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 119, 242, 0); } }
@keyframes pulso-ig { 0% { box-shadow: 0 0 0 0 rgba(225, 48, 108, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(225, 48, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 48, 108, 0); } }
@keyframes pulso-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* ==========================================
   MODALES (VENTANAS EMERGENTES)
========================================== */
.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); justify-content: center; align-items: center; }
.modal-content { background-color: white; padding: 40px; border-radius: 30px; text-align: center; max-width: 450px; width: 90%; position: relative; border: 5px solid var(--verde-vexa); box-shadow: 0 15px 30px rgba(0,0,0,0.3); animation: zoomIn 0.3s ease; max-height: 90vh; overflow-y: auto; }
.modal-paquete-amplio { border-color: var(--naranja-vibrante); }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cerrar-modal { position: absolute; top: 15px; right: 20px; color: #aaa; font-size: 30px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.cerrar-modal:hover { color: var(--rosa-fiesta); }

.precio-destacado { font-family: 'Poppins', sans-serif; font-size: 3.5rem; color: var(--naranja-vibrante); margin: 10px 0; font-weight: 800; }
.capacidad-paquete { font-size: 1.2rem; color: #666; font-weight: bold; }
.divisor-modal { height: 3px; background-color: var(--gris-suave); margin: 20px 0; border-radius: 10px; }
.lista-detalles { text-align: left; list-style: none; padding: 0; margin: 0; }
.lista-detalles li { padding: 10px 0; font-size: 1.1rem; color: #444; border-bottom: 1px dashed #eee; }
.check-icono { color: var(--verde-vexa); margin-right: 10px; }
.botones-paquete { display: flex; gap: 15px; margin-top: 25px; justify-content: center; }
.botones-paquete .btn-reserva, .botones-paquete .btn-rojo { flex: 1; margin-top: 0; }
.btn-rojo { display: inline-block; background-color: var(--rojo-fuerte); color: white; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3); transition: all 0.3s ease; border: none; cursor: pointer; text-align: center; }
.btn-rojo:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4); background-color: #C62828; }

.formulario-vexa { text-align: left; margin-top: 25px; }
.form-grupo-vexa { margin-bottom: 20px; display: flex; flex-direction: column; align-items: stretch; }
.form-grupo-vexa label { 
    display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 700; 
    color: var(--rosa-fiesta); margin-bottom: 8px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-grupo-vexa label i { margin-right: 8px; font-size: 1.1rem; }
.form-grupo-vexa input, .form-grupo-vexa select, .form-grupo-vexa textarea {
    width: 100%; display: block; padding: 14px 18px; border: 3px solid var(--azul-divertido); border-radius: 12px; 
    font-family: 'Nunito', sans-serif; font-size: 1rem; color: #333; box-sizing: border-box; background-color: #f8fafc; transition: all 0.3s ease;
}
.form-grupo-vexa input:focus, .form-grupo-vexa select:focus, .form-grupo-vexa textarea:focus {
    outline: none; border-color: var(--naranja-vibrante); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.15); transform: translateY(-2px); 
}
.form-grupo-vexa textarea { resize: vertical; min-height: 100px; }

.modal-icono { font-size: 50px; color: var(--naranja-vibrante); margin-bottom: 15px; }
.btn-modal-whatsapp { display: inline-block; background-color: #25D366; color: white; padding: 15px 25px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.1rem; margin-top: 20px; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4); transition: 0.3s; }
.btn-modal-whatsapp:hover { background-color: #128C7E; transform: scale(1.05); }

#modalLightbox { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center; }
#modalLightbox img, #modalLightbox video { max-width: 90%; max-height: 90vh; border-radius: 10px; box-shadow: 0 0 30px rgba(0,0,0,0.5); outline: none; }
.cerrar-lightbox { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 2001; }
.cerrar-lightbox:hover { color: var(--naranja-vibrante); }

/* ==========================================
   CÓDIGO PARA CELULARES (RESPONSIVE)
========================================== */
@media (max-width: 768px) {
    header { flex-direction: column; padding: 15px 5%; gap: 15px; }
    nav ul { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0;}
    nav a { font-size: 0.8rem; background: var(--gris-suave); padding: 5px 12px; border-radius: 15px; }
    
    .hero { padding: 60px 5% 100px 5%; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-text p { font-size: 1.1rem; }
    
    .carrusel-promo-contenedor { max-width: 100%; padding-bottom: 60px; }
    .carrusel-promo-img { max-height: 500px; }
    .btn-promo-nav { top: auto; bottom: 5px; transform: none; width: 45px; height: 45px; }
    .btn-promo-prev { left: calc(50% - 55px); }
    .btn-promo-next { right: auto; left: calc(50% + 10px); }
    
    .modal-content { padding: 25px 15px; width: 90%; max-height: 85vh;}
    .precio-destacado { font-size: 2.2rem; }
    .precio-card { font-size: 2.5rem; }
    .botones-paquete { flex-direction: column; gap: 10px; }
    
    .redes-flotantes { bottom: 15px; right: 15px; gap: 10px; }
    .flotante-item { width: 45px; height: 45px; font-size: 20px; }

    .admin-header h1 { font-size: 1.8rem; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .admin-modulo { padding: 15px; }

    .lounge-img-card { height: 300px; }
    .lounge-logo-img { max-width: 200px; }
    
    .calendar-tabs { flex-direction: column; gap: 10px; }
    .btn-tab { width: 100%; }
}