/* =========================================================
   CONFIGURACIÓN GENERAL
   ========================================================= */
* {
    box-sizing: border-box;
}
html,
body {
    max-width: 100%;
}
ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}
#coacHome {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
/* =========================================================
   SLIDER NUEVO
   ========================================================= */
#coacHero {
    width:
        min(
            1320px,
            calc(100% - 32px)
        );
    margin:
        22px auto 55px;
    position: relative;
    outline: none;
}
/* =========================================================
   ESCENARIO
   ========================================================= */
#coacHero
.coac-hero-stage {
    position: relative;
    width: 100%;
    height:
        clamp(
            340px,
            40vw,
            560px
        );
    overflow: hidden;
    border-radius:
        28px;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(
                71,
                152,
                86,
                .14
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(
                54,
                124,
                65,
                .11
            ),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #f7fbf8 0%,
            #ffffff 48%,
            #edf6ef 100%
        );
    border:
        1px solid
        rgba(
            54,
            124,
            65,
            .12
        );
    box-shadow:
        0 22px 60px
        rgba(
            26,
            71,
            37,
            .16
        );

    isolation: isolate;

}



/* =========================================================
   DECORACIÓN
   ========================================================= */

#coacHero
.coac-hero-stage::before,
#coacHero
.coac-hero-stage::after {

    content: "";

    position: absolute;

    pointer-events: none;

    border-radius: 999px;

    z-index: 0;

}


#coacHero
.coac-hero-stage::before {

    width: 280px;

    height: 280px;

    left: -85px;

    top: -165px;

    border:
        34px solid
        rgba(
            54,
            124,
            65,
            .08
        );

}


#coacHero
.coac-hero-stage::after {

    width: 230px;

    height: 230px;

    right: -105px;

    bottom: -130px;

    background:
        rgba(
            54,
            124,
            65,
            .07
        );

}



/* =========================================================
   CADA SLIDE
   ========================================================= */
#coacHero
.coac-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* MISMO ESPACIO ARRIBA Y ABAJO */

    padding: 24px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}
#coacHero
.coac-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 3;
}
/* =========================================================
   TRANSICIÓN HACIA ADELANTE
   ========================================================= */

#coacHero[data-direction="next"]
.coac-hero-slide.is-active {

    animation:
        coacHeroNext
        .95s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        )
        both;

}



/* =========================================================
   TRANSICIÓN HACIA ATRÁS
   ========================================================= */

#coacHero[data-direction="prev"]
.coac-hero-slide.is-active {

    animation:
        coacHeroPrev
        .95s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        )
        both;

}



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

@keyframes coacHeroNext {

    from {

        opacity: 0;

        transform:
            translateX(85px)
            scale(.98);

        clip-path:
            inset(
                0 0 0 18%
                round 20px
            );

    }


    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        clip-path:
            inset(
                0 0 0 0
                round 20px
            );

    }

}



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

@keyframes coacHeroPrev {

    from {

        opacity: 0;

        transform:
            translateX(-85px)
            scale(.98);

        clip-path:
            inset(
                0 18% 0 0
                round 20px
            );

    }


    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        clip-path:
            inset(
                0 0 0 0
                round 20px
            );

    }

}



/* =========================================================
   CONTENEDOR DE IMAGEN
   ========================================================= */

#coacHero
.coac-hero-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
/* =========================================================
   ENLACE IMAGEN SLIDER
   ========================================================= */

#coacHero .coac-hero-link {
    width: 100%;
    height: 100%;

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

    text-decoration: none;
    cursor: pointer;
}

#coacHero .coac-hero-link .coac-hero-image {
    cursor: pointer;
}

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

   MUY IMPORTANTE:
   NO SE ESTIRA
   NO SE DEFORMA
   ========================================================= */

#coacHero
.coac-hero-image {

    display: block !important;

    width: auto !important;

    height: auto !important;

    max-width: 100% !important;

    max-height: 100% !important;

    object-fit: contain !important;

    object-position: center !important;

    border-radius:
        18px;

    box-shadow:
        0 14px 36px
        rgba(
            23,
            62,
            32,
            .18
        );

    user-select: none;

    -webkit-user-drag: none;

}



/* =========================================================
   CONTADOR
   ========================================================= */

#coacHero
.coac-hero-counter {

    position: absolute;

    top: 20px;

    right: 22px;

    z-index: 20;

    min-width: 88px;

    height: 40px;

    padding:
        0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius:
        999px;

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

    border:
        1px solid
        rgba(
            54,
            124,
            65,
            .13
        );

    box-shadow:
        0 8px 24px
        rgba(
            32,
            74,
            42,
            .10
        );

    color:
        #285f34;

    font-size:
        13px;

    font-weight:
        700;

}


#coacHero
.coac-hero-counter strong {

    color:
        #367c41;

    font-size:
        17px;

    font-weight:
        800;

}


#coacHero
.coac-hero-counter-line {

    width: 14px;

    height: 1px;

    display: block;

    background:
        rgba(
            54,
            124,
            65,
            .45
        );

}


#coacHero
.coac-hero-counter > span:last-child {

    opacity:
        .58;

}



/* =========================================================
   FLECHAS
   ========================================================= */

#coacHero
.coac-hero-arrow {

    position: absolute;

    top: 50%;

    z-index: 25;

    width: 50px;

    height: 50px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            54,
            124,
            65,
            .14
        );

    border-radius:
        16px;

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

    color:
        #367c41;

    font-size:
        26px;

    line-height:
        1;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(
            26,
            71,
            37,
            .14
        );

    transform:
        translateY(-50%);

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

}


#coacHero
.coac-hero-arrow:hover {

    background:
        #367c41;

    color:
        #ffffff;

    transform:
        translateY(-50%)
        scale(1.07);

    box-shadow:
        0 14px 32px
        rgba(
            26,
            71,
            37,
            .22
        );

}


#coacHero
.coac-hero-arrow:active {

    transform:
        translateY(-50%)
        scale(.94);

}


#coacHero
.coac-hero-prev {

    left: 18px;

}


#coacHero
.coac-hero-next {

    right: 18px;

}



/* =========================================================
   PROGRESO
   ========================================================= */

#coacHero
.coac-hero-progress {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 30;

    width: 100%;

    height: 4px;

    overflow: hidden;

    background:
        rgba(
            54,
            124,
            65,
            .09
        );

}


#coacHero
.coac-hero-progress-bar {

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #2f8c42,
            #5dbd70 65%,
            #9bdda7
        );

}


@keyframes coacHeroProgress {

    from {

        width: 0%;

    }


    to {

        width: 100%;

    }

}



/* =========================================================
   MINIATURAS
   ========================================================= */

#coacHero
.coac-hero-thumbs {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top:
        14px;

    padding:
        5px 2px 8px;

    overflow-x: auto;

    scrollbar-width:
        none;

    scroll-behavior:
        smooth;

}


#coacHero
.coac-hero-thumbs::-webkit-scrollbar {

    display:
        none;

}


#coacHero
.coac-hero-thumb {

    flex:
        0 0 auto;

    width:
        106px;

    height:
        62px;

    padding:
        4px;

    overflow:
        hidden;

    border:
        2px solid
        transparent;

    border-radius:
        13px;

    background:
        #ffffff;

    cursor:
        pointer;

    opacity:
        .55;

    box-shadow:
        0 5px 16px
        rgba(
            30,
            69,
            39,
            .09
        );

    transition:
        opacity .22s ease,
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;

}


#coacHero
.coac-hero-thumb:hover {

    opacity:
        .9;

    transform:
        translateY(-2px);

}


#coacHero
.coac-hero-thumb.is-active {

    opacity:
        1;

    border-color:
        #367c41;

    box-shadow:
        0 7px 20px
        rgba(
            36,
            93,
            50,
            .18
        );

}


#coacHero
.coac-hero-thumb img {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    background:
        #f7faf8;

    border-radius:
        8px;

}



/* =========================================================
   MENSAJE SIN IMÁGENES
   ========================================================= */

#coacHero
.coac-hero-empty {

    min-height:
        280px;

    width:
        100%;

    padding:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            54,
            124,
            65,
            .14
        );

    border-radius:
        24px;

    background:
        #f6faf7;

    color:
        #367c41;

    font-size:
        18px;

    font-weight:
        700;

    text-align:
        center;

}



/* =========================================================
   SECCIONES GENERALES
   ========================================================= */

.seccion {

    width:
        100%;

    padding:
        60px 5%;

    box-sizing:
        border-box;

    display:
        block;

}


.contenido {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        60px;

    max-width:
        1200px;

    width:
        100%;

    margin:
        0 auto;

    opacity:
        0;

    transform:
        translateY(80px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.contenido.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.contenido.hidden {

    opacity:
        0;

    transform:
        translateY(80px);

}



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

.imagen {

    flex:
        0 0 35%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.imagen img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        cover;

    border-radius:
        15px;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            .15
        );

    transition:
        transform .4s ease;

}



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

.texto {

    flex:
        0 0 50%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    text-align:
        left;

}
/* =========================================================
   BOTÓN CONOCE MÁS
   ========================================================= */

.btn-conoce-mas {

    width: fit-content;

    min-width: 155px;

    margin-top: 26px;

    padding:
        12px 16px 12px 22px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #367c41,
            #2FA443
        );

    border:
        1px solid
        rgba(
            47,
            164,
            67,
            .25
        );

    border-radius:
        999px;

    font-size:
        1rem;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 8px 22px
        rgba(
            54,
            124,
            65,
            .20
        );

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

}



/* CÍRCULO CON FLECHA */

.btn-conoce-mas
.btn-flecha {

    width: 34px;

    height: 34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #367c41;

    background:
        #ffffff;

    font-size:
        19px;

    line-height:
        1;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}



/* HOVER */

.btn-conoce-mas:hover {

    color:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(
            54,
            124,
            65,
            .28
        );

}


.btn-conoce-mas:hover
.btn-flecha {

    transform:
        translateX(4px);

    background:
        #eff8f1;

}



/* AL HACER CLIC */

.btn-conoce-mas:active {

    transform:
        translateY(-1px)
        scale(.98);

}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 900px
) {

    .btn-conoce-mas {

        margin-left:
            auto;

        margin-right:
            auto;

    }

}

.texto h2 {

    margin:
        0 0 20px;

    color:
        #2FA443;

    font-size:
        2.2rem;

    line-height:
        1.2;

}


.texto p {

    margin:
        0;

    color:
        #444444;

    font-size:
        1.2rem;

    line-height:
        1.8;

}
/* =========================================================
   BOTÓN CONOCE MÁS
   ========================================================= */

.btn-conoce-mas {

    width: fit-content;

    min-width: 155px;

    margin-top: 26px;

    padding:
        12px 16px 12px 22px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #367c41,
            #2FA443
        );

    border:
        1px solid
        rgba(
            47,
            164,
            67,
            .25
        );

    border-radius:
        999px;

    font-size:
        1rem;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 8px 22px
        rgba(
            54,
            124,
            65,
            .20
        );

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

}



/* CÍRCULO CON FLECHA */

.btn-conoce-mas
.btn-flecha {

    width: 34px;

    height: 34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #367c41;

    background:
        #ffffff;

    font-size:
        19px;

    line-height:
        1;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}



/* HOVER */

.btn-conoce-mas:hover {

    color:
        #ffffff;

    text-decoration:
        none;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(
            54,
            124,
            65,
            .28
        );

}


.btn-conoce-mas:hover
.btn-flecha {

    transform:
        translateX(4px);

    background:
        #eff8f1;

}



/* AL HACER CLIC */

.btn-conoce-mas:active {

    transform:
        translateY(-1px)
        scale(.98);

}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 900px
) {

    .btn-conoce-mas {

        margin-left:
            auto;

        margin-right:
            auto;

    }

}



/* =========================================================
   IZQUIERDA
   ========================================================= */

.img-left {

    flex-direction:
        row;

}


.contenido.img-left
.imagen {

    order:
        1;

}


.contenido.img-left
.texto {

    order:
        2;

}



/* =========================================================
   DERECHA
   ========================================================= */

.img-right {

    flex-direction:
        row;

}


.contenido.img-right
.texto {

    order:
        1;

}


.contenido.img-right
.imagen {

    order:
        2;

}



/* =========================================================
   MODAL
   ========================================================= */

.modal {

    width:
        100%;

    height:
        100vh;

    position:
        fixed;

    z-index:
        100;

    top:
        0;

    left:
        0;

    display:
        none;

    justify-content:
        center;

    align-items:
        center;

    background:
        rgba(
            0,
            0,
            0,
            .4
        );

}


.modal
.modal-item {

    width:
        calc(
            100% - 30px
        );

    max-width:
        500px;

    padding:
        20px;

    position:
        relative;

    background:
        #FBFBFB;

    display:
        none;

}


.modal
.modal-item
.btn-salir {

    position:
        absolute;

    top:
        -22px;

    right:
        -22px;

    color:
        #ffffff;

    font-size:
        33px;

    cursor:
        pointer;

}


.modal
.modal-item h1 {

    margin-bottom:
        10px;

    color:
        #48A958;

    font-size:
        27px;

}


.modal
.modal-item li {

    list-style:
        circle;

    text-align:
        justify;

    font-size:
        20px;

}


.modal
.modal-item p {

    width:
        100%;

    margin-top:
        7px;

    color:
        #DE4545;

    font-family:
        serif;

    font-size:
        20px;

    font-style:
        italic;

    text-align:
        center;

}


.modal
.modal-item ul {

    width:
        100%;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

}


.modal
.modal-item ul li {

    width:
        calc(
            50% - 8px
        );

    margin-bottom:
        12px;

    list-style:
        none;

}


.modal
.modal-item ul li h2 {

    color:
        #2E6E34;

    font-family:
        'Abel',
        sans-serif;

    font-size:
        22px;

}


.modal
.modal-item ul li span a,
.modal
.modal-item ul li span p {

    display:
        block;

    color:
        #000000;

    font-family:
        'Abel',
        sans-serif;

    font-size:
        18px;

    font-style:
        normal;

    cursor:
        default;

}


.modal
.modal-item ul li span a:hover,
.modal
.modal-item ul li span p:hover {

    text-decoration:
        none;

}


.modal
.modal-item ul li span a img,
.modal
.modal-item ul li span p img {

    width:
        100%;

}



/* =========================================================
   LOGOS INSTITUCIONALES
   ========================================================= */

.logos-instituciones {

    width:
        100%;

    max-width:
        1200px;

    margin:
        30px auto;

    padding:
        0 20px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        25px;

}


.logos-instituciones li {

    flex:
        0 1 100px;

    text-align:
        center;

}


.logos-instituciones
li a {

    display:
        block;

}


.logos-instituciones
li a img {

    display:
        block;

    width:
        100%;

    max-width:
        100px;

    height:
        auto;

    margin:
        0 auto;

    filter:
        grayscale(100%);

    transition:
        transform .3s ease,
        filter .3s ease;

}


.logos-instituciones
li a:hover img {

    transform:
        scale(1.2);

    filter:
        grayscale(0%);

}



/* =========================================================
   VIDEOS
   ========================================================= */

.videos-seccion {

    background:
        #f9fdf9;

    padding:
        80px 5%;

    display:
        flex;

    justify-content:
        center;

}


.videos-card {

    width:
        100%;

    max-width:
        1200px;

    padding:
        40px;

    background:
        #ffffff;

    border-radius:
        18px;

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            .12
        );

    text-align:
        center;

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

}


.videos-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            .18
        );

}


.videos-card h2 {

    margin:
        0 0 15px;

    color:
        #2FA443;

    font-size:
        2.4rem;

}


.videos-card > p {

    margin:
        0 0 40px;

    color:
        #444444;

    font-size:
        1.2rem;

    line-height:
        1.7;

}


.video-grid {

    width:
        100%;

    max-width:
        1200px;

    margin:
        40px auto 0;

    display:
        grid;

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

    gap:
        20px;

}


.video-item {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        #000000;

    box-shadow:
        0 6px 20px
        rgba(
            0,
            0,
            0,
            .15
        );

}


.video-item iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

}



/* =========================================================
   GALERÍA
   ========================================================= */

.imgs-b {

    width:
        100%;

    max-width:
        1200px;

    margin:
        50px auto;

    padding:
        20px;

    background:
        #ffffff;

    border-radius:
        25px;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            .1
        );

}


.imgs-b ul {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                300px,
                1fr
            )
        );

    gap:
        20px;

}


.imgs-b ul li {

    height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #ffffff;

    border-radius:
        15px;

    box-shadow:
        0 6px 18px
        rgba(
            0,
            0,
            0,
            .12
        );

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

}


.imgs-b ul li:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 12px 28px
        rgba(
            0,
            0,
            0,
            .18
        );

}


.imgs-b ul li img {

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    border-radius:
        10px;

    transition:
        transform .4s ease;

}


.imgs-b ul li:hover img {

    transform:
        scale(1.05);

}



/* =========================================================
   INFORMACIÓN / SUCURSALES
   ========================================================= */

.info {

    width:
        calc(
            100% - 30px
        );

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        48px 5%;

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #367c41,
            #367c41
        );

    border-top:
        5px solid
        #2FA443;

    border-radius:
        24px;

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            .28
        );

}


.info::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background:
        radial-gradient(
            circle at top left,
            rgba(
                255,
                255,
                255,
                .12
            ),
            transparent 55%
        );

    pointer-events:
        none;

}



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

.sucursales {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    max-width:
        1200px;

    display:
        grid;

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

    gap:
        28px;

    margin:
        0;

    padding:
        0;

}



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

.branch {

    width:
        100%;

    padding:
        20px;

    background:
        #ffffff;

    color:
        #245d32;

    border:
        1px solid
        #e0f2e6;

    border-radius:
        22px;

    box-shadow:
        0 10px 26px
        rgba(
            0,
            0,
            0,
            .18
        );

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}


.branch:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            .22
        );

}


.branch h3 {

    margin:
        0 0 12px;

    color:
        #245d32;

    font-size:
        1.25rem;

    font-weight:
        800;

    letter-spacing:
        .2px;

}


.branch-body {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}



/* =========================================================
   TELÉFONOS
   ========================================================= */

.phones a {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 12px;

    color:
        #245d32;

    background:
        #f3fbf6;

    border:
        1px solid
        #d5ecdf;

    border-radius:
        14px;

    font-size:
        1.02rem;

    font-weight:
        600;

    text-decoration:
        none;

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

}


.phones a + a {

    margin-top:
        8px;

}


.phones a:hover {

    background:
        #e7f7ed;

    transform:
        translateX(3px);

    box-shadow:
        0 4px 10px
        rgba(
            0,
            0,
            0,
            .12
        );

}



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

.branch-location {

    margin-top:
        6px;

    padding-top:
        12px;

    border-top:
        1px dashed
        #dbeee4;

}


.branch-location summary {

    padding:
        9px 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        8px;

    cursor:
        pointer;

    user-select:
        none;

    list-style:
        none;

    background:
        #2FA443;

    color:
        #ffffff;

    border:
        1px solid
        #238838;

    border-radius:
        14px;

    font-size:
        1rem;

    font-weight:
        700;

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

}


.branch-location
summary::-webkit-details-marker {

    display:
        none;

}


.branch-location[open]
summary,
.branch-location
summary:hover {

    background:
        #267a3a;

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            .18
        );

}



/* =========================================================
   MAPA
   ========================================================= */

.map-slot {

    width:
        100%;

    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    background:
        #ffffff;

    border-radius:
        14px;

    box-shadow:
        0 10px 22px
        rgba(
            0,
            0,
            0,
            .18
        );

}


.map-slot iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

}



/* =========================================================
   FOOTER
   ========================================================= */

footer {

    width:
        100%;

    margin-top:
        40px;

    padding:
        28px 5%;

    background:
        #367c41;

    color:
        #ffffff;

    border-top:
        4px solid
        #367c41;

    box-shadow:
        0 -6px 18px
        rgba(
            0,
            0,
            0,
            .12
        );

}


footer
.footer-inner {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    text-align:
        center;

}


footer p {

    margin:
        0 0 8px;

    color:
        #f3fff8;

    font-size:
        .98rem;

    line-height:
        1.6;

}


footer p span {

    color:
        #ffffff;

    font-weight:
        700;

}


footer a {

    display:
        inline-block;

    margin-top:
        4px;

    color:
        #eaffee;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s ease,
        transform .2s ease;

}


footer a:hover {

    color:
        #ffffff;

    transform:
        translateY(-1px);

}



/* =========================================================
   RESPONSIVE VIDEOS
   ========================================================= */

@media (
    max-width: 1200px
) {

    .video-grid {

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

    }

}



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

@media (
    max-width: 1024px
) {

    .sucursales {

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

    }

}



@media (
    max-width: 900px
) {


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

    #coacHero {

        width:
            calc(
                100% - 20px
            );

        margin:
            14px auto 44px;

    }


    #coacHero
    .coac-hero-stage {

        height:
            clamp(
                300px,
                55vw,
                470px
            );

        border-radius:
            22px;

    }


    #coacHero
    .coac-hero-slide {

        padding:
            24px 58px 48px;

    }


    #coacHero
    .coac-hero-arrow {

        width:
            44px;

        height:
            44px;

        border-radius:
            14px;

        font-size:
            22px;

    }


    #coacHero
    .coac-hero-prev {

        left:
            10px;

    }


    #coacHero
    .coac-hero-next {

        right:
            10px;

    }


    #coacHero
    .coac-hero-thumb {

        width:
            92px;

        height:
            54px;

    }



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

    .contenido,
    .img-left,
    .img-right {

        flex-direction:
            column !important;

        gap:
            30px;

    }


    .imagen,
    .texto {

        width:
            100%;

        flex:
            0 0 100%;

    }


    .contenido.img-left
    .imagen,
    .contenido.img-left
    .texto,
    .contenido.img-right
    .imagen,
    .contenido.img-right
    .texto {

        order:
            initial;

    }


    .texto {

        text-align:
            center;

    }



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

    .video-grid {

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

    }

}



/* =========================================================
   RESPONSIVE GALERÍA
   ========================================================= */

@media (
    max-width: 768px
) {

    .imgs-b ul {

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(
                    180px,
                    1fr
                )
            );

        gap:
            15px;

    }

}



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

@media (
    max-width: 640px
) {


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

    #coacHero {

        width:
            calc(
                100% - 12px
            );

        margin:
            8px auto 34px;

    }


    #coacHero
    .coac-hero-stage {

        height:
            clamp(
                235px,
                68vw,
                355px
            );

        border-radius:
            17px;

    }


    #coacHero
    .coac-hero-slide {

        padding:
            14px 40px 34px;

    }


    #coacHero
    .coac-hero-image {

        border-radius:
            12px;

        box-shadow:
            0 8px 22px
            rgba(
                23,
                62,
                32,
                .14
            );

    }



    /* CONTADOR */

    #coacHero
    .coac-hero-counter {

        top:
            10px;

        right:
            10px;

        min-width:
            74px;

        height:
            32px;

        padding:
            0 10px;

        font-size:
            11px;

    }


    #coacHero
    .coac-hero-counter strong {

        font-size:
            14px;

    }



    /* FLECHAS */

    #coacHero
    .coac-hero-arrow {

        width:
            34px;

        height:
            34px;

        border-radius:
            11px;

        font-size:
            17px;

    }


    #coacHero
    .coac-hero-prev {

        left:
            6px;

    }


    #coacHero
    .coac-hero-next {

        right:
            6px;

    }



    /* =====================================================
       EN CELULAR LAS MINIATURAS SE CONVIERTEN EN PUNTOS
       ===================================================== */

    #coacHero
    .coac-hero-thumbs {

        gap:
            6px;

        min-height:
            28px;

        margin-top:
            8px;

        padding:
            4px 8px;

    }


    #coacHero
    .coac-hero-thumb {

        width:
            7px;

        height:
            7px;

        padding:
            0;

        border:
            0;

        border-radius:
            999px;

        background:
            #bfd5c3;

        box-shadow:
            none;

        opacity:
            1;

    }


    #coacHero
    .coac-hero-thumb img {

        display:
            none !important;

    }


    #coacHero
    .coac-hero-thumb.is-active {

        width:
            28px;

        background:
            #367c41;

        box-shadow:
            none;

    }



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

    .seccion {

        padding:
            42px 6%;

    }


    .contenido {

        gap:
            24px;

    }


    .texto h2 {

        font-size:
            1.7rem;

    }


    .texto p {

        font-size:
            1rem;

        line-height:
            1.7;

    }



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

    .videos-seccion {

        padding:
            55px 5%;

    }


    .videos-card {

        padding:
            26px 18px;

    }


    .videos-card h2 {

        font-size:
            1.9rem;

    }


    .video-grid {

        grid-template-columns:
            1fr;

    }



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

    .info {

        width:
            calc(
                100% - 16px
            );

        padding:
            30px 18px;

        border-radius:
            18px;

    }


    .sucursales {

        grid-template-columns:
            1fr;

    }

}



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

@media (
    max-width: 560px
) {

    footer {

        padding:
            24px 6%;

    }


    footer p,
    footer a {

        font-size:
            .95rem;

    }

}



/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    #coacHero
    .coac-hero-slide.is-active {

        animation:
            none !important;

    }


    #coacHero
    .coac-hero-progress-bar {

        animation:
            none !important;

    }


    .contenido {

        transition:
            none;

    }

}
/* =========================================================
   MODAL PROMOCIONAL - LÍNEA DE CRÉDITO
   ========================================================= */

.promo-credit-modal {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

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

    padding: 25px;

    background: rgba(0, 0, 0, 0.62);

    opacity: 0;
    visibility: hidden;

    z-index: 99999;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* MODAL VISIBLE */

.promo-credit-modal.is-active {
    opacity: 1;
    visibility: visible;
}


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

.promo-credit-content {
    position: relative;

    width: 100%;
    max-width: 750px;

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

    transform: translateY(25px) scale(.96);

    transition:
        transform .4s cubic-bezier(.22, .61, .36, 1);
}


.promo-credit-modal.is-active
.promo-credit-content {
    transform: translateY(0) scale(1);
}


/* =========================================================
   ENLACE DE LA IMAGEN
   ========================================================= */

.promo-credit-link {
    display: block;

    width: 100%;

    text-decoration: none;

    cursor: pointer;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .35);
}


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

.promo-credit-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 78vh;

    object-fit: contain;

    background: transparent;

    transition:
        transform .35s ease;
}


.promo-credit-link:hover
.promo-credit-image {
    transform: scale(1.015);
}


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

.promo-credit-close {
    position: absolute;

    top: -18px;
    right: -18px;

    width: 46px;
    height: 46px;

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

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #ffffff;

    color: #367c41;

    font-size: 32px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .25);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.promo-credit-close:hover {
    transform: scale(1.08);

    background: #367c41;

    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .promo-credit-modal {
        padding: 18px;
    }


    .promo-credit-content {
        max-width: 95%;
    }


    .promo-credit-close {
        width: 42px;
        height: 42px;

        top: -16px;
        right: -10px;

        font-size: 28px;
    }


    .promo-credit-image {
        max-height: 82vh;
    }
}