/* ============================================ */
/* VARIABLES LOCALES PARA INDEX (CLARO/OSCURO)  */
/* ============================================ */
:root {
    --borde-tarjeta: #e2e8f0;
    --fondo-etiqueta: #cfd0d0;
    --texto-etiqueta: #1e3a8a;
    --texto-secundario: #64748b;
    --texto-resumen: #475569;
    --color-enlace: #3b82f6;
    /* Tu gradiente claro */
    --uiverse-gradiente: linear-gradient(163deg, #edfff8 0%, #bfc5ce 100%);
    --uiverse-shadow: rgba(52, 211, 153, 0.4);
}

body.dark-mode {
    --borde-tarjeta: #4b5563; 
    --fondo-etiqueta: rgba(0, 102, 255, 0.2); 
    --texto-etiqueta: #4ade80; /* Un verde más brillante para que contraste */
    /* 🔥 AQUÍ ESTABA EL ERROR: Cambié tus grises oscuros por grises muy claros/blancos 🔥 */
    --texto-secundario: #9ca3af; 
    --texto-resumen: #f3f4f6; 
    --color-enlace: #60a5fa; 
    /* Tu gradiente oscuro */
    --uiverse-gradiente: linear-gradient(163deg, #8097906a 0%, #807d7d6e 100%);
    --uiverse-shadow: rgba(255, 255, 255, 0.1);
}

.main-content {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* ============================================ */
/* 1. HERO DEFINITIVO: FLUJO DE ENERGÍA ANIMADO */
/* ============================================ */
.hero-abstract {
    position: relative;
    width: 100vw;
    /* 🔥 CORRECCIÓN: Bajamos la altura de 85vh a 55vh para acercar las tarjetas 🔥 */
    min-height: 90vh; 
    margin-left: calc(-50vw + 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
    overflow: hidden;
}

body.dark-mode .hero-abstract {
    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
}

/* --- Olas abstractas gigantes (Rotando) --- */
.wave-layer {
    position: absolute;
    width: 250vw;
    height: 250vw;
    border-radius: 43%;
    left: -75vw;
    animation: spin-abstract 25s infinite linear;
    z-index: 1;
}

/* Solar */
.wave-1 { top: 30%; background: rgba(250, 204, 21, 0.15); animation-duration: 35s; }
/* Naturaleza */
.wave-2 { top: 45%; background: rgba(34, 197, 94, 0.2); animation-duration: 25s; animation-direction: reverse; }
/* Agua */
.wave-3 { top: 60%; background: rgba(56, 189, 248, 0.25); animation-duration: 20s; }

/* Ajuste de colores para Modo Oscuro (Efecto neón sutil) */
body.dark-mode .wave-1 { background: rgba(250, 204, 21, 0.05); }
body.dark-mode .wave-2 { background: rgba(16, 185, 129, 0.1); }
body.dark-mode .wave-3 { background: rgba(56, 189, 248, 0.1); }

@keyframes spin-abstract {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Líneas de Viento veloces --- */
.wind-lines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

.wind-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    border-radius: 50%;
    width: 200px;
    animation: wind-blow 6s infinite linear;
    opacity: 0;
}

body.dark-mode .wind-line { 
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5), transparent); 
}

.w-1 { top: 20%; left: -200px; animation-duration: 4s; animation-delay: 0s; }
.w-2 { top: 40%; left: -200px; animation-duration: 7s; animation-delay: 2s; width: 300px; }
.w-3 { top: 70%; left: -200px; animation-duration: 5s; animation-delay: 1s; }
.w-4 { top: 85%; left: -200px; animation-duration: 6s; animation-delay: 3s; width: 150px; }

@keyframes wind-blow {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(120vw); opacity: 0; }
}

/* --- Tarjeta Central de Cristal --- */
.hero-text-box {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 700px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .hero-text-box {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.hero-text-box h1 {
    font-size: 4.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 10px 0;
    letter-spacing: -1.5px;
}

body.dark-mode .hero-text-box h1 { color: #f8fafc; }

.hero-text-box p {
    font-size: 1.2rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 0; 
}

body.dark-mode .hero-text-box p { color: #cbd5e1; }

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 768px) {
    .hero-text-box { margin: 20px; padding: 30px 20px; }
    .hero-text-box h1 { font-size: 3.2rem; }
    .hero-text-box p { font-size: 1.1rem; }
}
/* ============================================ */
/* 2. TARJETAS UIVERSE (PUBLICACIONES)          */
/* ============================================ */
.publicaciones-grid {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 35px 20px 60px 20px;
}
.destacados-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 50px;
}

.uiverse-wrapper {
    width: 100%; background-image: var(--uiverse-gradiente);
    border-radius: 20px; transition: all .3s; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.uiverse-inner {
    width: 100%; height: 100%; background-color: var(--white);
    border-radius: 20px; transition: all .2s; display: flex;
    flex-direction: column; overflow: hidden;
}
.uiverse-wrapper:hover {
    box-shadow: 0px 0px 25px 2px var(--uiverse-shadow);
    transform: translateY(-5px);
}
.uiverse-wrapper:hover .uiverse-inner {
    transform: scale(0.98); border-radius: 18px;
}

.destacado-imagen { width: 100%; height: 180px; overflow: hidden; }
.destacado-imagen img { width: 100%; height: 100%; object-fit: cover; }
.destacado-contenido { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.destacado-categoria {
    display: inline-block; background: var(--fondo-etiqueta); color: var(--texto-etiqueta);
    font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; font-weight: 600; width: fit-content;
}
.destacado-titulo { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; line-height: 1.4; }
.destacado-fecha { font-size: 0.75rem; color: var(--texto-secundario); margin-bottom: 12px; }
.destacado-resumen { font-size: 0.85rem; color: var(--texto-resumen); line-height: 1.5; max-height: 3.9em; overflow: hidden; }

/* Lista vertical infinita */
.lista-vertical { margin-top: 50px; }
.vertical-card-wrapper {
    width: 100%; background-image: var(--uiverse-gradiente);
    border-radius: 20px; transition: all .3s; margin-bottom: 30px; cursor: pointer;
}
.vertical-card-inner {
    display: flex; gap: 25px; background-color: var(--white);
    border-radius: 20px; transition: all .2s; overflow: hidden;
}

.vertical-card-wrapper:hover {
    box-shadow: 0px 0px 25px 2px var(--uiverse-shadow);
    transform: translateX(5px);
}
.vertical-card-wrapper:hover .vertical-card-inner {
    transform: scale(0.985); border-radius: 18px;
}

.vertical-imagen { width: 280px; flex-shrink: 0; }
.vertical-imagen img { width: 100%; height: 100%; object-fit: cover; }
.vertical-contenido { padding: 25px; flex: 1; }
.vertical-categoria { display: inline-block; background: var(--fondo-etiqueta); color: var(--texto-etiqueta); font-size: 0.75rem; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; font-weight: 600; }
.vertical-titulo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.vertical-meta { font-size: 0.8rem; color: var(--texto-secundario); margin-bottom: 15px; }
.vertical-resumen { color: var(--texto-resumen); line-height: 1.6; margin-bottom: 15px; }
.vertical-leer-mas { color: var(--color-enlace); font-weight: 600; font-size: 0.9rem; }

/* Separador */
.separador { text-align: center; margin: 40px 0; position: relative; }
.separador span { background-color: var(--bg-main); padding: 0 20px; color: var(--texto-secundario); font-size: 0.9rem; position: relative; z-index: 1; }
.separador::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--borde-tarjeta); z-index: 0; }

@media (max-width: 1024px) { .destacados-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .hero-content h1 { font-size: 3.5rem; }
    .destacados-grid { grid-template-columns: 1fr; }
    .vertical-card-inner { flex-direction: column; }
    .vertical-imagen { width: 100%; height: 200px; }
}
/* Para pantallas menores a 768px (celulares y tablets) */
@media (max-width: 768px) {
    .destacados-grid, .publicaciones-grid {
        grid-template-columns: 1fr !important; /* Fuerza una sola columna */
        gap: 15px;
    }

    .hero-text-box h1 {
        font-size: 2rem; /* Reduce el tamaño del título para que no se corte */
    }
}
/* --- AJUSTES PARA MÓVIL --- */
@media (max-width: 768px) {
    /* Hacemos que la cuadrícula de destacados sea de 1 sola columna */
    .destacados-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Las tarjetas verticales ahora se apilan hacia abajo */
    .vertical-card-inner {
        flex-direction: column !important;
    }

    /* La imagen ocupa todo el ancho en lugar de 280px */
    .vertical-imagen {
        width: 100% !important;
        height: 200px;
    }

    .hero-text-box h1 {
        font-size: 2.5rem; /* Un poco más pequeño para que no se corte */
    }
}