/* ==========================================================================
   ESTILOS EXCLUSIVOS - PÁGINA DE SERVICIOS
   Banner de Capacitaciones a todo el ancho + tipografía más dinámica
   ========================================================================== */

/* Tipografía más dinámica y con más carácter para los títulos de esta página */
.servicios .titulo-seccion,
.servicio-banner-overlay h2,
.card h3 {
    font-family: 'Poppins', 'Inter', sans-serif;
}

.card h3 {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   BANNERS DE SERVICIOS - Imagen a un lado (con título incrustado) e
   información al otro, a todo el ancho de la pantalla. Se usan para
   Capacitaciones, Restablecimiento del Contacto y SMAPS.
   Agregar la clase "invertido" voltea el lado de la imagen.
   -------------------------------------------------------------------------- */
.servicio-banner {
    display: flex;
    width: 100%;
    min-height: 480px;
    /* Colores por defecto del banner (variante azul marino original).
       Las variantes de color (.color-rojo, .color-azul) solo cambian
       estas dos variables, y el resto del banner se adapta solo. */
    --banner-c1: #1A2530;
    --banner-c2: #2A3B4C;
}

/* Variante roja: se usa en Medicina General y Laboratorio Clínico */
.servicio-banner.color-rojo {
    --banner-c1: #8B0000;
    --banner-c2: #E50914;
}

/* Variante azul: se usa en Restablecimiento del Contacto entre Familiares */
.servicio-banner.color-azul {
    --banner-c1: #00719E;
    --banner-c2: #00A0DC;
}

/* Variante "grande": al menos el doble de alto que un banner normal.
   Se usa en el Centro de Donación Voluntaria de Sangre para darle
   más protagonismo que al resto de servicios. */
.servicio-banner.grande,
.servicio-banner.grande .servicio-banner-imagen {
    min-height: 960px;
}

.servicio-banner.grande .servicio-banner-etiqueta {
    font-size: 1rem;
    padding: 0.5rem 1.3rem;
}

.servicio-banner.grande .servicio-banner-overlay h2 {
    font-size: 3.4rem;
}

.servicio-banner.grande .servicio-banner-info {
    padding: 4rem 5rem;
}

.servicio-banner.grande .servicio-banner-contenido {
    max-width: 620px;
}

.servicio-banner.grande .servicio-banner-contenido p {
    font-size: 1.2rem;
}

.servicio-banner.grande .servicio-banner-lista li {
    font-size: 1.1rem;
}

.servicio-banner.invertido {
    flex-direction: row-reverse;
}

.servicio-banner-imagen {
    position: relative;
    width: 50%;
    min-height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Degradado oscuro de abajo hacia arriba, para que el título se lea
   bien sin importar qué tan clara sea la foto de fondo */
.servicio-banner-imagen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.82) 0%, rgba(13, 13, 13, 0.15) 55%, rgba(13, 13, 13, 0) 75%);
}

/* Degradado hacia el lado del panel de color, para que la imagen se
   funda con él sin dejar una línea visible en el punto de unión.
   Por defecto el panel está a la derecha, así que el degradado
   de la imagen se pega al borde derecho de la imagen. */
.servicio-banner-imagen::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--banner-c1) 0%, transparent) 0%,
        color-mix(in srgb, var(--banner-c1) 35%, transparent) 45%,
        color-mix(in srgb, var(--banner-c1) 78%, transparent) 75%,
        var(--banner-c1) 100%
    );
}

/* Cuando el banner está invertido, el panel pasa a la izquierda,
   así que el degradado de la imagen se voltea hacia su borde izquierdo */
.servicio-banner.invertido .servicio-banner-imagen::after {
    right: auto;
    left: 0;
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--banner-c1) 0%, transparent) 0%,
        color-mix(in srgb, var(--banner-c1) 35%, transparent) 45%,
        color-mix(in srgb, var(--banner-c1) 78%, transparent) 75%,
        var(--banner-c1) 100%
    );
}

.servicio-banner-overlay {
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    color: #ffffff;
}

.servicio-banner-etiqueta {
    display: inline-block;
    background-color: #E50914;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.servicio-banner-overlay h2 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    text-transform: uppercase;
}

/* Logo RCF (Restablecimiento del Contacto entre Familiares): sin fondo,
   se ubica en su propia línea debajo de la etiqueta "Acción Humanitaria".
   Se usa un drop-shadow (en vez de una caja blanca) para que el logo,
   que tiene partes en negro, se siga leyendo bien sobre la foto oscura. */
.rcf-logo-box {
    display: block;
    margin-top: 0.75rem;
}

.rcf-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.5));
}

.servicio-banner-info {
    width: 50%;
    display: flex;
    align-items: center;
    /* Degradado HORIZONTAL: el color del borde izquierdo es siempre
       var(--banner-c1), igual al final del degradado de la imagen, para
       que no se note ninguna línea en la unión (panel a la derecha) */
    background: linear-gradient(90deg, var(--banner-c1) 0%, var(--banner-c2) 100%);
    padding: 3rem 4rem;
}

/* Panel invertido: ahora está a la izquierda, así que el color que
   debe coincidir con el borde de la imagen (var(--banner-c1)) va del
   lado derecho */
.servicio-banner.invertido .servicio-banner-info {
    background: linear-gradient(90deg, var(--banner-c2) 0%, var(--banner-c1) 100%);
}

.servicio-banner-contenido {
    max-width: 480px;
    color: #ffffff;
}

.servicio-banner-contenido p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #E2E8F0;
    margin-bottom: 1.5rem;
}

.servicio-banner-lista {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
}

.servicio-banner-lista li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.8rem;
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

.servicio-banner-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #E50914;
    font-weight: 800;
}

@media (max-width: 900px) {
    .servicio-banner,
    .servicio-banner.invertido {
        /* En móvil siempre imagen arriba, info abajo, sin invertir */
        flex-direction: column;
        min-height: 0;
    }

    .servicio-banner-imagen {
        width: 100%;
        min-height: 300px;
    }

    .servicio-banner-imagen::after,
    .servicio-banner.invertido .servicio-banner-imagen::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 60%;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, var(--banner-c1) 0%, transparent) 0%,
            color-mix(in srgb, var(--banner-c1) 35%, transparent) 45%,
            color-mix(in srgb, var(--banner-c1) 78%, transparent) 75%,
            var(--banner-c1) 100%
        );
    }

    /* Título más compacto para que no tape la foto en móvil */
    .servicio-banner-overlay {
        padding: 1.5rem;
    }

    .servicio-banner-etiqueta {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        margin-bottom: 0.6rem;
    }

    .servicio-banner-overlay h2 {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .rcf-logo-box {
        margin-top: 0.5rem;
    }

    .rcf-logo {
        max-width: 190px;
    }

    .servicio-banner.grande,
    .servicio-banner.grande .servicio-banner-imagen {
        min-height: 600px;
    }

    .servicio-banner.grande .servicio-banner-overlay h2 {
        font-size: 1.6rem;
    }

    .servicio-banner-info,
    .servicio-banner.invertido .servicio-banner-info {
        width: 100%;
        /* Degradado VERTICAL en móvil, coherente con la unión horizontal */
        background: linear-gradient(180deg, var(--banner-c1) 0%, var(--banner-c2) 100%);
        padding: 2rem 1.6rem;
    }
}