/* Futuristic theme inspired by NVG Store - modern, professional design */

/*
   Este archivo define variables de color y estilos para un diseño futurista y
   profesional. Se separa de los estilos originales para evitar conflictos.
   Las variables personalizadas reemplazan los colores base del sitio y pueden
   ser ajustadas fácilmente. Los componentes comunes (body, header, botones,
   hero, footer) reciben nuevas gradientes y colores oscuros con acentos
   brillantes para un aspecto ciberpunk.  Se recomienda cargar este archivo
   después de los estilos originales para que sus reglas tengan mayor
   especificidad por cascada.  Las animaciones existentes permanecen intactas.
*/

:root {
    /* Paleta principal */
    --primary-color: #007CF0;       /* Azul neón */
    --primary-dark: #051C34;        /* Azul marino muy oscuro */
    --primary-light: #0A324E;       /* Azul profundo */
    --secondary-color: #00DFD8;     /* Turquesa brillante */
    --secondary-dark: #042C4A;      /* Turquesa oscuro */
    --danger-color: #FF4D4F;        /* Rojo vibrante */
    --warning-color: #FFA500;       /* Naranja */
    --dark-color: #0A192F;          /* Fondo casi negro */
    --light-color: #F9FAFB;         /* Blanco muy claro */
    --gray-color: #94A3B8;          /* Gris frío */
    --accent-color: #7928CA;        /* Morado neon */
    --accent-dark: #2C2C54;         /* Morado oscuro */
}

/* Destaca palabras clave en verde neón para títulos */
.highlight-green {
    color: var(--secondary-color);
}

/* Tipografía global: se cargan desde Google Fonts en index.php */
body {
    font-family: 'Poppins', 'Roboto', sans-serif;
    background: radial-gradient(circle at top left, var(--primary-dark), var(--dark-color));
    color: var(--light-color);
}

/* Rejilla sutil sobre el fondo para un efecto tecnológico */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 50px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 50px);
    background-size: 50px 50px;
    z-index: -2;
}

/* Cabecera oscura con degradado horizontal */
header {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enlaces de navegación estilo vidrio mate */
.nav-links a {
    background: rgba(255, 255, 255, 0.05);
    color: var(--light-color);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
}

/* Hero section: degrade diagonal y acentos dinámicos */
.hero-container {
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
                linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: var(--light-color);
}

.hero-title {
    color: var(--light-color);
}

.hero-title .accent {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.hero-description {
    color: var(--gray-color);
}

/* Botones principales y secundarios con efectos de brillo */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--light-color);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: var(--light-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Sección de estadísticas: paneles translúcidos oscuros */
.platforms-section .p-6 {
    background: rgba(5, 28, 52, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--light-color);
}

/* Pie de página: tonos oscuros con acentos */
footer {
    background: linear-gradient(135deg, var(--primary-dark), var(--accent-dark));
    color: var(--light-color);
    border-top: 4px solid var(--primary-color);
}

.footer-section h3::after {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.footer-section ul li a {
    color: var(--light-color);
    opacity: 0.8;
}

.footer-section ul li a:hover {
    color: var(--secondary-color);
}

.social-links a {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--light-color);
}

.social-links a:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--accent-color);
}

.footer-bottom a {
    color: var(--secondary-color);
}

.footer-bottom a:hover {
    color: var(--primary-color);
}

/* ================================================================
   Secciones personalizadas para rediseño futurista
   Estas clases se emplean en el nuevo HTML para estructurar el contenido
   y proporcionar un aspecto limpio y profesional inspirado en NVG Store.
================================================================= */

/* Hero de página completa */
.hero-nvg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
                linear-gradient(135deg, var(--dark-color), var(--primary-dark));
    color: var(--light-color);
}

/* Tarjeta destacada dentro del hero con degradado vivo */
.hero-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.hero-card h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--light-color);
    margin-bottom: 1.5rem;
}
.hero-card p {
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--light-color);
}
.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
/* Botón claro inspirado en la referencia */
.btn-light {
    background: var(--light-color);
    color: var(--primary-dark);
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
.btn-light:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Botón de contorno semitransparente */
.btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: var(--light-color);
    padding: 1rem 2rem;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s, border-color 0.3s;
}
.btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--light-color);
}

.hero-nvg .site-name {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 800;
}

.hero-nvg .hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* Sección ¿Por qué elegirnos? */
.why-nvg {
    padding: 4rem 2rem;
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--dark-color) 100%);
    color: var(--light-color);
}
.why-nvg h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}
.why-grid {
    display: grid;
    /* Se ajusta a columnas mayores para tarjetas más amplias. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.why-card {
    /* Fondo semitransparente oscuro y borde sutil para simular tarjetas flotantes */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.25rem;
    padding: 2rem;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
}
.why-card:hover {
    transform: translateY(-6px) scale(1.02);
    /* Resplandor azulado alrededor de la tarjeta al hacer hover */
    box-shadow: 0 0 15px rgba(0, 207, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 207, 255, 0.6);
}
/* Emoji que acompaña a cada tarjeta con tamaño grande */
.why-card .emoji {
    font-size: 3rem;
    margin-bottom: 1rem;
    /* Ajustamos el color del emoji para que contraste con el fondo oscuro. */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.why-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--light-color);
    text-align: left;
}
.why-card p {
    font-size: 0.9rem;
    color: var(--gray-color);
    text-align: left;
    line-height: 1.5;
}

/* Sección de plataformas */
.platforms-nvg {
    padding: 4rem 2rem;
    background: var(--dark-color);
    color: var(--light-color);
    text-align: center;
}
.platforms-nvg h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}
.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}
.platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}
.platform-card:hover .icon {
    transform: scale(1.1);
}
.platform-card .icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s;
}
.platform-card span {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Sección de estadísticas */
.stats-nvg {
    padding: 4rem 2rem;
    background: linear-gradient(180deg, var(--primary-dark), var(--accent-dark));
    color: var(--light-color);
}
.stats-nvg .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.stats-card {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, box-shadow 0.3s;
}
.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.stats-card .number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}
.stats-card .label {
    font-size: 0.9rem;
    color: var(--gray-color);
}

/* =================================================================
   Nueva sección Hero Premium (Multiplica tus Ganancias)
   Inspirada en la cabecera de NVG Store: incluye badge, título,
   subtítulo, caja de precio, botones de acción y lista de ventajas.
   Utiliza un fondo oscuro con gradiente y rejilla sutil.
================================================================== */
.hero-premium {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
                linear-gradient(135deg, var(--dark-color), var(--primary-dark));
    position: relative;
    overflow: hidden;
    color: var(--light-color);
}
.hero-premium .content {
    max-width: 1000px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.hero-premium .badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: var(--secondary-color);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
}
.hero-premium h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.hero-premium h1 .accent {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.hero-premium p {
    font-size: 1.125rem;
    max-width: 700px;
    color: var(--gray-color);
}
.hero-premium .price-box {
    margin-top: 1rem;
    padding: 1rem 2rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    color: var(--secondary-color);
    min-width: 200px;
}
.hero-premium .price-box .desde {
    font-size: 0.9rem;
    color: var(--gray-color);
    margin-bottom: 0.25rem;
}
.hero-premium .price-box .price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--secondary-color);
    line-height: 1;
}
.hero-premium .price-box small {
    font-size: 0.75rem;
    color: var(--gray-color);
    margin-top: 0.25rem;
}
.hero-premium .hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.hero-premium .hero-features {
    list-style: none;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--secondary-color);
}
.hero-premium .hero-features li::before {
    content: '✓';
    margin-right: 0.5rem;
    color: var(--secondary-color);
}

/* ================================================================
   Sección Comienza Sin Inversión Inicial
   Caja semitransparente con lista de características y botones
================================================================= */
.start-nvg {
    padding: 4rem 2rem;
    background: linear-gradient(180deg, var(--primary-dark), var(--dark-color));
    color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.start-nvg .start-content {
    max-width: 800px;
    width: 100%;
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}
.start-nvg h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--light-color);
}
.start-nvg p {
    font-size: 1rem;
    color: var(--gray-color);
    margin-bottom: 1.5rem;
}
.start-nvg .start-features {
    list-style: none;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.start-nvg .start-features li {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: var(--light-color);
}
.start-nvg .start-features li::before {
    content: '✔';
    margin-right: 0.75rem;
    color: var(--secondary-color);
    font-weight: 700;
}
.start-nvg .start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* =================================================================
   Botones mejorados
   Diferenciación clara entre botones principales y secundarios
   con efectos de hover, pulse, brillo y animaciones en iconos
================================================================== */
.btn-primary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--light-color);
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    animation: pulse 2s infinite;
    text-decoration: none;
}
.btn-primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 255, 128, 0.4), 0 0 15px rgba(0, 255, 128, 0.6);
}
.btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Shine effect */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s;
}
.btn-primary:hover::after {
    left: 200%;
}
/* Pulse animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
/* Icon animation */
.btn-primary i {
    transition: transform 0.5s ease;
}
.btn-primary:hover i {
    transform: rotate(360deg);
}

/* Botón secundario */
.btn-secondary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    color: var(--light-color);
    background: rgba(255,255,255,0.1);
    border: 2px solid var(--secondary-color);
    transition: color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s;
    text-decoration: none;
}
.btn-secondary:hover {
    color: var(--primary-dark);
    background: var(--light-color);
    border-color: var(--primary-color);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0,255,128,0.3);
}
.btn-secondary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Borde animado con degradado al hacer hover */
.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    padding: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.btn-secondary:hover::before {
    opacity: 1;
}
/* Icon hover animation for secondary */
.btn-secondary i {
    transition: transform 0.5s ease;
}
.btn-secondary:hover i {
    transform: translateY(-3px);
}

/* ================================================================
   Sección de llamada a la acción final (Únete a Miles de Revendedores)
   Hereda parte del estilo del hero-card pero se coloca sobre un
   fondo oscuro, con texto grande y botones similares al hero.
================================================================= */
.cta-nvg {
    padding: 4rem 1rem;
    background: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
}
.cta-nvg .cta-card {
    max-width: 900px;
    width: 100%;
    padding: 3rem 2rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    text-align: center;
}
.cta-nvg .cta-card h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--light-color);
}
.cta-nvg .cta-card p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: var(--light-color);
}
.cta-nvg .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}