.elementor-226 .elementor-element.elementor-element-0702d75{--display:flex;overflow:visible;}/* Start custom CSS for html, class: .elementor-element-28ec599 *//* ============================================================
   BIBLIOTECA
   IESTP IBERIA TAHUAMANU
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .biblioteca-iberia{
    --bi-blue-dark:#123B5D;
    --bi-blue:#1F5F96;
    --bi-blue-mid:#2F76B3;

    --bi-gold:#C9A227;
    --bi-gold-light:#E6C75A;

    --bi-green:#2F7D4A;

    --bi-gray:#66727D;
    --bi-light:#EEF2F5;
    --bi-white:#FFFFFF;

    position:relative;

    width:100%;

    padding:70px 30px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(47,118,179,.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(201,162,39,.07),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFFFF,
            #F3F6F8
        );
}


/* ============================================================
   LÍNEA SUPERIOR
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .biblioteca-iberia::before{
    content:"";

    position:absolute;

    top:0;
    left:5%;

    width:90%;
    height:4px;

    border-radius:0 0 20px 20px;

    background:
        linear-gradient(
            90deg,
            var(--bi-blue-dark),
            var(--bi-blue-mid),
            var(--bi-gold),
            var(--bi-blue-mid),
            var(--bi-blue-dark)
        );
}


/* ============================================================
   CONTENEDOR
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-inner{
    position:relative;

    z-index:2;

    max-width:1250px;

    margin:0 auto;
}


/* ============================================================
   CABECERA
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-header{
    max-width:820px;

    margin:0 auto 42px;

    text-align:center;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-eyebrow{
    display:inline-flex;

    padding:7px 14px;

    margin-bottom:14px;

    border-radius:30px;

    color:var(--bi-blue);

    background:rgba(31,95,150,.08);

    border:
        1px solid rgba(31,95,150,.13);

    font-size:11px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.2px;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-title{
    margin:0 0 15px !important;

    color:
        var(--bi-blue-dark) !important;

    font-size:
        clamp(38px,5vw,56px);

    line-height:1.08;

    font-weight:850 !important;

    letter-spacing:-1.3px;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-title span{
    position:relative;

    color:
        var(--bi-blue-mid);
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-title span::after{
    content:"";

    position:absolute;

    left:8%;
    bottom:-7px;

    width:84%;
    height:4px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--bi-gold),
            var(--bi-gold-light)
        );
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-intro{
    max-width:720px;

    margin:23px auto 0 !important;

    color:
        var(--bi-gray);

    font-size:15px;

    line-height:1.7;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-intro strong{
    color:
        var(--bi-blue-dark);
}


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

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-grid{
    display:grid;

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

    gap:22px;
}


/* ============================================================
   CARD
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card{
    position:relative;

    overflow:hidden;

    border-radius:20px;

    background:#FFFFFF;

    border:
        1px solid rgba(31,95,150,.10);

    box-shadow:
        0 13px 34px rgba(18,59,93,.10);

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


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card:hover{
    transform:
        translateY(-9px);

    border-color:
        rgba(201,162,39,.50);

    box-shadow:
        0 23px 46px rgba(18,59,93,.17);
}


/* ============================================================
   IMAGEN
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-image{
    position:relative;

    height:300px;

    overflow:hidden;

    background:
        var(--bi-light);
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .7s ease,
        filter .4s ease;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card:hover
.bi-image img{
    transform:
        scale(1.08);

    filter:
        brightness(.88)
        saturate(1.08);
}


/* ============================================================
   OVERLAY
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-image-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(18,59,93,.02),
            rgba(18,59,93,.10) 50%,
            rgba(18,59,93,.78)
        );
}


/* ============================================================
   BADGE
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-badge{
    position:absolute;

    left:20px;
    bottom:18px;

    display:inline-flex;

    padding:
        7px 12px;

    border-radius:25px;

    color:
        var(--bi-blue-dark);

    background:
        linear-gradient(
            135deg,
            var(--bi-gold-light),
            var(--bi-gold)
        );

    border:
        1px solid rgba(255,255,255,.45);

    box-shadow:
        0 7px 16px rgba(0,0,0,.18);

    font-size:9px;

    font-weight:850;

    text-transform:uppercase;

    letter-spacing:.8px;
}


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

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-content{
    position:relative;

    padding:
        30px 27px 27px;
}


/* ============================================================
   ICONO
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-icon{
    position:absolute;

    top:-32px;
    right:25px;

    width:64px;
    height:64px;

    display:flex;

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

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            var(--bi-blue-dark),
            var(--bi-blue)
        );

    border:
        3px solid #FFFFFF;

    box-shadow:
        0 9px 20px rgba(18,59,93,.22);

    transition:
        transform .35s ease;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card-virtual
.bi-icon{
    background:
        linear-gradient(
            145deg,
            var(--bi-blue-dark),
            var(--bi-green)
        );
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card:hover
.bi-icon{
    transform:
        translateY(-5px)
        rotate(-5deg);
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-icon svg{
    width:30px;
    height:30px;

    fill:
        var(--bi-gold-light);
}


/* ============================================================
   ETIQUETA
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-label{
    display:block;

    margin-bottom:5px;

    color:
        var(--bi-gold);

    font-size:9px;

    font-weight:850;

    text-transform:uppercase;

    letter-spacing:1px;
}


/* ============================================================
   TÍTULO
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-content h3{
    margin:
        0 0 11px !important;

    color:
        var(--bi-blue-dark) !important;

    font-size:
        27px !important;

    line-height:1.2;

    font-weight:
        850 !important;
}


/* ============================================================
   TEXTO
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-content > p{
    margin:
        0 0 18px !important;

    color:
        var(--bi-gray);

    font-size:12px;

    line-height:1.7;
}


/* ============================================================
   FEATURES
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-features{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-bottom:20px;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-features span{
    position:relative;

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border-radius:20px;

    color:
        var(--bi-blue-dark);

    background:
        rgba(31,95,150,.06);

    border:
        1px solid rgba(31,95,150,.08);

    font-size:9px;

    font-weight:700;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-features span::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--bi-gold);
}


/* ============================================================
   BOTÓN
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-button{
    display:flex;

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

    gap:12px;

    width:100%;

    min-height:49px;

    padding:
        12px 17px;

    border-radius:9px;

    color:#FFFFFF !important;

    text-decoration:none !important;

    background:
        linear-gradient(
            135deg,
            var(--bi-blue-dark),
            var(--bi-blue-mid)
        );

    border:
        1px solid rgba(201,162,39,.40);

    box-shadow:
        0 7px 17px rgba(18,59,93,.16);

    font-size:11px;

    font-weight:800;

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


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-button-virtual{
    background:
        linear-gradient(
            135deg,
            var(--bi-blue-dark),
            var(--bi-green)
        );
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-button > span{
    color:
        var(--bi-gold-light);

    font-size:18px;

    transition:
        transform .3s ease;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-button:hover{
    transform:
        translateY(-3px);

    color:
        var(--bi-blue-dark) !important;

    background:
        linear-gradient(
            135deg,
            var(--bi-gold-light),
            var(--bi-gold)
        );

    box-shadow:
        0 11px 23px rgba(18,59,93,.22);
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-button:hover > span{
    color:
        var(--bi-blue-dark);

    transform:
        translateX(5px);
}


/* ============================================================
   ANIMACIÓN
============================================================ */

.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card{
    animation:
        biEntrada .75s ease both;
}


.elementor-226 .elementor-element.elementor-element-28ec599 .bi-card:nth-child(2){
    animation-delay:.15s;
}


@keyframes biEntrada{

    from{
        opacity:0;

        transform:
            translateY(25px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


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

@media(max-width:1024px){

    .elementor-226 .elementor-element.elementor-element-28ec599 .biblioteca-iberia{
        padding:
            55px 22px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-image{
        height:260px;
    }

}


/* ============================================================
   CELULAR
============================================================ */

@media(max-width:767px){

    .elementor-226 .elementor-element.elementor-element-28ec599 .biblioteca-iberia{
        padding:
            42px 12px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-title{
        font-size:
            36px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-intro{
        font-size:14px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-grid{
        grid-template-columns:
            1fr;

        gap:18px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-image{
        height:230px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-content{
        padding:
            28px 19px 21px;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-content h3{
        font-size:
            23px !important;
    }


    .elementor-226 .elementor-element.elementor-element-28ec599 .bi-icon{
        width:58px;
        height:58px;

        right:18px;
    }

}/* End custom CSS */