:root {
    --color-primary: #0050D5; /* Azul del logo */
    --color-secondary: #4CAF50; /* Verde del logo */
    --color-dark: #1a1a1a;
    --color-light: #f4f4f4;
}

/* =========================================
   ESTILOS GENERALES
   ========================================= */
   body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Nueva fuente moderna */
    background-color: var(--color-light);
}

/* =========================================
   NAVBAR PRO (Efecto Transparente -> Sólido)
   ========================================= */
.navbar {
    position: fixed; /* Fija en la parte superior */
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 5%; /* 5% a los lados para dar aire */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: 0.4s ease; /* Transición suave de color */
    box-sizing: border-box; /* Evita que el padding rompa el ancho */
    background: transparent; /* Transparente al inicio */
}

/* Estado cuando bajamos el scroll (Se activa con JS) */
.navbar.scrolled {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra elegante */
    padding: 0.8rem 5%; /* Se hace un poco más pequeña */
}

/* LOGO */
.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: white; /* Blanco al inicio para ver sobre la imagen */
    transition: 0.3s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sombra para leerlo bien sobre foto */
}

/* Cuando la barra es blanca, el logo cambia de color */
.navbar.scrolled .logo {
    color: var(--color-secondary); /* Verde corporativo */
    text-shadow: none;
}

.logo span {
    color: var(--color-primary); /* La parte "fronteras" en azul siempre */
}
/* Forzamos el azul en el logo cuando hay scroll para contraste */
.navbar.scrolled .logo span {
    color: var(--color-primary); 
}
/* Forzamos blanco al inicio */
.navbar:not(.scrolled) .logo span {
    color: #fff;
}


/* ENLACES (Links) */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: white; /* Blanco al inicio */
    font-weight: 500;
    font-size: 0.95rem;
    transition: 0.3s;
    position: relative;
}

/* Efecto de subrayado al pasar el mouse */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-secondary); /* Verde */
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Cuando hay scroll, los links se ponen oscuros */
.navbar.scrolled .nav-links a {
    color: var(--color-dark);
}

/* BOTÓN PAGAR (Nav) */
.btn-pagar {
    background-color: var(--color-primary); /* Azul */
    color: white !important;
    padding: 10px 25px !important; /* Forzamos tamaño */
    border-radius: 50px; /* Borde muy redondo moderno */
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 80, 213, 0.4); /* Sombra azul brillante */
    border: 2px solid transparent;
}

.btn-pagar:hover {
    background-color: transparent;
    border: 2px solid white;
    transform: translateY(-2px); /* Se eleva un poquito */
}

.navbar.scrolled .btn-pagar:hover {
    border: 2px solid var(--color-primary);
    color: var(--color-primary) !important;
}

/* HERO SECTION (Ajuste para compensar el navbar fijo) */
.hero {
    /* Mismos fondos de antes */
    background: linear-gradient(rgba(0, 20, 60, 0.7), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Pantalla completa */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-top: 60px; /* Espacio para que el texto no choque con el navbar */
}

.hero h1 { font-size: 3rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 20px; }

.btn-primary {
    background: var(--color-secondary);
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
}

/* Payment Section */
.payment-section {
    padding: 4rem 2rem;
    background: white;
    text-align: center;
}

.search-box {
    margin: 20px 0;
}

.search-box input {
    padding: 10px;
    width: 250px;
    border: 2px solid #ddd;
    border-radius: 5px;
}

.search-box button {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.factura-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px auto;
    max-width: 400px;
    border-left: 5px solid var(--color-secondary);
    text-align: left;
    background: #f9f9f9;
}

/* ESTILOS DEL MODAL PRO */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fondo oscuro */
    backdrop-filter: blur(5px); /* Efecto borroso pro */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Estado visible del modal (se activa con JS) */
.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-box {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación de rebote suave */
}

/* Animación cuando aparece */
.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    transition: 0.2s;
}

.close-btn:hover {
    color: var(--color-primary);
}

.modal-header h2 {
    color: var(--color-primary);
    margin-bottom: 5px;
}

.modal-header p {
    color: #666;
    margin-bottom: 20px;
}

/* Ajuste del área de resultados dentro del modal */
.results-area {
    margin-top: 20px;
    max-height: 300px;
    overflow-y: auto; /* Scroll si hay muchas facturas */
}

/* =========================================
   FOOTER PROFESIONAL
   ========================================= */
   .footer-pro {
    background-color: #0b1c39; /* Azul muy oscuro (Casi negro) */
    color: #b0b8c6; /* Texto gris claro para lectura suave */
    padding: 60px 0 0 0;
    font-size: 0.9rem;
    margin-top: 50px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    /* 4 Columnas automáticas */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 40px;
}

.footer-col h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.footer-col h3 span {
    color: var(--color-primary); /* Azul de tu marca */
}

.footer-col h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--color-secondary); /* Línea verde debajo del título */
    display: inline-block;
    padding-bottom: 5px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

/* Enlaces del footer */
.footer-links a, .sic-info li {
    color: #b0b8c6;
    text-decoration: none;
    transition: 0.3s;
    display: block;
    line-height: 1.6;
}

.footer-links a:hover {
    color: var(--color-secondary); /* Se pone verde al pasar el mouse */
    padding-left: 5px; /* Pequeño movimiento a la derecha */
}

/* Información de la SIC más pequeña */
.sic-info li {
    font-size: 0.8rem;
    margin-bottom: 6px;
}

/* Redes Sociales */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-links a {
    color: white;
    background: rgba(255,255,255,0.1);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

/* Barra Legal Inferior */
.legal-bar {
    background-color: #050e1f; /* Un tono más oscuro aun */
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.legal-bar p {
    margin: 5px 0;
    opacity: 0.7;
}

.legal-bar a {
    color: var(--color-primary);
    text-decoration: none;
}

/* =========================================
   ESTILOS NUEVOS: PLANES Y COBERTURA
   ========================================= */

   .container-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* SECCIÓN PLANES - FONDO MEJORADO */
.planes-section {
    padding: 6rem 0; /* Un poco más de espacio vertical */
    text-align: center;
    position: relative; /* Necesario para los elementos decorativos */
    background-color: #fff; /* Color base */
    overflow: hidden; /* Para que nada se salga de la sección */
    /* Un degradado diagonal muy sutil de blanco a un azul casi imperceptible */
    background: linear-gradient(135deg, #ffffff 60%, #f4f9ff 100%);
    z-index: 1;
}

/* Elemento decorativo sutil (una mancha de luz verde en la esquina superior derecha) */
.planes-section::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    /* Usa el color secundario (verde) pero muy transparente y desenfocado */
    background: radial-gradient(circle, rgba(37, 211, 102, 0.04) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1; /* Se coloca detrás del contenido */
    pointer-events: none;
}

/* Otro elemento decorativo sutil (abajo a la izquierda, azulado) */
.planes-section::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(13, 110, 253, 0.03) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(-30deg);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

/* TÍTULOS PRO */
.planes-section h2 {
    font-size: 3rem; /* Más grande */
    font-weight: 800; /* Mucho más grueso */
    color: var(--color-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -1px; /* Letras un poco más juntas para un look moderno */
    position: relative;
    display: inline-block; /* Necesario para la línea decorativa */
}

/* Línea decorativa debajo del título H2 */
.planes-section h2::after {
    content: '';
    display: block;
    width: 80px; /* Ancho de la línea */
    height: 4px;  /* Grosor de la línea */
    background: var(--color-secondary); /* Color verde */
    margin: 20px auto 0 auto; /* Centrado y separado del texto */
    border-radius: 2px; /* Bordes redondeados en la línea */
}

.highlight {
    color: var(--color-primary);
    /* Opcional: si quieres que el texto resaltado también tenga un fondo sutil */
    /* background: linear-gradient(120deg, transparent 60%, rgba(13, 110, 253, 0.1) 60%); */
}

.subtitle {
    font-size: 1.25rem; /* Un poco más grande */
    font-weight: 500; /* Peso medio */
    color: #555;
    margin-bottom: 4rem; /* Más separación con las tarjetas */
    max-width: 700px; /* Evita que el subtítulo sea muy ancho en pantallas grandes */
    margin-left: auto;
    margin-right: auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    justify-content: center;
}

/* TARJETA DE PLAN */
.plan-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 2rem;
    transition: 0.3s;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--color-primary);
}

/* Estilo para el plan recomendado (opcional, puse el de 50 como ejemplo) */
/* 1. Ajuste para la tarjeta recomendada en móvil */
.plan-card.recommended {
    /* Damos un poco más de espacio arriba para que quepa el botón */
    padding-top: 35px; 
    position: relative; /* Aseguramos que sea la referencia */
}

/* 2. Reposicionamos la etiqueta "Más Popular" */
.tag {
    /* Opción A: Que siga flotando pero más arriba */
    top: -12px;       /* Lo subimos para que quede en el borde */
    left: 50%;        /* Lo centramos horizontalmente */
    transform: translateX(-50%); /* Ajuste fino del centrado */
    width: max-content; /* Que no se estire */
    font-size: 0.75rem; /* Letra un poco más pequeña */
    padding: 4px 12px;
    border-radius: 12px; /* Más redondeado */
    
    /* Aseguramos que no tape nada */
    z-index: 10;
}

/* 3. Opcional: Bajar un poco el título si todavía se siente apretado */
.plan-card.recommended .plan-header {
    margin-top: 5px;
}

.plan-card .tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.plan-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-dark);
}

.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 10px 0;
}

.price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #888;
}

.speed {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.features li {
    margin-bottom: 10px;
    color: #555;
    font-size: 0.95rem;
}

.features i {
    color: var(--color-secondary);
    margin-right: 10px;
}

.btn-plan {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-plan:hover {
    background: var(--color-primary);
    color: white;
}

/* =========================================
   SECCIÓN COBERTURA: ESTILO "TECH BANNER"
   ========================================= */

   .coverage-section {
    padding: 0 0 6rem 0; /* Quitamos padding superior para que el banner pegue arriba */
    position: relative;
    background-color: #f4f7fb; /* Fondo base un poco más azulado */
    /* Mantenemos los puntos pero más sutiles */
    background-image: radial-gradient(#dae1e7 1px, transparent 1px);
    background-size: 25px 25px;
    overflow: hidden;
}

/* === NUEVO BANNER TECNOLÓGICO === */
.coverage-banner {
    position: relative;
    /* Fondo oscuro degradado: Azul profundo a un tono más verdoso */
    background: linear-gradient(135deg, #0a1930 0%, #0d2d5e 60%, #004e92 100%);
    padding: 5rem 2rem 8rem 2rem; /* Mucho padding abajo para que las tarjetas se superpongan */
    text-align: center;
    color: white;
    overflow: hidden;
    /* Forma curva en la parte inferior del banner */
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: -60px; /* Hacemos que el contenido de abajo suba y se monte */
    z-index: 1;
}

/* Patrón de circuitos superpuesto en el banner (CSS puro) */
.coverage-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1;
    background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px;
    background-position: -1px -1px, -1px -1px;
    z-index: 0;
    pointer-events: none;
}

/* Contenido del banner (texto e icono) */
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.banner-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    /* Efecto de brillo en el icono */
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.4));
}

.coverage-banner h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.coverage-banner .subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}

/* Rayos de luz decorativos (Animados) */
.light-streak {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    height: 2px;
    width: 60%;
    transform: rotate(-45deg);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.ls-1 { top: 20%; left: -10%; animation: streakMove 7s infinite linear; }
.ls-2 { top: 50%; left: -20%; width: 80%; animation: streakMove 10s infinite linear; animation-delay: 1s; }
.ls-3 { top: 80%; left: 30%; width: 40%; animation: streakMove 12s infinite linear; animation-delay: 3s; }

@keyframes streakMove {
    0% { transform: translateX(-100%) rotate(-45deg); opacity: 0; }
    20% { opacity: 0.5; }
    80% { opacity: 0.5; }
    100% { transform: translateX(200%) rotate(-45deg); opacity: 0; }
}


/* === GRID Y TARJETAS (Ajustados para el nuevo diseño) === */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    margin-top: 0; /* Quitamos margen porque ya se superpone */
    position: relative;
    z-index: 10; /* Por encima del banner */
    align-items: start;
    padding: 0 20px;
}

.zone-card {
    background: white;
    padding: 0;
    border-radius: 16px;
    /* Sombra más fuerte para que destaque sobre el banner */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.5); /* Borde sutil */
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px); /* Efecto de cristal sutil si el navegador lo soporta */
}

.zone-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(13, 110, 253, 0.15);
}

/* Barra superior de color */
.zone-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Cabecera de la tarjeta */
.zone-card h3 {
    background: #fff;
    margin: 0;
    padding: 25px;
    font-size: 1.5rem;
    color: var(--color-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
}

.zone-card h3 i {
    color: var(--color-primary);
    background: rgba(13, 110, 253, 0.1);
    padding: 10px;
    border-radius: 50%;
    font-size: 1.2rem;
}

/* Cuerpo y lista */
.zone-card ul {
    list-style: none;
    padding: 10px 25px 30px 25px;
    margin: 0;
    background: #fff;
}

.zone-card ul li {
    padding: 12px 10px;
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #f5f5f5;
    transition: 0.2s;
    display: flex;
    align-items: center;
}

.zone-card ul li:last-child { border-bottom: none; }

.zone-card ul li::before {
    content: '\f1eb'; /* Icono de WiFi pequeño de FontAwesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: #d0d0d0;
    margin-right: 12px;
    transition: 0.2s;
}

.zone-card ul li:hover {
    background-color: #f0f7ff;
    color: var(--color-primary);
    padding-left: 15px;
    border-radius: 8px;
}

.zone-card ul li:hover::before {
    color: var(--color-secondary);
    transform: scale(1.2);
}

/* Ajuste para tarjetas con múltiples zonas */
.zone-card h3:not(:first-child) {
    border-top: 1px solid #eee;
    margin-top: 10px;
}

/* =========================================
   ESTILOS MODAL TÉRMINOS
   ========================================= */

/* Hacemos la caja un poco más ancha para leer mejor */
.modal-box.modal-lg {
    max-width: 700px; 
}

/* Área de texto con scroll */
.legal-scroll-area {
    text-align: left; /* Texto alineado a la izquierda para leer bien */
    max-height: 400px; /* Altura máxima */
    overflow-y: auto; /* Activa el scroll si el texto es muy largo */
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.legal-scroll-area h3 {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.legal-scroll-area p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 10px;
}

/* Estilizar la barra de scroll para que se vea moderna */
.legal-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.legal-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

.legal-scroll-area::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 4px;
}

.legal-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary); 
}

/* Estilo del contenedor del Banner */
.banner-titulo {
    /* Degradado de Azul (#2563eb) a Verde (#16a34a) */
    background: linear-gradient(90deg, #2563eb 0%, #16a34a 100%);
    border-radius: 15px;       /* Bordes redondeados */
    padding: 50px 20px;        /* Espacio interno (arriba/abajo, lados) */
    margin-bottom: 50px;       /* Separación con las tarjetas de abajo */
    text-align: center;        /* Centrar todo el texto */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Forzamos que el título H2 dentro del banner sea blanco */
.banner-titulo h2 {
    color: white !important;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.5rem; /* Puedes ajustar el tamaño aquí */
}

/* Importante: Cambiamos el color de "Fibra Óptica" a blanco o un verde muy claro */
.banner-titulo .highlight {
    color: #ffffff !important; 
    /* Opcional: si quieres que resalte más, usa un amarillo pálido: #fef08a */
}

/* Estilo del subtítulo dentro del banner */
.banner-titulo .subtitle {
    color: rgba(255, 255, 255, 0.9) !important; /* Blanco con un poco de transparencia */
    font-size: 1.1rem;
    font-weight: 400;
}

.gallery-section {
    margin-top: 80px; /* Separación de la lista de textos */
    text-align: center;
}

.gallery-header h3 {
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.gallery-header p {
    color: #666;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Grid de 3 columnas x 2 filas */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    padding-bottom: 20px;
}

.gallery-item {
    position: relative;
    height: 250px; /* Altura fija para uniformidad */
    border-radius: 16px;
    overflow: hidden; /* Para que la imagen no se salga al hacer zoom */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el cuadro sin deformar */
    transition: transform 0.5s ease;
}

/* Efecto Hover (Zoom) */
.gallery-item:hover img {
    transform: scale(1.1);
}

/* Capa oscura decorativa al pasar el mouse */
.gallery-item .overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 80, 213, 0.4); /* Azul con transparencia */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay i {
    color: white;
    font-size: 2.5rem;
    transform: translateY(20px);
    transition: 0.3s;
}

.gallery-item:hover .overlay i {
    transform: translateY(0);
}

/* =========================================
   ESTILOS TÍTULO GALERÍA (IGUAL A PLANES)
   ========================================= */

/* 1. Copiamos el estilo exacto de '.planes-section h2' */
.gallery-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    position: relative;
    display: inline-block;
}

/* 2. Agregamos la línea verde debajo */
.gallery-header h2::after {
    content: '';
    display: block;
    width: 80px;      /* Ancho de la línea */
    height: 4px;      /* Grosor */
    background: var(--color-secondary); /* El verde de tu marca */
    margin: 20px auto 0 auto; /* Centrado */
    border-radius: 2px;
}

/* =========================================
   NUEVA ANIMACIÓN DE ENTRADA (PRO)
   ========================================= */

/* Definimos el movimiento: De abajo hacia arriba desvaneciéndose */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Empieza 30px más abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su sitio */
    }
}

/* Clase para aplicar la animación */
.animate-title {
    animation: fadeInUp 1s ease-out forwards; /* Dura 1 segundo */
    opacity: 0; /* Empieza invisible hasta que la animación arranca */
    animation-delay: 0.3s; /* Espera un poquito antes de empezar */
}

/* =========================================
   BANNER GALERÍA "PRO" (ANIMADO)
   ========================================= */

   .pro-gallery-banner {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    
    /* CAMBIO AQUÍ: Bajamos de 6rem a 3rem para quitar el espacio sobrante arriba y abajo */
    padding: 1rem 0; 
    
    overflow: hidden; 
    margin-top: 50px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

/* --- TÍTULOS --- */
.gallery-header-pro {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header-pro h2 {
    font-size: 3rem;
    font-weight: 800;
    color: white; /* Texto Blanco para contrastar */
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
}

/* Línea decorativa verde brillante */
.gallery-header-pro h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--color-secondary); /* Verde neon */
    margin: 15px auto 0 auto;
    box-shadow: 0 0 10px var(--color-secondary); /* Resplandor */
    border-radius: 2px;
}

.gallery-header-pro p {
    color: #cbd5e1; /* Gris azulado claro */
    font-size: 1.2rem;
}

/* --- TARJETAS CON EFECTO CRISTAL (Glassmorphism) --- */
.gallery-item.glass-effect {
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Sombra fuerte */
}

/* --- ANIMACIÓN DE FONDO (CORREGIDA) --- */
.floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6; 
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    
    /* CAMBIO AQUÍ: Bajamos de 12s a 6s (Doble de velocidad) */
    animation: floatAnimation 6s infinite ease-in-out; 
}

/* Círculo 1: Azul Brillante (Esquina superior izquierda) */
.shape-1 {
    width: 350px;
    height: 350px;
    background: var(--color-primary);
    top: -50px;  /* Metemos más la figura en la pantalla */
    left: -50px;
    animation-delay: 0s;
}

/* Círculo 2: Verde (Esquina inferior derecha) */
.shape-2 {
    width: 300px;
    height: 300px;
    background: var(--color-secondary);
    bottom: -20px; /* Más adentro */
    right: -20px;
    animation-delay: -5s;
}

.shape-3 {
    width: 250px;
    height: 250px;
    background: #8b5cf6;
    top: calc(50% - 125px); 
    left: calc(50% - 125px);
    opacity: 0.5;
    
    /* CAMBIO AQUÍ: Bajamos de 18s a 9s */
    animation-duration: 9s; 
}

/* Definición del movimiento (Hacemos que se muevan más distancia) */
@keyframes floatAnimation {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(50px, -60px) rotate(10deg); } /* Más desplazamiento */
    66% { transform: translate(-40px, 40px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* =========================================
   ESTILOS LIGHTBOX (VISOR PRO)
   ========================================= */

/* Fondo oscuro con desenfoque intenso */
.lightbox-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999; /* Por encima de TODO */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(10, 10, 20, 0.9); /* Casi negro */
    backdrop-filter: blur(15px); /* Desenfoque estilo Apple/Windows 11 */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Clase para activar la visibilidad */
.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

/* Contenedor de la imagen y texto */
.lightbox-content {
    text-align: center;
    max-width: 90%;
    max-height: 90%;
    position: relative;
    animation: zoomInElastic 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Rebote suave */
}

/* La imagen en grande */
.lightbox-content img {
    max-width: 100%;
    max-height: 80vh; /* Que no se salga de la pantalla verticalmente */
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(0, 80, 213, 0.3); /* Resplandor Azul */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* El texto descriptivo abajo */
#lightboxCaption {
    margin-top: 15px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Botón de cerrar (X) */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.lightbox-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg); /* Gira al pasar el mouse */
}

/* Animación de entrada (Efecto POP) */
@keyframes zoomInElastic {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* =========================================
   MODAL DE PAGO (REDISEÑO PRO)
   ========================================= */

/* 1. Fondo del Modal (Efecto Cristal Oscuro) */
.modal-overlay {
    background: rgba(15, 23, 42, 0.85); /* Azul muy oscuro casi negro */
    backdrop-filter: blur(12px); /* Desenfoque fuerte estilo iOS */
    transition: all 0.4s ease;
}

/* 2. Caja Principal */
.modal-box {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* Decoración de fondo (Círculo de color sutil) */
.modal-box::before {
    content: '';
    position: absolute;
    top: -50px; left: -50px;
    width: 150px; height: 150px;
    background: var(--color-secondary);
    opacity: 0.1;
    border-radius: 50%;
    pointer-events: none;
}

.modal-header h2 {
    color: var(--color-primary);
    font-size: 1.8rem;
    font-weight: 700;
}

/* =========================================
   ANIMACIÓN "SUPER WOW" (ESTILO ALETOSO 3D)
   ========================================= */

/* Contenedor para dar profundidad 3D */
#resultado-busqueda {
    perspective: 1000px; /* Define la profundidad de la escena 3D */
    padding-top: 20px;
}

/* 4. TARJETA DE FACTURA (REDISEÑO 3D) */
.factura-card {
    background: white;
    border: none;
    border-radius: 20px; /* Bordes más redondeados */
    padding: 0;
    margin: 25px auto; /* Un poco más de margen */
    position: relative;
    /* Sombra mucho más pronunciada y difusa para dar sensación de flotar */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 95%; /* Para que no pegue en los bordes en móviles */
    
    /* ESTADO INICIAL DE LA ANIMACIÓN */
    opacity: 0;
    /* Inicia abajo, pequeño y rotado hacia atrás en 3D */
    transform: translateY(100px) scale(0.8) rotateX(-30deg); 
    transform-origin: bottom center;
    
    /* APLICACIÓN DE LA ANIMACIÓN */
    /* Duración 0.8s, con una curva de aceleración que permite el rebote */
    animation: elasticEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.3) forwards;
    
    transition: transform 0.3s, box-shadow 0.3s; /* Para el hover */
}

/* Efecto Hover (Interactividad extra) */
.factura-card:hover {
    /* Al pasar el mouse, se levanta y se acerca un poco en 3D */
    transform: translateY(-10px) scale(1.02) rotateX(2deg) !important; /* !important para sobreescribir el final de la animación */
    box-shadow: 0 30px 60px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
}


@keyframes elasticEntrance {
    0% {
        opacity: 0;
        transform: translateY(150px) scale(0.7) rotateX(-45deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-20px) scale(1.05) rotateX(10deg);
    }
    80% {
        transform: translateY(10px) scale(0.98) rotateX(-5deg);
    }
    100% {
        opacity: 1;  /* <--- ¡ESTA LÍNEA ES LA QUE FALTA! AGRÉGALA. */
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}


/* (Mantén los estilos internos de la tarjeta igual que antes) */
.factura-header {
    background: linear-gradient(135deg, #0061ff 0%, #60efff 100%); /* Azul eléctrico más vibrante */
    /* ... resto igual ... */
    color: white; padding: 15px; text-align: center;
}
.factura-header h3 { margin: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;}
.factura-body { padding: 25px 20px; text-align: center;} /* Un poco más de padding interno */
.factura-monto { font-size: 3rem; font-weight: 900; color: #1e293b; margin: 15px 0; letter-spacing: -1px;} /* Monto más grande e impactante */
.factura-monto small { font-size: 1.2rem; color: #64748b; }

/* Botón de Pagar con degradado */
.btn-pay-action {
    background: linear-gradient(to right, #00b09b, #96c93d); /* Degradado vibrante */
    /* ... resto igual para que funcione el hover ... */
    color: white; width: 100%; padding: 15px; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s; box-shadow: 0 4px 15px rgba(0, 176, 155, 0.3);
}
.btn-pay-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 176, 155, 0.5);
}
/* Medias lunas para efecto ticket real */
.ticket-divider::before,
.ticket-divider::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    background: #ffffff; /* Debe coincidir con el fondo del modal si fuera transparente, aquí usamos blanco por simplicidad visual dentro de la caja */
    border-radius: 50%;
    box-shadow: inset 0 0 0 999px #fff; /* Truco para "borrar" */
}
/* Mejor ajuste: las bolitas van al color del fondo externo si fuera posible, pero en modal blanco se usa gris claro */
.ticket-divider::before { left: -10px; background: #fff; border:1px solid #f1f5f9;}
.ticket-divider::after { right: -10px; background: #fff; border:1px solid #f1f5f9;}

/* =========================================
   BOTÓN WHATSAPP FLOTANTE
   ========================================= */
   .btn-whatsapp-flotante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    font-size: 35px;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    animation: pulse-whatsapp 2s infinite;
}

.btn-whatsapp-flotante:hover {
    background-color: #128c7e;
    color: white;
}

@keyframes pulse-whatsapp {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Ajuste móvil para WhatsApp */
@media (max-width: 768px) {
    .btn-whatsapp-flotante {
        width: 50px; height: 50px; font-size: 30px; bottom: 20px; right: 20px;
    }
}