/* =========================================
   1. IMPORTACIÓN OBLIGATORIA
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================================
   2. REGLAS MAESTRAS DE FUENTE (FIX DEFINITIVO)
   ========================================= */

/* A. Forzamos la fuente en el BODY y en todos los contenedores principales */
body, html, .vp-page, .sp-page {
    font-family: 'Poppins', sans-serif !important;
}

/* B. EL ARREGLO: Atacamos directamente a los enlaces (<a>) dentro de los títulos.
   A veces el H3 cambia, pero el enlace de dentro se queda con la fuente vieja. */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family: 'Poppins', sans-serif !important;
}

/* =========================================
   3. SECCIÓN HERO (AZUL)
   ========================================= */
.vp-hero-section, 
.vp-search-hero { 
    /* Tu gradiente corporativo */
    background: linear-gradient(135deg, #5C7CFF 0%, #3A5CCC 100%) !important;
    padding: 100px 20px 120px; 
    position: relative;
    border: none !important;
}

/* Título GIGANTE "Centro de Recursos" */
.vp-hero-section h1, 
.vp-search-hero h1 {
    font-family: 'Poppins', sans-serif !important; /* Redundancia de seguridad */
    font-weight: 700 !important;
    font-size: 3rem !important;
    color: white !important;
    letter-spacing: -1px;
}

/* Subtítulo */
.vp-hero-section p, 
.vp-search-hero p {
    font-family: 'Poppins', sans-serif !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem;
}

/* Barra de búsqueda */
.vp-search-box, .vp-search-input-container {
    background: white !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border: none !important;
}

.vp-search-input {
    font-family: 'Poppins', sans-serif !important;
}

.vp-search-button {
    background-color: var(--gs-blue-primary) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
}

/* =========================================
   4. TARJETAS / ESPACIOS (HOVER MEJORADO)
   ========================================= */
.vp-landing-tiles-container, .vp-topic-list {
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

/* Estilo Base */
.vp-landing-tile, 
.vp-topic-tile { 
    background: white !important;
    border-radius: 16px !important;
    border: 2px solid transparent !important; /* Preparamos el borde para que no salte al hacer hover */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    padding: 30px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* TÍTULOS DE LAS TARJETAS (El problema anterior) 
   Aquí usamos el selector universal (*) para asegurar que el texto dentro del H3 cambie sí o sí */
.vp-landing-tile h3, .vp-landing-tile h3 *,
.vp-topic-tile h3, .vp-topic-tile h3 * {
    font-family: 'Poppins', sans-serif !important;
    color: #0B1120 !important; /* Tu color oscuro */
    font-weight: 700 !important;
}

/* --- HOVER PREMIUM --- */
.vp-landing-tile:hover, 
.vp-topic-tile:hover {
    transform: translateY(-10px); /* Sube más */
    box-shadow: 0 20px 25px -5px rgba(67, 97, 238, 0.25), 0 10px 10px -5px rgba(67, 97, 238, 0.1) !important; /* Sombra azulada */
    border-color: #4F6BFF !important; /* Borde azul vibrante */
}

/* Texto descriptivo */
.vp-landing-tile p, .vp-topic-tile p {
    font-family: 'Poppins', sans-serif !important;
    color: #64748B !important;
}

/* Enlace "Explorar" falso */
.vp-landing-tile::after {
    content: "Explorar Sección →";
    display: block;
    margin-top: 20px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
    color: #4F6BFF;
    transition: 0.3s;
}

.vp-landing-tile:hover::after {
    padding-left: 8px; /* Animación lateral */
}

/* =========================================
   5. ELIMINACIÓN DE BORDES (TABLAS)
   ========================================= */
table.confluenceTable, table.confluenceTable tbody, table.confluenceTable tr, table.confluenceTable td {
    border: none !important;
    background: transparent !important;
}