.elementor-117 .elementor-element.elementor-element-c41d733{--display:flex;--min-height:0px;overflow:visible;}.elementor-117 .elementor-element.elementor-element-33419b7 .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-117 .elementor-element.elementor-element-33419b7 .elementor-repeater-item-a8da1c2 .swiper-slide-contents{margin-right:auto;}.elementor-117 .elementor-element.elementor-element-33419b7 .elementor-repeater-item-a8da1c2 .swiper-slide-inner{align-items:center;}.elementor-117 .elementor-element.elementor-element-33419b7 .swiper-slide{transition-duration:calc(5000ms*1.2);height:535px;}.elementor-117 .elementor-element.elementor-element-33419b7 .swiper-slide-contents{max-width:66%;}.elementor-117 .elementor-element.elementor-element-33419b7 .swiper-slide-inner{text-align:center;}.elementor-117 .elementor-element.elementor-element-33419b7 .elementor-slide-heading{font-family:"Arial", Sans-serif;}.elementor-117 .elementor-element.elementor-element-dbc36e7{--display:flex;overflow:visible;}@media(min-width:768px){.elementor-117 .elementor-element.elementor-element-c41d733{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-c41d733 *//* ============================================================
   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-dbc36e7 *//* ============================================================
   MENSAJE INSTITUCIONAL - FULL WIDTH
   IESTP SANGARARÁ
============================================================ */

.elementor-117 .elementor-element.elementor-element-dbc36e7 {
  --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-117 .elementor-element.elementor-element-dbc36e7.e-con,
.e-con .elementor-117 .elementor-element.elementor-element-dbc36e7 {
  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-117 .elementor-element.elementor-element-dbc36e7 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

/* ============================================
   Imagen
============================================ */
.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen {
  grid-area: imagen;
  align-self: stretch;
}

.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen .elementor-widget-container,
.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen a {
  display: block;
  height: 100%;
}

.elementor-117 .elementor-element.elementor-element-dbc36e7 .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-117 .elementor-element.elementor-element-dbc36e7 .mensaje-titulo {
  grid-area: titulo;
  position: relative;
  padding-top: 82px;
}

/* Etiqueta azul */
.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-titulo::before {
  content: "NUESTRA HISTORIA";
  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-117 .elementor-element.elementor-element-dbc36e7 .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-117 .elementor-element.elementor-element-dbc36e7 .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-117 .elementor-element.elementor-element-dbc36e7 .mensaje-contenido {
  grid-area: contenido;
  margin-top: 20px;
  color: var(--color-texto);
}

.elementor-117 .elementor-element.elementor-element-dbc36e7 .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-117 .elementor-element.elementor-element-dbc36e7 .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-117 .elementor-element.elementor-element-dbc36e7 .mensaje-contenido p:last-child strong {
  color: var(--azul-oscuro);
  font-weight: 800;
}

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

  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen img {
    min-height: 420px;
  }
}

/* ============================================
   Celulares
============================================ */
@media (max-width: 767px) {
  .elementor-117 .elementor-element.elementor-element-dbc36e7 {
    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-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen,
  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen .elementor-widget-container,
  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen a {
    height: auto;
  }

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

  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-titulo {
    margin-top: 18px;
    padding-top: 78px;
  }

  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-titulo::after {
    top: -24px;
    font-size: 94px;
  }

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

  .elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-contenido {
    margin-top: 16px;
  }

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

/* ============================================
   Misma tipografía del otro diseño
============================================ */
.elementor-117 .elementor-element.elementor-element-dbc36e7,
.elementor-117 .elementor-element.elementor-element-dbc36e7 * {
  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-117 .elementor-element.elementor-element-dbc36e7 {
  --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-117 .elementor-element.elementor-element-dbc36e7 .mensaje-imagen img {
  box-shadow:
    0 20px 45px
    rgba(43, 11, 79, 0.18) !important;
}


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

.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-titulo::before {
  background:
    #FFF4C7 !important;

  color:
    #5A1B87 !important;

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


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

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


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

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


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

.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-contenido {
  color:
    #5F5766 !important;
}


.elementor-117 .elementor-element.elementor-element-dbc36e7 .mensaje-contenido p {
  color:
    inherit !important;
}


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

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


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

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


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

@media (max-width: 767px) {

  .elementor-117 .elementor-element.elementor-element-dbc36e7 {
    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 */