.elementor-242 .elementor-element.elementor-element-e77ee2d{--display:flex;overflow:visible;}/* Start custom CSS for html, class: .elementor-element-f854beb *//* ============================================================
   ENLACES INSTITUCIONALES
   IES CLORINDA MATTO DE TURNER
============================================================ */

.cm-links,
.cm-links *,
.cm-links *::before,
.cm-links *::after{
    box-sizing:border-box;
}


/* ============================================================
   SECCIÓN
============================================================ */

.cm-links{

    --cm-blue:#073b72;
    --cm-blue-2:#0c5798;
    --cm-blue-3:#1281c4;
    --cm-light:#eaf5fc;

    --cm-yellow:#f4c400;

    --cm-white:#ffffff;
    --cm-bg:#f5f9fc;

    --cm-text:#24384a;
    --cm-muted:#65788a;

    width:100%;

    padding:
        70px 20px 80px;

    background:
        radial-gradient(
            circle at 4% 5%,
            rgba(18,129,196,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 96% 90%,
            rgba(7,59,114,.07),
            transparent 25%
        ),
        #f5f9fc;

    font-family:
        "Roboto",
        Arial,
        sans-serif;
}


.cm-links__inner{

    width:100%;

    max-width:1320px;

    margin:
        0 auto;
}


/* ============================================================
   ENCABEZADO
============================================================ */

.cm-links__heading{

    max-width:760px;

    margin:
        0 auto 38px;

    text-align:center;
}


.cm-links__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:28px;

    padding:
        0 14px;

    margin-bottom:
        12px;

    border-radius:
        50px;

    color:
        var(--cm-blue-2);

    background:
        rgba(18,129,196,.10);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

    text-transform:
        uppercase;
}


.cm-links__heading h2{

    margin:
        0;

    color:
        var(--cm-blue);

    font-size:
        clamp(28px,3vw,40px);

    font-weight:
        900;

    line-height:
        1.12;

    letter-spacing:
        -.7px;
}


.cm-links__heading p{

    max-width:
        650px;

    margin:
        13px auto 0;

    color:
        var(--cm-muted);

    font-size:
        14px;

    line-height:
        1.7;
}


.cm-links__line{

    display:block;

    width:
        76px;

    height:
        4px;

    margin:
        18px auto 0;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            var(--cm-blue-3),
            var(--cm-yellow)
        );
}


.cm-links__heading--secondary{

    margin-top:
        70px;

    margin-bottom:
        32px;
}


/* ============================================================
   GRID
============================================================ */

.cm-links__grid{

    display:grid;

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

    align-items:stretch;

    gap:
        24px;
}


/* DOS ÚLTIMAS TARJETAS CENTRADAS */

.cm-links__grid--secondary{

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    max-width:
        880px;

    margin:
        0 auto;
}


/* ============================================================
   TARJETA
============================================================ */

.cm-card{

    position:relative;

    min-width:0;

    height:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border:
        1px solid
        rgba(7,59,114,.09);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 10px 32px
        rgba(14,52,82,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* LÍNEA SUPERIOR */

.cm-card::before{

    content:"";

    position:absolute;

    z-index:5;

    top:0;
    left:0;

    width:
        100%;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            var(--cm-blue-3),
            var(--cm-blue),
            var(--cm-yellow)
        );
}


/* HOVER */

.cm-card:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(18,129,196,.25);

    box-shadow:
        0 20px 45px
        rgba(7,59,114,.14);
}


/* ============================================================
   ÁREA DEL LOGO
   MISMA ALTURA PARA TODOS
============================================================ */

.cm-card__logo{

    width:100%;

    height:135px;

    min-height:135px;

    padding:
        24px 30px 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fcff 100%
        );

    border-bottom:
        1px solid
        rgba(7,59,114,.06);
}


.cm-card__logo img{

    display:block;

    width:auto !important;

    height:auto !important;

    max-width:
        82% !important;

    max-height:
        82px !important;

    object-fit:
        contain !important;

    margin:
        0 auto !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    transition:
        transform .3s ease;
}


.cm-card:hover
.cm-card__logo img{

    transform:
        scale(1.04);
}


/* ============================================================
   CONTENIDO
============================================================ */

.cm-card__content{

    position:relative;

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:
        25px 26px 27px;

    text-align:center;
}


/* NÚMERO */

.cm-card__number{

    position:absolute;

    top:
        15px;

    right:
        18px;

    color:
        rgba(7,59,114,.10);

    font-size:
        28px;

    font-weight:
        900;

    line-height:
        1;
}


/* ============================================================
   TÍTULO
   ALTURA IGUAL
============================================================ */

.cm-card h3{

    width:100%;

    min-height:
        54px;

    margin:
        0 0 14px;

    padding:
        0 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:
        var(--cm-blue);

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1.28;

    text-align:center;
}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

.cm-card p{

    flex:
        1;

    width:
        100%;

    margin:
        0;

    color:
        var(--cm-muted);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.65;

    text-align:
        center;
}


/* ============================================================
   BOTÓN
   TODOS QUEDAN ABAJO
============================================================ */

.cm-card__button{

    width:
        100%;

    max-width:
        185px;

    min-height:
        46px;

    margin-top:
        23px;

    padding:
        0 17px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        12px;

    border-radius:
        11px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--cm-blue-3),
            var(--cm-blue)
        );

    box-shadow:
        0 8px 18px
        rgba(7,59,114,.19);

    text-decoration:
        none !important;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .2px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.cm-card__button:hover{

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--cm-blue),
            #052a52
        );

    box-shadow:
        0 12px 24px
        rgba(7,59,114,.25);
}


/* FLECHA */

.cm-card__arrow{

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:
        8px;

    color:
        var(--cm-blue);

    background:
        var(--cm-yellow);

    font-size:
        16px;

    font-weight:
        900;

    transition:
        transform .25s ease;
}


.cm-card__button:hover
.cm-card__arrow{

    transform:
        translateX(3px);
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1024px){

    .cm-links{

        padding:
            55px 18px 65px;
    }


    .cm-links__grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cm-links__grid--secondary{

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* ============================================================
   MÓVIL
============================================================ */

@media(max-width:650px){

    .cm-links{

        padding:
            42px 14px 50px;
    }


    .cm-links__heading{

        margin-bottom:
            28px;
    }


    .cm-links__heading h2{

        font-size:
            27px;
    }


    .cm-links__heading--secondary{

        margin-top:
            48px;
    }


    .cm-links__grid,
    .cm-links__grid--secondary{

        grid-template-columns:
            1fr;

        gap:
            17px;
    }


    .cm-card__logo{

        height:
            125px;

        min-height:
            125px;
    }


    .cm-card__content{

        padding:
            23px 21px 24px;
    }


    .cm-card h3{

        min-height:
            0;

        font-size:
            16px;
    }


    .cm-card__button{

        max-width:
            100%;
    }

}/* End custom CSS */