/* --- RESET BÁSICO Y FUENTE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    background: #0a0118; /* Fallback de fondo */
}

/* --- FONDO ESPACIAL --- */
.container {
    min-height: 100vh;
    background: linear-gradient(to bottom, #0a0118 0%, #1a0b2e 50%, #2d1b4e 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#stars {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.nebula {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    z-index: 1;
}

.nebula-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}

.nebula-blob-1 { top: 5rem; left: 25%; width: 24rem; height: 24rem; background: rgba(147, 51, 234, 0.3); }
.nebula-blob-2 { bottom: 10rem; right: 25%; width: 24rem; height: 24rem; background: rgba(37, 99, 235, 0.3); }
.nebula-blob-3 { top: 50%; left: 50%; width: 24rem; height: 24rem; background: rgba(6, 182, 212, 0.2); }

/* --- CONTENIDO PRINCIPAL --- */
.content {
    position: relative;
    z-index: 10; 
    padding: 2rem;
    max-width: 90rem;
    margin: 0 auto; 
    flex-grow: 1; 
    width: 100%;
}

/* --- HEADER --- */
.app-header {
    width: 100%;
    padding: 0; 
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0; 
    margin-bottom: 3rem;
    position: relative;
    z-index: 50; 
}

.header-content-wrapper {
    max-width: 90rem;
    margin: 0 auto;
    padding: 1rem;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.centered-title {
    color: #9333ea; 
    font-size: 1.5rem;
    font-weight: 800; 
    text-align: center;
    flex-grow: 1; 
    margin: 0 1rem; 
    text-shadow: 0 0 5px rgba(147, 51, 234, 0.5), 0 0 10px rgba(147, 51, 234, 0.3);
    transition: text-shadow 0.3s;
}
.centered-title:hover {
    text-shadow: 0 0 10px #fff, 0 0 20px #9333ea;
}

/* Menú Móvil (Botón Hamburguesa) */
.menu-mobile {
    position: relative;
    z-index: 100;
    flex-shrink: 0; 
}

#menu-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem; 
    border-radius: 50%; 
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}
#menu-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

#menu-toggle-btn svg {
    width: 24px;
    height: 24px;
}

/* Menú Desplegable (Dropdown) */
#menu-dropdown {
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a0b2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    width: 300px;
    margin-top: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeInMenu 0.3s ease-out;
    z-index: 1100; 
    max-height: 80vh;
    overflow-y: auto;
}

#menu-dropdown.active {
    display: block; 
}

#menu-dropdown a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s, color 0.3s;
}
#menu-dropdown a:hover {
    background-color: rgba(34, 211, 238, 0.3);
    color: white;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.social-icons-dropdown { 
    display: none; 
}

/* --- BARRA DE NAVEGACIÓN SECUNDARIA (OPCIONES CLAVE) --- */
.main-nav-desktop-secondary {
    display: none; 
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 3rem; 
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1rem;
    padding-top: 1rem;
    flex-grow: 1; 
}

.main-nav-desktop-secondary a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0; 
    transition: color 0.3s;
    white-space: nowrap; 
    position: relative;
}

.main-nav-desktop-secondary a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #22d3ee; 
    transition: width 0.3s ease;
}

.main-nav-desktop-secondary a:hover {
    color: #22d3ee; 
}

.main-nav-desktop-secondary a:hover::after {
    width: 100%;
}

/* --- CONTENEDOR DE ICONOS SOCIALES PERMANENTES EN DESKTOP --- */
.social-icons-desktop {
    display: none; 
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
/* Estilo base para todos los enlaces de iconos (LinkedIn y WhatsApp) */
.social-icons-desktop a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s, transform 0.3s;
    line-height: 1;
    font-size: 1.5rem; /* Base size for Font Awesome icons */
}

/* **AJUSTE CLAVE 1: Estilo para el icono de LinkedIn (para que parezca un botón/cuadrado)** */
.social-icons-desktop a:not(.whatsapp) {
    color: #ccc; /* Base color para silueta */
    /* Ajustamos el SVG del LinkedIn para que tenga relleno completo si fuese SVG */
}

/* **AJUSTE CLAVE 2: Estilo específico para el ícono SVG/Font Awesome de WhatsApp** */
.social-icons-desktop a i.fa-whatsapp {
    font-size: 1.5rem; /* Ajuste del tamaño de la silueta */
}

/* AJUSTE DE COLOR: Iconos brillando en hover */
.social-icons-desktop a:hover {
    color: #0077B5; /* Color por defecto al pasar el ratón (se usará para LinkedIn) */
    filter: drop-shadow(0 0 5px #0077B5);
    transform: scale(1.05);
}
/* Hover de WhatsApp */
.social-icons-desktop a.whatsapp:hover {
    color: #25D366; /* Color verde WhatsApp en hover */
    filter: drop-shadow(0 0 5px #25D366);
    transform: scale(1.1); /* Ligeramente más grande para WhatsApp */
}

/* **Ajuste para LinkedIn (SVG)** */
.social-icons-desktop a:not(.whatsapp) svg {
    /* Como el LinkedIn en tu código es un SVG lleno, lo dejamos que herede el color */
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* --- Media Queries para el Header --- */
@media (min-width: 1024px) {
    
    .menu-mobile {
        display: flex; 
        align-items: center;
        margin-right: 1rem; 
    }
    
    .header-top {
        display: grid;
        grid-template-columns: auto 1fr auto; 
        align-items: center;
        gap: 1rem;
    }

    .centered-title {
        grid-column: 2 / 3;
        text-align: center; 
        font-size: 2rem;
    }
    
    .social-icons-desktop {
        grid-column: 3 / 4;
        display: flex;
    }
    
    .main-nav-desktop-secondary {
        display: flex; 
        justify-content: center;
        gap: 2rem;
        padding: 0.8rem 0 1rem; 
        border-top: none; 
        margin-top: 0;
    }
    
    #menu-dropdown {
        left: auto;
        right: 0;
    }
}

/* AJUSTES RESPONSIVOS ADICIONALES PARA MÓVIL */
@media (max-width: 1023px) {
    .header-top {
        justify-content: space-between;
        gap: 1rem;
    }
    .centered-title {
        text-align: center;
    }
    .social-icons-desktop {
        display: none; 
    }
}
/* --- Fin del CSS del Nuevo Header --- */


/* El resto del CSS de la página (grid, tarjetas, footer) se mantiene igual */

/* ... [Resto del CSS (main-grid, glass-card, etc.) sigue aquí] ... */

/* --- GRID PRINCIPAL RESPONSIVO --- */
.main-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto para móviles */
    gap: 2rem;
}

/* En pantallas grandes, 3 columnas */
@media (min-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr 1.5fr 1fr; /* Columna central más ancha */
        align-items: start; /* Alinea las tarjetas al inicio */
    }
}

/* --- TARJETAS LATERALES --- */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    height: 100%;
    display: flex; /* Añadido para controlar mejor el contenido */
    flex-direction: column; /* Contenido apilado verticalmente */
}

.neon-border-purple {
    border: 2px solid rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 10px rgba(168, 85, 247, 0.1);
}
.neon-border-cyan {
    border: 2px solid rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 0 0 20px rgba(34, 211, 238, 0.3), inset 0 0 10px rgba(34, 211, 238, 0.1);
}

/* Animaciones de Entrada (Mejorado) */
.card-students
{
    background: linear-gradient(to bottom right, rgba(88, 28, 135, 0.3), rgba(147, 51, 234, 0.2));
    animation: fadeInLeft 0.6s ease-out;
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
.card-professionals {
    background: linear-gradient(to bottom right, rgba(13, 71, 161, 0.3), rgba(6, 182, 212, 0.2));
    animation: fadeInRight 0.6s ease-out 0.4s backwards;
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ANIMACIÓN DE FLOTACIÓN (PARA GLOBO) --- */
@keyframes float {
    0%, 100% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, -10px); }
}

/* Contenido común de tarjetas... (mantengo el resto del CSS de tarjetas) */
.card-title { color: white; font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; } /* CENTRADO */
.icons-row { display: none; } /* ELIMINADO */
.chart-container { display: none; } /* ELIMINADO */

/* Modificación para el badge de estudiante */
.badge { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 1rem; 
    border-radius: 1rem; 
    margin-bottom: 0.75rem; 
    text-align: left; /* Alineado a la izquierda por defecto, se ajustará con la clase .text-center */
}
/* Color púrpura para estudiantes */
.badge-student
{
    background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(88, 28, 135, 0.3));
    border: 1px solid rgba(168, 85, 247, 0.6); 
    box-shadow: 0 4px 6px rgba(168, 85, 247, 0.2); 
    height: auto;
}
/* Color cian para profesionales */
.badge-professional {
    background: linear-gradient(to right, rgba(6, 182, 212, 0.2), rgba(13, 71, 161, 0.3));
    border: 1px solid rgba(34, 211, 238, 0.5); 
    box-shadow: 0 4px 6px rgba(34, 211, 238, 0.2); 
    height: auto;
}
.badge-icon { font-size: 1.5rem; color: white; flex-shrink: 0; }
.badge-text { color: white; font-size: 0.875rem; display: flex; flex-direction: column; text-align: left; } /* Alineado a la izquierda por defecto */
/* Clases para el texto nuevo multilínea */
.badge-text-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.badge-text-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; line-height: 1.3; }

/* NUEVO: Clase para centrar el texto dentro del badge */
.badge-text.text-center {
    text-align: center;
    align-items: center; /* Centra los elementos internos si son flex */
}

/* Estilo de los enlaces/botones de acción principales */
.btn-action {
    display: block; /* Asegura que la etiqueta <a> se comporte como un botón de bloque */
    text-decoration: none; /* Elimina el subrayado */
    text-align: center;
    padding: 0.75rem; 
    border-radius: 9999px; 
    color: white; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; /* Apila el texto principal y el subtítulo */
    align-items: center; 
    justify-content: center; 
    gap: 0.25rem;
    transition: all 0.3s; 
    font-size: 1rem; 
    font-weight: 700;
    margin-top: auto; /* Empuja el botón hacia abajo */
}

/* Estilo específico para SOY ESTUDIANTE */
.btn-action-student { 
    background: #9333ea; /* Púrpura */
    border: 1px solid #c084fc; 
}
.btn-action-student:hover { 
    background: #a855f7; 
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.8); 
}
/* Estilo específico para SOY PROFESIONAL */
.btn-action-professional { 
    background: #06b6d4; /* Cyan */
    border: 1px solid #67e8f9; 
}
.btn-action-professional:hover { 
    background: #22d3ee; 
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.8); 
}
.btn-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    /* ✅ CORRECCIÓN ACCESIBILIDAD: Se corrige la opacidad a 1 para asegurar el contraste de color */
    opacity: 1;
}

/* Estilo para los botones Gemini */
.gemini-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem; /* Espacio antes del botón principal */
}
.btn-gemini-small {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #c084fc;
    color: #c084fc;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
    width: 100%;
    text-align: center;
}
.btn-gemini-small:hover {
    background: rgba(147, 51, 234, 0.3);
    color: white;
    border-color: white;
}
/* Variante para la tarjeta cian */
.btn-gemini-small-cyan {
    border: 1px solid #67e8f9;
    color: #67e8f9;
}
.btn-gemini-small-cyan:hover {
    background: rgba(34, 211, 238, 0.3);
    color: white;
    border-color: white;
}

/* Texto de instrucción "Haz click aquí" */
.click-instruction {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    margin-top: -0.25rem;
    font-style: italic;
}


.stat-big { display: none; } /* ELIMINADO */
.list-title { display: none; } /* ELIMINADO */
.industry-list { display: none; } /* ELIMINADO */

/* El botón original .btn-view-all ya no se usa, pero lo mantengo por si acaso, aunque lo reemplazamos con .btn-action-professional */
.btn-view-all { display: none; }

/* --- NUEVO: ESTILO PARA EL BADGE DEL CENTRO --- */
.central-info-badge {
    position: absolute;
    top: 250px; /* Ajustar verticalmente debajo del globo/arriba del podio */
    left: 50%;
    transform: translateX(-50%);
    z-index: 15; /* Para que esté sobre la base del podio, pero debajo del globo */
    
    /* Estilos del Badge */
    background: linear-gradient(to right, rgba(147, 51, 234, 0.7), rgba(34, 211, 238, 0.7));
    backdrop-filter: blur(10px);
    border: 1px solid white;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.6);
    
    width: 90%;
    max-width: 300px; /* Tamaño máximo razonable */
}

.central-info-badge span {
    display: block;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}
.central-info-badge small {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
}
/* Animación de flotación más sutil */
.central-info-badge {
    animation: subtleFloat 4s ease-in-out infinite;
}
@keyframes subtleFloat {
    0%, 100% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, 5px); }
}

/* En desktop, el badge puede subir un poco más */
@media (min-width: 1024px) {
    .central-info-badge {
        top: 300px;
        max-width: 350px;
    }
}


/* --- SECCIÓN CENTRAL (COMPOSICIÓN) --- */
.hero-composition-center {
    position: relative;
    min-height: 500px;
    display: flex;
    justify-content: center;
    /* align-items: center; ELIMINADO para permitir el posicionamiento manual */
    padding-top: 2rem;
    grid-column: 1 / -1; /* Ocupa todo el ancho en móvil */
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
    /* overflow: hidden; --- ELIMINADO para arreglar el corte del podio --- */
}

/* En escritorio, se sitúa en la segunda columna */
@media (min-width: 1024px) {
    .hero-composition-center {
        grid-column: 2 / 3;
        min-height: 600px;
    }
}

/* Globo 3D */
.world-container {
    position: absolute;
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%;
    max-width: 450px; 
    aspect-ratio: 1;
    z-index: 10; 
    animation: float 3s ease-in-out infinite; 
}

#world-canvas {
    width: 100%;
    height: 100%;
    cursor: grab;
}
#world-canvas:active {
    cursor: grabbing;
}

/* Tooltip del Pin */
.pin-tooltip {
    position: absolute; /* AJUSTADO: De fixed a absolute */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
    pointer-events: none;
    transform: translate(-50%, -150%);
}

/* Controles (Home, Rotar) */
.controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
}
.control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    border: 1.5px solid transparent; /* Ajustado para que se vea el borde inicial */
}
.control-btn:hover { background: rgba(255, 255, 255, 0.2); }
.control-btn.active { border: 2px solid #22d3ee; box-shadow: 0 0 8px #22d3ee; }

/* --- FOOTER (NUEVO CONTENIDO) --- */
.footer {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto; /* Se pega al final */
}
.footer p {
    margin-bottom: 0.5rem;
}
.footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s;
}
.footer a:hover {
    color: white;
}
/* Estilos para los links del footer */
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que se ajusten en móvil */
    gap: 1rem;
    margin-bottom: 1rem;
}
.footer-links a {
    white-space: nowrap; /* Evita que los links se partan */
}


/* AJUSTES RESPONSIVOS */
@media (max-width: 1023px) {
    .hero-composition-center { min-height: 450px; }
    .world-container { max-width: 400px; }
}

@media (max-width: 480px) {
    .hero-composition-center { min-height: 400px; }
    .world-container { max-width: 320px; }
    /* Header */
    .centered-title { font-size: 1.2rem; }
    /* Footer */
    .footer { padding: 1.5rem 1rem; }
    .footer-links { flex-direction: column; gap: 0.5rem; }
    .central-info-badge {
        top: 200px; /* Ajuste para móvil */
        padding: 0.75rem 1rem;
    }
    .central-info-badge span {
        font-size: 1rem;
    }
}


/* --- NUEVA SECCIÓN: PULSO GLOBAL (ARTÍCULOS) --- */
.global-pulse {
    position: relative;
    z-index: 10;
    margin-top: 4rem; /* Espacio después de la grilla principal */
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.section-title {
    color: white;
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2.5rem;
}

/* --- INICIO: CAMBIOS DE CARRUSEL A GRILLA --- */
.articles-grid
{
    display: grid; /* VUELVE A SER GRID */
    grid-template-columns: 1fr; /* 1 columna en móvil */
    gap: 2rem;
    /* Eliminadas las propiedades de flex y scroll */
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (min-width: 1024px) {
    .articles-grid {
        /* grid-template-columns: repeat(3, 1fr); 3 columnas en desktop */
        grid-template-columns: repeat(4, 1fr); /* CAMBIO: 4 columnas en desktop */
    }
}

.article-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%; /* Para que las tarjetas tengan la misma altura en la grilla */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Eliminadas las propiedades de flex-basis y scroll-snap */
}

.article-card:hover {
    transform: translateY(-5px);
}

/* Eliminados los estilos de .articles-carousel-wrapper y .carousel-arrow */
/* --- FIN: CAMBIOS DE CARRUSEL A GRILLA --- */


/* Colores de Borde Neón */
/* .neon-border-purple y .neon-border-cyan ya existen */
.neon-border-blue {
    border: 2px solid rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(59, 130, 246, 0.1);
}
.article-card:hover {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5); /* Brillo púrpura genérico en hover */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: white;
}

.category-purple { background-color: rgba(168, 85, 247, 0.3); border: 1px solid rgba(168, 85, 247, 0.7); }
.category-cyan { background-color: rgba(34, 211, 238, 0.3); border: 1px solid rgba(34, 211, 238, 0.7); }
.category-blue { background-color: rgba(59, 130, 246, 0.3); border: 1px solid rgba(59, 130, 246, 0.7); }

.profile-badge
{
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.article-title
{
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: none; /* OCULTADO: Ya no usamos el título individual */
}

.article-excerpt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Empuja el footer del artículo hacia abajo */
    display: none; /* OCULTADO: Ya no usamos el extracto individual */
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Se asegura de que el footer esté al final */
    display: none; /* OCULTADO: Ya no usamos el footer individual */
}

.btn-ia-summary {
    /* Estilo similar a .btn-gemini-small pero más genérico */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-ia-summary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
}

.btn-read-more
{
    color: #22d3ee;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s, text-shadow 0.3s;
}

.btn-read-more:hover {
    color: white;
    text-shadow: 0 0 5px #22d3ee;
}

/* --- NUEVOS ESTILOS PARA CAPSULAS DE CATEGORÍA --- */

/* Nueva lista de títulos */
.article-title-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

.article-title-list li {
    margin-bottom: 0.75rem;
    position: relative;
    /* Transición para el hover */
    transition: all 0.2s ease-out;
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem; /* Padding para el hover y el bullet */
}

/* --- VIÑETA DE PULSO NEÓN --- */
.article-title-list li::before {
    content: ''; /* Viñeta vacía */
    position: absolute;
    left: 0.5rem; /* Espacio desde la izquierda */
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%);
    width: 8px; /* Tamaño de la viñeta */
    height: 8px;
    border-radius: 50%;
    /* Animación de pulso */
    animation: neonPulse 2s infinite ease-in-out;
    transition: transform 0.3s ease;
}

/* Definición de la animación de pulso */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 4px 0px var(--pulse-color);
    }
    50% {
        box-shadow: 0 0 10px 3px var(--pulse-color);
    }
}

/* Colores de la viñeta y del pulso */
.neon-border-purple .article-title-list li::before {
    background-color: #c084fc;
    --pulse-color: rgba(192, 132, 252, 0.7);
}
.neon-border-blue .article-title-list li::before {
    background-color: #60a5fa;
    --pulse-color: rgba(96, 165, 250, 0.7);
}
.neon-border-cyan .article-title-list li::before {
    background-color: #22d3ee;
    --pulse-color: rgba(34, 211, 238, 0.7);
}

.article-title-list li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s, text-shadow 0.3s;
}

.article-title-list li a:hover {
    color: white;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

/* --- NUEVO: Efecto hover en la lista de noticias --- */
.article-title-list li:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.03); /* Sutil efecto de zoom */
}
.article-title-list li:hover a {
    color: white;
}
/* Interacción de hover en la viñeta */
.article-title-list li:hover::before {
    transform: translateY(-50%) scale(1.2); /* Crece un poco */
    animation-duration: 0.5s; /* Pulso se acelera */
}
/* --- FIN DE NUEVO EFECTO --- */


/* Nuevo botón "Ver Todo" */
.btn-view-all-category {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    border-radius: 9999px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto; /* Empuja al fondo */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-view-all-category span {
    transition: transform 0.3s ease;
    display: inline-block;
    margin-left: 0.25rem;
}

.btn-view-all-category:hover {
    background: white;
    color: #0a0118; /* Color de fondo oscuro */
    box-shadow: 0 0 15px white;
}

.btn-view-all-category:hover span {
    transform: translateX(5px);
}

/* Ajuste de color del botón "Ver Todo" por tarjeta */
.neon-border-purple .btn-view-all-category {
    border-color: #c084fc;
}
.neon-border-purple .btn-view-all-category:hover {
    background: #c084fc;
    color: #0a0118;
    box-shadow: 0 0 15px #c084fc;
    border-color: #c084fc;
}

.neon-border-cyan .btn-view-all-category {
    border-color: #67e8f9;
}
.neon-border-cyan .btn-view-all-category:hover {
    background: #67e8f9;
    color: #0a0118;
    box-shadow: 0 0 15px #67e8f9;
    border-color: #67e8f9;
}

.neon-border-blue .btn-view-all-category {
    border-color: #60a5fa;
}
.neon-border-blue .btn-view-all-category:hover {
    background: #60a5fa;
    color: #0a0118;
    box-shadow: 0 0 15px #60a5fa;
    border-color: #60a5fa;
}
/* --- FIN DE NUEVOS ESTILOS --- */

/* --- NUEVO: BOTÓN "EXPLORAR TODAS" --- */
.explore-all-container {
    text-align: center;
    margin-top: 3rem; /* Espacio después de la grilla de artículos */
}
.btn-explore-all {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(to right, #9333ea, #3b82f6);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 9999px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}
.btn-explore-all:hover {
    background: linear-gradient(to right, #a855f7, #60a5fa);
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.8);
    transform: scale(1.05);
}
.btn-explore-all span {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}
.btn-explore-all:hover span {
    transform: translateX(6px);
}
/* --- FIN DE BOTÓN "EXPLORAR TODAS" --- */