/* ==================================================
   ESTILOS GLOBALES: Section Highlight
   ================================================== */

section.section-highlight div.e-con-inner {
    padding: 0;
    min-width: 100%;
    justify-content: center !important;
    align-items: center !important;
}

div.section-highlight__title h2.elementor-heading-title {
    color: #7A0D13;
}

div.section-highlight__img-container {
    width: 100%;
    position: relative;
    padding: 0;
}

div.section-highlight__img img {
    width: 100%;
}

div.section-highlight__container-copy {
    position: absolute;
    z-index: -1;
    width: auto;
    border-radius: 0 16px 16px 0;
    background: #F3DBD7;
}

div.section-highlight__copy p, div.section-highlight__copy-text--subtitle p {
    font-family: Qalogre Fit !important;
    font-weight: 400;
    color: #BB5D80 !important;
}

div.section-highlight__copy-text {
    background: #F3DBD7;
    border-radius: 16px;
}

div.section-highlight__copy-text p {
    font-weight: 300;
    color: #BB5D80 !important;
}



/* ==================================================
   ESTILOS DESKTOP: Section Highlight
   ================================================== */

@media screen and (min-width: 1025px) {

    section.section-highlight {
        width: 90%;
    }

    div.section-highlight__img-container {
        justify-content: center;
        align-items: center;
    }

    div.section-highlight__img {
        width: 70%;
        max-width: 46rem !important;
    }
    
    div.section-highlight__container-copy {
        margin-left: 6.8rem;
        margin-top: -5rem;
        padding: 1rem 1rem 1rem 4rem;
    }
    
    div.section-highlight__copy {
        width: 13rem;
        font-size: 2.2rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.4rem;
    }
    
    div.section-highlight__copy-text {
        width: 48rem;
        font-size: 1.7rem;
        padding: 1rem 0 .4rem 0 !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 40rem;
        font-size: 2.2rem;
    }
}



/* ==================================================
   ESTILOS MOBILE: Section Highlight
   ================================================== */

@media screen and (max-width: 767px) {

    section.section-highlight {
        width: 96%;
    }

    div.section-highlight__img-container {
        height: 78vw;
        max-height: 329px !important;
    }
    
    div.section-highlight__img {
        width: 142%;
        max-width: 34rem !important;
        position: absolute;
        left: 26%;
        transform: translateX(-26%);
    }
    
    div.section-highlight__container-copy {
        left: 49%;
        transform: translateX(-49%);
        margin-top: 12%;
        margin-left: 4.2rem;
        padding: 1rem 1rem 1rem 3rem;
        width: 70%;
        max-width: 12rem;
    }
    
    div.section-highlight__copy {
        font-size: 1.4rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.2rem;
    }

    div.section-highlight__copy-text {
        width: 100%;
        font-size: 1.3rem;
        padding: 1rem .8rem .5rem .8rem !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 93%;
        max-width: 22rem !important;
        font-size: 1.4rem;
    }
}



/* ==================================================
   ESTILOS TABLET: Section Highlight
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    section.section-highlight {
        width: 94%;
    }

    div.section-highlight__img {
        width: 84%;
        max-width: 40rem !important;
    }
    
    div.section-highlight__container-copy {
        margin-left: 6.8rem;
        margin-top: -5.4rem;
        padding: 1rem 1rem 1rem 3rem;
    }
    
    div.section-highlight__copy {
        width: 12rem;
        font-size: 1.9rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.3rem;
    }
    
    div.section-highlight__copy-text {
        width: 44rem;
        font-size: 1.6rem;
        padding: 1rem 0 .5rem 0 !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 34rem;
        font-size: 1.9rem;
    }
}

/* El telefono dejo de ser <h4> y paso a <div> el 2026-09-01: como encabezado
   rompia el orden secuencial (h2 -> h4) y le metia un titulo falso al indice del
   documento, que es como navega un lector de pantalla. Un numero de telefono no
   es el titulo de ninguna seccion.
   Estas 3 declaraciones conservan el aspecto EXACTO que le daba la etiqueta h4:
   el tamano y la fuente venian de reglas de Astra ancladas a <h4>, no del CSS del
   widget. Medido con Chrome: 20px / 24px de alto de linea / Qalogre Fit, identico
   en escritorio y en movil.
   OJO: se eligio <div> y NO <p> porque el tema tiene
   p.elementor-heading-title { font-family: ... !important } que fuerza el texto de
   cuerpo; con div el shim aplica sin pelear contra un !important. */
.section-highlight__phone .elementor-heading-title {
    font-family: "Qalogre Fit", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
}