/* =========================================================
   FUENTE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');


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

:root {
    --color-light: #b3d7f8;
    --color-blue: #73b0dd;
    --color-dark: #0c344c;

    --font-main: 'Quicksand', sans-serif;
    --font-body: 'NotoSans', sans-serif;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family: var(--font-main);

    background: #ffffff;

    color: var(--color-dark);

    overflow-x: hidden;
}


a {
    text-decoration: none;
}


button {
    font-family: var(--font-main);
}



/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 150px;

    z-index: auto;

    pointer-events: none;
}



/* =========================================================
   LOGO
========================================================= */

/* =========================================================
   LOGO
========================================================= */

.site-logo {
    position: absolute;

    top: 36px;
    left: 160px;

    width: 300px;

    display: block;

    opacity: 1;
    visibility: visible;

    z-index: 1001;

    pointer-events: auto;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


.site-logo img {
    display: block;

    width: 300px;
    height: auto;
}


/* =========================================================
   LOGO AL HACER SCROLL
========================================================= */

.site-logo.logo-hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}



/* =========================================================
   MENU HAMBURGUESA
========================================================= */

.menu-toggle {
    position: fixed;

    top: 70px;
    right: 150px;

    width: 40px;
    height: 32px;

    padding: 0;

    background: transparent;

    border: 0;

    cursor: pointer;

    z-index: 9999;

    pointer-events: auto;
}


/* =========================================================
   LÍNEAS HAMBURGUESA
========================================================= */

.menu-line-one,
.menu-line-two,
.menu-line-three {
    position: absolute;

    left: 0;

    display: block;

    width: 40px;
    height: 5px;

    border-radius: 20px;

    background: #0c344c;

    transition:
        top 0.35s ease,
        transform 0.35s ease,
        opacity 0.25s ease,
        width 0.35s ease,
        height 0.35s ease;
}


.menu-line-one {
    top: 0;
}


.menu-line-two {
    top: 14px;
}


.menu-line-three {
    top: 28px;
}


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

.menu-overlay {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background: #b3d7f8;

    z-index: 2000;

    display: none;

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


/* MENU ABIERTO */

.menu-overlay.menu-open {
    display: flex;
}


/* =========================================================
   CONTENIDO DEL MENU
========================================================= */

.menu-overlay-content {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        50px
        20px;
}


/* =========================================================
   LOGO DENTRO DEL MENU
========================================================= */

.menu-overlay-logo {
    display: block;

    width: 500px;
    max-width: 80%;

    height: auto;

    margin:
        0
        auto
        70px;
}


/* =========================================================
   MENU
========================================================= */

.main-menu {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;
}


/* =========================================================
   LINKS DEL MENU
========================================================= */

.main-menu a {
    display: block;

    color: #0c344c;

    font-family: var(--font-main);

    font-size: 38px;

    font-weight: 700;

    line-height: 46px;

    text-align: center;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   HOVER LINKS
========================================================= */

.main-menu a:hover {
    color: #E6F3FF;

    transform: translateY(-2px);
}


/* =========================================================
   HAMBURGUESA → X
========================================================= */

/*
 * IMPORTANTE:
 * No cambiamos el tamaño del botón.
 * Solamente transformamos las líneas.
 */

.menu-toggle.active .menu-line-one {
    top: 14px;

    background: #0c344c;

    transform: rotate(45deg);
}

.menu-toggle.active .menu-line-two {
    opacity: 0;
    visibility: hidden;
}


.menu-toggle.active .menu-line-three {
    top: 14px;

    background: #0c344c;

    transform: rotate(-45deg);
}


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

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

    /* LOGO PRINCIPAL */

    .site-logo {
        top: 35px;
        left: 60px;

        width: 240px;
    }


    .site-logo img {
        width: 240px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 55px;
        right: 55px;

        width: 38px;
        height: 30px;
    }


    .menu-line-one,
    .menu-line-two,
    .menu-line-three {
        width: 38px;
        height: 4px;
    }


    .menu-line-one {
        top: 0;
    }


    .menu-line-two {
        top: 13px;
    }


    .menu-line-three {
        top: 26px;
    }


    /* X */

    .menu-toggle.active .menu-line-one {
        top: 13px;

        width: 38px;
        height: 3px;
    }


    .menu-toggle.active .menu-line-three {
        top: 13px;

        width: 38px;
        height: 3px;
    }


    /* LOGO MENU */

    .menu-overlay-logo {
        width: 430px;

        margin-bottom: 55px;
    }


    /* LINKS */

    .main-menu {
        gap: 27px;
    }


    .main-menu a {
        font-size: 32px;

        line-height: 40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .site-header {
        height: 100px;
    }


    /* LOGO PRINCIPAL */

    .site-logo {
        top: 28px;
        left: 25px;

        width: 145px;
    }


    .site-logo img {
        width: 145px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 32px;
        right: 28px;

        width: 34px;
        height: 28px;
    }


    .menu-line-one,
    .menu-line-two,
    .menu-line-three {
        width: 34px;

        height: 3px;
    }


    .menu-line-one {
        top: 0;
    }


    .menu-line-two {
        top: 12px;
    }


    .menu-line-three {
        top: 24px;
    }


    /* X MOBILE */

    .menu-toggle.active .menu-line-one {
        top: 12px;

        width: 34px;
        height: 3px;

        transform: rotate(45deg);
    }


    .menu-toggle.active .menu-line-three {
        top: 12px;

        width: 34px;
        height: 3px;

        transform: rotate(-45deg);
    }


    /* OVERLAY */

    .menu-overlay {
        min-height: 100vh;
    }


    /* CONTENIDO */

    .menu-overlay-content {
        padding:
            85px
            20px
            45px;
    }


    /* LOGO MENU */

    .menu-overlay-logo {
        width: 300px;

        max-width: 75%;

        margin-bottom: 45px;
    }


    /* LINKS */

    .main-menu {
        gap: 23px;
    }


    .main-menu a {
        font-size: 27px;

        line-height: 34px;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

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

    /* LOGO PRINCIPAL */

    .site-logo {
        top: 25px;
        left: 20px;

        width: 125px;
    }


    .site-logo img {
        width: 125px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 27px;
        right: 22px;

        width: 32px;
        height: 26px;
    }


    .menu-line-one,
    .menu-line-two,
    .menu-line-three {
        width: 32px;

        height: 3px;
    }


    .menu-line-one {
        top: 0;
    }


    .menu-line-two {
        top: 11px;
    }


    .menu-line-three {
        top: 22px;
    }


    /* X */

    .menu-toggle.active .menu-line-one {
        top: 11px;

        width: 32px;
        height: 3px;
    }


    .menu-toggle.active .menu-line-three {
        top: 11px;

        width: 32px;
        height: 3px;
    }


    /* CONTENIDO MENU */

    .menu-overlay-content {
        padding:
            75px
            18px
            35px;
    }


    /* LOGO MENU */

    .menu-overlay-logo {
        width: 250px;

        max-width: 75%;

        margin-bottom: 38px;
    }


    /* LINKS */

    .main-menu {
        gap: 20px;
    }


    .main-menu a {
        font-size: 24px;

        line-height: 30px;
    }

}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    position: relative;

    width: 100%;
    height: 1300px;

    background: #ffffff;

    overflow: hidden;
}



/* =========================================================
   ICONO SUPERIOR IZQUIERDO
========================================================= */

.hero-icon-one {
    position: absolute;

    top: -63px;
    left: -333px;

    width: 800px;
    height: auto;

    opacity: 0.20;

    z-index: 1;

    pointer-events: none;
}



/* =========================================================
   ICONO INFERIOR DERECHO
========================================================= */

.hero-icon-two {
    position: absolute;

    right: -340px;
    bottom: 284px;

    width: 800px;
    height: auto;

    opacity: 0.20;

    z-index: 1;

    pointer-events: none;
}



/* =========================================================
   BLOQUE DEL TÍTULO

   La posición vertical del título se controla AQUÍ.
========================================================= */

.hero-heading {
    position: absolute;
    top: 265px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* =========================================================
   H1
   ACCESS TO COMPLEX CARE
========================================================= */

.hero-main-title {
    margin: 0;

    color: var(--color-blue);

    font-family: var(--font-main);

    font-size: 82px;

    font-weight: 800;

    line-height: 130px;

    letter-spacing: -2px;
}


/* =========================================================
   SPAN - SIMPLIFIED
========================================================= */

.hero-main-title span {
    display: block;

    margin-top: 5px;

    color: var(--color-dark);
	
    line-height: 72px;

    letter-spacing: -2px;
}


/* =========================================================
   BLOQUE DE INFORMACIÓN

   Este bloque NO depende de .hero-heading.

   Para subir o bajar todos los textos inferiores y
   el botón, solo debes cambiar el valor de "top".
========================================================= */

.hero-information {
    position: absolute;

    top: 778px;
    left: 0;

    width: 100%;

    text-align: center;

    z-index: 10;
}

/* =========================================================
   GET PRIORITY ACCESS...
========================================================= */

.hero-priority-text {
    margin: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 35px;
    font-weight: 700;
    line-height: 55px;
}

/* =========================================================
   SPAN
   24/7 PATIENT NAVIGATION
========================================================= */

.hero-priority-text span {
    display: block;

    margin-top: 0;

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


/* =========================================================
   BOTÓN GET MY CARE PLAN
========================================================= */

.hero-care-button {
    display: inline-flex;

    width: 268px;
    height: 77px;

    margin-top: 50px;

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

    background: var(--color-dark);

    color: var(--color-light);

    border-radius: 45px;

    font-family: var(--font-main);

    font-size: 25px;

    font-weight: 600;
}

/* HOVER DEL BOTÓN */

.hero-care-button:hover {
    background: var(--color-blue);
    color: #ffffff;
}


/* =========================================================
   LAPTOP
========================================================= */

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

    /* LOGO */

    .site-logo {
        top: 45px;
        left: 70px;

        width: 300px;
    }

    .site-logo img {
        width: 290px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 62px;
        right: 70px;
    }


    /* ICONO 1 */

    .hero-icon-one {
        top: -80px;
        left: -100px;

        width: 350px;
    }


    /* ICONO 2 */

    .hero-icon-two {
        right: -110px;
        bottom: -100px;

        width: 370px;
    }


    /* BLOQUE TÍTULO */

    .hero-heading {
        top: 260px;
    }


    /* H1 */

    .hero-main-title {
        font-size: 56px;
        line-height: 62px;
    }


    /* SIMPLIFIED */

    .hero-main-title span {
        margin-top: 5px;

        font-size: 60px;
        line-height: 66px;
    }


    /* INFORMACIÓN INFERIOR */

    .hero-information {
        top: 555px;
    }
}


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

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

    /* HEADER */

    .site-header {
        height: 120px;
    }


    /* LOGO */

    .site-logo {
        top: 35px;
        left: 40px;

        width: 200px;
    }

    .site-logo img {
        width: 200px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 48px;
        right: 40px;

        width: 32px;
        height: 27px;
    }


    /* LÍNEAS HAMBURGUESA */

    .menu-line-one {
        width: 32px;
    }

    .menu-line-two {
        width: 32px;
    }

    .menu-line-three {
        width: 32px;
    }


    /* HERO */

    .hero-section {
        height: 850px;
    }


    /* ICONO 1 */

    .hero-icon-one {
        top: -70px;
        left: -110px;

        width: 300px;
    }


    /* ICONO 2 */

    .hero-icon-two {
        right: -120px;
        bottom: -80px;

        width: 320px;
    }


    /* BLOQUE TÍTULO */

    .hero-heading {
        top: 230px;
    }


    /* H1 */

    .hero-main-title {
        font-size: 48px;

        line-height: 54px;

        letter-spacing: -1px;
    }


    /* SIMPLIFIED */

    .hero-main-title span {
        margin-top: 4px;

        font-size: 52px;
        line-height: 58px;

        letter-spacing: -1px;
    }


    /* BLOQUE INFORMACIÓN */

    .hero-information {
        top: 510px;
    }


    /* PRIORITY */

    .hero-priority-text {
        font-size: 19px;

        line-height: 26px;
    }


    /* NAVIGATION */

    .hero-navigation-text {
        font-size: 19px;

        line-height: 26px;
    }


    /* DESCRIPCIÓN */

    .hero-description-text {
        font-size: 18px;

        line-height: 25px;
    }


    /* BOTÓN */

    .hero-care-button {
        width: 150px;
        height: 46px;

        margin-top: 40px;

        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

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

    /* LOGO */

    .site-logo {
        top: 25px;
        left: 25px;

        width: 155px;
    }

    .site-logo img {
        width: 155px;
    }


    /* HAMBURGUESA */

    .menu-toggle {
        top: 35px;
        right: 25px;

        width: 30px;
        height: 24px;
    }


    /* LÍNEA 1 */

    .menu-line-one {
        width: 30px;
    }


    /* LÍNEA 2 */

    .menu-line-two {
        top: 11px;

        width: 30px;
    }


    /* LÍNEA 3 */

    .menu-line-three {
        top: 22px;

        width: 30px;
    }


    /* HERO */

    .hero-section {
        height: 800px;
    }


    /* ICONO 1 */

    .hero-icon-one {
        top: -40px;
        left: -100px;

        width: 230px;
    }


    /* ICONO 2 */

    .hero-icon-two {
        right: -110px;
        bottom: -60px;

        width: 250px;
    }


    /* BLOQUE TÍTULO */

    .hero-heading {
        top: 190px;

        padding-left: 20px;
        padding-right: 20px;
    }


    /* H1 */

    .hero-main-title {
        font-size: 36px;

        line-height: 42px;

        letter-spacing: -1px;
    }


    /* SIMPLIFIED */

    .hero-main-title span {
        margin-top: 3px;

        font-size: 40px;
        line-height: 46px;

        letter-spacing: -1px;
    }


    /* BLOQUE INFORMACIÓN */

    .hero-information {
        top: 455px;

        padding-left: 25px;
        padding-right: 25px;
    }


    /* PRIORITY */

    .hero-priority-text {
        font-size: 17px;

        line-height: 23px;
    }


    /* NAVIGATION */

    .hero-navigation-text {
        margin-top: 1px;

        font-size: 17px;

        line-height: 23px;
    }


    /* DESCRIPCIÓN */

    .hero-description-text {
        margin-top: 6px;

        font-size: 16px;

        line-height: 23px;
    }

    .hero-description-text br {
        display: none;
    }


    /* BOTÓN */

    .hero-care-button {
        width: 145px;
        height: 44px;

        margin-top: 35px;

        font-size: 13px;
    }


    /* MENÚ */

    .main-menu a {
        font-size: 28px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        height: 700px;
    }


    /* =====================================================
       LOGO
    ====================================================== */

    .site-logo {
        top: 28px;
        left: 22px;

        width: 120px;
    }

    .site-logo img {
        width: 120px;
    }


    /* =====================================================
       MENÚ
    ====================================================== */

    .menu-toggle {
        top: 28px;
        right: 22px;

        width: 30px;
        height: 24px;
    }

    .menu-line-one {
        width: 30px;
    }

    .menu-line-two {
        top: 11px;
        width: 30px;
    }

    .menu-line-three {
        top: 22px;
        width: 30px;
    }


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

    .hero-icon-one {
        top: -45px;
        left: -90px;

        width: 205px;
    }


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

    .hero-heading {
        top: 175px;

        left: 0;

        width: 100%;

        padding-left: 18px;
        padding-right: 18px;
    }


    .hero-main-title {
        font-size: 31px;
        line-height: 37px;

        letter-spacing: -1px;
    }


    .hero-main-title span {
        margin-top: 2px;

        font-size: 34px;
        line-height: 40px;

        letter-spacing: -1px;
    }


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

       Antes estaba cerca de 420px.
       La subimos para reducir el gran espacio blanco.
    ====================================================== */

    .hero-information {
        top: 345px;

        left: 0;

        width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }


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

    .hero-priority-text {
        margin: 0;

        font-size: 16px;
        line-height: 22px;
    }


    .hero-priority-text span {
        display: block;

        margin-top: 1px;

        font-size: 16px;
        line-height: 22px;
    }


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

    .hero-description-text {
        margin-top: 4px;

        font-size: 15px;
        line-height: 21px;
    }


    .hero-description-text br {
        display: none;
    }


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

    .hero-care-button {
        width: 140px;
        height: 43px;

        margin-top: 25px;

        font-size: 13px;
    }


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

    .hero-icon-two {
        right: -75px;
        bottom: -65px;

        width: 210px;
    }

}

/* =========================================================
   ANIMACIONES HERO
========================================================= */


/* TÍTULO PRINCIPAL */

.hero-main-title {
    opacity: 0;

    animation:
        heroTitleIn 0.8s ease forwards;
}


/* SPAN - SIMPLIFIED */

.hero-main-title span {
    opacity: 0;

    animation:
        heroSpanIn 0.8s ease 0.25s forwards;
}


/* PRIMER TEXTO */

.hero-priority-text {
    opacity: 0;

    animation:
        heroTextIn 0.8s ease 0.55s forwards;
}


/* SEGUNDO TEXTO */

.hero-description-text {
    opacity: 0;

    animation:
        heroTextIn 0.8s ease 0.75s forwards;
}


/* BOTÓN */

.hero-care-button {
    opacity: 0;

    animation:
        heroButtonIn 0.8s ease 0.95s forwards;

    transition:
        background 0.3s ease;
}

/* =========================================================
   ICONOS FLOTANTES - MÁS MARCADOS Y FLUIDOS
========================================================= */

.hero-icon-one {
    animation: floatIconOne 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

.hero-icon-two {
    animation: floatIconTwo 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}



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

@keyframes floatIconOne {

    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    50% {
        transform: translate3d(10px, -48px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }

}


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

@keyframes floatIconTwo {

    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    50% {
        transform: translate3d(-8px, -58px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }

}


/* =========================================================
   KEYFRAMES
========================================================= */


/* H1 */

@keyframes heroTitleIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* SPAN */

@keyframes heroSpanIn {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* TEXTOS */

@keyframes heroTextIn {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* BOTÓN */

@keyframes heroButtonIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ICONO IZQUIERDO */

@keyframes heroIconOneIn {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 0.20;
        transform: translateX(0);
    }

}


/* ICONO DERECHO */

@keyframes heroIconTwoIn {

    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 0.20;
        transform: translateX(0);
    }

}


/* =========================================================
   FADE OUT DEL CONTENIDO DEL HERO AL HACER SCROLL
========================================================= */

.hero-heading,
.hero-information {
    transition: opacity 0.7s ease;
}


/* Estado cuando estamos saliendo del Hero */

.hero-section.hero-fade-out .hero-heading,
.hero-section.hero-fade-out .hero-information {
    opacity: 0;
}

/* =========================================================
   VIDEO SECTION
========================================================= */

.video-section {
    position: relative;

    width: 100%;
    height: 870px;

    background: #000000;

    overflow: hidden;
}


.video-background {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 1;
}


/* =========================================================
   BOTÓN DE SONIDO
========================================================= */

.video-sound-button {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 32px;

    width: 148px;
    height: 42px;

    margin-left: auto;
    margin-right: auto;

    background: rgba(5, 24, 35, 0.65);

    border: 3px solid var(--color-light);

    border-radius: 30px;

    color: var(--color-light);

    font-family: var(--font-main);

    font-size: 20px;
    font-weight: 500;

    line-height: 20px;

    cursor: pointer;

    z-index: 5;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


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

.video-sound-button:hover {
    background: var(--color-light);

    color: var(--color-dark);
}


/* =========================================================
   LAPTOP GRANDE
========================================================= */

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

    .video-section {
        height: 870px;
    }

    .video-sound-button {
        bottom: 30px;

        width: 145px;
        height: 41px;

        font-size: 19px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

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

    .video-section {
        height: 810px;
    }

    .video-sound-button {
        bottom: 28px;

        width: 140px;
        height: 40px;

        font-size: 18px;
    }

}


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

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

    .video-section {
        height: 576px;
    }

    .video-background {
        object-fit: cover;
        object-position: center center;
    }

    .video-sound-button {
        bottom: 24px;

        width: 135px;
        height: 39px;

        font-size: 17px;
    }

}


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

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

    .video-section {
        height: 560px;
    }

    .video-background {
        object-fit: cover;
        object-position: center center;
    }

    .video-sound-button {
        bottom: 22px;

        width: 132px;
        height: 38px;

        border-width: 2px;

        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .video-section {
        height: 600px;
    }

    .video-background {
        object-fit: cover;

        /*
        Como el video es horizontal, en celular
        se recortarán los laterales.
        */

        object-position: center center;
    }

    .video-sound-button {
        bottom: 22px;

        width: 128px;
        height: 38px;

        border-width: 2px;

        border-radius: 30px;

        font-size: 16px;
    }

}


/* =========================================================
   MOBILE MEDIANO
========================================================= */

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

    .video-section {
        height: 560px;
    }

    .video-background {
        object-fit: cover;
        object-position: center center;
    }

    .video-sound-button {
        bottom: 20px;

        width: 125px;
        height: 37px;

        font-size: 16px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    .video-section {
        height: 300px;
    }

    .video-background {
        object-fit: cover;
        object-position: center center;
    }

    .video-sound-button {
        bottom: 18px;

        width: 120px;
        height: 36px;

        font-size: 15px;
    }

}


/* =========================================================
   MOBILE MUY PEQUEÑO
========================================================= */

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

    .video-section {
        height: 280px;
    }

    .video-background {
        object-fit: cover;
        object-position: center center;
    }

    .video-sound-button {
        bottom: 16px;

        width: 115px;
        height: 35px;

        font-size: 14px;
    }

}


/* =========================================================
   HOW IT WORKS SECTION
========================================================= */

.how-it-works-section {
    position: relative;

    width: 100%;

    padding-top: 100px;
    padding-bottom: 140px;

    background: #ffffff;

    overflow: hidden;
}


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

.how-it-works-heading {
    width: 1100px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


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

.how-it-works-title {
    margin: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 68px;
    font-weight: 600;
    line-height: 76px;

    letter-spacing: -2px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* TÍTULO VISIBLE */

.how-it-works-title.is-visible {
    opacity: 1;

    transform: translateY(0);
}


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

.how-it-works-intro {
    margin-top: 58px;
    margin-bottom: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 27px;
    font-weight: 400;
    line-height: 36px;
}


/* SEGUNDA LÍNEA */

.how-it-works-intro span {
    display: block;

    font-size: 27px;
    font-weight: 400;
    line-height: 36px;
}


/* =========================================================
   CONTENEDOR DE STEPS
========================================================= */

.how-it-works-steps {
    width: 1080px;

    margin-top: 110px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   STEP GENERAL
========================================================= */

.how-step {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 220px;

    align-items: center;

    margin-bottom: 85px;
}


/* ÚLTIMO STEP */

.how-step:last-child {
    margin-bottom: 0;
}


/* =========================================================
   STEP IZQUIERDO
========================================================= */

.how-step-left {
    justify-content: flex-start;
}


/* =========================================================
   STEP DERECHO
========================================================= */

.how-step-right {
    justify-content: flex-end;
}


/* =========================================================
   CONTENEDOR DEL ÍCONO
========================================================= */

.how-step-icon-wrap {
    position: relative;

    width: 190px;
    height: 190px;

    flex: 0 0 190px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* =========================================================
   IMAGEN DEL ÍCONO
========================================================= */

.how-step-icon {
    position: absolute;

    top: 0;
    left: 0;

    width: 190px;
    height: 190px;

    object-fit: contain;
}


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

.how-step-number {
    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    width: 190px;
    height: 240px;

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

    color: var(--color-blue);

    font-family: var(--font-main);

    font-size: 94px;
    font-weight: 600;
    line-height: 94px;

    z-index: 2;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.8s ease 0.12s,
        transform 0.8s ease 0.12s;
}


/* =========================================================
   CONTENIDO DEL STEP
========================================================= */

.how-step-content {
    position: relative;

    width: 620px;
}


/* STEP IZQUIERDO */

.how-step-left .how-step-content {
    margin-left: 45px;

    text-align: left;
}


/* STEP DERECHO */

.how-step-right .how-step-content {
    margin-right: 45px;

    text-align: right;
}


/* =========================================================
   TÍTULO DEL STEP
========================================================= */

.how-step-title {
    margin: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 700;
    line-height: 42px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease 0.20s,
        transform 0.8s ease 0.20s;
}


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

.how-step-description {
    margin-top: 14px;
    margin-bottom: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 23px;
    font-weight: 500;
    line-height: 30px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        visibility 0.55s ease;
}


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

.how-step-left .how-step-description {
    transform: translateX(-45px);
}


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

.how-step-right .how-step-description {
    transform: translateX(45px);
}


/* =========================================================
   HOVER INICIAL
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .how-step:hover .how-step-description {
        opacity: 1;

        visibility: visible;

        transform: translateX(0);
    }

}


/* =========================================================
   DESCRIPCIÓN FIJA
   SE ACTIVA CON JAVASCRIPT
========================================================= */

.how-step.description-visible .how-step-description {
    opacity: 1;

    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   ANIMACIÓN DE ENTRADA DEL STEP
========================================================= */

.how-step.is-visible .how-step-icon-wrap {
    opacity: 1;

    transform: translateY(0);
}


.how-step.is-visible .how-step-number {
    opacity: 1;

    transform: translateY(0);
}


.how-step.is-visible .how-step-title {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   LAPTOP
========================================================= */

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

    .how-it-works-section {
        padding-top: 95px;
        padding-bottom: 125px;
    }


    .how-it-works-heading {
        width: 900px;
    }


    .how-it-works-title {
        font-size: 60px;
        line-height: 68px;
    }


    .how-it-works-intro {
        margin-top: 48px;

        font-size: 24px;
        line-height: 32px;
    }


    .how-it-works-intro span {
        font-size: 24px;
        line-height: 32px;
    }


    .how-it-works-steps {
        width: 940px;

        margin-top: 95px;
    }


    .how-step {
        min-height: 200px;

        margin-bottom: 75px;
    }


    .how-step-icon-wrap {
        width: 170px;
        height: 170px;

        flex-basis: 170px;
    }


    .how-step-icon {
        width: 170px;
        height: 170px;
    }


    .how-step-number {
        width: 170px;
        height: 170px;

        font-size: 84px;
        line-height: 84px;
    }


    .how-step-content {
        width: 560px;
    }


    .how-step-title {
        font-size: 31px;
        line-height: 39px;
    }


    .how-step-description {
        font-size: 20px;
        line-height: 28px;
    }

}


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

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

    .how-it-works-section {
        padding-top: 80px;
        padding-bottom: 100px;
    }


    .how-it-works-heading {
        width: 720px;
    }


    .how-it-works-title {
        font-size: 52px;
        line-height: 60px;
    }


    .how-it-works-intro {
        margin-top: 38px;

        font-size: 21px;
        line-height: 29px;
    }


    .how-it-works-intro span {
        font-size: 21px;
        line-height: 29px;
    }


    .how-it-works-steps {
        width: 760px;

        margin-top: 80px;
    }


    .how-step {
        min-height: 180px;

        margin-bottom: 65px;
    }


    .how-step-icon-wrap {
        width: 145px;
        height: 145px;

        flex-basis: 145px;
    }


    .how-step-icon {
        width: 145px;
        height: 145px;
    }


    .how-step-number {
        width: 145px;
        height: 145px;

        font-size: 72px;
        line-height: 72px;
    }


    .how-step-content {
        width: 500px;
    }


    .how-step-left .how-step-content {
        margin-left: 35px;
    }


    .how-step-right .how-step-content {
        margin-right: 35px;
    }


    .how-step-title {
        font-size: 28px;
        line-height: 36px;
    }


    .how-step-description {
        margin-top: 12px;

        font-size: 18px;
        line-height: 26px;
    }


    /*
     * En tablet mostramos la descripción automáticamente
     * cuando el step entra en pantalla.
     */

    .how-step.is-visible .how-step-description {
        opacity: 1;

        visibility: visible;

        transform: translateX(0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .how-it-works-section {
        padding-top: 70px;
        padding-bottom: 85px;
    }


    .how-it-works-heading {
        width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }


    .how-it-works-title {
        font-size: 42px;
        line-height: 50px;

        letter-spacing: -1px;
    }


    .how-it-works-intro {
        margin-top: 30px;

        font-size: 18px;
        line-height: 26px;
    }


    .how-it-works-intro span {
        font-size: 18px;
        line-height: 26px;
    }


    .how-it-works-steps {
        width: 100%;

        margin-top: 65px;

        padding-left: 24px;
        padding-right: 24px;
    }


    .how-step {
        display: flex;

        width: 100%;

        min-height: 0;

        margin-bottom: 60px;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    /*
     * En móvil todos siguen el mismo orden:
     * icono → título → descripción.
     */

    .how-step-right {
        flex-direction: column-reverse;
    }


    .how-step-icon-wrap {
        width: 130px;
        height: 130px;

        flex: 0 0 130px;
    }


    .how-step-icon {
        width: 130px;
        height: 130px;
    }


    .how-step-number {
        width: 130px;
        height: 130px;

        font-size: 64px;
        line-height: 64px;
    }


    .how-step-content {
        width: 100%;
    }


    .how-step-left .how-step-content {
        margin-top: 25px;
        margin-left: 0;

        text-align: center;
    }


    .how-step-right .how-step-content {
        margin-top: 25px;
        margin-right: 0;

        text-align: center;
    }


    .how-step-title {
        font-size: 26px;
        line-height: 33px;
    }


    .how-step-description {
        margin-top: 12px;

        font-size: 17px;
        line-height: 24px;
    }


    .how-step-left .how-step-description,
    .how-step-right .how-step-description {
        transform: translateY(20px);
    }


    /*
     * Automáticamente visible después
     * de entrar en pantalla.
     */

    .how-step.is-visible .how-step-description {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    .how-it-works-section {
        padding-top: 60px;
        padding-bottom: 75px;
    }


    .how-it-works-heading {
        padding-left: 20px;
        padding-right: 20px;
    }


    .how-it-works-title {
        font-size: 36px;
        line-height: 43px;
    }


    .how-it-works-intro {
        margin-top: 25px;

        font-size: 16px;
        line-height: 23px;
    }


    .how-it-works-intro span {
        font-size: 16px;
        line-height: 23px;
    }


    .how-it-works-steps {
        margin-top: 55px;

        padding-left: 20px;
        padding-right: 20px;
    }


    .how-step {
        margin-bottom: 52px;
    }


    .how-step-icon-wrap {
        width: 115px;
        height: 115px;

        flex-basis: 115px;
    }


    .how-step-icon {
        width: 113px;
        height: 94px;
    }


    .how-step-number {
        width: 115px;
        height: 115px;

        font-size: 57px;
        line-height: 57px;
    }


    .how-step-left .how-step-content,
    .how-step-right .how-step-content {
        margin-top: 20px;
    }


    .how-step-title {
        font-size: 23px;
        line-height: 30px;
    }


    .how-step-description {
        margin-top: 10px;

        font-size: 15px;
        line-height: 22px;
    }

}

/* ========================================
   WHY NAVIGATION
======================================== */

.why-navigation {
    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 70px 40px 80px;

    background-color: #b3d7f8;

    overflow: hidden;

    box-sizing: border-box;
}


/* ========================================
   MENU
======================================== */

.why-navigation-menu {
    position: absolute;

    top: 40px;
    right: 70px;

    width: 55px;
    height: 55px;

    z-index: 10;
}

.why-navigation-menu img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ========================================
   HEADER
======================================== */

.why-navigation-header {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;
}


/* TITLE */

.why-navigation-header h2 {
    margin: 0 0 80px;

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

    font-size: 62px;
    font-weight: 700;

    line-height: 1.12;

    color: #0c344c;
}


/* DESCRIPTION */

.why-navigation-header p {
    margin: 0;

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

    font-size: 26px;
    font-weight: 500;

    line-height: 1.35;

    color: #0c344c;
}


/* ========================================
   SOURCE
======================================== */

.why-navigation-source {
    width: 100%;

    margin-top: 100px;

    text-align: center;
}


.why-navigation-source p {
    margin: 0;

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

    font-size: 16px;
    font-weight: 500;

    font-style: italic;

    line-height: 1.4;

    color: #0c344c;
}


/* ========================================
   STATISTICS
======================================== */

.why-navigation-stats {

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

    margin: 42px auto 0;

    display: flex;

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

    gap: 36px;
}


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

.navigation-stat-card {

    width: 32%;
    min-height: 195px;

    padding: 30px 25px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    box-sizing: border-box;

    border: 3px solid rgba(223, 239, 230, 1);

    border-radius: 38px;

    /*
     * Estado inicial para el zoom.
     */
    opacity: 0;

    transform: scale(0.94);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


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

.navigation-stat-card.show {

    opacity: 1;

    transform: scale(1);
}


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

.navigation-stat-card h3 {

    margin: 0 0 5px;

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

    font-size: 31px;

    font-weight: 700;

    line-height: 1.15;

    color: #000000;
}


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

.navigation-stat-card p {

    margin: 0;

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

    font-size: 21px;

    font-weight: 500;

    line-height: 1.25;

    color: #000000;
}


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

/*
 * El segundo y tercer recuadro esperan
 * ligeramente más.
 */

.navigation-stat-card:nth-child(2) {
    transition-delay: 0.12s;
}

.navigation-stat-card:nth-child(3) {
    transition-delay: 0.24s;
}


/* ========================================
   ROI SOURCE
======================================== */

.why-navigation-roi {

    width: 100%;

    margin-top: 35px;

    text-align: center;
}


.why-navigation-roi p {

    margin: 0;

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

    font-size: 15px;

    font-weight: 500;

    font-style: italic;

    line-height: 1.4;

    color: #0c344c;
}


/* ========================================
   PANTALLAS GRANDES
======================================== */

@media (min-width: 1600px) {

    .why-navigation {

        padding-top: 85px;
        padding-bottom: 90px;
    }


    .why-navigation-menu {

        top: 45px;
        right: 75px;

        width: 60px;
        height: 60px;
    }


    .why-navigation-header {

        max-width: 1250px;
    }


    .why-navigation-header h2 {

        font-size: 68px;

        margin-bottom: 85px;
    }


    .why-navigation-header p {

        font-size: 23px;
    }


    .why-navigation-source {

        margin-top: 105px;
    }


    .why-navigation-source p {

        font-size: 17px;
    }


    .why-navigation-stats {

        max-width: 1000px;

        gap: 38px;

        margin-top: 45px;
    }


    .navigation-stat-card {

        min-height: 205px;

        border-radius: 40px;
    }


    .navigation-stat-card h3 {

        font-size: 33px;
    }


    .navigation-stat-card p {

        font-size: 22px;
    }


    .why-navigation-roi {

        margin-top: 38px;
    }


    .why-navigation-roi p {

        font-size: 16px;
    }

}


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

@media (max-width: 1024px) {

    .why-navigation {

        padding: 65px 30px 70px;
    }


    .why-navigation-menu {

        top: 30px;
        right: 35px;

        width: 50px;
        height: 50px;
    }


    .why-navigation-header {

        max-width: 850px;
    }


    .why-navigation-header h2 {

        font-size: 52px;

        margin-bottom: 60px;
    }


    .why-navigation-header p {

        font-size: 19px;
    }


    .why-navigation-source {

        margin-top: 75px;
    }


    .why-navigation-stats {

        max-width: 850px;

        gap: 25px;
    }


    .navigation-stat-card {

        min-height: 175px;

        padding: 25px 18px;

        border-radius: 32px;
    }


    .navigation-stat-card h3 {

        font-size: 27px;
    }


    .navigation-stat-card p {

        font-size: 18px;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .why-navigation {

        min-height: 100vh;

        padding: 55px 20px 60px;
    }


    .why-navigation-menu {

        top: 25px;
        right: 25px;

        width: 45px;
        height: 45px;
    }


    .why-navigation-header {

        max-width: 100%;
    }


    .why-navigation-header h2 {

        font-size: 40px;

        line-height: 1.1;

        margin-bottom: 45px;
    }


    .why-navigation-header p {

        font-size: 18px;

        line-height: 1.4;
    }


    .why-navigation-source {

        margin-top: 55px;
    }


    .why-navigation-source p {

        font-size: 14px;
    }


    /* CARDS */

    .why-navigation-stats {

        width: 100%;

        max-width: 420px;

        margin-top: 35px;

        flex-direction: column;

        gap: 18px;
    }


    .navigation-stat-card {

        width: 100%;

        min-height: 145px;

        padding: 25px 20px;

        border-radius: 30px;
    }


    .navigation-stat-card h3 {

        font-size: 27px;
    }


    .navigation-stat-card p {

        font-size: 18px;
    }


    .why-navigation-roi {

        margin-top: 28px;
    }


    .why-navigation-roi p {

        font-size: 13px;
    }

}


/* ========================================
   MOBILE PEQUEÑO
======================================== */

@media (max-width: 480px) {

    .why-navigation {



        padding: 50px 16px 50px;
    }


    .why-navigation-menu {

        top: 20px;
        right: 20px;

        width: 40px;
        height: 40px;
    }


    .why-navigation-header h2 {

        font-size: 34px;

        margin-bottom: 35px;
    }


    .why-navigation-header p {

        font-size: 17px;
    }


    .why-navigation-source {

        margin-top: 45px;
    }


    .why-navigation-source p {

        font-size: 13px;
    }


    .navigation-stat-card {

        min-height: 135px;

        border-radius: 26px;
    }


    .navigation-stat-card h3 {

        font-size: 25px;
    }


    .navigation-stat-card p {

        font-size: 17px;
    }

}

/* ========================================
   HOVER - STAT CARDS
======================================== */

.navigation-stat-card {
    cursor: default;

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}


/* Cuando el mouse pasa por encima */

.navigation-stat-card.show:hover {

    transform: scale(1.02) translateY(-8px);

    box-shadow: 0 12px 25px rgba(12, 52, 76, 0.12);
}



/* ========================================
   WHAT OVERSEE CARE
======================================== */

.what-oversee {
    position: relative;

    width: 100%;

    min-height: 75vh;

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

    padding: 60px 40px;

    box-sizing: border-box;

    background-color: #0c344c;

    overflow: hidden;
}


/* ========================================
   CONTENT
======================================== */

.what-oversee-content {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    text-align: center;
}


/* ========================================
   TITLE
======================================== */

.what-oversee-content h2 {

    margin: 0 0 45px;

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

    font-size: 62px;

    font-weight: 700;

    line-height: 1.12;

    color: #e8f7e8;
}


/* ========================================
   TEXT
======================================== */

.what-oversee-content p {

    margin: 0 auto;

    max-width: 1000px;

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

    font-size: 23px;

    font-weight: 500;

    line-height: 1.35;

    color: #e8f7e8;
}


/* ========================================
   LARGE SCREENS
======================================== */

@media (min-width: 1600px) {
	
	.what-oversee {
        min-height: 70vh;
        padding: 70px 50px;
    }

    .what-oversee-content h2 {
        font-size: 68px;
        margin-bottom: 50px;
    }

    .what-oversee-content p {
        max-width: 1100px;
        font-size: 25px;
    }


    .what-oversee-content {

        max-width: 1250px;
    }


}


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

@media (max-width: 1024px) {

    .what-oversee {

        padding: 80px 30px;
    }


    .what-oversee-content h2 {

        font-size: 60px;

        margin-bottom: 50px;
    }


    .what-oversee-content p {

        font-size: 28px;

        line-height: 1.4;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .what-oversee {

        min-height: auto;

        padding:
            80px
            20px;

    }


    .what-oversee-content {

        width: 100%;

        max-width: 600px;

    }


    .what-oversee-content h2 {

        font-size: 40px;

        line-height: 1.15;

        margin:
            0
            0
            40px;

    }


    .what-oversee-content p {

        max-width: 500px;

        font-size: 18px;

        line-height: 1.45;

    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 480px) {

    .what-oversee {

        min-height: auto;

        padding:
            70px
            18px;

    }


    .what-oversee-content h2 {

        font-size: 34px;

        line-height: 1.15;

        margin:
            0
            0
            35px;

    }


    .what-oversee-content p {

        font-size: 17px;

        line-height: 1.45;

    }

}




/* =========================================================
   FAMILY IMAGE SECTION
========================================================= */

.family-image-section {
    position: relative;

    width: 100%;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   FAMILY IMAGE
========================================================= */

.family-image {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   DESKTOP MEDIANO
========================================================= */

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

    .family-image-section {
        height: 900px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

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

    .family-image-section {
        height: 810px;
    }

}


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

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

    .family-image-section {
        height: 700px;
    }

}


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

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

    .family-image-section {
        height: 550px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .family-image-section {
        width: 100%;
    }

    .family-image {
        width: 100%;
        height: auto;
    }

}

/* =========================================================
   MOBILE MEDIANO
========================================================= */

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

    .family-image-section {
        height: 434px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    .family-image-section {
        height: 340px;
    }

}


/* =========================================================
   MOBILE MUY PEQUEÑO
========================================================= */

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

    .family-image-section {
        height: 320px;
    }

}



/* =========================================================
   THE BARRIERS WE REMOVE
========================================================= */

.barriers-section {
    position: relative;

    width: 100%;

    padding-top: 110px;
    padding-bottom: 130px;

    background: #dff6ea;

    overflow: hidden;
}


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

.barriers-heading {
    width: 1100px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


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

.barriers-title {
    margin: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 68px;
    font-weight: 700;
    line-height: 76px;

    letter-spacing: -2px;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.barriers-intro {
    margin-top: 25px;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 27px;
    font-weight: 500;
    line-height: 36px;
}


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

.barriers-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 75px;

    width: 1140px;

    margin-top: 85px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   COLUMNAS
========================================================= */

.barriers-column {
    display: flex;

    flex-direction: column;

    gap: 35px;
}

/* =========================================================
   ALINEACIÓN PUNTOS 3 Y 4
========================================================= */

/* Punto 3 */
.barriers-column-left .barrier-item:nth-child(2) {
    margin-top: 36px;
}

/* Punto 4 */
.barriers-column-right .barrier-item:nth-child(2) {
    margin-top: 0;
}

/* =========================================================
   RECUADRO PUNTO 1 - MÁS ANCHO
========================================================= */

.barriers-column-left .barrier-item:nth-child(1) .barrier-solution {
    height: calc(104% + -124px);
    margin-left: -3px;
	text-align: center;
}

/* =========================================================
   ITEM GENERAL
========================================================= */

.barrier-item {
    width: 100%;

    text-align: center;
}


/* =========================================================
   TÍTULO DEL ITEM
========================================================= */

.barrier-title {
    margin: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 29px;
    font-weight: 700;
    line-height: 38px;
}


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

.barrier-description {
    min-height: 72px;

    margin-top: 22px;
    margin-bottom: 0;

    color: var(--color-dark);

    font-family: var(--font-main);

    font-size: 21px;
    font-weight: 600;
    line-height: 28px;
}


/* =========================================================
   CUADRO AZUL OSCURO
========================================================= */

.barrier-solution {
    display: flex;

    width: 100%;
    min-height: 145px;

    margin-top: 22px;

    padding: 30px 45px;

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

    background: var(--color-dark);

    border-radius: 38px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   TEXTO DEL CUADRO
========================================================= */

.barrier-solution p {
    margin: 0;

    color: var(--color-light);

    font-family: var(--font-main);

    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
}


/* =========================================================
   HOVER DEL CUADRO
========================================================= */

.barrier-solution:hover {
    transform: translateY(-12px);

    box-shadow:
        0 15px 30px rgba(12, 52, 76, 0.18);
}


/* =========================================================
   FADE IN DE LOS ITEMS
========================================================= */

.barrier-group {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* ITEM VISIBLE */

.barrier-group.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   PUNTO 5
========================================================= */

.barrier-item-last {
    grid-column: 1 / 3;

    width: 540px;

    margin-top: 55px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   LAPTOP
========================================================= */

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

    .barriers-section {
        padding-top: 100px;
        padding-bottom: 120px;
    }


    .barriers-heading {
        width: 900px;
    }


    .barriers-title {
        font-size: 60px;
        line-height: 68px;

        letter-spacing: -2px;
    }


    .barriers-intro {
        margin-top: 23px;

        font-size: 24px;
        line-height: 32px;
    }


    .barriers-grid {
        width: 960px;

        column-gap: 55px;

        margin-top: 75px;
    }


    .barriers-column {
        gap: 32px;
    }


    .barrier-title {
        font-size: 26px;
        line-height: 34px;
    }


    .barrier-description {
        min-height: 70px;

        margin-top: 18px;

        font-size: 19px;
        line-height: 26px;
    }


    .barrier-solution {
        min-height: 138px;

        margin-top: 20px;

        padding: 28px 35px;

        border-radius: 34px;
    }


    .barrier-solution p {
        font-size: 18px;
        line-height: 25px;
    }


    .barrier-item-last {
        width: 500px;

        margin-top: 50px;
    }
}


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

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

    .barriers-section {
        padding-top: 85px;
        padding-bottom: 100px;
    }


    .barriers-heading {
        width: 720px;
    }


    .barriers-title {
        font-size: 52px;
        line-height: 60px;

        letter-spacing: -1px;
    }


    .barriers-intro {
        margin-top: 22px;

        font-size: 22px;
        line-height: 30px;
    }


    .barriers-grid {
        width: 760px;

        column-gap: 38px;

        margin-top: 70px;
    }


    .barriers-column {
        gap: 30px;
    }


    .barrier-title {
        font-size: 24px;
        line-height: 31px;
    }


    .barrier-description {
        min-height: 82px;

        margin-top: 18px;

        font-size: 18px;
        line-height: 25px;
    }


    .barrier-solution {
        min-height: 140px;

        margin-top: 18px;

        padding: 25px 30px;

        border-radius: 32px;
    }


    .barrier-solution p {
        font-size: 17px;
        line-height: 24px;
    }


    .barrier-item-last {
        width: 480px;

        margin-top: 45px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

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

    .barriers-section {
        padding-top: 70px;
        padding-bottom: 85px;
    }


    .barriers-heading {
        width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }


    .barriers-title {
        font-size: 42px;
        line-height: 50px;

        letter-spacing: -1px;
    }


    .barriers-intro {
        margin-top: 20px;

        font-size: 19px;
        line-height: 27px;
    }


    /* En móvil pasamos a una sola columna */

    .barriers-grid {
        display: block;

        width: 100%;

        margin-top: 60px;

        padding-left: 24px;
        padding-right: 24px;
    }


    .barriers-column {
        display: flex;

        flex-direction: column;

        gap: 40px;
    }


    .barriers-column-right {
        margin-top: 40px;
    }


    .barrier-item {
        width: 100%;
    }


    .barrier-title {
        font-size: 24px;
        line-height: 31px;
    }


    .barrier-description {
        min-height: 0;

        margin-top: 15px;

        font-size: 17px;
        line-height: 24px;
    }


    .barrier-solution {
        min-height: 120px;

        margin-top: 18px;

        padding: 25px 28px;

        border-radius: 30px;
    }


    .barrier-solution p {
        font-size: 16px;
        line-height: 23px;
    }


    .barrier-item-last {
        width: 100%;

        margin-top: 40px;
    }
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    .barriers-section {
        padding-top: 60px;
        padding-bottom: 75px;
    }


    .barriers-heading {
        padding-left: 20px;
        padding-right: 20px;
    }


    .barriers-title {
        font-size: 36px;
        line-height: 43px;

        letter-spacing: -1px;
    }


    .barriers-intro {
        margin-top: 18px;

        font-size: 17px;
        line-height: 24px;
    }


    .barriers-grid {
        margin-top: 50px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .barriers-column {
        gap: 32px;
    }


    .barriers-column-right {
        margin-top: 32px;
    }


    .barrier-title {
        font-size: 22px;
        line-height: 28px;
    }


    .barrier-description {
        margin-top: 12px;

        font-size: 15px;
        line-height: 21px;
    }


    .barrier-solution {
        min-height: 105px;

        margin-top: 15px;

        padding: 22px 24px;

        border-radius: 28px;
    }


    .barrier-solution p {
        font-size: 15px;
        line-height: 21px;
    }


    .barrier-item-last {
        margin-top: 32px;
    }
}

/* =========================================================
   PATIENT TESTIMONIALS SECTION
========================================================= */

.patient-testimonials-section {

    position: relative;

    width: 100%;

    min-height: 900px;

    padding:
        120px
        0
        120px;

    background-image:
        url("../images/testimonials-background.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


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

.patient-testimonials-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(15, 67, 98, 0.08);

    pointer-events: none;

}


/* =========================================================
   CONTENT
========================================================= */

.patient-testimonials-content {

    position: relative;

    z-index: 2;

    width: 100%;

    text-align: center;

}


/* =========================================================
   TITLE
========================================================= */

.patient-testimonials-title {

    margin:
        0
        0
        50px;

    padding:
        0
        20px;

    font-family:
        var(--font-main);

    font-size: 70px;

    font-weight: 700;

    line-height: 76px;

    color: #0c344c;

}


/* =========================================================
   SUBTITLE
========================================================= */

.patient-testimonials-subtitle {

    width: 100%;

    max-width: 780px;

    margin:
        0
        auto;

    padding:
        0
        25px;

    font-family:
        var(--font-main);

    font-size: 24px;

    font-weight: 500;

    line-height: 34px;

    color: #0c344c;

}


/* =========================================================
   AUTHOR
========================================================= */

.patient-testimonial-author {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin:
        60px
        0
        25px;

    padding:
        0
        20px;

    font-family:
        var(--font-main);

    font-size: 27px;

    font-weight: 500;

    line-height: 34px;

    color: #dfefe6;

}


/* =========================================================
   QUOTES
========================================================= */

.patient-quote {

    display: inline-block;

    font-size: 65px;

    font-weight: 700;

    line-height: 32px;

    color: #e1f6eb;

}


/* =========================================================
   CAROUSEL WRAPPER
========================================================= */

.patient-carousel-wrapper {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 0;

}


/* =========================================================
   TRACK
========================================================= */

.patient-testimonial-track {

    display: flex;

    align-items: stretch;

    gap: 30px;

    width: max-content;

    will-change: transform;

}


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

.patient-testimonial-card {

    width: 700px;

    min-width: 700px;

    min-height: 240px;

    padding:
        42px
        55px
        28px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #afd3f3;

    border-radius: 30px;

    color: #0c344c;

    text-align: center;

    flex-shrink: 0;

    opacity: 0.78;

    transform: scale(0.97);

    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

}


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

.patient-testimonial-card.is-active {

    opacity: 1;

    transform: scale(1);

}


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

.patient-testimonial-card p {

    width: 100%;

    max-width: 610px;

    margin:
        0
        auto
        30px;

    font-family:
        var(--font-main);

    font-size: 18px;

    font-weight: 600;

    line-height: 30px;

    color: #0c344c;

}


/* =========================================================
   READ MORE BUTTON
========================================================= */

.patient-read-more {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 135px;

    min-height: 44px;

    padding:
        8px
        25px;

    border:
        1.5px
        solid
        #0c344c;

    border-radius: 100px;

    background: transparent;

    font-family:
        var(--font-main);

    font-size: 17px;

    font-weight: 500;

    color: #0c344c;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.patient-read-more:hover {

    background: #0c344c;

    color: #ffffff;

    transform: translateY(-2px);

}


/* =========================================================
   DOTS
========================================================= */

.patient-carousel-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-top: 20px;

}


.patient-carousel-dot {

    width: 22px;

    height: 22px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #e1f6eb;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;

}


.patient-carousel-dot.active {

    background: #b3d7f8;

    transform: scale(1.08);

}


/* =========================================================
   CTA
========================================================= */

.patient-testimonial-cta {

    margin-top: 65px;

    padding:
        0
        20px;

}


.patient-testimonial-cta h3 {

    max-width: 650px;

    margin:
        0
        auto
        45px;

    font-family:
        var(--font-main);

    font-size: 32px;

    font-weight: 600;

    line-height: 36px;

    color: #dfefe6;

}


/* =========================================================
   CTA BUTTON
========================================================= */

.patient-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 350px;

    min-height: 100px;

    padding:
        14px
        35px;

    border-radius: 100px;

    background: #73b0dd;

    color: #dfefe6;

    font-family:
        var(--font-main);

    font-size: 30px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.35s ease,
        transform 0.35s ease;

}


.patient-cta-button:hover {

    background: #dfefe6;

    color: #3f464b;

    transform: translateY(-4px);

}



/* =========================================================
   PATIENT TESTIMONIAL MODAL
========================================================= */

.patient-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 5000;

}


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

.patient-modal.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


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

.patient-modal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(5, 24, 35, 0.72);

    backdrop-filter: blur(4px);

}


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

.patient-modal-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;

    max-height: 82vh;

    padding:
        55px
        65px
        50px;

    background: #afd3f3;

    border-radius: 35px;

    box-shadow:
        0
        25px
        60px
        rgba(12, 52, 76, 0.30);

    overflow-y: auto;

    transform:
        translateY(30px)
        scale(0.97);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

}


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

.patient-modal.is-open
.patient-modal-content {

    transform:
        translateY(0)
        scale(1);

}


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

.patient-modal-content::-webkit-scrollbar {

    width: 8px;

}


.patient-modal-content::-webkit-scrollbar-track {

    background: transparent;

}


.patient-modal-content::-webkit-scrollbar-thumb {

    background: #73b0dd;

    border-radius: 20px;

}


/* =========================================================
   MODAL CLOSE BUTTON
========================================================= */

.patient-modal-close {

    position: absolute;

    top: 22px;

    right: 28px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #0c344c;

    font-family:
        Arial,
        sans-serif;

    font-size: 38px;

    font-weight: 300;

    line-height: 38px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.patient-modal-close:hover {

    background: #0c344c;

    color: #ffffff;

    transform: rotate(90deg);

}


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

.patient-modal-author {

    width: 100%;

    margin:
        0
        auto
        35px;

    padding-right: 35px;

    font-family:
        var(--font-main);

    font-size: 32px;

    font-weight: 700;

    line-height: 40px;

    color: #0c344c;

    text-align: left;

}


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

.patient-modal-story {

    width: 100%;

    font-family:
        var(--font-main);

    color: #0c344c;

    text-align: left;

}


.patient-modal-story p {

    margin:
        0
        0
        22px;

    font-family:
        var(--font-main);

    font-size: 18px;

    font-weight: 500;

    line-height: 30px;

    color: #0c344c;

}


.patient-modal-story p:last-child {

    margin-bottom: 0;

}


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

.patient-modal-signature {

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px
        solid
        rgba(12, 52, 76, 0.25);

}


.patient-modal-signature strong {

    display: block;

    margin-bottom: 5px;

    font-family:
        var(--font-main);

    font-size: 17px;

    font-weight: 700;

    line-height: 24px;

    color: #0c344c;

}


.patient-modal-signature span {

    display: block;

    font-family:
        var(--font-main);

    font-size: 14px;

    font-weight: 500;

    line-height: 22px;

    color: #0c344c;

}


/* =========================================================
   BODY LOCK WHEN MODAL IS OPEN
========================================================= */

body.patient-modal-open {

    overflow: hidden;

}



/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1600px) {

    .patient-testimonial-card {

        width: 760px;

        min-width: 760px;

        min-height: 255px;

    }


    .patient-testimonial-card p {

        font-size: 22px;

        line-height: 31px;

    }

}



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

@media (max-width: 1024px) {

    .patient-testimonials-section {

        min-height: 850px;

        padding:
            70px
            0
            65px;

    }


    .patient-testimonials-title {

        font-size: 52px;

        line-height: 60px;

        margin-bottom: 40px;

    }


    .patient-testimonials-subtitle {

        max-width: 650px;

        font-size: 21px;

        line-height: 30px;

    }


    .patient-testimonial-author {

        margin-top: 50px;

        font-size: 23px;

        line-height: 30px;

    }


    .patient-testimonial-card {

        width: 72vw;

        min-width: 72vw;

        min-height: 230px;

    }


    /* MODAL */

    .patient-modal {

        padding: 30px;

    }


    .patient-modal-content {

        max-width: 760px;

        max-height: 85vh;

        padding:
            50px
            50px
            45px;

        border-radius: 30px;

    }


    .patient-modal-author {

        font-size: 28px;

        line-height: 36px;

        margin-bottom: 30px;

    }


    .patient-modal-story p {

        font-size: 17px;

        line-height: 28px;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .patient-testimonials-section {

        min-height: auto;

        padding:
            60px
            0
            60px;

    }


    .patient-testimonials-title {

        font-size: 40px;

        line-height: 48px;

        margin-bottom: 35px;

    }


    .patient-testimonials-subtitle {

        max-width: 430px;

        font-size: 17px;

        line-height: 25px;

    }


    .patient-testimonial-author {

        margin:
            45px
            0
            22px;

        font-size: 19px;

        line-height: 26px;

        gap: 10px;

    }


    .patient-quote {

        font-size: 45px;

        line-height: 26px;

    }


    .patient-testimonial-card {

        width: 82vw;

        min-width: 82vw;

        min-height: 260px;

        padding:
            32px
            28px
            25px;

        border-radius: 26px;

    }


    .patient-testimonial-card p {

        font-size: 15px;

        line-height: 24px;

        margin-bottom: 25px;

    }


    .patient-read-more {

        min-width: 125px;

        min-height: 42px;

        padding:
            8px
            20px;

        font-size: 15px;

    }


    .patient-carousel-dot {

        width: 17px;

        height: 17px;

    }


    .patient-carousel-dots {

        gap: 13px;

    }


    .patient-testimonial-cta {

        margin-top: 50px;

    }


    .patient-testimonial-cta h3 {

        font-size: 21px;

        line-height: 29px;

        margin-bottom: 35px;

    }


    .patient-cta-button {

        min-width: 190px;

        min-height: 54px;

        font-size: 17px;

    }


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

    .patient-modal {

        padding: 20px;

        align-items: center;

    }


    .patient-modal-content {

        max-width: 100%;

        max-height: 88vh;

        padding:
            55px
            28px
            35px;

        border-radius: 26px;

    }


    .patient-modal-close {

        top: 14px;

        right: 18px;

        width: 38px;

        height: 38px;

        font-size: 34px;

        line-height: 34px;

    }


    .patient-modal-author {

        margin-bottom: 25px;

        padding-right: 20px;

        font-size: 24px;

        line-height: 31px;

    }


    .patient-modal-story p {

        margin-bottom: 18px;

        font-size: 15px;

        line-height: 24px;

    }


    .patient-modal-signature {

        margin-top: 28px;

        padding-top: 20px;

    }


    .patient-modal-signature strong {

        font-size: 15px;

        line-height: 22px;

    }


    .patient-modal-signature span {

        font-size: 13px;

        line-height: 20px;

    }

}



/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 480px) {

    .patient-testimonials-title {

        font-size: 35px;

        line-height: 42px;

    }


    .patient-testimonials-subtitle {

        font-size: 16px;

        line-height: 23px;

    }


    .patient-testimonial-card {

        width: 84vw;

        min-width: 84vw;

        padding:
            28px
            22px;

    }


    .patient-testimonial-card p {

        font-size: 14px;

        line-height: 22px;

    }


    .patient-testimonial-cta h3 {

        font-size: 19px;

        line-height: 26px;

    }


    /* =========================================================
       MODAL MOBILE SMALL
    ========================================================= */

    .patient-modal {

        padding: 14px;

    }


    .patient-modal-content {

        max-height: 90vh;

        padding:
            52px
            22px
            30px;

        border-radius: 22px;

    }


    .patient-modal-close {

        top: 12px;

        right: 14px;

        width: 36px;

        height: 36px;

        font-size: 32px;

        line-height: 32px;

    }


    .patient-modal-author {

        font-size: 21px;

        line-height: 28px;

    }


    .patient-modal-story p {

        font-size: 14px;

        line-height: 23px;

    }

}




/* =========================================================
   FOOTER OVERSEE CARE
========================================================= */

.oversee-footer {
    width: 100%;
    background: #0d3b52;
    padding: 100px 0 52px;
}

.oversee-footer-container {
    width: 86%;
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* =========================================================
   LOGO
========================================================= */

.oversee-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.oversee-footer-logo {
    width: 180px;
    max-width: 88%;
    height: auto;
    display: block;
}


/* =========================================================
   REDES
========================================================= */

.oversee-footer-social {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 35px;
    margin-left: 10px;
}

.oversee-footer-social a {
    color: #a9d1f3;
    font-size: 40px;

    text-decoration: none;

    transition: 0.3s ease;
}

.oversee-footer-social a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}


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

.oversee-footer-info {
    width: 320px;

    display: flex;
    flex-direction: column;

    gap: 27px;
}

.oversee-footer-block {
    display: flex;
    flex-direction: column;
}

.oversee-footer-block a,
.oversee-footer-block p {
    margin: 0;

    color: #b9d8e9;

    font-size: 25px;
    line-height: 1.45;

    font-weight: 400;

    text-decoration: none;
}

.oversee-footer-block a:hover {
    color: #ffffff;
}



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

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

    .oversee-footer {
        padding: 45px 0;
    }

    .oversee-footer-container {
        width: 88%;

        flex-direction: column;

        align-items: center;

        gap: 45px;
    }


    /* LOGO Y REDES */

    .oversee-footer-brand {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .oversee-footer-logo {
        width: 170px;

        margin: 0 auto;
    }

    .oversee-footer-social {
        justify-content: center;

        margin:
            30px
            0
            0;
    }


    /* INFORMACIÓN */

    .oversee-footer-info {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .oversee-footer-block {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .oversee-footer-block a,
    .oversee-footer-block p {
        text-align: center;
    }


    /* COPYRIGHT */

    .oversee-footer-copyright {
        width: 88%;

        margin:
            40px
            auto
            0;

        padding-top: 22px;

        text-align: center;
    }

    .oversee-footer-copyright-text {
        font-size: 13px;
        line-height: 20px;

        text-align: center;
    }

}

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

    .oversee-footer-container {
        width: 90%;

        align-items: center;
    }


    /* LOGO */

    .oversee-footer-logo {
        width: 155px;

        margin: 0 auto;
    }


    /* REDES */

    .oversee-footer-social {
        justify-content: center;

        margin:
            25px
            0
            0;
    }

    .oversee-footer-social a {
        font-size: 23px;
    }


    /* INFORMACIÓN */

    .oversee-footer-info {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .oversee-footer-block {
        width: 100%;

        align-items: center;

        text-align: center;
    }

    .oversee-footer-block a,
    .oversee-footer-block p {
        font-size: 13px;

        text-align: center;
    }


    /* COPYRIGHT */

    .oversee-footer-copyright {
        width: 90%;

        margin:
            35px
            auto
            0;

        padding-top: 20px;

        text-align: center;
    }

    .oversee-footer-copyright-text {
        font-size: 12px;
        line-height: 19px;

        text-align: center;
    }

}


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

.oversee-footer-copyright {
    width: 86%;
    max-width: 1200px;

    margin:
        50px
        auto
        0;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(185, 216, 233, 0.25);
}


/* TEXTO COPYRIGHT */

.oversee-footer-copyright-text {
    margin: 0;

    font-family: var(--font-main);

    font-size: 14px;
    font-weight: 400;
    line-height: 22px;

    color: #b9d8e9;

    text-align: center;
}

.oversee-footer-copyright a {
	color: #b3d7f8;
}

.oversee-footer-copyright a:hover {
	color: #ffffff;
}

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

    .oversee-footer-copyright {
        width: 88%;

        margin-top: 40px;

        padding-top: 22px;
    }

    .oversee-footer-copyright-text {
        font-size: 13px;
        line-height: 20px;
    }

}


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

    .oversee-footer-copyright {
        width: 90%;

        margin-top: 35px;

        padding-top: 20px;
    }

    .oversee-footer-copyright-text {
        font-size: 12px;
        line-height: 19px;
    }

}



/* =========================================================
   WHO WE ARE
========================================================= */


/* =========================================================
   WHO WE ARE - HERO
========================================================= */

.who-hero-section {
    position: relative;

    width: 100%;
    height: 870px;

    display: flex;

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

    background: #dff7e9;

    overflow: hidden;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.who-hero-content {
    width: 900px;

    margin-top: 50px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.who-hero-title {
    margin: 0;

    font-family: var(--font-main);

    font-size: 120px;
    font-weight: 900;
    line-height: 76px;

    color: #0c344c;

    opacity: 0;

    transform: translateY(25px);

    animation:
        whoHeroFadeIn
        0.9s
        ease
        forwards;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.who-hero-description {
    margin:
        80px
        0
        0;

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 700;
    line-height: 39px;

    color: #0c344c;

    opacity: 0;

    transform: translateY(25px);

    animation:
        whoHeroFadeIn
        0.9s
        ease
        forwards;

    animation-delay: 0.30s;
}


/* =========================================================
   COMPLEX CARE
========================================================= */

.who-hero-description span {
    color: #73b0dd;
}


/* =========================================================
   FADE IN
========================================================= */

@keyframes whoHeroFadeIn {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

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

    .who-hero-section {
        height: 500px;
    }

    .who-hero-content {
        width: 750px;

        margin-top: 45px;

        padding:
            0
            30px;
    }

    .who-hero-title {
        font-size: 56px;
        line-height: 64px;
    }

    .who-hero-description {
        margin-top: 22px;

        font-size: 25px;
        line-height: 34px;
    }

}

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

    .who-hero-section {
        height: 500px;
    }

    .who-hero-content {
        width: 100%;

        margin-top: 45px;

        padding:
            0
            25px;
    }

    .who-hero-title {
        font-size: 44px;
        line-height: 52px;
    }

    .who-hero-description {
        margin-top: 20px;

        font-size: 21px;
        line-height: 29px;
    }

}

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

    .who-hero-section {
        height: 460px;
    }

    .who-hero-content {
        margin-top: 40px;

        padding:
            0
            20px;
    }

    .who-hero-title {
        font-size: 38px;
        line-height: 46px;
    }

    .who-hero-description {
        margin-top: 18px;

        font-size: 18px;
        line-height: 26px;
    }

    .who-hero-description br {
        display: none;
    }

}

/* =========================================================
   CARE MATCH SECTION
========================================================= */

.care-match-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 100px 40px 70px;

    background-image: url("../images/who-we-are-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

}


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

.care-match-content {

    position: relative;

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

    margin: 0 auto;

    z-index: 5;

}


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

.care-match-text {

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

    margin-left: auto;
    margin-right: 0;

}


.care-match-text p {

    margin: 0 0 38px;

    font-family: var(--font-main);

    font-size: 28px;
    font-weight: 700;

    line-height: 1.55;

    color: #0c344c;

}


/* =========================================================
   RECUADRO AZUL
========================================================= */

.care-match-card {

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

    margin: 120px auto 0;

    padding: 42px 55px;

    background: #0c344c;

    border-radius: 35px;

    text-align: center;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

}


.care-match-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}


.care-match-card h3 {

    margin: 0 0 22px;

    font-family: var(--font-main);

    font-size: 27px;
    font-weight: 700;

    line-height: 1.25;

    color: #dff7e9;

}


.care-match-card p {

    margin: 0;

    font-family: var(--font-main);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.35;

    color: #b3d7f8;

}


/* =========================================================
   FUENTE
========================================================= */

.care-match-source {

    margin-top: 25px;

    text-align: center;

}


.care-match-source p {

    margin: 0;

    font-family: var(--font-main);

    font-size: 18px;
    font-style: italic;
    font-weight: 400;

    color: #ffffff;

}


/* =========================================================
   OJO DECORATIVO
========================================================= */

.care-match-eye {

    position: absolute;

    top: -60px;
    left: -210px;

    width: 720px;
    height: 720px;

    opacity: 0;

    transform: translateY(30px) scale(0.95);

    z-index: 2;

    pointer-events: none;

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);

}


.care-match-eye.is-visible {

    opacity: 0.5;

    transform: translateY(0) scale(1);

}


.care-match-eye img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =========================================================
   FLOTACIÓN
========================================================= */

.care-match-eye.is-visible img {

    animation: careEyeFloat 6s ease-in-out infinite;

}


@keyframes careEyeFloat {

    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    50% {
        transform: translate3d(10px, -48px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }

}


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

@media (max-width: 1024px) {

    .care-match-section {

        padding: 90px 35px 60px;

    }


    .care-match-text {

        max-width: 650px;

    }


    .care-match-text p {


        font-size: 24px;

    }


    .care-match-card {

        max-width: 800px;

        padding: 38px 45px;

    }


    .care-match-card h3 {

        font-size: 25px;

    }


    .care-match-card p {

        font-size: 20px;

    }


    .care-match-eye {

        width: 260px;
        height: 260px;

        left: -65px;
        top: 120px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .care-match-section {

        min-height: auto;

        padding: 80px 22px 55px;

        background-position: center;

    }


    .care-match-text {

        max-width: 100%;

        margin: 0;
		
		padding: 3px;
		
		text-align: center;

    }


    .care-match-text p {

        font-size: 18px;

        line-height: 1.5;

        margin-bottom: 30px;

    }


    .care-match-card {

        margin-top: 7px;

        padding: 32px 25px;

        border-radius: 28px;

    }


    .care-match-card h3 {

        font-size: 20px;

    }


    .care-match-card p {

        font-size: 16px;

    }


    .care-match-card p br {

        display: none;

    }


    .care-match-eye {

        width: 400px;
        height: 400px;

        left: -197px;
        top: 40px;

    }


    .care-match-eye.is-visible {

        opacity: 0.12;

    }


    .care-match-source p {

        font-size: 11px;

    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .care-match-section {

        padding: 70px 18px 50px;

    }


    .care-match-text p {

        font-size: 17px;

    }


    .care-match-card {

        padding: 16px 20px;

        border-radius: 25px;

    }


    .care-match-card h3 {

        font-size: 17px;

    }


    .care-match-card p {

        font-size: 14px;

    }


    .care-match-eye {

        width: 400px;
        height: 400px;

        left: -197px;

    }

}

/* =========================================================
   ANIMACIÓN DE TEXTOS AL HACER SCROLL
========================================================= */

.care-match-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}


/* TEXTO VISIBLE */

.care-match-reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* SEGUNDO PÁRRAFO CON PEQUEÑO RETRASO */

.care-match-reveal:nth-child(2) {

    transition-delay: 0.15s;

}


/* =========================================================
   WHO IMAGE SECTION
========================================================= */

.who-image-section {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #ffffff;
}


.who-image-section__image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


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

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

    .who-image-section {
        width: 100%;
        height: 600px;
    }


    .who-image-section__image {
        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Conservamos principalmente
         * el sector izquierdo de la fotografía.
         */
        object-position: 25% center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .who-image-section {
        width: 100%;
        height: 500px;
    }


    .who-image-section__image {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: 22% center;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

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

    .who-image-section {
        height: 460px;
    }


    .who-image-section__image {
        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Priorizamos al papá y al niño.
         */
        object-position: 20% center;
    }

}






/* =========================================================
   MISSION & VISION
========================================================= */

.mission-vision-section {

    width: 100%;

    background: #ffffff;

    padding: 110px 40px 130px;

    overflow: hidden;

}


.mission-vision-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

}


/* =========================================================
   FILAS
========================================================= */

.mv-row {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}


/* =========================================================
   GRÁFICO
========================================================= */

.mv-graphic {

    position: relative;

    width: 100%;

    max-width: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.mv-row--mission .mv-graphic {

    justify-self: start;

}


.mv-row--vision .mv-graphic {

    justify-self: end;

}


/* PNG */

.mv-icon {

    display: block;

    width: 100%;

    max-width: 430px;

    height: auto;

}


/* =========================================================
   TÍTULO ENCIMA DEL PNG
========================================================= */

/* =========================================================
   TÍTULOS MISSION / VISION
========================================================= */

.mv-graphic h2 {

    position: absolute;

    top: 50%;

    margin: 0;

    font-family: var(--font-main);

    font-size: clamp(45px, 4vw, 56px);

    font-weight: 700;

    line-height: 1;

    z-index: 2;

    white-space: nowrap;

}


/* =========================================================
   MISSION
========================================================= */

.mv-row--mission .mv-graphic h2 {

    /*
     * El círculo de Mission está desplazado
     * hacia la izquierda dentro del PNG.
     */

    left: 43%;

    transform: translate(-61%, -50%);

    color: #0c344c;

}


/* =========================================================
   VISION
========================================================= */

.mv-row--vision .mv-graphic h2 {

    /*
     * El círculo de Vision está desplazado
     * hacia la derecha dentro del PNG.
     */

    left: 62%;

    transform: translate(-50%, -50%);

    color: #ffffff;

}


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

.mv-text {

    width: 100%;

    max-width: 528px;

}


.mv-row--mission .mv-text {

    justify-self: end;

}


.mv-row--vision .mv-text {

    justify-self: start;

    text-align: right;

}


.mv-text p {

    margin: 0;

    font-family: var(--font-main);

    font-size: 30px;

    font-weight: 700;

    line-height: 1.35;

    color: #0c344c;

}


/* =========================================================
   FADE LEFT
========================================================= */

.scroll-fade-left {

    opacity: 0;

    transform: translateX(-80px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

}


.scroll-fade-left.is-visible {

    opacity: 1;

    transform: translateX(0);

}


/* =========================================================
   FADE RIGHT
========================================================= */

.scroll-fade-right {

    opacity: 0;

    transform: translateX(80px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);

}


.scroll-fade-right.is-visible {

    opacity: 1;

    transform: translateX(0);

}


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

@media (max-width: 1024px) {

    .mission-vision-section {

        padding:
            90px
            35px
            110px;

    }


    .mv-row {

        gap: 50px;

    }


    .mv-row--vision {

        margin-top: 100px;

    }


    .mv-graphic {

        max-width: 340px;

    }


    .mv-icon {

        max-width: 330px;

    }


    .mv-text {

        max-width: 400px;

    }


    .mv-text p {

        font-size: 20px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .mission-vision-section {

        padding:
            75px
            22px
            90px;

    }


    .mv-row {

        grid-template-columns: 1fr;

        gap: 30px;

        text-align: center;

    }


    .mv-row--vision {

        margin-top: 90px;

    }


    /* Mission:
       gráfico primero, texto después */

    .mv-row--mission .mv-graphic {

        order: 1;

    }


    .mv-row--mission .mv-text {

        order: 2;

    }


    /* Vision:
       también gráfico primero */

    .mv-row--vision .mv-graphic {

        order: 1;

    }


    .mv-row--vision .mv-text {

        order: 2;

    }


    .mv-graphic,
    .mv-row--mission .mv-graphic,
    .mv-row--vision .mv-graphic {

        justify-self: center;

        max-width: 300px;

    }


    .mv-icon {

        max-width: 285px;

    }


    .mv-text,
    .mv-row--mission .mv-text,
    .mv-row--vision .mv-text {

        justify-self: center;

        max-width: 420px;

        text-align: center;

    }


    .mv-text p {

        font-size: 18px;

    }


    .mv-graphic h2 {

        font-size: 44px;

    }


    /* Movimiento más suave en móvil */

    .scroll-fade-left {

        transform: translateX(-45px);

    }


    .scroll-fade-right {

        transform: translateX(45px);

    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .mission-vision-section {

        padding:
            65px
            18px
            75px;

    }


    .mv-row--vision {

        margin-top: 75px;

    }


    .mv-graphic {

        max-width: 250px;

    }


    .mv-icon {

        max-width: 245px;

    }


    .mv-graphic h2 {

        font-size: 38px;

    }


    .mv-text p {

        font-size: 17px;

    }

}

/* =========================================================
   BLOQUE SUPERIOR
========================================================= */

.story-top {

    width: 100%;

    background: #b3d7f8;

    padding: 90px 40px 120px;

}


.story-content {

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

    margin: 0 auto;

    text-align: center;

}


.story-content h2 {

    margin: 0 0 60px;

    font-family: var(--font-main);

    font-size: 80px;
    font-weight: 800;

    line-height: 1;

    color: #0c344c;

    text-transform: lowercase;

}


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

.story-text {

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

    margin: 0 auto;

}


.story-text p {

    margin: 0 0 28px;

    font-family: var(--font-main);

    font-size: 24px;
    font-weight: 700;

    line-height: 1.55;

    color: #0c344c;

}


.story-text .story-final {

    margin-top: 35px;
    margin-bottom: 0;

    font-size: 20px;

}


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

.story-image-wrap {

    width: 100%;

    margin: 0;
    padding: 0;

}


.story-image {

    display: block;

    width: 100%;
    height: auto;

    margin: 0;

}


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

.story-cta {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    min-width: 330px;

    padding: 30px 50px;

    display: inline-flex;

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

    border-radius: 999px;

    background: #0c344c;

    color: #ffffff;

    font-family: var(--font-main);

    font-size: 30px;
    font-weight: 600;

    text-align: center;

    text-decoration: none;

    opacity: 0;

    z-index: 5;

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease;

}


/* ACTIVO */

.story-cta.is-visible {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

}


/* HOVER */

.story-cta:hover {

    background: #73b0dd;

    color: #ffffff;

}


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

@media (max-width: 1024px) {

    .story-top {

        padding:
            80px
            35px
            110px;

    }


    .story-content h2 {

        font-size: 54px;

        margin-bottom: 50px;

    }


    .story-text p {

        font-size: 17px;

    }


    .story-cta {

        min-width: 280px;

        padding: 19px 35px;

        font-size: 21px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .story-top {

        padding:
            65px
            22px
            90px;

    }


    .story-content h2 {

        font-size: 44px;

        margin-bottom: 40px;

    }


    .story-text p {

        font-size: 16px;

        line-height: 1.5;

        margin-bottom: 24px;

    }


    .story-text .story-final {

        margin-top: 28px;

        font-size: 18px;

    }


    .story-cta {

        min-width: 230px;

        padding: 17px 28px;

        font-size: 18px;

    }
	
	.story-image-wrap {
    width: 100%;
    height: 500px;

    overflow: hidden;
}

.story-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Controla qué parte del paisaje
     * permanece visible.
     */
    object-position: center center;
}

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .story-top {

        padding:
            55px
            18px
            80px;

    }


    .story-content h2 {

        font-size: 38px;

    }


    .story-text p {

        font-size: 15px;

    }


    .story-cta {

        min-width: 210px;

        font-size: 17px;

        padding: 16px 24px;

    }
	
	.story-image-wrap {
    height: 450px;
}

.story-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}

}

.story-divider {

    position: relative;

    width: 100%;
    height: 0;

    z-index: 5;

}


.story-cta {

    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.75);

}

/* =========================================================
   SERVICES PAGE - COLOR HAMBURGUESA
========================================================= */

.services-page .menu-toggle.active .menu-line-one,
.services-page .menu-toggle.active .menu-line-two,
.services-page .menu-toggle.active .menu-line-three {
    background: #b3d7f8;
}

/* =========================================================
   SERVICES HERO
========================================================= */

.services-hero {
    position: relative;

    width: 100%;
    height: 870px;

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

    background: #0c344c;

    overflow: hidden;
}


/* =========================================================
   SERVICES CONTENT
========================================================= */

.services-hero-content {
    width: 1200px;

    margin-top: 40px;

    padding:
        0
        30px;

    text-align: center;
}


/* =========================================================
   SERVICES TITLE
========================================================= */

.services-hero-title {
    margin:
        0
        0
        65px;

    font-family: var(--font-main);

    font-size: 90px;
    font-weight: 800;
    line-height: 90px;

    color: #b3d7f8;

    opacity: 0;

    transform: scale(0.92);

    animation:
        servicesZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.15s;
}


/* =========================================================
   SERVICES DESCRIPTION
========================================================= */

.services-hero-description {
    width: 100%;
}


/* PRIMER TEXTO */

.services-hero-text-one {
    margin:
        0
        0
        8px;

    font-family: var(--font-main);

    font-size: 35px;
    font-weight: 600;
    line-height: 45px;

    color: #dfefe6;

    opacity: 0;

    transform: scale(0.94);

    animation:
        servicesZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.35s;
}


/* SEGUNDO TEXTO */

.services-hero-text-two {
    margin: 0;

    font-family: var(--font-main);

    font-size: 32px;
    font-weight: 600;
    line-height: 50px;

    color: #b3d7f8;

    opacity: 0;

    transform: scale(0.94);

    animation:
        servicesZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.55s;
}


/* =========================================================
   ZOOM IN
========================================================= */

@keyframes servicesZoomIn {

    0% {
        opacity: 0;

        transform: scale(0.92);
    }

    100% {
        opacity: 1;

        transform: scale(1);
    }

}

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

    .services-hero {
        height: 700px;
    }


    .services-hero-content {
        width: 850px;

        margin-top: 35px;

        padding:
            0
            40px;
    }


    .services-hero-title {
        margin-bottom: 50px;

        font-size: 65px;
        line-height: 75px;
    }


    .services-hero-text-one {
        font-size: 28px;
        line-height: 38px;
    }


    .services-hero-text-two {
        font-size: 26px;
        line-height: 40px;
    }

}

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

    .services-hero {
        height: 650px;
    }


    .services-hero-content {
        width: 100%;

        margin-top: 35px;

        padding:
            0
            28px;
    }


    .services-hero-title {
        margin-bottom: 45px;

        font-size: 52px;
        line-height: 62px;
    }


    .services-hero-text-one {
        margin-bottom: 14px;

        font-size: 23px;
        line-height: 32px;
    }


    .services-hero-text-two {
        font-size: 21px;
        line-height: 32px;
    }


    .services-hero-text-two br {
        display: none;
    }

}

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

    .services-hero {
        height: 620px;
    }


    .services-hero-content {
        margin-top: 30px;

        padding:
            0
            22px;
    }


    .services-hero-title {
        margin-bottom: 38px;

        font-size: 46px;
        line-height: 55px;
    }


    .services-hero-text-one {
        font-size: 20px;
        line-height: 29px;
    }


    .services-hero-text-two {
        font-size: 19px;
        line-height: 29px;
    }

}

/* =========================================================
   HEADER SERVICES
   VARIANTE PARA FONDOS OSCUROS
========================================================= */

.site-header-services .menu-toggle .menu-line-one,
.site-header-services .menu-toggle .menu-line-two,
.site-header-services .menu-toggle .menu-line-three {
    background: #b3d7f8;
}


/* =========================================================
   SERVICES - MENU ABIERTO / X
========================================================= */

.site-header-services .menu-toggle.active .menu-line-one,
.site-header-services .menu-toggle.active .menu-line-three {
    background: #0c344c;
}

/* =========================================================
   SERVICES VISUAL SECTION
========================================================= */

.services-visual {

    position: relative;

    width: 100%;
    height: 700px;

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

    overflow: hidden;

    background-image:
        url("../images/services-background.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}


/* =========================================================
   LOGO
========================================================= */

.services-visual__logo {

    position: relative;

    z-index: 2;

    width: 350px;

    opacity: 0;

    transform: scale(0.75);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.services-visual__logo img {

    display: block;

    width: 100%;
    height: auto;

    transform-origin: center center;

}


/* =========================================================
   LOGO APARECE
========================================================= */

.services-visual__logo.is-visible {

    opacity: 1;

    transform: scale(1);

}


/* =========================================================
   INICIAR BALANCEO
========================================================= */

.services-visual__logo.is-visible img {

    animation:
        servicesLogoSwing
        9s
        ease-in-out
        0.7s
        infinite;

}



/* =========================================================
   ROTACIÓN
========================================================= */

@keyframes servicesLogoSwing {

    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }

}


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

@media (max-width: 991px) {

    .services-visual {

        height: 430px;

    }


    .services-visual__logo {

        width: 200px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .services-visual {

        height: 380px;

        background-position: center center;

    }


    .services-visual__logo {

        width: 165px;

    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 480px) {

    .services-visual {

        height: 340px;

    }


    .services-visual__logo {

        width: 145px;

    }

}

/* =========================================================
   SERVICES GRID SECTION
========================================================= */

.services-grid-section {
    position: relative;

    width: 100%;

    padding:
        100px
        0
        140px;

    background: #0c344c;

    overflow: hidden;
}


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

.services-grid-container {
    width: 1020px;

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    column-gap: 85px;

    row-gap: 120px;
}


/* =========================================================
   SERVICE
========================================================= */

.service-feature {
    width: 100%;

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* CUANDO APARECE */

.service-feature.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   HEADER DE CADA SERVICIO
========================================================= */

.service-feature-header {
    width: 100%;

    min-height: 230px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    margin-bottom: 30px;

    text-align: center;
}


/* =========================================================
   ICON
========================================================= */

.service-feature-icon {
    display: block;

    width: 130px;
    height: 130px;

    object-fit: contain;

    margin:
        0
        auto
        25px;
}


/* =========================================================
   TITLE
========================================================= */

.service-feature-title {
    margin: 0;

    font-family: var(--font-main);

    font-size: 28px;
    font-weight: 700;
    line-height: 35px;

    color: #dfefe6;
}


/* SECOND LINE */

.service-feature-title span {
    color: #b3d7f8;
}


/* =========================================================
   GREEN BOX
========================================================= */

.service-feature-box {
    position: relative;

    width: 100%;
    height: 440px;

    padding:
        35px
        20px
        35px
        30px;

    background: #dfefe6;

    border-radius: 50px;

    overflow: hidden;
}


/* =========================================================
   INTERNAL SCROLL
========================================================= */

.service-feature-scroll {
    width: 100%;
    height: 100%;

    padding-right: 20px;

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        #73b0dd
        transparent;
}


/* CHROME / EDGE / SAFARI */

.service-feature-scroll::-webkit-scrollbar {
    width: 7px;
}


.service-feature-scroll::-webkit-scrollbar-track {
    background: transparent;
}


.service-feature-scroll::-webkit-scrollbar-thumb {
    background: #73b0dd;

    border-radius: 20px;
}


/* =========================================================
   ITEM
========================================================= */

.service-feature-item {
    width: 100%;

    display: grid;

    grid-template-columns:
        42px
        1fr;

    column-gap: 22px;

    align-items: flex-start;

    margin-bottom: 38px;
}


.service-feature-item:last-child {
    margin-bottom: 5px;
}


/* =========================================================
   CHECK
========================================================= */

.service-check {
    width: 37px;
    height: 37px;

    display: flex;

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

    margin-top: 1px;

    border-radius: 50%;


    background: #0c344c;

    font-family: Arial, sans-serif;

    font-size: 23px;
    font-weight: 700;
    line-height: 37px;

    color: #b3d7f8;
}


/* =========================================================
   TEXT
========================================================= */

.service-feature-item p {
    margin: 0;

    font-family: var(--font-main);

    font-size: 17px;
    font-weight: 500;
    line-height: 26px;

    color: #0c344c;
}

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

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

    .services-grid-section {
        padding:
            90px
            0
            110px;
    }


    .services-grid-container {
        width: 850px;

        column-gap: 55px;

        row-gap: 100px;
    }


    .service-feature-header {
        min-height: 210px;

        margin-bottom: 25px;
    }


    .service-feature-icon {
        width: 115px;
        height: 115px;

        margin-bottom: 22px;
    }


    .service-feature-title {
        font-size: 25px;
        line-height: 32px;
    }


    .service-feature-box {
        height: 420px;

        padding:
            32px
            18px
            32px
            25px;

        border-radius: 42px;
    }


    .service-feature-item {
        grid-template-columns:
            38px
            1fr;

        column-gap: 18px;

        margin-bottom: 32px;
    }


    .service-check {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }


    .service-feature-item p {
        font-size: 16px;
        line-height: 24px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

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

    .services-grid-section {
        padding:
            70px
            0
            90px;
    }


    .services-grid-container {
        width: 100%;

        padding:
            0
            25px;

        grid-template-columns:
            1fr;

        row-gap: 80px;
    }


    .service-feature-header {
        min-height: auto;

        margin-bottom: 25px;
    }


    .service-feature-icon {
        width: 105px;
        height: 105px;

        margin-bottom: 20px;
    }


    .service-feature-title {
        font-size: 24px;
        line-height: 31px;
    }


    .service-feature-box {
        height: 400px;

        padding:
            30px
            16px
            30px
            22px;

        border-radius: 38px;
    }


    .service-feature-scroll {
        padding-right: 12px;
    }


    .service-feature-item {
        grid-template-columns:
            36px
            1fr;

        column-gap: 16px;

        margin-bottom: 30px;
    }


    .service-check {
        width: 32px;
        height: 32px;

        font-size: 19px;
    }


    .service-feature-item p {
        font-size: 15px;
        line-height: 23px;
    }

}

/* =========================================================
   WHY PATIENT NAVIGATION WORKS
========================================================= */

.navigation-works-section {

    width: 100%;

    padding: 120px 35px 75px;

    background: #b3d7f8;

    overflow: hidden;
}


.navigation-works-container {

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   HEADER
========================================================= */

.navigation-works-header h2 {

    margin: 0 0 55px;

    font-family: var(--font-main);

    font-size: clamp(50px, 5vw, 70px);

    font-weight: 700;

    line-height: 1.05;

    color: #0c344c;
}


.navigation-works-header p {

    max-width: 900px;

    margin: 0 auto 28px;

    font-family: var(--font-main);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.45;

    color: #0c344c;
}


/* =========================================================
   SOURCE
========================================================= */

.navigation-works-source {

    margin: 55px auto 30px;

    font-size: 16px;

    font-style: italic;

    color: rgba(12, 52, 76, 0.75);
}


/* =========================================================
   ROWS
========================================================= */

.navigation-stats-row {

    width: 100%;

    max-width: 620px;

    margin: 0 auto;

    display: grid;

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

    gap: 22px;
}


.navigation-stats-row--second {

    margin-top: 22px;
}


/* =========================================================
   CARDS
========================================================= */

.navigation-work-card {

    min-height: 145px;

    padding: 25px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border: 2px solid #e1f6eb;

    border-radius: 28px;

    background: transparent;

    color: #0c344c;
}


.navigation-work-card h3 {

    margin: 0 0 5px;

    font-family: var(--font-main);

    font-size: 28px;

    font-weight: 700;

    line-height: 1.1;
}


.navigation-work-card p {

    margin: 0;

    font-family: var(--font-main);

    font-size: 18px;

    font-weight: 500;

    line-height: 1.25;
}


/* =========================================================
   FADE IN
========================================================= */

.navigation-fade-first,
.navigation-fade-second {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


.navigation-fade-first.is-visible,
.navigation-fade-second.is-visible {

    opacity: 1;

    transform: translateY(0);
}


/* pequeño escalonado */

.navigation-stats-row
.navigation-work-card:nth-child(2) {

    transition-delay: 0.12s;
}


/* =========================================================
   ROI
========================================================= */

.navigation-works-roi {

    margin-top: 35px;

    font-size: 15px;

    font-style: italic;

    line-height: 1.35;

    color: rgba(12, 52, 76, 0.75);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .navigation-works-section {

        padding:
            65px
            20px
            60px;
    }


    .navigation-works-header h2 {

        font-size: 42px;

        margin-bottom: 40px;
    }


    .navigation-works-header p {

        font-size: 17px;
    }


    .navigation-stats-row {

        grid-template-columns: 1fr;

        max-width: 380px;
    }


    .navigation-stats-row--second {

        margin-top: 18px;
    }


    .navigation-work-card {

        min-height: 130px;
    }


    .navigation-work-card h3 {

        font-size: 25px;
    }


    .navigation-work-card p {

        font-size: 17px;
    }

}

/* ==========================
   CTA SECTION
========================== */

.cta-section {
    position: relative;
    width: 100%;
    min-height: 420px;

    background-image: url("../images/cta-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

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

.cta-overlay {
    width: 100%;
    min-height: 420px;

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

    /* Puedes eliminar este fondo si la imagen no necesita oscurecerse */
    background: rgba(255, 255, 255, 0.15);
}

.cta-content {
    text-align: center;
    padding: 40px 20px;
}

.cta-content h2 {
    margin: 0 0 30px;
	font-family: var(--font-main);
    color: #0c344c;
    font-size: 68px;
    line-height: 1.2;
    font-weight: 800;
	padding-top: 20px;
}

.cta-button {
    display: inline-block;

    padding: 14px 32px;

    background-color: #73b0dd;
    color: #ffffff;

    font-size: 24px;
    font-weight: 600;
    text-decoration: none;

    border-radius: 100px;

    transition: background-color 0.3s ease,
                transform 0.3s ease;
}

.cta-button:hover {
    background-color: #dff7e9;
    color: #0c344c;
    transform: translateY(-3px);
}


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

@media (max-width: 768px) {

    .cta-section,
    .cta-overlay {
        min-height: 350px;
    }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-button {
        padding: 13px 28px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {

    .cta-section,
    .cta-overlay {
        min-height: 300px;
    }

    .cta-content {
        padding: 30px 20px;
    }

    .cta-content h2 {
        font-size: 27px;
    }
}

/* =========================================================
   OUR PEOPLE - HEADER PERSONALIZADO
========================================================= */

.site-header-people .menu-toggle .menu-line-one,
.site-header-people .menu-toggle .menu-line-two,
.site-header-people .menu-toggle .menu-line-three {
    background: #0c344c;
}


/* X AL ABRIR */

.site-header-people .menu-toggle.active .menu-line-one,
.site-header-people .menu-toggle.active .menu-line-three {
    background: #0c344c;
}

/* =========================================================
   OUR PEOPLE HERO
========================================================= */

.people-hero-section {
    position: relative;

    width: 100%;
    height: 875px;

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

    background: #dff7e9;

    overflow: hidden;
}


/* =========================================================
   CONTENT
========================================================= */

.people-hero-content {
    position: relative;

    width: 1100px;

    margin-top: 70px;

    padding:
        0
        30px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.people-hero-title {
    margin:
        0
        0
        55px;

    font-family: var(--font-main);

    font-size: 90px;
    font-weight: 800;
    line-height: 88px;

    color: #0c344c;

    opacity: 0;

    transform: scale(0.92);

    animation:
        peopleTitleZoom
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.15s;
}


/* =========================================================
   MAIN DESCRIPTION
========================================================= */

.people-hero-description {
    margin: 0;

    font-family: var(--font-main);

    font-size: 40px;
    font-weight: 600;
    line-height: 46px;

    color: #73b0dd;

    opacity: 0;

    transform: scale(0.94);

    animation:
        peopleTextZoom
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.40s;
}


/* =========================================================
   CLOSING TEXT
========================================================= */

.people-hero-closing {
    margin:
        8px
        0
        0;

    font-family: var(--font-main);

    font-size: 40px;
    font-weight: 600;
    line-height: 44px;

    color: #0c344c;

    opacity: 0;

    transform: scale(0.94);

    animation:
        peopleTextZoom
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay: 0.65s;
}


/* =========================================================
   ZOOM TITLE
========================================================= */

@keyframes peopleTitleZoom {

    0% {
        opacity: 0;

        transform: scale(0.92);
    }

    100% {
        opacity: 1;

        transform: scale(1);
    }

}


/* =========================================================
   ZOOM TEXT
========================================================= */

@keyframes peopleTextZoom {

    0% {
        opacity: 0;

        transform: scale(0.94);
    }

    100% {
        opacity: 1;

        transform: scale(1);
    }

}

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

    .people-hero-section {
        height: 750px;
    }


    .people-hero-content {
        width: 850px;

        margin-top: 60px;

        padding:
            0
            40px;
    }


    .people-hero-title {
        margin-bottom: 45px;

        font-size: 64px;
        line-height: 74px;
    }


    .people-hero-description {
        font-size: 28px;
        line-height: 39px;
    }


    .people-hero-closing {
        margin-top: 10px;

        font-size: 28px;
        line-height: 38px;
    }

}

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

    .people-hero-section {
        height: 650px;
    }


    .people-hero-content {
        width: 100%;

        margin-top: 50px;

        padding:
            0
            28px;
    }


    .people-hero-title {
        margin-bottom: 38px;

        font-size: 50px;
        line-height: 60px;
    }


    .people-hero-description {
        font-size: 22px;
        line-height: 32px;
    }


    .people-hero-description br {
        display: none;
    }


    .people-hero-closing {
        margin-top: 15px;

        font-size: 22px;
        line-height: 31px;
    }

}

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

    .people-hero-section {
        height: 620px;
    }


    .people-hero-content {
        margin-top: 40px;

        padding:
            0
            22px;
    }


    .people-hero-title {
        margin-bottom: 32px;

        font-size: 44px;
        line-height: 52px;
    }


    .people-hero-description {
        font-size: 19px;
        line-height: 29px;
    }


    .people-hero-closing {
        margin-top: 15px;

        font-size: 20px;
        line-height: 29px;
    }

}

/* =========================================================
   WHAT WE BELIEVE
========================================================= */

.beliefs-section {

    position: relative;

    width: 100%;

    padding: 90px 40px 100px;

    background-image: url("../images/our-people-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


.beliefs-container {

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

    margin: 0 auto;
}


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

.beliefs-title {

    margin: 0 0 70px;

    text-align: center;

    font-family: var(--font-main);

    font-size: 70px;
    font-weight: 800;

    line-height: 1;

    color: #0c344c;
}


/* =========================================================
   GRUPOS
========================================================= */

.beliefs-group {

    display: grid;

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

    gap: 24px 42px;
}


/* separación entre tandas */

.beliefs-group--second {

    margin-top: 42px;
}


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

.belief-card {

    width: 100%;

    text-align: center;

    font-family: var(--font-main);

}


/* =========================================================
   CARD AZUL CLARO
========================================================= */

.belief-card--light {

    min-height: 330px;

    padding: 40px 38px;

    display: flex;

    flex-direction: column;

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

    background: #73b0dd;

    border-radius: 35px;

    color: #ffffff;
}


.belief-card--light h3 {

    margin: 0 0 24px;

    font-size: 31px;
    font-weight: 700;

    line-height: 1.2;

    color: #dff7e9;
}


.belief-card--light p {

    margin: 0;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.45;

    color: #ffffff;
}


/* =========================================================
   CARD AZUL OSCURO
========================================================= */



.belief-card--dark p {

    margin: 0;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.3;

    color: #dff7e9;
}


/* =========================================================
   HOVER FLUIDO - TARJETAS OSCURAS
========================================================= */

.belief-card--dark {

    min-height: 95px;

    padding: 18px 30px;

    display: flex;

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

    background: rgba(12, 52, 76, 0.65);

    border-radius: 30px;

    color: #ffffff;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease;

    will-change: transform;

}


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

@media (hover: hover) and (pointer: fine) {

    .belief-card--dark:hover {

        transform:
            translateY(-18px)
            scale(1.015);

        box-shadow:
            0 20px 38px rgba(12, 52, 76, 0.28);

        background:
            rgba(12, 52, 76, 0.96);

    }

}


/* =========================================================
   ZOOM IN
========================================================= */

.belief-zoom-first,
.belief-zoom-second {

    opacity: 0;

    transform: scale(0.9);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.belief-zoom-first.is-visible,
.belief-zoom-second.is-visible {

    opacity: 1;

    transform: scale(1);
}


/* pequeño efecto escalonado */

.beliefs-group
.belief-card:nth-child(2) {

    transition-delay: 0.08s;
}


.beliefs-group
.belief-card:nth-child(3) {

    transition-delay: 0.16s;
}


.beliefs-group
.belief-card:nth-child(4) {

    transition-delay: 0.24s;
}


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

@media (max-width: 1024px) {

    .beliefs-section {

        padding:
            80px
            30px
            90px;
    }


    .beliefs-title {

        font-size: 54px;

        margin-bottom: 55px;
    }


    .beliefs-group {

        gap: 22px 28px;
    }


    .belief-card--light {

        min-height: 310px;

        padding:
            34px
            28px;
    }


    .belief-card--light h3 {

        font-size: 27px;
    }


    .belief-card--light p {

        font-size: 16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .beliefs-section {

        padding:
            65px
            20px
            75px;
    }


    .beliefs-title {

        font-size: 43px;

        margin-bottom: 45px;
    }


    /* =====================================================
       GRUPOS EN UNA SOLA COLUMNA
    ===================================================== */

    .beliefs-group {

        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    .beliefs-group--second {

        margin-top: 28px;
    }


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

       1 = AZUL CLARO
       3 = AZUL OSCURO CORRESPONDIENTE

       2 = AZUL CLARO
       4 = AZUL OSCURO CORRESPONDIENTE
    ===================================================== */

    .beliefs-group .belief-card:nth-child(1) {

        order: 1;
    }


    .beliefs-group .belief-card:nth-child(3) {

        order: 2;
    }


    .beliefs-group .belief-card:nth-child(2) {

        order: 3;
    }


    .beliefs-group .belief-card:nth-child(4) {

        order: 4;
    }


    /* =====================================================
       CARD AZUL CLARO
    ===================================================== */

    .belief-card--light {

        min-height: auto;

        padding:
            32px
            24px;

        border-radius: 28px;
    }


    .belief-card--light h3 {

        font-size: 25px;

        margin-bottom: 18px;
    }


    .belief-card--light p {

        font-size: 16px;
    }


    /* =====================================================
       CARD AZUL OSCURO
    ===================================================== */

    .belief-card--dark {

        min-height: 90px;

        padding:
            18px
            25px;

        border-radius: 26px;
    }


    .belief-card--dark p {

        font-size: 15px;
    }


    /* =====================================================
       ESPACIO ENTRE CADA PAREJA
    ===================================================== */

    .beliefs-group .belief-card:nth-child(3) {

        margin-bottom: 18px;
    }

}

/* =========================================================
   LEADERSHIP SECTION
========================================================= */

.leadership-section {

    position: relative;

    width: 100%;

    padding: 90px 40px 80px;

    background: #ffffff;

    overflow: hidden;

}


.leadership-container {

    position: relative;

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

    margin: 0 auto;

    z-index: 5;

}


/* =========================================================
   ICONOS DECORATIVOS LEADERSHIP
========================================================= */

.leadership-decor {

    position: absolute;

    width: 900px;
    height: 900px;

    opacity: 0.30;

    pointer-events: none;

    z-index: 1;

}


/* IMAGEN */

.leadership-decor img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform-origin: center;

    will-change: transform;

}


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

.leadership-decor--left {

    top: 215px;
    left: -375px;

}


.leadership-decor--left img {

    animation:
        leadershipFloatLeft
        7s
        ease-in-out
        infinite;

}


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

.leadership-decor--right {

    right: -400px;
    bottom: 1300px;

}


.leadership-decor--right img {

    animation:
        leadershipFloatRight
        8s
        ease-in-out
        infinite;

}


/* =========================================================
   FLOTACIÓN ICONO IZQUIERDO
========================================================= */

@keyframes leadershipFloatLeft {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }


    50% {

        transform:
            translate3d(
                14px,
                -45px,
                0
            );

    }


    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* =========================================================
   FLOTACIÓN ICONO DERECHO
========================================================= */

@keyframes leadershipFloatRight {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }


    50% {

        transform:
            translate3d(
                -14px,
                -55px,
                0
            );

    }


    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* =========================================================
   HEADER
========================================================= */

.leadership-header {

    text-align: center;

}


.leadership-header h2 {

    margin: 0 0 55px;

    font-family: var(--font-main);

    font-size: 62px;
    font-weight: 700;

    line-height: 1.05;

    color: #0c344c;

}


.leadership-intro {

    max-width: 900px;

    margin: 0 auto;

}


.leadership-intro p {

    margin: 0 0 28px;

    font-family: var(--font-main);

    font-size: 20px;
    font-weight: 600;

    line-height: 1.45;

    color: #73b0dd;

}


/* =========================================================
   FILAS
========================================================= */

.leadership-row {

    width: 100%;

    display: grid;

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

    gap: 70px;

    margin-top: 100px;

}


.leadership-row--3 {

    grid-template-columns: 1fr;

}


.leadership-row--3 .leader-card {

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

    margin: 0 auto;

}


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

.leader-card {

    width: 100%;

    max-width: 430px;

    justify-self: center;

    text-align: center;

}


/* =========================================================
   FOTO
========================================================= */

.leader-photo {

    position: relative;

    width: 100%;

    aspect-ratio: 0.88;

    overflow: hidden;

    background: #e7e7e7;

    border-radius: 35px;

}


.leader-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


/* =========================================================
   READ BUTTON
========================================================= */

.leader-read {

    position: absolute;

    left: 6%;
    right: 6%;
    bottom: 20px;

    width: 88%;

    min-height: 46px;

    border: 1.5px solid #0c344c;

    border-radius: 100px;

    background: rgba(255, 255, 255, 0.80);

    color: #0c344c;

    font-family: var(--font-main);

    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.leader-read:hover {

    background: #0c344c;

    color: #ffffff;

    transform: translateY(-3px);

}


/* =========================================================
   BASIC INFO
========================================================= */

.leader-basic-info {

    padding-top: 18px;

}


.leader-basic-info h3 {

    margin: 0;

    font-size: 19px;
    font-weight: 700;

    line-height: 1.3;

    color: #0c344c;

}


.leader-basic-info p {

    margin: 2px 0 0;

    font-size: 19px;
    font-weight: 600;

    line-height: 1.25;

    color: #73b0dd;

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.leader-reveal {

    opacity: 0;

    transform:
        translateY(60px)
        scale(0.94);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}


.leader-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   PANEL DE DETALLE
========================================================= */

.leader-detail {

    position: relative;

    width: 100%;

    margin-top: 110px;

    padding: 50px;

    background: #0c344c;

    border-radius: 45px;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}


.leader-detail.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   CLOSE
========================================================= */

.leader-detail-close {

    position: absolute;

    top: 18px;
    right: 25px;

    width: 42px;
    height: 42px;

    background: transparent;

    color: #ffffff;

    font-size: 32px;

    cursor: pointer;

}


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

.leader-detail-grid {

    display: grid;

    grid-template-columns:
        230px
        1fr;

    gap: 55px;

    align-items: start;

}


/* =========================================================
   FOTO DETALLE
========================================================= */

.leader-detail-photo {

    width: 100%;

    aspect-ratio: 0.78;

    overflow: hidden;

    border-radius: 25px;

    background: #9caeb9;

}


.leader-detail-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.leader-detail-person h3 {

    margin: 20px 0 0;

    font-size: 20px;
    font-weight: 700;

    color: #ffffff;

}


.leader-detail-person p {

    margin: 0;

    font-size: 20px;

    color: #b3d7f8;

}


/* =========================================================
   BIO
========================================================= */

.leader-detail-bio p {

    margin: 0 0 20px;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.5;

    color: #ffffff;

}


/* =========================================================
   EDUCACIÓN
========================================================= */

.leader-detail-education {

    margin: 25px 0;

    font-size: 13px;
    font-weight: 600;

    font-style: italic;

    color: #ffffff;

}


/* =========================================================
   QUOTE
========================================================= */

.leader-detail-quote {

    margin: 30px 0;

    padding: 28px 35px;

    border-radius: 25px;

    background: #b3d7f8;

    color: #0c344c;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.4;

    text-align: center;

}


/* =========================================================
   ROLE
========================================================= */

.leader-detail-role h4 {

    margin: 0;

    font-size: 24px;
    font-weight: 600;

    color: #ffffff;

}


.leader-detail-role p {

    margin: 2px 0 0;

    font-size: 18px;

    color: #ffffff;

}


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

@media (max-width: 1024px) {

    .leadership-section {

        padding:
            80px
            30px
            100px;

    }


    .leadership-header h2 {

        font-size: 52px;

    }


    .leadership-row {

        gap: 40px;

    }


    .leader-detail-grid {

        grid-template-columns:
            200px
            1fr;

        gap: 35px;

    }


    /* ICONOS DECORATIVOS */

    .leadership-decor {

        width: 300px;
        height: 300px;

    }


    .leadership-decor--left {

        left: -110px;

    }


    .leadership-decor--right {

        right: -110px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .leadership-section {

        padding:
            65px
            20px
            80px;

    }


    .leadership-header h2 {

        font-size: 40px;

        margin-bottom: 40px;

    }


    .leadership-intro p {

        font-size: 17px;

    }


    .leadership-row {

        grid-template-columns: 1fr;

        gap: 50px;

        margin-top: 70px;

    }


    .leader-card {

        max-width: 360px;

    }


    .leader-detail {

        padding:
            50px
            25px
            35px;

        border-radius: 30px;

    }


    .leader-detail-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .leader-detail-person {

        max-width: 240px;

        margin: 0 auto;

        text-align: center;

    }


    .leader-detail-content {

        text-align: left;

    }


    /* ICONOS DECORATIVOS */

    .leadership-decor {

        width: 220px;
        height: 220px;

    }


    .leadership-decor--left {

        left: -100px;

    }


    .leadership-decor--right {

        right: -100px;

    }

}

/* =========================================================
   FINAL CTA - OUR PEOPLE
========================================================= */

.people-final-cta {

    width: 100%;

    padding: 85px 30px 95px;

    background: #ffffff;

    text-align: center;

}


.people-final-cta__content {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

}


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

.people-final-cta__text {

    margin: 0 0 48px;

    font-family: var(--font-main);

    font-size: clamp(24px, 2.4vw, 34px);

    font-weight: 600;

    line-height: 1.35;

    color: #0c344c;

}


/* SERVICES LINK */

.people-final-cta__text a {

    color: #73b0dd;

    text-decoration: underline;

    text-underline-offset: 4px;

    transition: color 0.3s ease;

}


.people-final-cta__text a:hover {

    color: #0c344c;

}


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

.people-final-cta__button {

    display: inline-flex;

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

    min-width: 300px;

    min-height: 65px;

    padding: 16px 38px;

    border-radius: 100px;

    background: #73b0dd;

    color: #ffffff;

    font-family: var(--font-main);

    font-size: 22px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.4s ease,
        color 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

}


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

@media (hover: hover) and (pointer: fine) {

    .people-final-cta__button:hover {

        background: #0c344c;

        color: #ffffff;

        transform: translateY(-4px);

    }

}


/* =========================================================
   ZOOM IN
========================================================= */

.people-final-zoom {

    opacity: 0;

    transform: scale(0.88);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

}


.people-final-zoom.is-visible {

    opacity: 1;

    transform: scale(1);

}


/* botón entra un poco después */

.people-final-cta__button {

    transition-delay: 0.15s;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .people-final-cta {

        padding:
            65px
            20px
            75px;

    }


    .people-final-cta__text {

        margin-bottom: 38px;

        font-size: 22px;

    }


    .people-final-cta__button {

        min-width: 230px;

        min-height: 58px;

        padding:
            14px
            28px;

        font-size: 19px;

    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .people-final-cta {

        padding:
            0px
            18px
            65px;

    }


    .people-final-cta__text {

        font-size: 20px;

    }


    .people-final-cta__button {

        min-width: 210px;

        font-size: 18px;

    }

}

/* =========================================================
   FOR PARTNERS - HAMBURGER
========================================================= */

.site-header-partners .menu-toggle .menu-line-one,
.site-header-partners .menu-toggle .menu-line-two,
.site-header-partners .menu-toggle .menu-line-three {
    background: #b3d7f8;
}


/* =========================================================
   FOR PARTNERS - X CUANDO EL MENÚ ESTÁ ABIERTO
========================================================= */

.site-header-partners .menu-toggle.active .menu-line-one,
.site-header-partners .menu-toggle.active .menu-line-three {
    background: #0c344c;
}

/* =========================================================
   FOR PARTNERS HERO
========================================================= */

.partners-hero {

    position: relative;

    width: 100%;
    min-height: 845px;

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

    padding:
        180px
        40px
        100px;

    box-sizing: border-box;

    background: #0c344c;

    overflow: hidden;
}


/* =========================================================
   CONTENT
========================================================= */

.partners-hero-content {

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

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.partners-hero-title {

    margin:
        0
        0
        55px;

    font-family: var(--font-main);

    font-size: 78px;
    font-weight: 700;

    line-height: 88px;

    color: #b3d7f8;

    opacity: 0;

    transform: scale(0.93);

    animation:
        partnersZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        forwards;
}


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

.partners-hero-text {

    margin:
        0
        auto;

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 600;

    line-height: 50px;

    color: #b3d7f8;

    opacity: 0;

    transform: scale(0.94);

    animation:
        partnersZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.35s
        forwards;
}


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

.partners-hero-highlight {

    margin:
        8px
        0
        0;

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 600;

    line-height: 48px;

    color: #dff7e9;

    opacity: 0;

    transform: scale(0.94);

    animation:
        partnersZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.55s
        forwards;
}


/* =========================================================
   ZOOM IN
========================================================= */

@keyframes partnersZoomIn {

    0% {

        opacity: 0;

        transform: scale(0.93);
    }

    100% {

        opacity: 1;

        transform: scale(1);
    }

}


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

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

    .partners-hero {

        min-height: 720px;

        padding:
            160px
            35px
            90px;
    }


    .partners-hero-content {

        max-width: 850px;
    }


    .partners-hero-title {

        margin-bottom: 48px;

        font-size: 62px;

        line-height: 72px;
    }


    .partners-hero-text {

        font-size: 28px;

        line-height: 42px;
    }


    .partners-hero-highlight {

        margin-top: 6px;

        font-size: 28px;

        line-height: 42px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .partners-hero {

        min-height: 650px;

        padding:
            135px
            25px
            75px;
    }


    .partners-hero-content {

        max-width: 550px;
    }


    .partners-hero-title {

        margin-bottom: 42px;

        font-size: 48px;

        line-height: 56px;
    }


    .partners-hero-text {

        font-size: 22px;

        line-height: 33px;
    }


    .partners-hero-highlight {

        margin-top: 12px;

        font-size: 23px;

        line-height: 34px;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

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

    .partners-hero {

        min-height: 600px;

        padding:
            120px
            22px
            65px;
    }


    .partners-hero-title {

        margin-bottom: 38px;

        font-size: 42px;

        line-height: 50px;
    }


    .partners-hero-text {

        font-size: 19px;

        line-height: 29px;
    }


    .partners-hero-highlight {

        margin-top: 12px;

        font-size: 20px;

        line-height: 30px;
    }

}

/* =========================================================
   PARTNERS IMAGE SECTION
========================================================= */

.partners-image-section {

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    line-height: 0;

}


.partners-image-section__image {

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

}


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

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

    .partners-image-section {

        width: 100%;

        height: 580px;

        overflow: hidden;

    }


    .partners-image-section__image {

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;

    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .partners-image-section {

        width: 100%;

        height: 500px;

        overflow: hidden;

    }


    .partners-image-section__image {

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Mantiene a las dos personas
         * como protagonistas
         */
        object-position: 50% center;

    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

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

    .partners-image-section {

        height: 430px;

    }


    .partners-image-section__image {

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: 50% center;

    }

}

/* =========================================================
   PARTNERS INTRO
========================================================= */

.partners-intro {
    position: relative;

    width: 100%;
    min-height: 550px;

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

    padding: 80px 30px;

    background: #0c344c;

    overflow: hidden;
}


.partners-intro__content {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   TEXT
========================================================= */

.partners-intro__text {
    margin: 0;

    font-size: clamp(22px, 2.2vw, 31px);

    font-weight: 600;

    line-height: 1.4;

    color: #afd7f4;


    /* Estado oculto */
    opacity: 0;

    transform: scale(0.78);

    filter: blur(3px);


    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.1s ease;
}


/* =========================================================
   TEXT VISIBLE
========================================================= */

.partners-intro__text.is-visible {
    opacity: 1;

    transform: scale(1);

    filter: blur(0);
}


/* =========================================================
   CUANDO DESAPARECE
========================================================= */

.partners-intro__text.is-leaving {
    opacity: 0;

    transform: scale(0.88);

    filter: blur(2px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;
}


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

@media (max-width: 991px) {

    .partners-intro {
        min-height: 430px;

        padding: 70px 45px;
    }


    .partners-intro__content {
        max-width: 850px;
    }


    .partners-intro__text {
        font-size: 24px;

        line-height: 1.45;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partners-intro {
        min-height: auto;

        padding: 75px 24px;
    }


    .partners-intro__text {
        font-size: 19px;

        line-height: 1.55;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .partners-intro {
        padding: 65px 20px;
    }


    .partners-intro__text {
        font-size: 17px;

        line-height: 1.55;
    }

}

/* =========================================================
   PARTNERS EVIDENCE
========================================================= */

.partners-evidence {
    position: relative;

    width: 100%;

    min-height: 1000px;

    padding: 150px 35px 70px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.partners-evidence__container {
    position: relative;

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

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


/* =========================================================
   HEADINGS
========================================================= */

.partners-evidence__heading {
    margin-bottom: 75px;
}


.partners-evidence__heading h2 {
    margin: 0 0 8px;

    

    font-size: clamp(54px, 5vw, 78px);

    font-weight: 700;

    line-height: 1;

    color: #0c344c;
}


.partners-evidence__heading h3 {
    margin: 0;

    

    font-size: clamp(42px, 4vw, 66px);

    font-weight: 700;

    line-height: 1.1;

    color: #73b0dd;
}


/* =========================================================
   CARDS
========================================================= */

.partners-evidence__cards {
    display: grid;

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

    gap: 34px;

    margin-bottom: 58px;
}


.partners-evidence__card {
    min-height: 220px;

    padding: 30px 25px;

    display: flex;
    flex-direction: column;

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

    border: 3px solid #73b0dd;

    border-radius: 38px;

    opacity: 0;

    transform: scale(0.72);

    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}


.partners-evidence__card.is-visible {
    opacity: 1;

    transform: scale(1);
}


.partners-evidence__card strong {
    display: block;

    margin-bottom: 7px;

    

    font-size: 42px;

    font-weight: 700;

    line-height: 1;

    color: #000000;
}


.partners-evidence__card span {
    

    font-size: 23px;

    font-weight: 500;

    line-height: 1.35;

    color: #000000;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.partners-evidence__description {
    max-width: 900px;

    margin: 0 auto 70px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


.partners-evidence__description.is-visible {
    opacity: 1;

    transform: translateY(0);
}


.partners-evidence__description p {
    margin: 0;

    

    font-size: 22px;

    font-weight: 700;

    line-height: 1.45;

    color: #0c344c;
}


/* =========================================================
   SOURCE
========================================================= */

.partners-evidence__source {
    max-width: 850px;

    margin: 0 auto;

    opacity: 0;

    transition: opacity 1.1s ease;
}


.partners-evidence__source.is-visible {
    opacity: 1;
}


.partners-evidence__source p {
    margin: 0;

    

    font-size: 17px;

    font-style: italic;

    line-height: 1.55;

    color: #0c344c;
}


/* =========================================================
   FLOATING DECORATIONS
========================================================= */

.partners-evidence__decor {
    position: absolute;

    width: 420px;

    z-index: 1;

    pointer-events: none;

    opacity: 0;
}


.partners-evidence__decor img {
    width: 100%;

    display: block;

    opacity: 0.22;
}


/* LEFT */
.partners-evidence__decor--left {
    top: -18px;

    left: -182px;
	
	width: 680px;
	
	height: 680px;

    transform: translateX(-80px);
}


/* RIGHT */
.partners-evidence__decor--right {
    right: -275px;

    bottom: 20px;
	
	width: 680px;
	
	height: 680px;

    transform: translateX(80px);
}


/* VISIBLE */
.partners-evidence__decor--left.is-visible {
    animation:
        evidenceDecorLeftIn 1.6s ease forwards,
        evidenceFloatLeft 6s ease-in-out 1.6s infinite alternate;
}


.partners-evidence__decor--right.is-visible {
    animation:
        evidenceDecorRightIn 1.6s ease forwards,
        evidenceFloatRight 6s ease-in-out 1.6s infinite alternate;
}


/* =========================================================
   DECORATION ENTRANCE
========================================================= */

@keyframes evidenceDecorLeftIn {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes evidenceDecorRightIn {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   FLOATING
========================================================= */

@keyframes evidenceFloatLeft {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-18px);
    }

}


@keyframes evidenceFloatRight {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(18px);
    }

}


/* =========================================================
   GENERAL FADE
========================================================= */

.evidence-fade {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


.evidence-fade.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   PARTNERS EVIDENCE - EXIT
========================================================= */

/* Título */
.partners-evidence.is-leaving
.partners-evidence__heading {

    opacity: 0 !important;

    transform: scale(0.92) translateY(-15px) !important;

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* CARDS */
.partners-evidence.is-leaving
.partners-evidence__card {

    opacity: 0 !important;

    transform: scale(0.88) !important;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* TEXTO PRINCIPAL */
.partners-evidence.is-leaving
.partners-evidence__description {

    opacity: 0 !important;

    transform: translateY(25px) !important;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* SOURCE */
.partners-evidence.is-leaving
.partners-evidence__source {

    opacity: 0 !important;

    transform: translateY(15px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/* ICONOS DECORATIVOS */
.partners-evidence.is-leaving
.partners-evidence__decor {

    animation: none !important;

    opacity: 0 !important;

    transform: scale(0.92) !important;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


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

@media (max-width: 991px) {

    .partners-evidence {
        min-height: auto;

        padding: 70px 30px;
    }


    .partners-evidence__cards {
        gap: 22px;
    }


    .partners-evidence__card {
        min-height: 190px;
    }


    .partners-evidence__card strong {
        font-size: 36px;
    }


    .partners-evidence__card span {
        font-size: 20px;
    }


    .partners-evidence__description p {
        font-size: 20px;
    }


    .partners-evidence__decor {
        width: 330px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partners-evidence {
        padding: 60px 22px;
    }


    .partners-evidence__heading {
        margin-bottom: 50px;
    }


    .partners-evidence__heading h2 {
        font-size: 45px;
    }


    .partners-evidence__heading h3 {
        font-size: 34px;
    }


    .partners-evidence__cards {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 45px;
    }


    .partners-evidence__card {
        min-height: 170px;
    }


    .partners-evidence__description {
        margin-bottom: 50px;
    }


    .partners-evidence__description p {
        font-size: 18px;
    }


    .partners-evidence__source p {
        font-size: 12px;
    }


    .partners-evidence__decor {
        width: 230px;
    }


    .partners-evidence__decor--left {
        left: -150px;
    }


    .partners-evidence__decor--right {
        right: -150px;
    }

}

/* =========================================================
   WHAT WE OFFER PARTNERS
========================================================= */

.partners-offer-banner {
    position: relative;

    width: 100%;
    min-height: 350px;

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

    padding: 60px 30px;

    /* IMAGEN DE FONDO */
    background-image: url("../images/partners-offer-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* =========================================================
   CONTENT
========================================================= */

.partners-offer-banner__content {
    position: relative;

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

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


/* =========================================================
   TITLE
========================================================= */

.partners-offer-banner__content h2 {
    margin: 0;

    font-size: clamp(55px, 5.5vw, 82px);

    font-weight: 800;

    line-height: 1.05;

    color: #0c344c;
}


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

@media (max-width: 991px) {

    .partners-offer-banner {
        min-height: 250px;

        padding: 50px 30px;
    }


    .partners-offer-banner__content h2 {
        font-size: 58px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partners-offer-banner {
        min-height: 220px;

        padding: 45px 22px;
    }


    .partners-offer-banner__content h2 {
        font-size: 42px;

        line-height: 1.1;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .partners-offer-banner {
        min-height: 200px;
    }


    .partners-offer-banner__content h2 {
        font-size: 36px;
    }

}

/* =========================================================
   WHAT WE OFFER PARTNERS - TITLE ZOOM
========================================================= */

.partners-offer-banner__content h2 {
    margin: 0;

    

    font-size: clamp(55px, 5.5vw, 82px);

    font-weight: 800;

    line-height: 1.05;

    color: #0c344c;


    /* ESTADO INICIAL */
    opacity: 0;

    transform: scale(0.75);

    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ZOOM IN */

.partners-offer-banner__content h2.is-visible {
    opacity: 1;

    transform: scale(1);
}

/* =========================================================
   PARTNER NAVIGATION
========================================================= */

.partner-navigation {
    position: relative;

    width: 100%;
    min-height: 850px;

    padding: 75px 30px 110px;

    background: #a9d3f3;

    overflow: hidden;
}


/* =========================================================
   IMAGEN EN LA PARTE INFERIOR
========================================================= */

.partner-navigation::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    background-image:
        url("../images/navigation-bottom-bg.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.partner-navigation__container {
    position: relative;

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

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.partner-navigation__header {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-bottom: 45px;
}


/* =========================================================
   PNG ICON
========================================================= */

.partner-navigation__icon {
    width: 78px;

    flex: 0 0 78px;
}


.partner-navigation__icon img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   TITLE
========================================================= */

.partner-navigation__header h2 {
    margin: 0;

    font-size: clamp(35px, 3.6vw, 48px);

    font-weight: 700;

    line-height: 1.15;

    color: #0c344c;
}


/* =========================================================
   INTRO
========================================================= */

.partner-navigation__intro {
	
    max-width: 1080px;

    margin: 0 0 60px;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.45;

    color: #0c344c;
}


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

.partner-navigation__card {
    position: relative;

    width: 100%;

    padding: 40px 50px;

    background: #e1f6eb;

    border-radius: 38px;

    z-index: 3;


    /*
     * Lo controlaremos desde JS
     * dependiendo de la dirección del scroll
    */
    --navigation-shift: 0px;

    transform:
        translateY(
            var(--navigation-shift)
        );

    transition:
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   ITEMS
========================================================= */

.partner-navigation__item {
    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 18px 0;


    /* Fade Left inicial */
    opacity: 0;

    transform: translateX(-55px);

    transition:
        opacity 1.15s ease,
        transform 1.15s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* Línea divisoria */

.partner-navigation__item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 65px;
    right: 0;
    bottom: 0;

    border-bottom:
        1px dashed
        rgba(115, 176, 221, 0.75);
}


/* ITEM VISIBLE */

.partner-navigation__item.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   CHECK
========================================================= */

.partner-navigation__check {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    background: #0c4668;

    color: #a9d3f3;

    font-size: 18px;
}


/* =========================================================
   ITEM TEXT
========================================================= */

.partner-navigation__item p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;

    color: #0c344c;
}


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

@media (max-width: 991px) {

    .partner-navigation {
        min-height: 760px;

        padding:
            65px
            35px
            90px;
    }


    .partner-navigation__header {
        gap: 25px;
    }


    .partner-navigation__icon {
        width: 65px;

        flex-basis: 65px;
    }


    .partner-navigation__header h2 {
        font-size: 36px;
    }


    .partner-navigation__intro {
        font-size: 18px;

        margin-bottom: 50px;
    }


    .partner-navigation__card {
        padding:
            35px
            40px;
    }


    .partner-navigation__item p {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partner-navigation {
        min-height: auto;

        padding:
            55px
            22px
            80px;
    }


    .partner-navigation::after {
        height: 32%;
    }


    .partner-navigation__header {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 35px;
    }


    .partner-navigation__icon {
        width: 48px;

        flex-basis: 48px;
    }


    .partner-navigation__header h2 {
        font-size: 28px;

        line-height: 1.2;
    }


    .partner-navigation__intro {
        margin-bottom: 40px;

        font-size: 16px;

        line-height: 1.55;
    }


    .partner-navigation__card {
        padding:
            25px
            24px;

        border-radius: 28px;
    }


    .partner-navigation__item {
        min-height: 75px;

        gap: 17px;
    }


    .partner-navigation__check {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 14px;
    }


    .partner-navigation__item p {
        font-size: 16px;
    }


    .partner-navigation__item:not(:last-child)::after {
        left: 49px;
    }

}

/* =========================================================
   PROVIDER NETWORK
========================================================= */

.provider-network {
    position: relative;

    width: 100%;
    min-height: 850px;

    padding: 75px 30px 110px;

    background: #a9d3f3;

    overflow: hidden;
}


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

.provider-network::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    background-image:
        url("../images/navigation-bottom-bg.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.provider-network__container {
    position: relative;
    font-family: var(--font-body);
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.provider-network__header {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-bottom: 45px;
}


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

.provider-network__icon {
    width: 78px;

    flex: 0 0 78px;
}


.provider-network__icon img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   TITLE
========================================================= */

.provider-network__header h2 {
    margin: 0;

    font-family: var(--font-main);

    font-size: clamp(35px, 3.6vw, 48px);

    font-weight: 700;

    line-height: 1.15;

    color: #0c344c;
}


/* =========================================================
   INTRO
========================================================= */

.provider-network__intro {
    max-width: 950px;

    margin: 0 0 60px;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.45;

    color: #0c344c;
}


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

.provider-network__card {
    position: relative;

    width: 100%;

    padding: 40px 50px;

    background: #e1f6eb;

    border-radius: 38px;

    z-index: 3;

    --provider-shift: 0px;

    transform:
        translateY(
            var(--provider-shift)
        );

    transition:
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   ITEMS
========================================================= */

.provider-network__item {
    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 18px 0;

    opacity: 0;

    transform: translateX(-55px);

    transition:
        opacity 1.15s ease,
        transform 1.15s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* LÍNEA DIVISORIA */

.provider-network__item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 65px;
    right: 0;
    bottom: 0;

    border-bottom:
        1px dashed
        rgba(115, 176, 221, 0.75);
}


/* ITEM VISIBLE */

.provider-network__item.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   CHECK
========================================================= */

.provider-network__check {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;


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

    border-radius: 50%;

    background: #0c4668;

    color: #a9d3f3;

    font-size: 18px;
}


/* =========================================================
   TEXT
========================================================= */

.provider-network__item p {
    margin: 0;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;
	
	font-family: var(--font-body);

    color: #0c344c;
}


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

@media (max-width: 991px) {

    .provider-network {
        min-height: 760px;

        padding:
            65px
            35px
            90px;
    }


    .provider-network__header {
        gap: 25px;
    }


    .provider-network__icon {
        width: 65px;

        flex-basis: 65px;
    }


    .provider-network__header h2 {
        font-size: 36px;
    }


    .provider-network__intro {
        font-size: 18px;

        margin-bottom: 50px;
    }


    .provider-network__card {
        padding:
            35px
            40px;
    }


    .provider-network__item p {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .provider-network {
        min-height: auto;

        padding:
            55px
            22px
            80px;
    }


    .provider-network::after {
        height: 32%;
    }


    .provider-network__header {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 35px;
    }


    .provider-network__icon {
        width: 48px;

        flex-basis: 48px;
    }


    .provider-network__header h2 {
        font-size: 28px;
    }


    .provider-network__intro {
        margin-bottom: 40px;

        font-size: 16px;

        line-height: 1.55;
    }


    .provider-network__card {
        padding:
            25px
            24px;

        border-radius: 28px;
    }


    .provider-network__item {
        min-height: 75px;

        gap: 17px;
    }


    .provider-network__check {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 14px;
    }


    .provider-network__item p {
        font-size: 16px;
    }


    .provider-network__item:not(:last-child)::after {
        left: 49px;
    }

}

/* =========================================================
   AIR AMBULANCE
========================================================= */

.air-ambulance {
    position: relative;

    width: 100%;

    padding: 75px 30px 120px;

    background: #a9d3f3;

    overflow: hidden;
}


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

.air-ambulance::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 40%;

    background-image:
        url("../images/navigation-bottom-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.air-ambulance__container {
    position: relative;

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

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.air-ambulance__header {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-bottom: 45px;
}


.air-ambulance__icon {
    width: 78px;

    flex: 0 0 78px;
}


.air-ambulance__icon img {
    display: block;

    width: 100%;
    height: auto;
}


.air-ambulance__header h2 {
    margin: 0;

    font-size: clamp(34px, 3.5vw, 47px);

    font-weight: 700;

    line-height: 1.15;

    color: #0c344c;
}


/* =========================================================
   INTRO
========================================================= */

.air-ambulance__intro {
    max-width: 1080px;

    margin-bottom: 55px;
}


.air-ambulance__intro p {
    margin: 0 0 28px;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.45;

    color: #0c344c;
}


.air-ambulance__intro p:last-child {
    margin-bottom: 0;
}


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

.air-ambulance__card {
    position: relative;

    width: 100%;

    padding: 38px 50px;

    background: #e1f6eb;

    border-radius: 55px;

    z-index: 3;

    --air-shift: 0px;

    transform:
        translateY(
            var(--air-shift)
        );

    transition:
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   ITEMS
========================================================= */

.air-ambulance__item {
    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 18px 0;

    opacity: 0;

    transform: translateX(-55px);

    transition:
        opacity 1.15s ease,
        transform 1.15s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.air-ambulance__item.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* LINEAS */

.air-ambulance__item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 65px;
    right: 0;
    bottom: 0;

    border-bottom:
        1px dashed
        rgba(115, 176, 221, 0.75);
}


/* =========================================================
   CHECK
========================================================= */

.air-ambulance__check {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    background: #0c4668;

    color: #a9d3f3;

    font-size: 18px;
}


/* =========================================================
   TEXT
========================================================= */

.air-ambulance__item p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

    color: #0c344c;
}


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

@media (max-width: 991px) {

    .air-ambulance {
        padding:
            65px
            35px
            100px;
    }


    .air-ambulance__header {
        gap: 25px;
    }


    .air-ambulance__icon {
        width: 65px;

        flex-basis: 65px;
    }


    .air-ambulance__header h2 {
        font-size: 35px;
    }


    .air-ambulance__intro p {
        font-size: 18px;
    }


    .air-ambulance__card {
        padding:
            35px
            40px;
    }


    .air-ambulance__item p {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .air-ambulance {
        padding:
            55px
            22px
            80px;
    }


    .air-ambulance::after {
        height: 34%;
    }


    .air-ambulance__header {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 35px;
    }


    .air-ambulance__icon {
        width: 48px;

        flex-basis: 48px;
    }


    .air-ambulance__header h2 {
        font-size: 27px;

        line-height: 1.2;
    }


    .air-ambulance__intro {
        margin-bottom: 40px;
    }


    .air-ambulance__intro p {
        font-size: 16px;

        line-height: 1.55;
    }


    .air-ambulance__card {
        padding:
            25px
            24px;

        border-radius: 30px;
    }


    .air-ambulance__item {
        min-height: 75px;

        gap: 17px;
    }


    .air-ambulance__check {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 14px;
    }


    .air-ambulance__item p {
        font-size: 16px;
    }


    .air-ambulance__item:not(:last-child)::after {
        left: 49px;
    }

}

/* =========================================================
   TRANSPARENCY & REPORTING
========================================================= */

.transparency-reporting {
    position: relative;
    width: 100%;
    padding: 75px 30px 120px;
    background: #a9d3f3;
    overflow: hidden;
}


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

.transparency-reporting::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 38%;

    background-image:
        url("../images/navigation-bottom-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}


/* =========================================================
   CONTAINER
========================================================= */

.transparency-reporting__container {
    position: relative;

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

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.transparency-reporting__header {
    display: flex;

    align-items: center;

    gap: 35px;

    margin-bottom: 45px;
}


.transparency-reporting__icon {
    width: 78px;

    flex: 0 0 78px;
}


.transparency-reporting__icon img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


.transparency-reporting__header h2 {
    margin: 0;

    

    font-size: clamp(35px, 3.6vw, 48px);

    font-weight: 700;

    line-height: 1.15;

    color: #0c344c;
}


/* =========================================================
   INTRO
========================================================= */

.transparency-reporting__intro {
    max-width: 940px;

    margin: 0 0 60px;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.45;

    color: #0c344c;
}


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

.transparency-reporting__card {
    position: relative;

    width: 100%;

    padding: 38px 50px;

    background: #e1f6eb;

    border-radius: 55px;

    z-index: 3;

    --transparency-shift: 0px;

    transform:
        translateY(
            var(--transparency-shift)
        );

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   ITEMS
========================================================= */

.transparency-reporting__item {
    position: relative;

    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 28px;

    padding: 18px 0;

    opacity: 0;

    transform: translateX(-55px);

    transition:
        opacity 1.15s ease,
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}


.transparency-reporting__item.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* LÍNEAS */

.transparency-reporting__item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 65px;
    right: 0;
    bottom: 0;

    border-bottom:
        1px dashed rgba(115, 176, 221, 0.75);
}


/* =========================================================
   CHECK
========================================================= */

.transparency-reporting__check {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    background: #0c4668;

    color: #a9d3f3;

    font-size: 18px;
}


/* =========================================================
   TEXT
========================================================= */

.transparency-reporting__item p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

    color: #0c344c;
}


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

@media (max-width: 991px) {

    .transparency-reporting {
        padding:
            65px
            35px
            100px;
    }


    .transparency-reporting__header {
        gap: 25px;
    }


    .transparency-reporting__icon {
        width: 65px;

        flex-basis: 65px;
    }


    .transparency-reporting__header h2 {
        font-size: 35px;
    }


    .transparency-reporting__intro {
        font-size: 18px;

        margin-bottom: 50px;
    }


    .transparency-reporting__card {
        padding:
            35px
            40px;
    }


    .transparency-reporting__item p {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .transparency-reporting {
        padding:
            55px
            22px
            80px;
    }


    .transparency-reporting::after {
        height: 34%;
    }


    .transparency-reporting__header {
        align-items: flex-start;

        gap: 18px;

        margin-bottom: 35px;
    }


    .transparency-reporting__icon {
        width: 48px;

        flex-basis: 48px;
    }


    .transparency-reporting__header h2 {
        font-size: 28px;

        line-height: 1.2;
    }


    .transparency-reporting__intro {
        margin-bottom: 40px;

        font-size: 16px;

        line-height: 1.55;
    }


    .transparency-reporting__card {
        padding:
            25px
            24px;

        border-radius: 30px;
    }


    .transparency-reporting__item {
        min-height: 75px;

        gap: 17px;
    }


    .transparency-reporting__check {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 14px;
    }


    .transparency-reporting__item p {
        font-size: 16px;
    }


    .transparency-reporting__item:not(:last-child)::after {
        left: 49px;
    }

}

/* =========================================================
   WHO WE SERVE
========================================================= */

.who-we-serve {
    position: relative;

    width: 100%;
    min-height: 620px;

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

    padding: 90px 35px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.who-we-serve__container {
    position: relative;

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

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   TITLE
========================================================= */

.who-we-serve__container h2 {
    margin: 0 0 65px;

    text-align: center;

    

    font-size: clamp(58px, 6vw, 82px);

    font-weight: 700;

    line-height: 1;

    color: #0c344c;
}


/* =========================================================
   LIST
========================================================= */

.who-we-serve__list {
    width: 100%;

    max-width: 980px;

    margin: 0 auto;

    padding-left: 35px;

    

    font-size: clamp(24px, 2.5vw, 32px);

    font-weight: 700;

    line-height: 1.35;

    color: #0c344c;
}


.who-we-serve__list li {
    padding-left: 5px;
}


/* =========================================================
   DECORATIVE ICONS
========================================================= */

.who-we-serve__decor {
    position: absolute;

    width: 420px;

    z-index: 1;

    pointer-events: none;

    opacity: 0;
}


.who-we-serve__decor img {
    display: block;

    width: 100%;
    height: auto;

    opacity: 0.25;
}


/* =========================================================
   SUPERIOR IZQUIERDO
========================================================= */

.who-we-serve__decor--left {
    top: -55px;

    left: -220px;

    transform: translateX(-100px);
}


/* =========================================================
   INFERIOR DERECHO
========================================================= */

.who-we-serve__decor--right {
    right: -220px;

    bottom: -55px;

    transform: translateX(100px);
}


/* =========================================================
   ENTRADA + FLOTACIÓN
========================================================= */

.who-we-serve__decor--left.is-visible {
    animation:
        whoServeLeftIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        whoServeFloatLeft 7s ease-in-out 1.6s infinite alternate;
}


.who-we-serve__decor--right.is-visible {
    animation:
        whoServeRightIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        whoServeFloatRight 7.5s ease-in-out 1.6s infinite alternate;
}

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

@keyframes whoServeLeftIn {

    from {
        opacity: 0;

        transform:
            translateX(-100px)
            translateY(0);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0);
    }

}


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

@keyframes whoServeRightIn {

    from {
        opacity: 0;

        transform:
            translateX(100px)
            translateY(0);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0);
    }

}


/* =========================================================
   FLOTACIÓN IZQUIERDA
   Movimiento vertical + horizontal
========================================================= */

@keyframes whoServeFloatLeft {

    0% {
        transform: translate(0px, -25px);
    }

    20% {
        transform: translate(18px, -8px);
    }

    40% {
        transform: translate(28px, 20px);
    }

    60% {
        transform: translate(5px, 32px);
    }

    80% {
        transform: translate(-22px, 12px);
    }

    100% {
        transform: translate(-12px, -22px);
    }

}


/* =========================================================
   FLOTACIÓN DERECHA
   Movimiento contrario al izquierdo
========================================================= */

@keyframes whoServeFloatRight {

    0% {
        transform: translate(0px, 25px);
    }

    20% {
        transform: translate(-20px, 8px);
    }

    40% {
        transform: translate(-28px, -20px);
    }

    60% {
        transform: translate(-5px, -32px);
    }

    80% {
        transform: translate(22px, -10px);
    }

    100% {
        transform: translate(12px, 22px);
    }

}


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

@media (max-width: 991px) {

    .who-we-serve {
        min-height: 560px;

        padding: 80px 45px;
    }


    .who-we-serve__container h2 {
        margin-bottom: 55px;

        font-size: 62px;
    }


    .who-we-serve__list {
        font-size: 25px;
    }


    .who-we-serve__decor {
        width: 340px;
    }


    .who-we-serve__decor--left {
        left: -190px;
    }


    .who-we-serve__decor--right {
        right: -190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .who-we-serve {
        min-height: auto;

        padding: 75px 24px;
    }


    .who-we-serve__container h2 {
        margin-bottom: 45px;

        font-size: 46px;
    }


    .who-we-serve__list {
        padding-left: 24px;

        font-size: 19px;

        line-height: 1.5;
    }


    .who-we-serve__list li {
        margin-bottom: 10px;
    }


    .who-we-serve__decor {
        width: 240px;
    }


    .who-we-serve__decor--left {
        top: -30px;

        left: -155px;
    }


    .who-we-serve__decor--right {
        right: -155px;

        bottom: -30px;
    }

}

/* =========================================================
   PARTNERS LANDSCAPE IMAGE
========================================================= */

.partners-landscape-section {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    line-height: 0;
}


.partners-landscape-section__image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    object-position: center center;
}

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

@media (max-width: 991px) {

    .partners-landscape-section__image {
        height: 560px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partners-landscape-section__image {
        height: 460px;

        object-position: center center;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .partners-landscape-section__image {
        height: 400px;
    }

}

/* =========================================================
   THE CONDITIONS WE NAVIGATE
========================================================= */

.conditions-section {
    position: relative;

    width: 100%;

    padding: 80px 30px 95px;

    background: #0c344c;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.conditions-section__container {
    width: 100%;

    max-width: 1080px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.conditions-section__header {
    text-align: center;

    margin-bottom: 75px;
}


.conditions-section__header h2 {
    margin: 0 0 45px;

    

    font-size: clamp(56px, 6vw, 82px);

    font-weight: 700;

    line-height: 1;

    color: #e1f6eb;
}


.conditions-section__header p {
    max-width: 850px;

    margin: 0 auto;

    

    font-size: clamp(22px, 2.4vw, 31px);

    font-weight: 600;

    line-height: 1.35;

    color: #a9d3f3;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.conditions-table-wrap {
    width: 100%;

    overflow: hidden;

    border-radius: 70px;

    background: #a9d3f3;
}


/* =========================================================
   TABLE
========================================================= */

.conditions-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    

    color: #0c344c;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.conditions-table thead {
    background: #a9d3f3;
}


.conditions-table th {
    padding: 42px 55px;

    text-align: left;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.15;
}


.conditions-table th:first-child {
    width: 50%;
}


.conditions-table th:last-child {
    width: 50%;
}


/* =========================================================
   TABLE BODY
========================================================= */

.conditions-table td {
    padding: 26px 55px;

    vertical-align: top;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;
}


/* FILAS ALTERNADAS */

.conditions-table tbody tr:nth-child(odd) {
    background: #ffffff;
}


.conditions-table tbody tr:nth-child(even) {
    background: #a9d3f3;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.conditions-table td:first-child strong {
    font-weight: 700;
}


/* =========================================================
   TABLE BOTTOM
========================================================= */

.conditions-table tbody tr:last-child td {
    padding-bottom: 42px;
}


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

@media (max-width: 991px) {

    .conditions-section {
        padding:
            70px
            35px
            85px;
    }


    .conditions-section__header {
        margin-bottom: 60px;
    }


    .conditions-section__header h2 {
        margin-bottom: 35px;

        font-size: 60px;
    }


    .conditions-section__header p {
        font-size: 24px;
    }


    .conditions-table-wrap {
        border-radius: 50px;
    }


    .conditions-table th {
        padding:
            34px
            38px;

        font-size: 24px;
    }


    .conditions-table td {
        padding:
            24px
            38px;

        font-size: 18px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .conditions-section {
        padding:
            60px
            20px
            70px;
    }


    .conditions-section__header {
        margin-bottom: 45px;
    }


    .conditions-section__header h2 {
        margin-bottom: 30px;

        font-size: 44px;

        line-height: 1.05;
    }


    .conditions-section__header p {
        font-size: 19px;

        line-height: 1.45;
    }


    .conditions-table-wrap {
        border-radius: 32px;

        overflow-x: auto;
    }


    .conditions-table {
        min-width: 680px;
    }


    .conditions-table th {
        padding:
            28px
            28px;

        font-size: 21px;
    }


    .conditions-table td {
        padding:
            22px
            28px;

        font-size: 16px;

        line-height: 1.4;
    }

}

/* =========================================================
   NAVIGATOR ASSIGNMENT MODEL
========================================================= */

.navigator-model {
    position: relative;

    width: 100%;
    min-height: 820px;

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

    padding: 85px 30px;

    background: #0c344c;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.navigator-model__container {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.navigator-model__title {
    margin: 0 0 65px;

    

    font-size: clamp(58px, 6vw, 82px);

    font-weight: 700;

    line-height: 1.08;

    color: #e1f6eb;
}


/* =========================================================
   BODY TEXT
========================================================= */

.navigator-model__text {
    max-width: 950px;

    margin: 0 auto 42px;

    

    font-size: clamp(22px, 2.2vw, 30px);

    font-weight: 500;

    line-height: 1.35;

    color: #a9d3f3;
}


.navigator-model__text strong {
    color: #e1f6eb;

    font-weight: 700;
}


/* =========================================================
   SOURCE
========================================================= */

.navigator-model__source {
    margin: 75px 0 0;

    

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    color: #a9d3f3;
}


/* =========================================================
   INITIAL STATE
========================================================= */

.navigator-model-reveal {
    opacity: 0;

    transform: scale(0.92);

    transition:
        opacity 1.15s ease,
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   VISIBLE
========================================================= */

.navigator-model-reveal.is-visible {
    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   LEAVING
========================================================= */

.navigator-model.is-leaving
.navigator-model-reveal {
    opacity: 0 !important;

    transform: scale(0.94) !important;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


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

@media (max-width: 991px) {

    .navigator-model {
        min-height: 720px;

        padding: 75px 40px;
    }


    .navigator-model__title {
        margin-bottom: 55px;

        font-size: 62px;
    }


    .navigator-model__text {
        font-size: 24px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .navigator-model {
        min-height: auto;

        padding: 70px 22px;
    }


    .navigator-model__title {
        margin-bottom: 45px;

        font-size: 44px;
    }


    .navigator-model__text {
        margin-bottom: 35px;

        font-size: 19px;

        line-height: 1.5;
    }


    .navigator-model__source {
        margin-top: 55px;

        font-size: 13px;
    }

}

/* =========================================================
   PARTNERS TALK CTA
========================================================= */

.partners-talk {
    position: relative;

    width: 100%;
    min-height: 700px;

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

    padding: 85px 30px;

    background-image:
        url("../images/partners-talk-bg.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.partners-talk__container {
    position: relative;

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

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


/* =========================================================
   TITLE
========================================================= */

.partners-talk h2 {
    margin: 0 0 45px;

    

    font-size: clamp(32px, 3.2vw, 43px);

    font-weight: 700;

    line-height: 1.2;

    color: #0c344c;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.partners-talk__description {
    max-width: 850px;

    margin: 0 auto 75px;

    

    font-size: clamp(19px, 2vw, 25px);

    font-weight: 600;

    line-height: 1.35;

    color: #0c344c;
}


/* =========================================================
   RESPONSE
========================================================= */

.partners-talk__response {
    margin: 0 0 50px;

    

    font-size: clamp(27px, 2.8vw, 36px);

    font-weight: 600;

    line-height: 1.2;

    color: #0c344c;
}


/* =========================================================
   BUTTON
========================================================= */

.partners-talk__button-wrap {
    display: flex;

    justify-content: center;
}


.partners-talk__button {
    min-width: 310px;

    display: inline-flex;

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

    padding: 22px 42px;

    border-radius: 60px;

    background: #0c344c;

    color: #e1f6eb;

    

    font-size: 24px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 0.55s ease,
        color 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.partners-talk__button:hover {
    background: #73b0dd;

    color: #0c344c;

    transform: translateY(-5px);
}


/* =========================================================
   FADE IN
========================================================= */

.partners-talk-reveal {
    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity 1.25s ease,
        transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}


.partners-talk-reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 991px) {

    .partners-talk {
        min-height: 620px;

        padding: 75px 40px;
    }


    .partners-talk__description {
        margin-bottom: 60px;
    }


    .partners-talk__response {
        margin-bottom: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .partners-talk {
        min-height: auto;

        padding: 70px 22px;

        background-position: center center;
    }


    .partners-talk h2 {
        margin-bottom: 35px;

        font-size: 30px;
    }


    .partners-talk__description {
        margin-bottom: 50px;

        font-size: 18px;

        line-height: 1.5;
    }


    .partners-talk__response {
        margin-bottom: 40px;

        font-size: 26px;
    }


    .partners-talk__button {
        min-width: 0;

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

        padding: 20px 28px;

        font-size: 21px;
    }

}

/* =========================================================
   ICONOS DECORATIVOS
========================================================= */

.priority-intro-icon {
    position: absolute;

    width: 250px;
    height: auto;

    opacity: 0.20;

    pointer-events: none;

    z-index: 1;
}


/* ICONO SUPERIOR IZQUIERDO */

.priority-intro-icon--top {
    top: 25px;
    left: 25px;
}


/* ICONO INFERIOR DERECHO */

.priority-intro-icon--bottom {
    right: 25px;
    bottom: 25px;
}


/* EL CONTENIDO DEBE QUEDAR ENCIMA */

.priority-intro-container {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {

    .priority-intro-icon {
        width: 150px;
        opacity: 0.15;
    }

    .priority-intro-icon--top {
        top: 15px;
        left: -35px;
    }

    .priority-intro-icon--bottom {
        right: -35px;
        bottom: 15px;
    }

}

.priority-intro-icon--top {
    animation: priorityIconTop 7s ease-in-out infinite alternate;
}

.priority-intro-icon--bottom {
    animation: priorityIconBottom 8s ease-in-out infinite alternate;
}


@keyframes priorityIconTop {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(15px, 18px);
    }

}


@keyframes priorityIconBottom {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-15px, -18px);
    }

}

/* =========================================================
   CONTACT - COLOR EXCLUSIVO HAMBURGUESA
========================================================= */

.site-header-contact .menu-toggle .menu-line-one,
.site-header-contact .menu-toggle .menu-line-two,
.site-header-contact .menu-toggle .menu-line-three {
    background: #0c344c;
}


/* =========================================================
   CONTACT - X AL ABRIR MENU
========================================================= */

.site-header-contact .menu-toggle.active .menu-line-one,
.site-header-contact .menu-toggle.active .menu-line-three {
    background: #0c344c;
}

/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {

    position: relative;

    width: 100%;
    min-height: 760px;

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

    padding:
        170px
        40px
        100px;

    box-sizing: border-box;

    background: #dff7e9;

    overflow: hidden;
}


/* =========================================================
   CONTENT
========================================================= */

.contact-hero-content {

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

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.contact-hero-title {

    margin:
        0
        0
        65px;

    font-family: var(--font-main);

    font-size: 78px;
    font-weight: 700;

    line-height: 88px;

    color: #0c344c;

    opacity: 0;

    transform: scale(0.93);

    animation:
        contactZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        forwards;
}


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

.contact-hero-text {

    margin: 0;

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 700;

    line-height: 46px;

    color: #0c344c;

    opacity: 0;

    transform: scale(0.94);

    animation:
        contactZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.35s
        forwards;
}


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

.contact-hero-location {

    margin:
        5px
        0
        0;

    font-family: var(--font-main);

    font-size: 34px;
    font-weight: 700;

    line-height: 46px;

    color: #73b0dd;

    opacity: 0;

    transform: scale(0.94);

    animation:
        contactZoomIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.55s
        forwards;
}


/* =========================================================
   ZOOM IN
========================================================= */

@keyframes contactZoomIn {

    0% {
        opacity: 0;
        transform: scale(0.93);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


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

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

    .contact-hero {

        min-height: 680px;

        padding:
            150px
            35px
            85px;
    }


    .contact-hero-content {

        max-width: 850px;
    }


    .contact-hero-title {

        margin-bottom: 52px;

        font-size: 62px;
        line-height: 72px;
    }


    .contact-hero-text {

        font-size: 28px;
        line-height: 40px;
    }


    .contact-hero-location {

        margin-top: 5px;

        font-size: 28px;
        line-height: 40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .contact-hero {

        min-height: 600px;

        padding:
            125px
            25px
            70px;
    }


    .contact-hero-content {

        max-width: 550px;
    }


    .contact-hero-title {

        margin-bottom: 42px;

        font-size: 48px;
        line-height: 56px;
    }


    .contact-hero-text {

        font-size: 22px;
        line-height: 32px;
    }


    .contact-hero-location {

        margin-top: 10px;

        font-size: 22px;
        line-height: 32px;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

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

    .contact-hero {

        min-height: 560px;

        padding:
            115px
            22px
            65px;
    }


    .contact-hero-title {

        margin-bottom: 38px;

        font-size: 42px;
        line-height: 50px;
    }


    .contact-hero-text {

        font-size: 20px;
        line-height: 30px;
    }


    .contact-hero-location {

        margin-top: 10px;

        font-size: 20px;
        line-height: 30px;
    }

}

/* =========================================================
   CONTACT PATHS SECTION
========================================================= */

.contact-paths-section {

    position: relative;

    width: 100%;

    padding: 120px 0 40px;

    background: #ffffff;

    overflow: hidden;

}


/* =========================================================
   HEADER
========================================================= */

.contact-paths-header {

    width: 100%;

    max-width: 900px;

    margin: 0 auto 110px;

    padding: 0 25px;

    text-align: center;

}


.contact-paths-header h2 {

    margin: 0 0 60px;

    font-size: clamp(50px, 5vw, 72px);

    font-weight: 800;

    line-height: 1;

    color: #0c344c;

}


.contact-paths-header p {

    margin: 0;

    font-size: 31px;

    font-weight: 700;

    color: #73b0dd;

}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.contact-paths-layout {
    position: relative;
    width: 100%;

    display: grid;

    grid-template-columns:
        560px
        minmax(0, 1fr);

    align-items: center;

    column-gap: 0;
}


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

.contact-paths-icon {
    position: relative;

    width: 650px;
    max-width: none;

    margin-left: -120px;

    justify-self: start;

    z-index: 2;

    opacity: 0;

    transform: translateX(-140px);

    transition:
        opacity 1.8s ease,
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.contact-paths-icon.is-visible {
    opacity: 1;

    /* Conservamos el margin-left para dejarlo cortado */
    transform: translateX(0);
}


.contact-paths-icon img {
    display: block;

    width: 1040px;
    max-width: none;

    height: auto;

    object-fit: contain;
}

/* =========================================================
   LISTA DE FRANJAS
========================================================= */

.contact-paths-list {
    position: relative;

    width: 100%;

    /* MISMA ALTURA VISUAL DEL ICONO */
    height: 650px;

    margin-left: -35px;
}



/* =========================================================
   ITEM
========================================================= */

.contact-path-item {
    position: absolute;

    left: 0;

    width: 100%;
}

/* =========================================================
   BARRA 1
   Alineada con rayita superior
========================================================= */

.contact-path-item:nth-child(1) {
    top: -200px;

    /* Se mueve hacia la izquierda */
    left: 270px;
	
}


/* =========================================================
   BARRA 2
   Alineada con rayita central
========================================================= */

.contact-path-item:nth-child(2) {
    top: 259px;

    /* Se mueve hacia la derecha */
    left: 425px;
}

/* =========================================================
   BARRA 3
   Alineada con rayita inferior
========================================================= */

.contact-path-item:nth-child(3) {
    top: 737px;

    /* Se mueve hacia la izquierda */
    left: 270px;
}

/* =========================================================
   FRANJAS
========================================================= */

.contact-path-strip {
    position: relative;

    width: 100%;

    min-height: 70px;

    display: flex;

    align-items: center;

    padding: 14px 35px;

    background: #e1f6eb;

    border-radius:
        60px
        0
        0
        60px;

    opacity: 0;

    transform: translateX(160px);

    transition:
        opacity 1.5s ease,
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}


.contact-path-strip.is-visible {
    opacity: 1;
    transform: translateX(0);
}



/* =========================================================
   TEXTO DE CADA FRANJA
========================================================= */

.contact-path-text {

    position: relative;

    display: inline-block;

    font-size: 35px;

    font-weight: 700;

    line-height: 1.15;

    color: #0c344c;

    opacity: 0;

    transform: translateX(-70px);

    transition:
        opacity 1.3s ease,
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);

}


.contact-path-text.is-visible {

    opacity: 1;

    transform: translateX(0);

}



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

.contact-paths-consent {

    width: 100%;

    max-width: 800px;

    margin:
        90px
        auto
        0;

    padding:
        0
        25px;

    text-align: center;

    font-family: var(--font-body);

    font-size: 22px;

    font-weight: 200;

    color: #0c344c;

}


/* =========================================================
   CONTACT PATHS - TABLET / PANTALLAS MEDIANAS
   Mantiene el diseño horizontal
========================================================= */

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

    .contact-paths-section {
        padding: 60px 0 45px;
        overflow: hidden;
    }


    .contact-paths-header {
        margin-bottom: 60px;
        padding: 0 30px;
    }


    .contact-paths-header h2 {
        font-size: clamp(46px, 6vw, 62px);
    }


    .contact-paths-header p {
        font-size: 22px;
    }


    /* ==========================================
       ICONO + BARRAS SIGUEN LADO A LADO
    ========================================== */

    .contact-paths-layout {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(370px, 46%)
            minmax(0, 1fr);

        align-items: center;

        column-gap: 0;
    }


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

    .contact-paths-icon {
        width: 520px;
        max-width: none;

        margin-left: -100px;

        justify-self: start;
    }


    .contact-paths-icon img {
        width: 780px;
        max-width: none;
        height: auto;
    }


    /* ==========================================
       CONTENEDOR DE BARRAS
    ========================================== */

    .contact-paths-list {
        position: relative;

        width: 100%;

        height: 520px;

        margin-left: -25px;
    }


    /* ==========================================
       POSICIONES VERTICALES
    ========================================== */

    .contact-path-item {
        position: absolute;

        width: 100%;
    }


    /* SUPERIOR */
    .contact-path-item:nth-child(1) {
        top: -112px;
        left: 75px;
    }


    /* CENTRAL */
    .contact-path-item:nth-child(2) {
        top: 213px;
        left: 195px;
    }


    /* INFERIOR */
    .contact-path-item:nth-child(3) {
        top: 550px;
        left: 75px;
    }


    /* ==========================================
       BARRAS
    ========================================== */

    .contact-path-strip {
        min-height: 68px;

        padding: 13px 30px;
    }


    .contact-path-text {
        font-size: clamp(20px, 2.4vw, 25px);
    }


    .contact-paths-consent {
        margin-top: 65px;
    }

}


/* =========================================================
   CONTACT PATHS - MOBILE
========================================================= */

@media (max-width: 767px) {

    .contact-paths-section {
        width: 100%;

        padding: 55px 0 40px;

        overflow: hidden;
    }


    /* ==========================================
       HEADER
    ========================================== */

    .contact-paths-header {
        width: 100%;

        margin: 0 auto 50px;

        padding: 0 22px;

        text-align: center;
    }


    .contact-paths-header h2 {
        margin-bottom: 18px;

        font-size: 42px;

        line-height: 1.05;
    }


    .contact-paths-header p {
        font-size: 18px;
    }


    /* ==========================================
       LAYOUT VERTICAL
    ========================================== */

    .contact-paths-layout {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 55px;
    }


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

    .contact-paths-icon {
        position: relative;

        width: 320px;
        max-width: 82vw;

        margin: 0 auto;

        justify-self: auto;
    }


    .contact-paths-icon img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    /* Rotación solo en celular */
    transform: rotate(-90deg);

    transform-origin: center center;
}


    /* ==========================================
       BARRAS DEBAJO
    ========================================== */

    .contact-paths-list {
        position: relative;

        width: 100%;

        height: auto;

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        gap: 24px;
    }


    /* IMPORTANTÍSIMO:
       anulamos el posicionamiento de desktop
    */

    .contact-path-item,
    .contact-path-item:nth-child(1),
    .contact-path-item:nth-child(2),
    .contact-path-item:nth-child(3) {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        transform: none;

        margin: 0;
    }


    /* ==========================================
       BARRA
    ========================================== */

    .contact-path-strip {
        width: calc(100% - 30px);

        min-height: 68px;

        margin-left: 30px;

        padding: 14px 24px;

        border-radius:
            34px
            0
            0
            34px;
    }


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

    .contact-path-text {
        font-size: 20px;

        line-height: 1.15;
    }


    /* ==========================================
       CONSENTIMIENTO
    ========================================== */

    .contact-paths-consent {
        max-width: 90%;

        margin: 50px auto 0;

        padding: 0 15px;

        font-size: 13px;

        line-height: 1.5;
    }

}

/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .contact-paths-header h2 {
        font-size: 36px;
    }


    .contact-paths-header p {
        font-size: 17px;
    }


    .contact-paths-icon {
        width: 280px;
        max-width: 78vw;
    }


    .contact-paths-layout {
        gap: 45px;
    }


    .contact-paths-list {
        gap: 20px;
    }


    .contact-path-strip {
        width: calc(100% - 20px);

        margin-left: 20px;

        min-height: 62px;

        padding: 12px 20px;
    }


    .contact-path-text {
        font-size: 18px;
    }

}

/* =========================================================
   CONTACT IMAGE SECTION
========================================================= */

.contact-image-section {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    line-height: 0;
}


.contact-image-section__image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: cover;
}

/* TABLET */
@media (max-width: 991px) {

    .contact-image-section__image {
        height: 500px;
    }

}


/* MOBILE */
@media (max-width: 767px) {

    .contact-image-section__image {
        height: 420px;

        object-position: center center;
    }

}

/* =========================================================
   CORPORATE DISCLOSURE
========================================================= */

.corporate-disclosure {
    position: relative;

    width: 100%;

    min-height: 480px;

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

    padding: 80px 25px;

    overflow: hidden;

    /* IMAGEN DE FONDO */
    background-image: url("../images/corporate-disclosure-bg.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


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

.corporate-disclosure__content {
    position: relative;

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

    margin: 0 auto;

    text-align: center;

    z-index: 2;
}


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

.corporate-disclosure__title {
    margin: 0 0 55px;

    

    font-size: clamp(52px, 5vw, 76px);

    font-weight: 800;

    line-height: 1;

    color: #0c344c;
}


/* =========================================================
   TEXTOS
========================================================= */

.corporate-disclosure__text {
    width: 100%;

    max-width: 900px;

    margin: 0 auto;
}


.corporate-disclosure__text p {
    margin: 0;

    font-family:  var(--font-body);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.45;

    color: #0c344c;
}


.corporate-disclosure__highlight {
    font-weight: 700 !important;
}


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

@media (max-width: 991px) {

    .corporate-disclosure {
        min-height: 420px;

        padding: 70px 30px;

        background-position: center center;
    }


    .corporate-disclosure__title {
        margin-bottom: 45px;

        font-size: 56px;
    }


    .corporate-disclosure__text p {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .corporate-disclosure {
        min-height: 400px;

        padding: 60px 22px;

        background-position: center center;
    }


    .corporate-disclosure__title {
        margin-bottom: 35px;

        font-size: 42px;

        line-height: 1.05;
    }


    .corporate-disclosure__text {
        max-width: 520px;
    }


    .corporate-disclosure__text p {
        font-size: 16px;

        line-height: 1.5;
    }

}

/* =========================================================
   LEGAL NOTICES
========================================================= */

.legal-notices-section {
    position: relative;

    width: 100%;

    padding: 75px 25px 100px;

    background: #b3d7f8;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.legal-notices-container {
    position: relative;

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

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.legal-notices-header {
    text-align: center;

    margin-bottom: 55px;
}


.legal-notices-header h2 {
    margin: 0;

    

    font-size: clamp(48px, 5vw, 68px);

    font-weight: 800;

    line-height: 1;

    color: #0c344c;
}


/* =========================================================
   NOTICE BLOCKS
========================================================= */

.legal-notice-block {
    position: relative;

    width: 100%;

    margin-bottom: 65px;
}


.legal-notice-block:last-child {
    margin-bottom: 0;
}


.legal-notice-block h3 {
    margin: 0 0 22px;

    

    font-size: 32px;

    font-weight: 700;

    line-height: 1.1;

    color: #0c344c;
}


.legal-notice-block p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 18px;

    font-weight: 400;

    line-height: 1.55;

    color: #0c344c;
}


/* =========================================================
   DECORATIVE ICONS
========================================================= */

.legal-decoration {
    position: absolute;

    z-index: 1;

    opacity: 0;

    pointer-events: none;
}


/* SUPERIOR IZQUIERDO */
.legal-decoration--left {
    width: 800px;
	height: 800px;
    left: -260px;
    top: 18px;

    transform: translateX(-130px);
}


/* INFERIOR DERECHO */
.legal-decoration--right {
    width: 800px;
	height: 800px;
    right: -210px;
    bottom: 29px;

    transform: translateX(130px);
}


/* IMAGEN */
.legal-decoration img {
    display: block;

    width: 100%;
    height: auto;

    opacity: 0.12;
}


/* =========================================================
   ANIMACIONES DE ENTRADA
========================================================= */

.legal-decoration--left.is-visible {
    animation:
        legalFadeLeft 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        legalFloatLeft 6s ease-in-out 1.8s infinite alternate;
}


.legal-decoration--right.is-visible {
    animation:
        legalFadeRight 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        legalFloatRight 6s ease-in-out 1.8s infinite alternate;
}


/* =========================================================
   FADE LEFT
========================================================= */

@keyframes legalFadeLeft {

    from {
        opacity: 0;
        transform: translateX(-130px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   FADE RIGHT
========================================================= */

@keyframes legalFadeRight {

    from {
        opacity: 0;
        transform: translateX(130px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   FLOATING
========================================================= */

@keyframes legalFloatLeft {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }

}


@keyframes legalFloatRight {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }

}


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

@media (max-width: 991px) {

    .legal-notices-section {
        padding: 70px 40px 90px;
    }


    .legal-notices-container {
        max-width: 780px;
    }


    .legal-notice-block {
        margin-bottom: 55px;
    }


    .legal-notice-block h3 {
        font-size: 24px;
    }


    .legal-notice-block p {
        font-size: 14px;
    }


    .legal-decoration--left,
    .legal-decoration--right {
        width: 600px;
        height: 600px;
    }


    .legal-decoration--left {
        left: -190px;
    }


    .legal-decoration--right {
        right: -190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .legal-notices-section {
        padding: 60px 24px 75px;
    }


    .legal-notices-header {
        margin-bottom: 45px;
    }


    .legal-notices-header h2 {
        font-size: 42px;
    }


    .legal-notice-block {
        margin-bottom: 48px;
    }


    .legal-notice-block h3 {
        margin-bottom: 16px;

        font-size: 22px;
    }


    .legal-notice-block p {
        font-size: 14px;

        line-height: 1.6;
    }


    .legal-decoration--left,
    .legal-decoration--right {
        width: 400px;
		height: 400px;
    }


    .legal-decoration--left {
        left: -113px;
        top: 260px;
    }


    .legal-decoration--right {
        right: -179px;
        bottom: 167px;
    }

}