/* =========================================================
   MODAL DIFUSIÓN VRAM LESP
   ========================================================= */

.vram-modal-overlay {

    display: flex;

    position: fixed;
    z-index: 99999;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 35, 70, 0.68);

    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;
}


/* Contenedor principal */

.vram-modal-contenido {

    position: relative;

    width: 100%;
    max-width: 900px;

    max-height: 94vh;

    background: #ffffff;

    border-radius: 12px;

    overflow-y: auto;
    overflow-x: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25);

}


/* Cerrar */

.vram-modal-cerrar {

    position: absolute;

    top: 10px;
    right: 14px;

    z-index: 10;

    border: 0;
    background: rgba(255, 255, 255, 0.92);

    width: 36px;
    height: 36px;

    border-radius: 50%;

    font-size: 27px;
    line-height: 31px;

    color: #164873;

    cursor: pointer;

    transition: all .2s ease;

}


.vram-modal-cerrar:hover {

    background: #ffffff;
    transform: scale(1.08);

}


/* =========================================================
   BANNER
   ========================================================= */

.vram-banner {

    min-height: 210px;

    display: flex;

    align-items: center;

    padding: 35px 50px;

    background:

        radial-gradient(
            circle at 80% 30%,
            rgba(40, 188, 225, .25),
            transparent 35%
        ),

        linear-gradient(
            110deg,
            #f8fcff 0%,
            #eef8fd 48%,
            #dff4fb 100%
        );

    border-bottom: 1px solid #d8e9f2;

}


.vram-banner-contenido {

    max-width: 630px;

}


.vram-banner-marca {

    font-size: 38px;

    font-weight: 800;

    letter-spacing: -1px;

    color: #074c8c;

}


.vram-banner-marca span {

    color: #26a9db;

}


.vram-banner-titulo {

    margin-top: 5px;

    font-size: 18px;

    font-weight: 600;

    color: #195984;

}


.vram-banner-frase {

    margin-top: 23px;

    font-size: 26px;

    line-height: 1.15;

    font-weight: 700;

    color: #123f69;

    max-width: 600px;

}


/* =========================================================
   CUERPO
   ========================================================= */

.vram-modal-cuerpo {

    padding: 28px 34px 30px 34px;

}


.vram-modal-cuerpo h1 {

    margin: 0 0 5px 0;

    font-size: 27px;

    color: #123f69;

}


.vram-subtitulo {

    margin-bottom: 19px;

    font-size: 16px;

    font-weight: 600;

    color: #1585b8;

}


.vram-introduccion {

    font-size: 15px;

    line-height: 1.6;

    color: #34495e;

    margin-bottom: 24px;

}


/* =========================================================
   TARJETAS
   ========================================================= */

.vram-puntos {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin: 20px 0 25px 0;

}


.vram-punto {

    padding: 18px 15px;

    background: #f4f9fc;

    border: 1px solid #d5e7f1;

    border-radius: 8px;

}


.vram-icono {

    font-size: 25px;

    margin-bottom: 8px;

}


.vram-punto strong {

    display: block;

    margin-bottom: 8px;

    color: #194e76;

    font-size: 15px;

}


.vram-punto span {

    display: block;

    font-size: 13px;

    line-height: 1.55;

    color: #475b6c;

}


/* =========================================================
   OBJETIVO LESP
   ========================================================= */

.vram-objetivo {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    padding: 17px 18px;

    margin: 5px 0 16px 0;

    background: #eaf6fc;

    border-left: 4px solid #1685b6;

    border-radius: 6px;

}


.vram-objetivo-icono {

    font-size: 25px;

}


.vram-objetivo strong {

    display: block;

    margin-bottom: 5px;

    color: #12486e;

    font-size: 15px;

}


.vram-objetivo p {

    margin: 0;

    font-size: 13.5px;

    line-height: 1.55;

    color: #385265;

}


/* =========================================================
   MARCO NACIONAL
   ========================================================= */

.vram-marco {

    padding: 15px 18px;

    margin-bottom: 20px;

    border: 1px solid #e2e7eb;

    border-radius: 6px;

    background: #fafcfd;

}


.vram-marco strong {

    display: block;

    margin-bottom: 5px;

    color: #244a69;

}


.vram-marco p {

    margin: 0;

    font-size: 13px;

    line-height: 1.55;

    color: #506170;

}


/* =========================================================
   CIERRE
   ========================================================= */

.vram-mensaje-final {

    text-align: center;

    margin: 26px 0 22px 0;

}


.vram-mensaje-final strong {

    display: block;

    color: #16466c;

    font-size: 17px;

    margin-bottom: 5px;

}


.vram-mensaje-final span {

    color: #607080;

    font-size: 14px;

}


/* =========================================================
   BOTONES
   ========================================================= */

.vram-acciones {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 15px;

    border-top: 1px solid #e6edf2;

}


.vram-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 10px 19px;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    transition: all .2s ease;

}


.vram-btn-principal {

    border: 1px solid #1477a5;

    background: #1477a5;

    color: #ffffff;

}


.vram-btn-principal:hover {

    background: #0e658e;

    color: #ffffff;

    text-decoration: none;

}


.vram-btn-secundario {

    border: 1px solid #b7cad6;

    background: #ffffff;

    color: #416176;

}


.vram-btn-secundario:hover {

    background: #f0f6f9;

}


.vram-flecha {

    margin-left: 8px;

    font-size: 16px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .vram-modal-overlay {

        padding: 10px;

        align-items: flex-start;

    }


    .vram-modal-contenido {

        margin-top: 10px;

        max-height: 96vh;

    }


    .vram-banner {

        min-height: 180px;

        padding: 30px 24px;

    }


    .vram-banner-marca {

        font-size: 30px;

    }


    .vram-banner-titulo {

        font-size: 15px;

    }


    .vram-banner-frase {

        font-size: 21px;

    }


    .vram-modal-cuerpo {

        padding: 23px 19px;

    }


    .vram-puntos {

        grid-template-columns: 1fr;

    }


    .vram-acciones {

        flex-direction: column-reverse;

    }


    .vram-btn {

        width: 100%;

    }

}