/* css/main.css */

/* --- Configuración Base --- */
body {
    background-color: #0A0A0A;
    color: #FFFFFF;
    overflow-x: hidden;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

::-webkit-scrollbar-thumb:hover {
    background: #9D00FF;
}

/* --- Efectos Cinematográficos y Texturas --- */

/* Efecto de Ruido (Noise) */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Efecto Radar de Fondo */
.radar-grid {
    /* 1. Asumiendo que guardaste la imagen como 'hero-face.jpg' en assets */
    background-image: url('../assets/images/hero-neon.png');

    /* 2. Posición y Tamaño */
    background-size: cover;
    /* Cubre todo el fondo */
    background-position: center 20%;
    /* Sube un poco la imagen para que los ojos queden cerca del título */
    background-repeat: no-repeat;

    /* 3. La Magia de la "Casi Invisibilidad" */
    opacity: 0.8;
    /* Muy bajo, para que sea sutil */
    /*mix-blend-mode: luminosity;*/
    /* Hace que la imagen tome los colores del fondo (blanco y negro espectral) */

    /* 4. Filtros para hacerla más misteriosa */
    filter: contrast(100%) brightness(60%);

    /* 5. Máscara radial para que no tenga bordes duros */
    mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);

    /* Asegura que no tape los clics */
    pointer-events: none;
}

/* --- Efectos de Neón (Glows) --- */
.text-glow-cyan {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.5);
}

.text-glow-magenta {
    text-shadow: 0 0 10px rgba(200, 0, 255, 0.7), 0 0 20px rgba(200, 0, 255, 0.5);
}

.text-glow-red {
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.5);
}

.box-glow-purple {
    box-shadow: 0 0 15px rgba(157, 0, 255, 0.2);
}

/* --- Inputs Personalizados --- */
.tox-input {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid #333;
    transition: all 0.3s ease;
}

.tox-input:focus {
    outline: none;
    border-color: #00FFFF;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Estado de carga en botón */
.btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* css/main.css - Al final del archivo */

/* =========================================
   ESTILOS PARA LAS TARJETAS DE ARQUETIPOS
   ========================================= */

/* Clase base para todas las tarjetas con fondo de imagen */
.archetype-card-bg {
    /* Posicionamiento y tamaño de la imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Estado inicial: Imagen opaca y oscura */
    /* Usamos un degradado negro semitransparente sobre la imagen para oscurecerla */
    background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.9));
    /* La imagen real se definirá en las clases específicas más abajo */

    /* Transición suave para el efecto hover */
    transition: all 0.4s ease-in-out;

    /* Aseguramos que el texto y los iconos estén siempre encima del fondo */
    position: relative;
    z-index: 1;
}

/* Estado HOVER: Más oscuro y dramático */
.archetype-card-bg:hover {
    /* Aumentamos la opacidad del degradado negro para oscurecer más la imagen */
    background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0.95));
    /* Opcional: Un ligero zoom para un efecto más dinámico */
    /* transform: scale(1.02);  <-- Descomenta si te gusta */
}

/* IMPORTANTE: Para que el fondo de imagen funcione, necesitamos un elemento
   pseudo-clase que contenga la imagen real y se coloque detrás del degradado.
   El degradado definido arriba en background-image se aplica al contenedor principal,
   y la imagen real la aplicaremos a un ::before. */

.archetype-card-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* La imagen específica se definirá aquí */
    background-size: cover;
    background-position: center;
    /* Opacidad inicial de la imagen en sí */
    opacity: 0.8;
    /* Mezcla para que se integre con el fondo negro */
    mix-blend-mode: hard-light;
    z-index: -1;
    /* Detrás del contenido */
    transition: all 0.4s ease-in-out;
}

/* Estado HOVER para la imagen ::before */
.archetype-card-bg:hover::before {
    /* Reducimos aún más la opacidad de la imagen al hacer hover */
    opacity: 0.3s;
    /* Opcional: Un ligero desenfoque para dar profundidad */
    filter: blur(2px);
}


/* =========================================
   IMÁGENES ESPECÍFICAS POR ARQUETIPO
   ========================================= */

.bg-calculator::before {
    background-image: url('../assets/images/archetype-calculator.jpeg');
}

.bg-victim::before {
    background-image: url('../assets/images/archetype-victim.jpeg');
}

.bg-irresistible::before {
    background-image: url('../assets/images/archetype-irresistible.jpeg');
}

.bg-perfectionist::before {
    background-image: url('../assets/images/archetype-perfectionist.jpeg');
}

.bg-intense::before {
    background-image: url('../assets/images/archetype-intense.jpeg');
}

.bg-unstable::before {
    background-image: url('../assets/images/archetype-unstable.jpeg');
}

.bg-gaslighter::before {
    background-image: url('../assets/images/archetype-gaslighter.jpeg');
}

/* =========================================
   SECCIÓN PLANES (NIVELES DE ACCESO)
   ========================================= */

/* Transición suave para levantar las tarjetas laterales al pasar el mouse */
.plan-card-hover {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.plan-card-hover:hover {
    transform: translateY(-8px);
    /* Se levanta un poco */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Sombra de profundidad */
}

/* Animación de "Latido Tóxico" para el Plan Recomendado (El del centro) */
.plan-glow-pulse {
    /* Mantiene la posición levantada por defecto en desktop */
    /* (Nota: Tailwind ya maneja el transform con md:-translate-y-4, aquí solo animamos el brillo) */
    animation: toxic-pulse 3s infinite ease-in-out;
}

@keyframes toxic-pulse {
    0% {
        box-shadow: 0 0 20px rgba(157, 0, 255, 0.1);
        border-color: rgba(157, 0, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 50px rgba(157, 0, 255, 0.3);
        /* Brillo más intenso */
        border-color: rgba(157, 0, 255, 1);
        /* Borde neón puro */
    }

    100% {
        box-shadow: 0 0 20px rgba(157, 0, 255, 0.1);
        border-color: rgba(157, 0, 255, 0.4);
    }
}