.elementor-96 .elementor-element.elementor-element-7893fbf{--display:flex;--min-height:0px;overflow:visible;}.elementor-96 .elementor-element.elementor-element-5469b14 .elementor-repeater-item-a8da1c2 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://iesdivinojesus.edu.pe/wp-content/uploads/2026/09/escolta.jpg);background-size:cover;}.elementor-96 .elementor-element.elementor-element-5469b14 .elementor-repeater-item-a8da1c2 .swiper-slide-contents{margin-right:auto;}.elementor-96 .elementor-element.elementor-element-5469b14 .elementor-repeater-item-a8da1c2 .swiper-slide-inner{align-items:center;}.elementor-96 .elementor-element.elementor-element-5469b14 .swiper-slide{transition-duration:calc(5000ms*1.2);height:535px;}.elementor-96 .elementor-element.elementor-element-5469b14 .swiper-slide-contents{max-width:66%;}.elementor-96 .elementor-element.elementor-element-5469b14 .swiper-slide-inner{text-align:center;}.elementor-96 .elementor-element.elementor-element-5469b14 .elementor-slide-heading{font-family:"Arial", Sans-serif;}.elementor-96 .elementor-element.elementor-element-c282b7c{--display:flex;overflow:visible;}.elementor-96 .elementor-element.elementor-element-4f4be31{--display:flex;overflow:visible;}.elementor-96 .elementor-element.elementor-element-09280c8{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;overflow:visible;}.elementor-96 .elementor-element.elementor-element-38dfab7{--display:flex;overflow:visible;}@media(max-width:1024px){.elementor-96 .elementor-element.elementor-element-09280c8{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-96 .elementor-element.elementor-element-7893fbf{--width:100%;}}@media(max-width:767px){.elementor-96 .elementor-element.elementor-element-09280c8{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-7893fbf *//* ============================================================
   SLIDER INSTITUCIONAL
   IESTP SANGARARÁ
   Clase del widget: sg-slider-pro
============================================================ */

.sg-slider-pro{
    --sg-blue:#0A6EB4;
    --sg-blue-dark:#005299;
    --sg-blue-light:#004A8F;

    --sg-blue-claro:#1A8FE3;
    --sg-blue-oscuro:#002C4F;

    --sg-white:#FFFFFF;

    width:100% !important;

    position:relative;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}


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

.sg-slider-pro .elementor-widget-container{
    position:relative;

    overflow:hidden;

    border-radius:28px !important;

    background:
        linear-gradient(
            135deg,
            rgb(0 45 85 / 95%),
            rgb(0 32 60 / 98%)
        );

    box-shadow:
        0 25px 60px
        rgba(0,45,85,.16);
}


/* ============================================================
   SLIDER / SWIPER
============================================================ */

.sg-slider-pro .swiper,
.sg-slider-pro .swiper-container{
    position:relative;

    overflow:hidden !important;

    border-radius:28px !important;
}


/* ============================================================
   CADA SLIDE
============================================================ */

.sg-slider-pro .swiper-slide{
    position:relative !important;

    overflow:hidden !important;

    min-height:620px;

    background:
        linear-gradient(
            135deg,
            rgb(0 45 85 / 95%),
            rgb(0 32 60 / 98%)
        ) !important;
}


/* ============================================================
   IMAGEN DE FONDO
============================================================ */

.sg-slider-pro .swiper-slide-bg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background-position:center center !important;

    background-size:cover !important;

    transform:scale(1.04);

    transition:
        transform 6s ease !important;
}


.sg-slider-pro
.swiper-slide-active
.swiper-slide-bg{
    transform:scale(1);
}


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

.sg-slider-pro .swiper-slide::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgb(0 20 40 / 91%) 0%,
            rgb(0 32 60 / 82%) 34%,
            rgb(0 45 85 / 55%) 62%,
            rgb(0 45 85 / 18%) 100%
        );
}


/* BRILLO AZUL */

.sg-slider-pro .swiper-slide::after{
    content:"";

    position:absolute;

    z-index:1;

    width:600px;
    height:600px;

    top:-280px;
    right:-170px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.15) 0%,
            rgba(26,143,227,.10) 42%,
            transparent 70%
        );
}


/* ============================================================
   CONTENIDO DEL SLIDE
============================================================ */

.sg-slider-pro .swiper-slide-inner{
    position:relative !important;

    z-index:3 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    min-height:620px !important;

    padding:
        70px 9% !important;

    text-align:left !important;
}


/* CONTENEDOR DEL TEXTO */

.sg-slider-pro .swiper-slide-contents{
    width:100% !important;

    max-width:720px !important;

    margin:0 !important;

    text-align:left !important;
}


/* ============================================================
   PEQUEÑO DETALLE SUPERIOR
============================================================ */

.sg-slider-pro
.swiper-slide-contents::before{
    content:"IESTP SANGARARÁ";

    display:inline-flex;

    align-items:center;

    margin-bottom:20px;

    padding:9px 15px;

    color:#5BB8F5;

    background:
        rgba(255,255,255,.08);

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

    border-radius:999px;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    font-size:10px;

    font-weight:850;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


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

.sg-slider-pro
.elementor-slide-heading{
    max-width:700px !important;

    margin:
        0 0 18px !important;

    padding:0 !important;

    color:#FFFFFF !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        clamp(40px,5vw,65px) !important;

    font-weight:900 !important;

    line-height:1.03 !important;

    letter-spacing:-1.5px !important;

    text-shadow:
        0 4px 20px
        rgba(0,0,0,.20);
}


/* ============================================================
   LÍNEA AZUL
============================================================ */

.sg-slider-pro
.elementor-slide-heading::after{
    content:"";

    display:block;

    width:90px;
    height:6px;

    margin-top:18px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #1A8FE3,
            #0A6EB4,
            #005299
        );

    box-shadow:
        0 5px 14px
        rgba(0,45,85,.25);
}


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

.sg-slider-pro
.elementor-slide-description{
    max-width:640px !important;

    margin:
        0 0 28px !important;

    color:
        rgba(255,255,255,.91) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:16px !important;

    font-weight:400 !important;

    line-height:1.8 !important;
}


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

.sg-slider-pro
.elementor-slide-button{
    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-height:52px !important;

    padding:
        0 25px !important;

    color:#FFFFFF !important;

    background:
        linear-gradient(
            135deg,
            #1A8FE3 0%,
            #0A6EB4 40%,
            #005299 100%
        ) !important;

    border:
        0 !important;

    border-radius:13px !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:13px !important;

    font-weight:850 !important;

    text-decoration:none !important;

    text-transform:none !important;

    box-shadow:
        0 13px 28px
        rgba(0,45,85,.28) !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}


.sg-slider-pro
.elementor-slide-button:hover{
    color:#FFFFFF !important;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px
        rgba(0,45,85,.38) !important;
}


/* FLECHA PEQUEÑA EN BOTÓN */

.sg-slider-pro
.elementor-slide-button::after{
    content:"→";

    margin-left:9px;

    font-size:17px;

    line-height:1;
}


/* ============================================================
   FLECHAS DEL SLIDER
============================================================ */

.sg-slider-pro
.elementor-swiper-button,
.sg-slider-pro
.swiper-button-prev,
.sg-slider-pro
.swiper-button-next{
    width:52px !important;
    height:52px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    color:#FFFFFF !important;

    background:
        rgba(255,255,255,.10) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius:50% !important;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease !important;
}


.sg-slider-pro
.elementor-swiper-button:hover,
.sg-slider-pro
.swiper-button-prev:hover,
.sg-slider-pro
.swiper-button-next:hover{
    color:#FFFFFF !important;

    background:
        linear-gradient(
            135deg,
            #1A8FE3,
            #0A6EB4
        ) !important;

    transform:
        scale(1.08);
}


/* TAMAÑO DEL ICONO */

.sg-slider-pro
.elementor-swiper-button svg{
    width:20px !important;
    height:20px !important;

    fill:currentColor !important;
}


/* POSICIÓN */

.sg-slider-pro
.elementor-swiper-button-prev{
    left:23px !important;
}


.sg-slider-pro
.elementor-swiper-button-next{
    right:23px !important;
}


/* ============================================================
   PAGINACIÓN
============================================================ */

.sg-slider-pro
.swiper-pagination{
    position:absolute !important;

    left:50% !important;

    bottom:23px !important;

    width:auto !important;

    display:flex;

    align-items:center;

    gap:8px;

    padding:
        9px 13px;

    background:
        rgba(255,255,255,.10);

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

    border-radius:999px;

    backdrop-filter:blur(9px);

    -webkit-backdrop-filter:blur(9px);

    transform:
        translateX(-50%);
}


/* DOT NORMAL */

.sg-slider-pro
.swiper-pagination-bullet{
    width:9px !important;
    height:9px !important;

    margin:0 !important;

    background:
        rgba(255,255,255,.50) !important;

    opacity:1 !important;

    border-radius:999px !important;

    transition:
        width .3s ease,
        background .3s ease !important;
}


/* DOT ACTIVO */

.sg-slider-pro
.swiper-pagination-bullet-active{
    width:28px !important;

    background:
        linear-gradient(
            90deg,
            #1A8FE3,
            #0A6EB4
        ) !important;
}


/* ============================================================
   LÍNEA DECORATIVA INFERIOR
============================================================ */

.sg-slider-pro::after{
    content:"";

    position:absolute;

    z-index:10;

    left:0;
    bottom:0;

    width:100%;
    height:6px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            #1A8FE3,
            #0A6EB4,
            #005299
        );
}


/* ============================================================
   ANIMACIONES DEL CONTENIDO
============================================================ */

.sg-slider-pro
.swiper-slide-active
.swiper-slide-contents{
    animation:
        sgSliderContent .8s ease both;
}


@keyframes sgSliderContent{

    from{
        opacity:0;

        transform:
            translateY(25px);
    }

    to{
        opacity:1;

        transform:
            translateY(0);
    }

}


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

@media(max-width:1024px){

    .sg-slider-pro
    .swiper-slide,
    .sg-slider-pro
    .swiper-slide-inner{
        min-height:560px !important;
    }


    .sg-slider-pro
    .swiper-slide-inner{
        padding:
            60px 8% !important;
    }


    .sg-slider-pro
    .elementor-slide-heading{
        font-size:
            clamp(38px,6vw,54px) !important;
    }


    .sg-slider-pro
    .elementor-slide-description{
        max-width:560px !important;

        font-size:15px !important;
    }

}


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

@media(max-width:767px){

    .sg-slider-pro
    .elementor-widget-container,
    .sg-slider-pro
    .swiper,
    .sg-slider-pro
    .swiper-container{
        border-radius:20px !important;
    }


    .sg-slider-pro
    .swiper-slide{
        min-height:550px !important;
    }


    .sg-slider-pro
    .swiper-slide-inner{
        min-height:550px !important;

        align-items:flex-end !important;

        padding:
            45px 20px 75px !important;
    }


    .sg-slider-pro
    .swiper-slide::before{
        background:
            linear-gradient(
                180deg,
                rgb(0 20 40 / 22%) 0%,
                rgb(0 20 40 / 53%) 40%,
                rgb(0 20 40 / 96%) 100%
            );
    }


    .sg-slider-pro
    .swiper-slide-contents::before{
        margin-bottom:14px;

        padding:
            7px 11px;

        font-size:8px;
    }


    .sg-slider-pro
    .elementor-slide-heading{
        margin-bottom:
            13px !important;

        font-size:
            34px !important;

        line-height:
            1.07 !important;
    }


    .sg-slider-pro
    .elementor-slide-heading::after{
        width:70px;
        height:5px;

        margin-top:13px;
    }


    .sg-slider-pro
    .elementor-slide-description{
        margin-bottom:
            20px !important;

        font-size:
            13px !important;

        line-height:
            1.65 !important;
    }


    .sg-slider-pro
    .elementor-slide-button{
        min-height:
            45px !important;

        padding:
            0 18px !important;

        font-size:
            11px !important;
    }


    .sg-slider-pro
    .elementor-swiper-button,
    .sg-slider-pro
    .swiper-button-prev,
    .sg-slider-pro
    .swiper-button-next{
        width:
            42px !important;

        height:
            42px !important;
    }


    .sg-slider-pro
    .elementor-swiper-button-prev{
        left:
            9px !important;
    }


    .sg-slider-pro
    .elementor-swiper-button-next{
        right:
            9px !important;
    }

}


/* ============================================================
   MÓVILES PEQUEÑOS
============================================================ */

@media(max-width:480px){

    .sg-slider-pro
    .swiper-slide,
    .sg-slider-pro
    .swiper-slide-inner{
        min-height:
            520px !important;
    }


    .sg-slider-pro
    .elementor-slide-heading{
        font-size:
            30px !important;
    }


    .sg-slider-pro
    .elementor-slide-description{
        font-size:
            12.5px !important;
    }

}

/* ============================================================
   FIX FULL WIDTH REAL
   SLIDER PRODUCCIÓN AGROPECUARIA
============================================================ */


/* CONTENEDOR PADRE */
.sg-slider-full{
    position:relative !important;

    width:100vw !important;
    max-width:100vw !important;

    left:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;

    padding:0 !important;

    gap:0 !important;

    --gap:0px !important;
    --row-gap:0px !important;
    --column-gap:0px !important;

    overflow:hidden !important;
}


/* SI ES CONTAINER DE ELEMENTOR */
.sg-slider-full.e-con,
.e-con.sg-slider-full{
    width:100vw !important;
    max-width:100vw !important;

    flex-basis:100vw !important;

    left:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;
}


/* QUITAR POSIBLES LIMITACIONES INTERNAS */
.sg-slider-full > .e-con-inner{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}


/* ============================================================
   WIDGET SLIDER
============================================================ */

.sg-slider-full .sg-slider-pro{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    left:auto !important;
}


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

.sg-slider-full
.sg-slider-pro
.elementor-widget-container{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    /*
       QUITAMOS REDONDEO EXTERIOR
       PORQUE AHORA LLEGA A LOS BORDES
    */
    border-radius:0 !important;
}


/* ============================================================
   SWIPER
============================================================ */

.sg-slider-full
.sg-slider-pro
.swiper,

.sg-slider-full
.sg-slider-pro
.swiper-container,

.sg-slider-full
.sg-slider-pro
.elementor-slides-wrapper{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    border-radius:0 !important;
}


/* ============================================================
   CADA SLIDE
============================================================ */

.sg-slider-full
.sg-slider-pro
.swiper-slide{
    width:100% !important;
    max-width:none !important;

    min-height:620px !important;
}


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

.sg-slider-full
.sg-slider-pro
.swiper-slide-bg{
    width:100% !important;
    height:100% !important;

    background-size:cover !important;
    background-position:center center !important;
}


/* ============================================================
   CONTENIDO
   EL SLIDER ES FULL WIDTH,
   PERO EL TEXTO NO QUEDA PEGADO AL BORDE
============================================================ */

.sg-slider-full
.sg-slider-pro
.swiper-slide-inner{
    width:100% !important;
    max-width:1600px !important;

    min-height:620px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding:
        70px 7% !important;
}


/* ============================================================
   FRANJA INFERIOR
============================================================ */

.sg-slider-full
.sg-slider-pro::after{
    left:0 !important;
    bottom:0 !important;

    width:100% !important;

    border-radius:0 !important;
}


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

@media(max-width:1024px){

    .sg-slider-full
    .sg-slider-pro
    .swiper-slide,

    .sg-slider-full
    .sg-slider-pro
    .swiper-slide-inner{
        min-height:560px !important;
    }


    .sg-slider-full
    .sg-slider-pro
    .swiper-slide-inner{
        padding:
            60px 6% !important;
    }

}


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

@media(max-width:767px){

    .sg-slider-full
    .sg-slider-pro
    .swiper-slide,

    .sg-slider-full
    .sg-slider-pro
    .swiper-slide-inner{
        min-height:550px !important;
    }


    .sg-slider-full
    .sg-slider-pro
    .swiper-slide-inner{
        padding:
            45px 20px 75px !important;
    }

}


/* EVITAR SCROLL HORIZONTAL */
html,
body{
    overflow-x:hidden !important;
}

/* ============================================================
   CAMBIO DE COLORES
   IESTP DIVINO JESÚS
   SOLO COLORES - NO MODIFICA ESTRUCTURA
============================================================ */

.sg-slider-pro{
    --sg-blue:#5A1B87;
    --sg-blue-dark:#32105F;
    --sg-blue-light:#43106F;

    --sg-blue-claro:#7A35A8;
    --sg-blue-oscuro:#210638;

    --sg-white:#FFFFFF;
}


/* ============================================================
   FONDO GENERAL DEL SLIDER
============================================================ */

.sg-slider-pro .elementor-widget-container{
    background:
        linear-gradient(
            135deg,
            rgb(50 16 95 / 95%),
            rgb(33 6 56 / 98%)
        );

    box-shadow:
        0 25px 60px
        rgba(43,11,79,.16);
}


/* ============================================================
   FONDO DE CADA SLIDE
============================================================ */

.sg-slider-pro .swiper-slide{
    background:
        linear-gradient(
            135deg,
            rgb(50 16 95 / 95%),
            rgb(33 6 56 / 98%)
        ) !important;
}


/* ============================================================
   OVERLAY
   MISMA INTENSIDAD DEL ORIGINAL
   SOLO CAMBIA AZUL POR MORADO
============================================================ */

.sg-slider-pro .swiper-slide::before{
    background:
        linear-gradient(
            90deg,
            rgb(24 4 43 / 91%) 0%,
            rgb(43 11 79 / 82%) 34%,
            rgb(68 16 111 / 55%) 62%,
            rgb(68 16 111 / 18%) 100%
        );
}


/* ============================================================
   BRILLO DECORATIVO
============================================================ */

.sg-slider-pro .swiper-slide::after{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.15) 0%,
            rgba(122,53,168,.10) 42%,
            transparent 70%
        );
}


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

.sg-slider-pro
.swiper-slide-contents::before{
    content:"IESTP DIVINO JESÚS";

    color:#FFD84D;

    background:
        rgba(255,255,255,.08);

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


/* ============================================================
   LÍNEA DEBAJO DEL TÍTULO
============================================================ */

.sg-slider-pro
.elementor-slide-heading::after{
    background:
        linear-gradient(
            90deg,
            #FFD84D,
            #F5B900,
            #DCA600
        );

    box-shadow:
        0 5px 14px
        rgba(245,185,0,.25);
}


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

.sg-slider-pro
.elementor-slide-button{
    color:#2B0B4F !important;

    background:
        linear-gradient(
            135deg,
            #FFD84D 0%,
            #F5B900 45%,
            #DCA600 100%
        ) !important;

    box-shadow:
        0 13px 28px
        rgba(245,185,0,.25) !important;
}


/* HOVER BOTÓN */

.sg-slider-pro
.elementor-slide-button:hover{
    color:#FFFFFF !important;

    background:
        linear-gradient(
            135deg,
            #5A1B87,
            #32105F
        ) !important;

    box-shadow:
        0 18px 35px
        rgba(43,11,79,.35) !important;
}


/* ============================================================
   FLECHAS
   CONSERVAMOS EL ESTILO ORIGINAL
============================================================ */

.sg-slider-pro
.elementor-swiper-button,
.sg-slider-pro
.swiper-button-prev,
.sg-slider-pro
.swiper-button-next{
    color:#FFFFFF !important;

    background:
        rgba(50,16,95,.38) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;
}


/* HOVER DE FLECHAS */

.sg-slider-pro
.elementor-swiper-button:hover,
.sg-slider-pro
.swiper-button-prev:hover,
.sg-slider-pro
.swiper-button-next:hover{
    color:#2B0B4F !important;

    background:
        linear-gradient(
            135deg,
            #FFD84D,
            #F5B900
        ) !important;
}


/* ============================================================
   PAGINACIÓN
============================================================ */

.sg-slider-pro
.swiper-pagination{
    background:
        rgba(50,16,95,.35);

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


/* PUNTO NORMAL */

.sg-slider-pro
.swiper-pagination-bullet{
    background:
        rgba(255,255,255,.50) !important;
}


/* PUNTO ACTIVO */

.sg-slider-pro
.swiper-pagination-bullet-active{
    background:
        linear-gradient(
            90deg,
            #FFD84D,
            #F5B900
        ) !important;
}


/* ============================================================
   FRANJA INFERIOR
============================================================ */

.sg-slider-pro::after{
    background:
        linear-gradient(
            90deg,
            #32105F 0%,
            #5A1B87 35%,
            #F5B900 50%,
            #5A1B87 65%,
            #32105F 100%
        );
}


/* ============================================================
   OVERLAY MÓVIL
   MISMA CONFIGURACIÓN DEL ORIGINAL
   SOLO CAMBIO DE COLOR
============================================================ */

@media(max-width:767px){

    .sg-slider-pro
    .swiper-slide::before{
        background:
            linear-gradient(
                180deg,
                rgb(43 11 79 / 22%) 0%,
                rgb(43 11 79 / 53%) 40%,
                rgb(24 4 43 / 96%) 100%
            );
    }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c282b7c *//* ============================================================
   PRESENTACIÓN DEL PROGRAMA
   IESTP SANGARARÁ
============================================================ */

.sg-program-intro,
.sg-program-intro *,
.sg-program-intro *::before,
.sg-program-intro *::after{
    box-sizing:border-box;
}


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

.sg-program-intro{
    --azul:#172D54;
    --azul2:#10213F;
    --azul3:#23416F;

    --amarillo:#FFBD0A;
    --amarillo2:#FFD45A;

    --naranja:#FF9800;
    --naranja2:#EF6C00;

    --crema:#FFFAEF;
    --crema2:#FFF3D6;

    --blanco:#FFFFFF;
    --gris:#69768A;

    position:relative !important;

    width:100vw !important;
    max-width:100vw !important;

    left:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;

    min-height:650px !important;

    padding:
        75px 52% 75px 7% !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(255,189,10,.12),
            transparent 24%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(255,152,0,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFDF8 0%,
            #FFFAF0 55%,
            #FFF5E2 100%
        ) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* QUITAR GAPS DE ELEMENTOR */

.sg-program-intro.e-con{
    --gap:0px !important;
    --row-gap:0px !important;
    --column-gap:0px !important;

    gap:0 !important;
}


/* ============================================================
   DECORACIONES
============================================================ */

.sg-program-intro::before{
    content:"";

    position:absolute;

    width:440px;
    height:440px;

    top:-310px;
    left:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,189,10,.25),
            transparent 68%
        );

    pointer-events:none;
}


.sg-program-intro::after{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-250px;
    bottom:-270px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,152,0,.13),
            transparent 68%
        );

    pointer-events:none;
}


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

.sg-program-intro-title{
    position:relative !important;

    z-index:6;

    width:100% !important;

    max-width:720px !important;

    margin:
        0 0 22px !important;

    padding-top:
        42px !important;

    text-align:left !important;
}


/* BADGE */

.sg-program-intro-title::before{
    content:"quienes somos";

    position:absolute;

    top:0;
    left:0;

    display:inline-flex;

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

    padding:
        9px 15px;

    color:#D96800;

    background:#FFF0CA;

    border:
        1px solid
        rgba(239,108,0,.11);

    border-radius:999px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:8px;

    font-weight:900;

    line-height:1;

    letter-spacing:1px;

    text-transform:uppercase;
}


/* TITULO */

.sg-program-intro-title
.elementor-heading-title{
    margin:0 !important;

    color:#172D54 !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        clamp(40px,4.7vw,58px) !important;

    font-weight:900 !important;

    line-height:1.02 !important;

    letter-spacing:-1.5px !important;

    text-align:left !important;
}


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

.sg-program-intro-text{
    position:relative !important;

    z-index:6;

    width:100% !important;

    max-width:720px !important;

    margin:
        0 0 28px !important;
}


.sg-program-intro-text,
.sg-program-intro-text p{
    color:#69768A !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:14px !important;

    font-weight:400 !important;

    line-height:1.9 !important;

    text-align:left !important;
}


.sg-program-intro-text p{
    margin:
        0 0 20px !important;
}


.sg-program-intro-text p:last-child{
    margin-bottom:0 !important;
}


/* RESALTADOS */

.sg-program-intro-text strong{
    color:#EF6C00 !important;

    font-weight:850 !important;
}


/* ============================================================
   GRID 2 X 2
============================================================ */

.sg-program-features{
    position:relative !important;

    z-index:6;

    display:grid !important;

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

    gap:
        12px !important;

    width:100% !important;

    max-width:720px !important;

    margin:
        28px 0 0 !important;

    padding:0 !important;
}


/* ============================================================
   CADA FEATURE
============================================================ */

.sg-program-feature{
    position:relative !important;

    min-width:0 !important;

    min-height:52px !important;

    display:flex !important;

    align-items:center !important;

    margin:0 !important;

    padding:
        14px 18px 14px 50px !important;

    background:
        rgba(255,255,255,.92) !important;

    border:
        1px solid
        rgba(239,108,0,.18) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 8px 22px
        rgba(23,45,84,.04) !important;

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


.sg-program-feature:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(239,108,0,.35) !important;

    box-shadow:
        0 14px 30px
        rgba(23,45,84,.09) !important;
}


/* CHECK AMARILLO */

.sg-program-feature::before{
    content:"✓";

    position:absolute;

    left:13px;
    top:50%;

    width:27px;
    height:27px;

    display:flex;

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

    color:#FFFFFF;

    background:
        linear-gradient(
            145deg,
            #FFD45A,
            #FFBD0A,
            #FF9800
        );

    border-radius:8px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:13px;

    font-weight:900;

    transform:
        translateY(-50%);

    box-shadow:
        0 6px 14px
        rgba(239,108,0,.13);
}


/* TEXTO DEL FEATURE */

.sg-program-feature,
.sg-program-feature p{
    color:#172D54 !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:10px !important;

    font-weight:750 !important;

    line-height:1.4 !important;

    text-align:left !important;
}


.sg-program-feature p{
    margin:0 !important;
}


/* ============================================================
   IMÁGENES
============================================================ */

.sg-program-img{
    position:absolute !important;

    z-index:4;

    margin:0 !important;

    overflow:hidden !important;

    background:#FFFFFF !important;

    border:
        6px solid #FFFFFF !important;

    border-radius:
        22px !important;

    box-shadow:
        0 24px 55px
        rgba(23,45,84,.16) !important;

    transition:
        transform .45s ease,
        box-shadow .45s ease !important;
}


.sg-program-img
.elementor-widget-container{
    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
}


.sg-program-img img{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;

    border-radius:
        15px !important;

    transition:
        transform .55s ease !important;
}


.sg-program-img:hover img{
    transform:
        scale(1.045);
}


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

.sg-program-img-1{
    width:
        min(440px,31vw) !important;

    height:
        315px !important;

    top:
        105px !important;

    right:
        15% !important;

    transform:
        rotate(.4deg);
}


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

.sg-program-img-2{
    width:
        min(310px,24vw) !important;

    height:
        205px !important;

    right:
        6.5% !important;

    bottom:
        72px !important;

    z-index:7;

    transform:
        rotate(.5deg);
}


/* ============================================================
   HOVER IMÁGENES
============================================================ */

.sg-program-img-1:hover{
    transform:
        rotate(0deg)
        translateY(-7px);
}


.sg-program-img-2:hover{
    transform:
        rotate(0deg)
        translateY(-7px);
}


/* ============================================================
   CÍRCULO / SELLO
   SE GENERA AUTOMÁTICAMENTE
============================================================ */

.sg-program-img-1::after{
    content:"Educación\A tecnológica\A productiva";

    white-space:pre;

    position:absolute;

    z-index:10;

    right:-115px;
    top:15px;

    width:120px;
    height:120px;

    display:flex;

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

    padding:20px;

    color:#FFFFFF;

    background:
        linear-gradient(
            145deg,
            #FFD33D,
            #FFBD0A,
            #FF9800
        );

    border:
        6px solid #FFFFFF;

    border-radius:50%;

    box-shadow:
        0 16px 35px
        rgba(239,108,0,.17);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:10px;

    font-weight:900;

    line-height:1.35;

    text-align:center;

    pointer-events:none;
}


/* ============================================================
   PROTECCIÓN ELEMENTOR
============================================================ */

.sg-program-intro >
.elementor-element{
    min-width:0 !important;
}


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

@media(max-width:1180px){

    .sg-program-intro{
        min-height:
            680px !important;

        padding:
            65px 48% 70px 5% !important;
    }


    .sg-program-img-1{
        width:
            37vw !important;

        height:
            300px !important;

        right:
            9% !important;
    }


    .sg-program-img-2{
        width:
            27vw !important;

        height:
            195px !important;

        right:
            3% !important;
    }


    .sg-program-img-1::after{
        right:
            -80px;

        width:
            100px;

        height:
            100px;

        font-size:
            8px;
    }

}


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

@media(max-width:900px){

    .sg-program-intro{
        min-height:auto !important;

        padding:
            60px 5% 65px !important;
    }


    .sg-program-intro-title,
    .sg-program-intro-text,
    .sg-program-features{
        max-width:
            100% !important;
    }


    /*
       LAS FOTOS PASAN DEBAJO DEL TEXTO
    */

    .sg-program-img{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:inline-block !important;

        vertical-align:top;

        margin-top:
            25px !important;
    }


    .sg-program-img-1{
        width:
            58% !important;

        height:
            310px !important;

        margin-right:
            2% !important;

        transform:none;
    }


    .sg-program-img-2{
        width:
            38% !important;

        height:
            235px !important;

        transform:none;
    }


    .sg-program-img-1::after{
        right:
            18px;

        top:
            18px;

        width:
            95px;

        height:
            95px;

        border-width:
            4px;
    }

}


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

@media(max-width:767px){

    .sg-program-intro{
        padding:
            55px 17px 65px !important;
    }


    .sg-program-intro-title
    .elementor-heading-title{
        font-size:
            37px !important;
    }


    .sg-program-intro-text,
    .sg-program-intro-text p{
        font-size:
            13px !important;

        line-height:
            1.75 !important;
    }


    .sg-program-features{
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;
    }


    .sg-program-feature{
        min-height:
            50px !important;
    }


    .sg-program-img-1,
    .sg-program-img-2{
        width:
            100% !important;

        height:
            240px !important;

        margin:
            18px 0 0 !important;
    }


    .sg-program-img-1{
        margin-top:
            32px !important;
    }


    .sg-program-img-1::after{
        width:
            82px;

        height:
            82px;

        right:
            14px;

        top:
            14px;

        padding:
            12px;

        font-size:
            7px;
    }

}


/* ============================================================
   MÓVIL PEQUEÑO
============================================================ */

@media(max-width:420px){

    .sg-program-intro{
        padding:
            48px 14px 58px !important;
    }


    .sg-program-intro-title
    .elementor-heading-title{
        font-size:
            33px !important;
    }


    .sg-program-img-1,
    .sg-program-img-2{
        height:
            215px !important;
    }

}


/* ============================================================
   EVITAR SCROLL HORIZONTAL
============================================================ */

html,
body{
    overflow-x:hidden !important;
}

/* ============================================================
   PRESENTACIÓN DEL PROGRAMA
   SOLO CAMBIO DE PALETA A AZULES
   NO MODIFICA ESTRUCTURA
============================================================ */


/* ============================================================
   VARIABLES + FONDO GENERAL
============================================================ */

.sg-program-intro{
    --azul:rgb(0 45 85 / 95%);
    --azul2:#001F3B;
    --azul3:#075D97;

    --amarillo:#70C8F4;
    --amarillo2:#BDEAFF;

    --naranja:#1580C1;
    --naranja2:#075D97;

    --crema:#002D55;
    --crema2:#073A66;

    --blanco:#FFFFFF;
    --gris:#C7D9E7;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(112,200,244,.18),
            transparent 24%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(21,128,193,.14),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            rgb(0 45 85 / 99%) 0%,
            rgb(0 38 72 / 99%) 55%,
            rgb(0 25 49 / 100%) 100%
        ) !important;
}


/* ============================================================
   DECORACIONES
============================================================ */

.sg-program-intro::before{
    background:
        radial-gradient(
            circle,
            rgba(112,200,244,.25),
            transparent 68%
        ) !important;
}


.sg-program-intro::after{
    background:
        radial-gradient(
            circle,
            rgba(21,128,193,.18),
            transparent 68%
        ) !important;
}


/* ============================================================
   BADGE "PRESENTACIÓN DEL PROGRAMA"
============================================================ */

.sg-program-intro-title::before{
    color:#BDEAFF !important;

    background:
        rgba(255,255,255,.08) !important;

    border-color:
        rgba(112,200,244,.20) !important;

    box-shadow:
        0 7px 18px
        rgba(0,20,40,.12) !important;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}


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

.sg-program-intro-title
.elementor-heading-title{
    color:#FFFFFF !important;

    text-shadow:
        0 5px 20px
        rgba(0,20,40,.20) !important;
}


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

.sg-program-intro-text,
.sg-program-intro-text p{
    color:
        rgba(255,255,255,.78) !important;
}


/* TEXTO DESTACADO */

.sg-program-intro-text strong{
    color:#70C8F4 !important;
}


/* ============================================================
   CUADROS 2 X 2
============================================================ */

.sg-program-feature{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.07)
        ) !important;

    border-color:
        rgba(112,200,244,.22) !important;

    box-shadow:
        0 8px 22px
        rgba(0,18,35,.17) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* HOVER */

.sg-program-feature:hover{
    border-color:
        rgba(112,200,244,.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.09)
        ) !important;

    box-shadow:
        0 14px 30px
        rgba(0,18,35,.25) !important;
}


/* ============================================================
   CHECK DE CADA CUADRO
============================================================ */

.sg-program-feature::before{
    color:#002D55 !important;

    background:
        linear-gradient(
            145deg,
            #D9F3FF,
            #9FDEFF,
            #70C8F4
        ) !important;

    box-shadow:
        0 6px 14px
        rgba(0,20,40,.16) !important;
}


/* ============================================================
   TEXTO DE LOS CUADROS
============================================================ */

.sg-program-feature,
.sg-program-feature p{
    color:#FFFFFF !important;
}


/* ============================================================
   IMÁGENES
   SOLO CAMBIO DE SOMBRA / BORDE
============================================================ */

.sg-program-img{
    background:#FFFFFF !important;

    border-color:#FFFFFF !important;

    box-shadow:
        0 24px 55px
        rgba(0,18,35,.32) !important;
}


.sg-program-img:hover{
    box-shadow:
        0 30px 65px
        rgba(0,18,35,.42) !important;
}


/* ============================================================
   SELLO CIRCULAR
   "Educación tecnológica productiva"
============================================================ */

.sg-program-img-1::after{
    color:#FFFFFF !important;

    background:
        linear-gradient(
            145deg,
            #1580C1,
            #075D97,
            #002D55
        ) !important;

    border-color:#FFFFFF !important;

    box-shadow:
        0 16px 35px
        rgba(0,20,40,.30) !important;
}

/* ============================================================
   PRESENTACIÓN DEL PROGRAMA
   IESTP DIVINO JESÚS

   SOLO CAMBIO DE COLORES
   NO MODIFICA ESTRUCTURA
   NO MODIFICA RESPONSIVE
   NO MODIFICA TAMAÑOS
   NO MODIFICA POSICIONES
============================================================ */


/* ============================================================
   VARIABLES + FONDO GENERAL
============================================================ */

.sg-program-intro{

    --azul:#32105F;
    --azul2:#210638;
    --azul3:#4B176D;

    --amarillo:#F5B900;
    --amarillo2:#FFD84D;

    --naranja:#DCA600;
    --naranja2:#B98B00;

    --crema:#32105F;
    --crema2:#421066;

    --blanco:#FFFFFF;
    --gris:#DDD5E5;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(245,185,0,.16),
            transparent 24%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(105,36,155,.16),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #32105F 0%,
            #2B0B4F 55%,
            #210638 100%
        ) !important;
}


/* ============================================================
   DECORACIONES
============================================================ */

.sg-program-intro::before{

    background:
        radial-gradient(
            circle,
            rgba(245,185,0,.25),
            transparent 68%
        ) !important;
}


.sg-program-intro::after{

    background:
        radial-gradient(
            circle,
            rgba(105,36,155,.20),
            transparent 68%
        ) !important;
}


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

.sg-program-intro-title::before{

    color:#FFD84D !important;

    background:
        rgba(255,255,255,.08) !important;

    border-color:
        rgba(245,185,0,.25) !important;

    box-shadow:
        0 7px 18px
        rgba(20,4,35,.15) !important;
}


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

.sg-program-intro-title
.elementor-heading-title{

    color:#FFFFFF !important;

    text-shadow:
        0 5px 20px
        rgba(20,4,35,.24) !important;
}


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

.sg-program-intro-text,
.sg-program-intro-text p{

    color:
        rgba(255,255,255,.80) !important;
}


/* TEXTO DESTACADO */

.sg-program-intro-text strong{

    color:#FFD84D !important;
}


/* ============================================================
   CUADROS 2 X 2
============================================================ */

.sg-program-feature{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.07)
        ) !important;

    border-color:
        rgba(245,185,0,.22) !important;

    box-shadow:
        0 8px 22px
        rgba(20,4,35,.19) !important;
}


/* HOVER */

.sg-program-feature:hover{

    border-color:
        rgba(245,185,0,.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.09)
        ) !important;

    box-shadow:
        0 14px 30px
        rgba(20,4,35,.27) !important;
}


/* ============================================================
   CHECK DE CADA CUADRO
============================================================ */

.sg-program-feature::before{

    color:#2B0B4F !important;

    background:
        linear-gradient(
            145deg,
            #FFE985,
            #FFD84D,
            #F5B900
        ) !important;

    box-shadow:
        0 6px 14px
        rgba(245,185,0,.20) !important;
}


/* ============================================================
   TEXTO DE LOS CUADROS
============================================================ */

.sg-program-feature,
.sg-program-feature p{

    color:#FFFFFF !important;
}


/* ============================================================
   IMÁGENES
   SOLO SOMBRA / BORDE
============================================================ */

.sg-program-img{

    background:#FFFFFF !important;

    border-color:#FFFFFF !important;

    box-shadow:
        0 24px 55px
        rgba(20,4,35,.34) !important;
}


.sg-program-img:hover{

    box-shadow:
        0 30px 65px
        rgba(20,4,35,.44) !important;
}


/* ============================================================
   SELLO CIRCULAR
============================================================ */

.sg-program-img-1::after{

    color:#2B0B4F !important;

    background:
        linear-gradient(
            145deg,
            #FFD84D,
            #F5B900,
            #DCA600
        ) !important;

    border-color:#FFFFFF !important;

    box-shadow:
        0 16px 35px
        rgba(245,185,0,.26) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4f4be31 *//* ============================================================
   PRINCIPALES COMPONENTES DEL PEI
   IESTP SANGARARÁ
============================================================ */

.sg-pei-components,
.sg-pei-components *,
.sg-pei-components *::before,
.sg-pei-components *::after{
    box-sizing:border-box;
}


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

.sg-pei-components{
    --azul:#0A6EB4;
    --azul2:#005299;
    --azul3:#004A8F;

    --azul-claro:#1A8FE3;
    --azul-oscuro:#002C4F;

    --blanco:#FFFFFF;

    position:relative !important;

    width:100vw !important;
    max-width:100vw !important;

    left:50% !important;

    margin-left:-50vw !important;
    margin-right:-50vw !important;

    padding:
        80px 5% 90px !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(26,143,227,.05),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            rgb(0 45 85 / 95%) 0%,
            rgb(0 32 60 / 98%) 100%
        ) !important;

    background-size:
        42px 42px,
        42px 42px,
        auto,
        auto !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* ============================================================
   BRILLOS DECORATIVOS
============================================================ */

.sg-pei-components::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-340px;
    left:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06),
            transparent 68%
        );

    pointer-events:none;
}


.sg-pei-components::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-280px;
    bottom:-320px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(26,143,227,.05),
            transparent 68%
        );

    pointer-events:none;
}


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

.sg-pei-components-title{
    position:relative !important;

    z-index:4;

    width:100% !important;

    max-width:950px !important;

    margin:
        0 auto 14px !important;

    padding-top:44px !important;

    text-align:center !important;
}


/* BADGE SUPERIOR */

.sg-pei-components-title::before{
    content:"Nuestra propuesta educativa";

    position:absolute;

    top:0;
    left:50%;

    transform:
        translateX(-50%);

    display:inline-flex;

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

    padding:
        9px 15px 9px 30px;

    color:#5BB8F5;

    background:
        rgba(255,255,255,.07);

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

    border-radius:999px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:8px;

    font-weight:900;

    line-height:1;

    letter-spacing:1px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}


/* PUNTO BADGE */

.sg-pei-components-title::after{
    content:"";

    position:absolute;

    top:9px;

    left:
        calc(50% - 83px);

    width:8px;
    height:8px;

    border-radius:50%;

    background:#1A8FE3;

    box-shadow:
        0 0 0 4px
        rgba(26,143,227,.15);
}


/* TITULO */

.sg-pei-components-title
.elementor-heading-title{
    margin:0 !important;

    color:#FFFFFF !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:
        clamp(38px,4.6vw,58px) !important;

    font-weight:900 !important;

    line-height:1.05 !important;

    letter-spacing:-1.4px !important;

    text-align:center !important;
}


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

.sg-pei-components-desc{
    position:relative !important;

    z-index:4;

    width:100% !important;

    max-width:720px !important;

    margin:
        0 auto 48px !important;

    text-align:center !important;
}


.sg-pei-components-desc,
.sg-pei-components-desc p{
    color:
        rgba(255,255,255,.78) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:13px !important;

    font-weight:400 !important;

    line-height:1.75 !important;

    text-align:center !important;
}


.sg-pei-components-desc p{
    margin:0 !important;
}


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

.sg-pei-components-grid{
    position:relative !important;

    z-index:4;

    width:100% !important;

    max-width:1300px !important;

    margin:0 auto !important;

    padding:0 !important;

    display:grid !important;

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

    gap:18px !important;

    align-items:stretch !important;
}


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

.sg-pei-component-card{
    position:relative !important;

    width:100% !important;
    min-width:0 !important;

    min-height:235px !important;

    margin:0 !important;

    padding:
        85px 24px 28px !important;

    overflow:hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.055)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;

    border-radius:
        18px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease !important;
}


/* HOVER */

.sg-pei-component-card:hover{
    transform:
        translateY(-7px) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.075)
        ) !important;

    border-color:
        rgba(26,143,227,.40) !important;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.13) !important;
}


/* ============================================================
   NÚMERO
============================================================ */

.sg-pei-component-card::before{
    position:absolute;

    top:24px;
    left:24px;

    width:48px;
    height:48px;

    display:flex;

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

    color:#FFFFFF;

    background:
        linear-gradient(
            145deg,
            #1A8FE3,
            #0A6EB4,
            #005299
        );

    border-radius:
        13px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:13px;

    font-weight:900;

    line-height:1;

    box-shadow:
        0 8px 20px
        rgba(0,45,85,.20);

    transition:
        transform .35s ease;
}


.sg-pei-component-card:hover::before{
    transform:
        rotate(-5deg)
        scale(1.06);
}


/* ============================================================
   NUMERACIÓN MANUAL 01 - 06
============================================================ */

.sg-pei-card-1::before{
    content:"01";
}

.sg-pei-card-2::before{
    content:"02";
}

.sg-pei-card-3::before{
    content:"03";
}

.sg-pei-card-4::before{
    content:"04";
}

.sg-pei-card-5::before{
    content:"05";
}

.sg-pei-card-6::before{
    content:"06";
}


/* ============================================================
   LÍNEA DECORATIVA INFERIOR EN HOVER
============================================================ */

.sg-pei-component-card::after{
    content:"";

    position:absolute;

    left:24px;
    bottom:0;

    width:0;
    height:4px;

    border-radius:
        999px 999px 0 0;

    background:
        linear-gradient(
            90deg,
            #1A8FE3,
            #0A6EB4,
            #005299
        );

    transition:
        width .4s ease;
}


.sg-pei-component-card:hover::after{
    width:
        calc(100% - 48px);
}


/* ============================================================
   CONTENEDOR DEL EDITOR
============================================================ */

.sg-pei-component-card
.elementor-widget-container{
    position:relative !important;

    z-index:3;

    width:100% !important;

    height:100% !important;

    margin:0 !important;

    padding:0 !important;
}


/* ============================================================
   TITULOS DENTRO DEL EDITOR
============================================================ */

.sg-pei-component-card h2,
.sg-pei-component-card h3,
.sg-pei-component-card h4{
    margin:
        0 0 10px !important;

    padding:0 !important;

    color:#FFFFFF !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:17px !important;

    font-weight:850 !important;

    line-height:1.25 !important;

    letter-spacing:-.2px !important;
}


/* ============================================================
   PARRAFOS
============================================================ */

.sg-pei-component-card,
.sg-pei-component-card p{
    color:
        rgba(255,255,255,.76) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:11px !important;

    font-weight:400 !important;

    line-height:1.7 !important;
}


.sg-pei-component-card p{
    margin:0 !important;
}


/* STRONG */

.sg-pei-component-card strong{
    color:#FFFFFF !important;

    font-weight:850 !important;
}


/* ============================================================
   PROTECCIÓN ELEMENTOR
============================================================ */

.sg-pei-components-grid >
.elementor-element,
.sg-pei-components-grid >
.e-con{
    min-width:0 !important;
}


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

@media(max-width:1024px){

    .sg-pei-components{
        padding:
            70px 5% 80px !important;
    }


    .sg-pei-components-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:16px !important;
    }


    .sg-pei-component-card{
        min-height:
            220px !important;
    }

}


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

@media(max-width:767px){

    .sg-pei-components{
        padding:
            58px 16px 65px !important;
    }


    .sg-pei-components-title{
        padding-top:
            40px !important;
    }


    .sg-pei-components-title
    .elementor-heading-title{
        font-size:
            36px !important;
    }


    .sg-pei-components-desc{
        margin-bottom:
            32px !important;
    }


    .sg-pei-components-desc,
    .sg-pei-components-desc p{
        font-size:
            12px !important;
    }


    .sg-pei-components-grid{
        grid-template-columns:
            1fr !important;

        gap:
            13px !important;
    }


    .sg-pei-component-card{
        min-height:auto !important;

        padding:
            78px 21px 25px !important;
    }


    .sg-pei-component-card::before{
        top:20px;
        left:21px;

        width:45px;
        height:45px;
    }

}


/* ============================================================
   MÓVILES PEQUEÑOS
============================================================ */

@media(max-width:420px){

    .sg-pei-components{
        padding:
            50px 13px 58px !important;
    }


    .sg-pei-components-title
    .elementor-heading-title{
        font-size:
            32px !important;
    }


    .sg-pei-component-card h2,
    .sg-pei-component-card h3,
    .sg-pei-component-card h4{
        font-size:
            16px !important;
    }

}


/* ============================================================
   EVITAR DESBORDAMIENTO
============================================================ */

html,
body{
    overflow-x:hidden !important;
}

/* ============================================================
   PRINCIPALES COMPONENTES DEL PEI
   IESTP DIVINO JESÚS

   SOLO CAMBIO DE COLORES
   NO MODIFICA ESTRUCTURA
   NO MODIFICA CLASES
   NO MODIFICA RESPONSIVE
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

.sg-pei-components{

    --azul:#5A1B87;
    --azul2:#43106F;
    --azul3:#32105F;

    --azul-claro:#FFD84D;
    --azul-oscuro:#210638;

    --blanco:#FFFFFF;
}


/* ============================================================
   FONDO GENERAL
============================================================ */

.sg-pei-components{

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(245,185,0,.07),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            rgb(50 16 95 / 97%) 0%,
            rgb(33 6 56 / 99%) 100%
        ) !important;
}


/* ============================================================
   BRILLO DECORATIVO IZQUIERDO
============================================================ */

.sg-pei-components::before{

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.06),
            transparent 68%
        ) !important;
}


/* ============================================================
   BRILLO DECORATIVO DERECHO
============================================================ */

.sg-pei-components::after{

    background:
        radial-gradient(
            circle,
            rgba(245,185,0,.07),
            transparent 68%
        ) !important;
}


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

.sg-pei-components-title::before{

    color:#FFD84D !important;

    background:
        rgba(255,255,255,.07) !important;

    border-color:
        rgba(255,255,255,.12) !important;
}


/* ============================================================
   PUNTO DEL BADGE
============================================================ */

.sg-pei-components-title::after{

    background:#F5B900 !important;

    box-shadow:
        0 0 0 4px
        rgba(245,185,0,.17) !important;
}


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

.sg-pei-components-title
.elementor-heading-title{

    color:#FFFFFF !important;
}


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

.sg-pei-components-desc,
.sg-pei-components-desc p{

    color:
        rgba(255,255,255,.78) !important;
}


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

.sg-pei-component-card{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.055)
        ) !important;

    border-color:
        rgba(255,255,255,.13) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04) !important;
}


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

.sg-pei-component-card:hover{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.075)
        ) !important;

    border-color:
        rgba(245,185,0,.42) !important;

    box-shadow:
        0 18px 40px
        rgba(20,4,35,.24) !important;
}


/* ============================================================
   NÚMEROS 01 - 06
============================================================ */

.sg-pei-component-card::before{

    color:#2B0B4F !important;

    background:
        linear-gradient(
            145deg,
            #FFD84D,
            #F5B900,
            #DCA600
        ) !important;

    box-shadow:
        0 8px 20px
        rgba(245,185,0,.22) !important;
}


/* ============================================================
   LÍNEA INFERIOR EN HOVER
============================================================ */

.sg-pei-component-card::after{

    background:
        linear-gradient(
            90deg,
            #FFD84D,
            #F5B900,
            #DCA600
        ) !important;
}


/* ============================================================
   TÍTULOS DE LAS TARJETAS
============================================================ */

.sg-pei-component-card h2,
.sg-pei-component-card h3,
.sg-pei-component-card h4{

    color:#FFFFFF !important;
}


/* ============================================================
   TEXTO DE LAS TARJETAS
============================================================ */

.sg-pei-component-card,
.sg-pei-component-card p{

    color:
        rgba(255,255,255,.76) !important;
}


/* ============================================================
   TEXTO EN NEGRITA
============================================================ */

.sg-pei-component-card strong{

    color:#FFD84D !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38dfab7 *//* ============================================================
   MENSAJE INSTITUCIONAL - FULL WIDTH
   IESTP SANGARARÁ
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 {
  --azul-oscuro: rgb(0 32 60 / 98%);
  --azul-medio: #0A6EB4;
  --azul-claro: #E3F0FA;
  --azul-brillante: #1A8FE3;
  --color-texto: #53647a;

  position: relative !important;
  isolation: isolate;

  /* ============================================
     FIX FULL WIDTH - ROMPE EL LÍMITE DE ELEMENTOR
  ============================================ */
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  display: grid !important;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  grid-template-areas:
    "imagen titulo"
    "imagen contenido";
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 0;
  align-items: start;
  overflow: hidden;
  padding: clamp(40px, 6vw, 84px);
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(26, 143, 227, 0.12),
      transparent 27%
    ),
    linear-gradient(115deg, #ffffff 0%, #F5F8FB 55%, #E3F0FA 100%);
}

/* ============================================
   SI ES UN CONTAINER DE ELEMENTOR
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7.e-con,
.e-con .elementor-96 .elementor-element.elementor-element-38dfab7 {
  width: 100vw !important;
  max-width: 100vw !important;
  flex-basis: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ============================================
   QUITAR LIMITACIÓN DEL CONTENEDOR INTERNO
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   Elementos interiores
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen,
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo,
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ============================================
   Imagen
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen {
  grid-area: imagen;
  align-self: stretch;
}

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen .elementor-widget-container,
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen a {
  display: block;
  height: 100%;
}

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(0, 45, 85, 0.18);
}

/* ============================================
   Encabezado
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo {
  grid-area: titulo;
  position: relative;
  padding-top: 82px;
}

/* Etiqueta azul */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo::before {
  content: "MENSAJE INSTITUCIONAL";
  position: absolute;
  top: 42px;
  left: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul-medio);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

/* Comilla decorativa */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo::after {
  content: "“";
  position: absolute;
  top: -30px;
  left: -6px;
  color: rgba(26, 143, 227, 0.25);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 106px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--azul-oscuro);
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* ============================================
   Contenido
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido {
  grid-area: contenido;
  margin-top: 20px;
  color: var(--color-texto);
}

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p {
  margin: 0 0 18px;
  color: inherit;
  font-size: 15px;
  line-height: 1.85;
  text-align: justify;
}

/* El último párrafo se mostrará como firma */
.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p:last-child {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 110, 180, 0.25);
  line-height: 1.45;
  text-align: left;
}

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p:last-child strong {
  color: var(--azul-oscuro);
  font-weight: 800;
}

/* ============================================
   Tabletas
============================================ */
@media (max-width: 1024px) {
  .elementor-96 .elementor-element.elementor-element-38dfab7 {
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    column-gap: 36px;
    padding: 44px 28px;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen img {
    min-height: 420px;
  }
}

/* ============================================
   Celulares
============================================ */
@media (max-width: 767px) {
  .elementor-96 .elementor-element.elementor-element-38dfab7 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "imagen"
      "titulo"
      "contenido";
    padding: 28px 20px 38px;
    background:
      radial-gradient(
        circle at 100% 8%,
        rgba(26, 143, 227, 0.12),
        transparent 30%
      ),
      linear-gradient(160deg, #ffffff 0%, #EDF2F7 100%);
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen,
  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen .elementor-widget-container,
  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen a {
    height: auto;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen img {
    height: clamp(260px, 72vw, 390px);
    min-height: 0;
    border-radius: 18px;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo {
    margin-top: 18px;
    padding-top: 78px;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo::after {
    top: -24px;
    font-size: 94px;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo :is(h1, h2, h3, h4, h5, h6) {
    font-size: clamp(30px, 9vw, 42px);
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido {
    margin-top: 16px;
  }

  .elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p {
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
  }
}

/* ============================================
   Misma tipografía del otro diseño
============================================ */
.elementor-96 .elementor-element.elementor-element-38dfab7,
.elementor-96 .elementor-element.elementor-element-38dfab7 * {
  font-family: "Segoe UI", Arial, sans-serif !important;
}

/* ============================================
   EVITAR SCROLL HORIZONTAL
============================================ */
html,
body {
  overflow-x: hidden !important;
}

/* ============================================================
   MENSAJE INSTITUCIONAL
   IESTP DIVINO JESÚS

   SOLO CAMBIO DE COLORES
   MORADO + AMARILLO
   NO MODIFICA ESTRUCTURA
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 {
  --azul-oscuro: #2B0B4F;
  --azul-medio: #5A1B87;
  --azul-claro: #F3EAF9;
  --azul-brillante: #F5B900;
  --color-texto: #5F5766;

  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(245, 185, 0, 0.10),
      transparent 27%
    ),
    linear-gradient(
      115deg,
      #ffffff 0%,
      #faf8fc 55%,
      #f3eaf9 100%
    ) !important;
}


/* ============================================================
   SOMBRA DE LA IMAGEN
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-imagen img {
  box-shadow:
    0 20px 45px
    rgba(43, 11, 79, 0.18) !important;
}


/* ============================================================
   ETIQUETA "MENSAJE INSTITUCIONAL"
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo::before {
  background:
    #FFF4C7 !important;

  color:
    #5A1B87 !important;

  border:
    1px solid
    rgba(245, 185, 0, 0.22) !important;
}


/* ============================================================
   COMILLA DECORATIVA
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo::after {
  color:
    rgba(90, 27, 135, 0.20) !important;
}


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

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-titulo
:is(h1, h2, h3, h4, h5, h6) {
  color:
    #2B0B4F !important;
}


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

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido {
  color:
    #5F5766 !important;
}


.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p {
  color:
    inherit !important;
}


/* ============================================================
   LÍNEA DE FIRMA
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido p:last-child {
  border-top:
    1px solid
    rgba(90, 27, 135, 0.20) !important;
}


/* ============================================================
   NOMBRE / FIRMA EN NEGRITA
============================================================ */

.elementor-96 .elementor-element.elementor-element-38dfab7 .mensaje-contenido
p:last-child strong {
  color:
    #2B0B4F !important;
}


/* ============================================================
   FONDO EN CELULAR
   SOLO CAMBIA PALETA
============================================================ */

@media (max-width: 767px) {

  .elementor-96 .elementor-element.elementor-element-38dfab7 {
    background:
      radial-gradient(
        circle at 100% 8%,
        rgba(245, 185, 0, 0.10),
        transparent 30%
      ),
      linear-gradient(
        160deg,
        #ffffff 0%,
        #f5eff8 100%
      ) !important;
  }

}/* End custom CSS */