<!-- start Simple Custom CSS and JS -->
<style type="text/css">
/* ==========================================================
   ESTILOS EPIDEMIOLOGÍA - DISEÑO PROFESIONAL (ACTUALIZADO)
   ========================================================== */

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700;800&display=swap');

/* =========================================
   ESTILOS DEL BANNER (FULL WIDTH & RESPONSIVE)
   ========================================= */
.epi-full-banner-container {
    width: 100vw; /* Ocupa todo el ancho de la ventana */
    position: relative;
    /* Truco para romper los márgenes del contenedor de WordPress y centrar */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    overflow: hidden;
    margin-bottom: 40px; /* Espacio debajo del banner */
    display: block;
    background-color: #0f172a; /* Color de fondo por si la imagen no carga */
}

.epi-full-banner-img {
    width: 100%;
    /* ALTURA PARA PC: Ajustada para que se vea la imagen completa.
       430px es una buena medida para que se vea imponente y completo. */
    height: 450px; 
    /* 'cover' llena el espacio sin deformar la imagen. */
    object-fit: cover; 
    object-position: center center; 
    display: block;
}

/* RESPONSIVE BANNER: AJUSTE PARA CELULARES */
@media (max-width: 768px) {
    .epi-full-banner-container {
        /* El contenedor se ajusta a la altura de la imagen */
        height: auto;
        margin-bottom: 20px;
    }
    
    .epi-full-banner-img {
        /* CRUCIAL PARA MÓVIL: Altura automática.
           Esto hace que la imagen se escale proporcionalmente al ancho del celular. */
        height: auto !important; 
        max-width: 100%;
        /* 'contain' asegura que se vea TODA la imagen sin ningún recorte */
        object-fit: contain; 
    }
}

/* =========================================
   ESTILOS DEL GRID Y TARJETAS (TU CÓDIGO ANTERIOR)
   ========================================= */

/* 2. CONTENEDOR PRINCIPAL */
#epidemiologia-root {
    width: 100%;
    max-width: 1200px; /* Limitamos el ancho del contenido de las tarjetas */
    margin: 0 auto;
    font-family: 'Lato', sans-serif; 
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding: 0 20px; /* Un poco de margen lateral para el contenido */
}

#epidemiologia-root * {
    box-sizing: border-box;
}

/* 3. GRID RESPONSIVE (4 COLUMNAS) */
#epidemiologia-root .epidemiologia-grid {
    display: grid;
    gap: 30px;
    width: 100%;
    padding: 15px 0; /* Ajuste de padding */
    /* MÓVIL: 1 Columna */
    grid-template-columns: 1fr; 
}

/* TABLET: 2 Columnas */
@media (min-width: 768px) {
    #epidemiologia-root .epidemiologia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC / ESCRITORIO: 4 Columnas Exactas */
@media (min-width: 1200px) {
    #epidemiologia-root .epidemiologia-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 4. TARJETA (CARD) */
#epidemiologia-root .epidemiologia-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

#epidemiologia-root .epidemiologia-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.0);
}

/* 5. CABECERA OSCURA */
#epidemiologia-root .epidemiologia-header {
    background: #0f172a;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#epidemiologia-root .epidemiologia-header::before,
#epidemiologia-root .epidemiologia-header::after {
    content: '❄'; 
    position: absolute; 
    color: rgba(255,255,255,0.08); 
    font-family: sans-serif;
}
#epidemiologia-root .epidemiologia-header::before { top: 10px; left: 15px; font-size: 18px; }
#epidemiologia-root .epidemiologia-header::after { bottom: 10px; right: 15px; font-size: 14px; }

/* 6. CÍRCULO DEL ÍCONO */
#epidemiologia-root .epidemiologia-icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; 
    color: #ffffff;
    border: 4px solid #ffffff; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    z-index: 10;
    margin-top: 45px;
    transition: transform 0.3s ease;
}

#epidemiologia-root .epidemiologia-card:hover .epidemiologia-icon-circle {
    transform: scale(1.05);
}

/* 7. CUERPO DE TEXTO */
#epidemiologia-root .epidemiologia-body {
    padding: 40px 15px 25px 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background: white;
}

#epidemiologia-root .epidemiologia-body h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #334155;
    letter-spacing: 0.5px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

#epidemiologia-root .epidemiologia-card:hover .epidemiologia-body h3 {
    color: #0ea5e9;
}

/* 8. BLINDAJE DE ICONOS */
#epidemiologia-root .fas, 
#epidemiologia-root .fa-solid,
#epidemiologia-root .fa-brands,
#epidemiologia-root .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
}

/* 9. COLORES */
#epidemiologia-root .color-rojo { background: linear-gradient(135deg, #ef4444, #dc2626); }
#epidemiologia-root .color-amarillo { background: linear-gradient(135deg, #f59e0b, #d97706); }
#epidemiologia-root .color-morado { background: linear-gradient(135deg, #a855f7, #7e22ce); }
#epidemiologia-root .color-azul { background: linear-gradient(135deg, #3b82f6, #2563eb); }
#epidemiologia-root .color-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }
#epidemiologia-root .color-azul-oscuro { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
#epidemiologia-root .color-naranja { background: linear-gradient(135deg, #f97316, #ea580c); }
#epidemiologia-root .color-rosa { background: linear-gradient(135deg, #ec4899, #db2777); }</style>
<!-- end Simple Custom CSS and JS -->
