/* =====================================
   NEXO STREAM V2 - STYLE (TUNEADO)
===================================== */

:root{
    --bg:#000000;          /* Negro Absoluto */
    --card:#020612;        /* Azul Abismo */
    --card-hover:#060f24;
    --primary:#0026e6;     /* Azul Cobalto */
    --secondary:#8b5cf6;
    --green:#22c55e;
    --white:#ffffff;
    --gray:#94a3b8;
    --border:#1e293b;
    --radius: 25px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',Arial,sans-serif;
    scroll-behavior:smooth;
}

body{
    background: var(--bg);
    color:white;
    overflow-x: hidden;
}

/* --- PRELOADER LATIDO --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.6s ease-in-out;
}
.loader-logo {
    font-size: 3rem; font-weight: 900; color: var(--primary);
    animation: heartbeat 2s infinite ease-in-out;
    filter: drop-shadow(0 0 15px var(--primary));
}
@keyframes heartbeat {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px var(--primary)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 30px var(--primary)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--primary)); }
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.2); }

/* NAVBAR */
header{
    height:75px; padding:0 6%;
    display:flex; justify-content:space-between; align-items:center;
    position:sticky; top:0; z-index:100;
    background:rgba(0,0,0,.85); backdrop-filter:blur(15px);
    border-bottom:1px solid var(--border);
}
.logo{ font-size:22px; font-weight:800; letter-spacing:2px; color:white; }
.logo span{ color:var(--primary); text-shadow: 0 0 10px var(--primary); }
nav{ display:flex; gap:20px; align-items:center; }
nav a{ text-decoration:none; color:white; }
.btn-soporte {
    padding:10px 20px; border-radius:30px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color:white!important; font-weight:700;
    box-shadow: 0 0 10px rgba(0,38,230,0.4);
}

/* HERO */
.hero{ min-height:650px; padding:80px 6%; display:flex; justify-content:center; align-items:center; gap:60px; }
.hero-texto{ max-width:650px; }
.tag{ display:inline-block; padding:8px 18px; border-radius:30px; background:#13213b; color:#82a3ff; margin-bottom:25px; font-weight: bold; }
.hero h1{ font-size:55px; line-height:1.1; margin-bottom:25px; }
.hero h1 span{ background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip:text; color:transparent; }
.hero p{ color:var(--gray); font-size:19px; line-height:1.6; margin-bottom:35px; }
.hero-botones{ display:flex; gap:15px; }
.btn-principal, .btn-secundario{ padding:15px 35px; border-radius:40px; text-decoration:none; font-weight:700; }
.btn-principal{ background: linear-gradient(90deg,var(--primary),var(--secondary)); color:white; box-shadow: 0 4px 15px rgba(0,38,230,0.3); }
.btn-secundario{ border:1px solid var(--border); color:white; }
.hero-card{ width:320px; padding:35px; background:var(--card); border:1px solid var(--border); border-radius:25px; text-align:center; box-shadow:0 20px 60px #0008; }
.numero{ font-size:70px; font-weight:900; color:var(--primary); text-shadow: 0 0 15px var(--primary); }
.hero-card p{ color:var(--gray); }
.datos{ display:flex; justify-content:space-between; }
.datos span{ color:var(--gray); font-size:13px; }

/* DESTACADOS & PLANES */
.destacados, .planes, .catalogo, .faq{ padding:70px 6%; }
h2{ font-size:35px; text-align:center; margin-bottom:35px; }
.chips{ display:flex; justify-content:center; flex-wrap:wrap; gap:15px; }
.chips button{ background:#111c30; color:white; border:1px solid var(--border); padding:12px 20px; border-radius:30px; cursor:pointer; transition: 0.3s; }
.chips button:hover { border-color: var(--primary); box-shadow: 0 0 10px var(--primary); }

.cards-planes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; }
.plan{ background:var(--card); border:1px solid var(--border); padding:35px; border-radius:var(--radius); text-align:center; position:relative; transition: 0.3s; }
.plan:hover { border-color: var(--primary); box-shadow: 0 0 20px rgba(0,38,230,0.2); }
.plan h1{ font-size:50px; color:var(--primary); }
.plan p{ color:var(--gray); margin:20px 0; }
.plan a{ display:block; padding:14px; background:#172554; color:white; border-radius:15px; text-decoration:none; font-weight: bold; }
.recomendado{ border:2px solid var(--primary); box-shadow: 0 0 15px rgba(0,38,230,0.3); }
.badge{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:var(--primary); color:white; padding:6px 20px; border-radius:20px; font-weight:bold; }

/* BUSCADOR & FILTROS */
#buscador{ width:100%; padding:20px; background:var(--card); border:1px solid var(--border); color:white; border-radius:20px; font-size:18px; outline:none; transition: 0.3s; }
#buscador:focus { border-color: var(--primary); box-shadow: 0 0 15px rgba(0,38,230,0.3); }
.filtros{ margin:25px 0; display:flex; gap:10px; flex-wrap:wrap; }
.filtros button{ padding:10px 18px; background:#111827; border:1px solid var(--border); color:white; border-radius:20px; cursor: pointer; transition: 0.3s; }
.filtros button.activo, .filtros button:hover { background: var(--primary); border-color: var(--primary); }

/* CURSOS EN TARJETAS DE CHATGPT */
.grid-cursos{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.curso-card{ background:var(--card); padding:25px; border-radius:var(--radius); border:1px solid var(--border); transition:.3s; display: flex; flex-direction: column; }
.curso-card:hover{ transform:translateY(-5px); border-color: var(--primary); box-shadow: inset 0 0 20px rgba(255,255,255,0.02), 0 0 25px var(--primary); }
.curso-card h3{ margin-top: 15px; margin-bottom:15px; min-height: 50px; }
.badge-curso{ display:inline-block; padding:5px 12px; background:#172554; border-radius:20px; font-size:12px; font-weight: bold; width: fit-content; }
.botones-curso{ margin-top:auto; display:flex; gap:10px; }
.botones-curso button, .botones-curso a{ flex:1; padding:12px; border-radius:12px; text-align:center; text-decoration:none; font-weight: bold; cursor: pointer; }
.ver{ background:#1e293b; color:white; border: none; }
.comprar{ background:var(--green); color:black; }
.comprar:hover { box-shadow: 0 0 15px var(--green); }

/* MODAL */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter: blur(5px); z-index:200; align-items: center; justify-content: center; }
.modal-box{ background:var(--card); width:90%; max-width:450px; padding:35px; border-radius:var(--radius); border: 1px solid var(--primary); box-shadow: 0 0 30px var(--primary); position: relative; }
.cerrar{ position: absolute; top: 15px; right: 20px; background:none; color:white; border:0; font-size:30px; cursor: pointer; }

footer { text-align: center; padding: 40px; border-top: 1px solid #1e293b; margin-top: 50px; }

/* AQUÍ ESTÁ EL AJUSTE PARA EL CELULAR */
@media(max-width:800px){
    .hero{ flex-direction:column; text-align:center; }
    .hero h1{ font-size:38px; }
    .hero-card{ width:100%; }
    nav a:not(.btn-soporte):not(.link-b2b) { display: none; }
    .hero-botones{ justify-content:center; flex-direction:column; }
}

/* =========================================
   🔥 EFECTOS DE BRILLO Y NEÓN (HOVER) 🔥
   ========================================= */

/* 1. Transición suave por defecto para que no brille de golpe */
.plan, 
details div > div, 
#contenedorCursos > div,
.btn-secundario,
a[style*="background: var(--green)"] {
    transition: all 0.3s ease !important;
}

/* 2. Brillo azul y pequeño salto para las tarjetas (Planes, Combos y Cursos) */
.plan:hover, 
details div > div:hover,
#contenedorCursos > div:hover {
    transform: translateY(-5px); /* Levanta la tarjeta un poquito */
    box-shadow: 0 0 25px rgba(0, 38, 230, 0.6) !important; /* Brillo azul neón */
    border-color: var(--primary) !important; /* Borde azul brillante */
    z-index: 10;
}

/* 3. Brillo VERDE para los botones de "Comprar" */
a[style*="background: var(--green)"]:hover,
.comprar:hover {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8) !important; /* Brillo verde intenso */
    filter: brightness(1.1); /* Lo hace un poquito más claro */
    transform: scale(1.05); /* Lo agranda apenitas */
}

/* 4. Brillo AZUL para el botón del ojito (Ver Inventario) y "Ser Miembro VIP" */
.btn-secundario:hover,
.plan a[href*="wa.me"]:hover,
.plan a[href*="docs.google.com"]:hover {
    box-shadow: 0 0 15px rgba(0, 38, 230, 0.8) !important;
    background: rgba(0, 38, 230, 0.1) !important;
}