/* Estilos para la sección de bienvenida (2 columnas: contenido - galería derecha) */
.bienvenida {
    max-width:1200px;
    margin: 0 auto;
    padding: 44px 24px;
    box-sizing: border-box;
    font-family: "Open Sans", Arial, sans-serif;
    color: #495a65;
}

.bienvenida .intro-row {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 36px;
    align-items: start;
}

.bienvenida h2.section-title {
    color: #5f6f7b;
    font-size: 40px;
    margin: 0 0 18px 0;
    font-weight: 700;
    text-align: left;
}

/* Left column: text, hero image, video */
.bienvenida .col-left p {
    font-size: 17px;
    line-height: 1.85;
    margin: 12px 0;
    text-align: justify;
    color: #495a65;
}

.bienvenida .hero-image {
    width: 100%;
    max-width: 520px;
    display: block;
    border-radius: 6px;
    margin: 12px 0 18px 0;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    object-fit: cover;
}

/* iframe responsive container (mantener 16/9) */
.bienvenida .video-wrap {
    width:100%;
    aspect-ratio: 16/9;
    overflow:hidden;
    border-radius:8px;
    margin: 12px 0 18px;
}

/* Right column: stacked gallery */
.bienvenida .col-right {
    display:flex;
    flex-direction: column;
    gap:18px;
}

.bienvenida .col-right img {
    width: 100%;
    display:block;
    border-radius:6px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

/* Caption under the first image on the left */
.bienvenida .caption {
    font-size: 13px;
    color: #7f8b92;
    margin-top: 6px;
    font-style: italic;
}

/* smaller gallery widget on right (centered thumbnails) */
.bienvenida .right-thumb {
    width:100%;
    height:auto;
}

/* Responsive: 1 column on small screens */
@media (max-width: 980px) {
    .bienvenida .intro-row { grid-template-columns: 1fr; }
    .bienvenida .col-right { order: -1; } /* mostrar galería arriba en móviles (si lo prefieres) */
    .bienvenida h2.section-title { text-align: center; font-size:34px; }
    .bienvenida .hero-image { max-width: 100%; }
}

/* Optional: ajusta espaciado entre bloques de la página */
.bienvenida + .spacer { height: 28px; }




    /* ---------- Añadir al final de estilos.css ---------- */
    /* HERO: CTA con redes debajo (centrado y responsive) */

    .hero-overlay {
        position: relative;                 /* bloque en flujo: empuja el contenido siguiente */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 16px 12px;
        margin-bottom: 8px;
        background: transparent;
    }

    .hero-overlay__inner {
        width: min(1100px, 92%);
        text-align: center;
        box-sizing: border-box;
        padding: 4px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Título */
    .hero-title {
        color: #173a5a;                     /* azul oscuro (ajusta si tu fondo es oscuro) */
        font-size: clamp(24px, 5vw, 56px);
        font-weight: 700;
        line-height: 1.02;
        margin: 0;
    }

    /* Contenedor de acciones: CTA arriba, redes abajo */
    .hero-actions.stacked {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 6px;
    }

    /* CTA */
    .cta-btn {
        display: inline-block;
        background: linear-gradient(180deg, #173a5a 0%, #214a78 100%);
        color: #fff;
        padding: 12px 28px;
        border-radius: 36px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 10px 28px rgba(23,58,90,0.18);
        transition: transform .12s ease, box-shadow .12s ease;
        max-width: 680px;
        white-space: normal;
        text-align: center;
    }
    .cta-btn:hover,
    .cta-btn:focus {
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(23,58,90,0.28);
        outline: none;
    }

    /* Redes: centradas debajo del botón */
    .social-nav { display:block; }
    .social-list {
        display: flex;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
        justify-content: center;
    }

    /* Botones circulares con anillo blanco y sombra */
    .social-link {
        display: inline-grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #173a5a;                 /* color icono interno */
        color: #fff;
        text-decoration: none;
        box-shadow: 0 8px 22px rgba(0,0,0,0.12);
        border: 6px solid #ffffff;           /* anillo blanco alrededor */
        transition: transform .12s ease, box-shadow .12s ease, background .12s;
    }
    .social-link svg { width:20px; height:20px; color: #fff; display:block; }

    /* hover / focus accesible */
    .social-link:hover,
    .social-link:focus {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(0,0,0,0.18);
        background: #214a78;
        outline: 3px solid rgba(33,74,120,0.12);
    }

    /* Si prefieres fondo claro en iconos (anillo color oscuro), reemplaza la regla anterior */
    /* .social-link { background: #fff; color: #173a5a; border: 3px solid rgba(23,58,90,0.12); } */

    /* Ajustes móviles */
    @media (max-width: 980px) {
        .hero-overlay { padding: 20px 12px; }
        .hero-title { font-size: clamp(18px, 7vw, 34px); }
        .cta-btn { padding: 10px 16px; font-size: 15px; max-width: 90%; }
        .social-link { width: 44px; height: 44px; border-width: 5px; }
        .social-link svg { width:18px; height:18px; }
    }





    /* Añade estas reglas al final de estilos.css */

    /* Contenedor base */
    .oferta-section {
        background: linear-gradient(180deg, #06243a 0%, #06243a 0%); /* si quieres banda oscura superior, ajusta */
        color: #ffffff;
        padding: 28px 12px 46px;
        border-radius: 6px;

    }
    .oferta-section .container {
        width: min(1200px, 96%);
        margin: 0 auto;
        border-radius: 6px;

    }

    /* Título */
    .oferta-title {
        text-align: center;
        font-size: clamp(20px, 3.6vw, 36px);
        font-weight: 700;
        margin: 6px 0 10px;
        color: #ffffff;
        letter-spacing: 0.02em;
    }

    /* Intro (opcional) */
    .oferta-intro {
        text-align: center;
        color: rgba(255,255,255,0.85);
        max-width: 900px;
        margin: 0 auto 22px;
        font-size: 15px;
    }

    /* Grid de programas: 2 columnas en escritorio, 1 en móvil */
    .program-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: stretch;
        margin-top: 18px;
    }

    /* Tarjeta del programa */
    .program-card {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        color: #183d55;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(0,0,0,0.12);
        min-height: 320px;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    /* Imagen de la tarjeta (fondo) */
    .program-media {
        height: 180px;
        background-size: cover;
        background-position: center;
        position: relative;
        filter: contrast(1.02);
    }

    /* Overlay sutil sobre la imagen para contraste */
    .program-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8,40,60,0.12) 0%, rgba(8,40,60,0.28) 100%);
    }

    /* Cuerpo de la tarjeta */
    .program-body {
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1 1 auto;
    }

    /* Título y extracto */
    .program-title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #0b3b57;
    }
    .program-excerpt {
        margin: 0;
        color: #405a66;
        font-size: 14px;
        line-height: 1.45;
        flex: 1 1 auto;
    }

    /* Botones: principal y outline */
    .program-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 6px;
        flex-wrap: wrap;
    }
    .btn {
        display: inline-block;
        padding: 10px 18px;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        text-align: center;
    }
    .btn-primary {
        background: linear-gradient(180deg,#173a5a 0%, #214a78 100%);
        color: #fff;
        box-shadow: 0 8px 20px rgba(23,58,90,0.18);
    }
    .btn-outline {
        background: transparent;
        border: 2px solid rgba(23,58,90,0.12);
        color: #183d55;
    }

    /* Hover/Focus effects */
    .program-card:hover,
    .program-card:focus-within {
        transform: translateY(-6px);
        box-shadow: 0 18px 46px rgba(8,36,59,0.18);
    }
    .btn:focus,
    a:focus {
        outline: 3px solid rgba(33,74,120,0.14);
        outline-offset: 2px;
    }

    /* Responsive: 1 columna en pantallas pequeñas */
    @media (max-width: 900px) {
        .program-grid { grid-template-columns: 1fr; }
        .program-media { height: 220px; }
        .oferta-section { padding: 22px 12px 36px; }
        .program-card { min-height: auto; }
    }

    /* Si quieres integrar la sección en fondo claro en lugar de oscuro:
       - cambia .oferta-section background a transparent o blanco
       - y ajusta .oferta-title y colores en consecuencia */