/* =========================================================
   IA CONSCIENTE
   Navbar + Hero
   Dirección visual:
   Institucional universitaria + Salud y bienestar
========================================================= */


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

:root {

    /* Azul institucional */
    --navy-950: #071827;
    --navy-900: #0b2239;
    --navy-800: #123654;
    --navy-700: #1d4f73;

    /* Celestes */
    --sky-500: #5aa8d8;
    --sky-400: #78b9e0;
    --sky-200: #cfe8f6;
    --sky-100: #eaf6fc;
    --sky-50: #f5fbfe;

    /* Neutros */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-900: #0f172a;

    /* Layout */
    --container-width: 1220px;

    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* Sombras */
    --shadow-sm:
        0 6px 20px rgba(7, 24, 39, 0.06);

    --shadow-md:
        0 20px 48px rgba(7, 24, 39, 0.10);

    --shadow-lg:
        0 30px 70px rgba(7, 24, 39, 0.14);

    /* Transición */
    --transition:
        180ms ease;
}


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

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background:
        var(--white);

    color:
        var(--gray-700);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    line-height:
        1.6;

    -webkit-font-smoothing:
        antialiased;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


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

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid rgba(226, 232, 240, 0.9);

    backdrop-filter:
        blur(14px);

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

    transition:
        box-shadow var(--transition),
        background var(--transition);
}


.site-header.scrolled {
    background:
        rgba(255, 255, 255, 0.985);

    box-shadow:
        0 7px 26px rgba(7, 24, 39, 0.06);
}


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

.header-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    min-height:
        78px;

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        34px;
}


/* =========================================================
   IDENTIDAD
========================================================= */

.site-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

    text-decoration:
        none;
}


.brand-symbol {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--navy-900);

    border-radius:
        10px;

    color:
        var(--white);

    font-size:
        1rem;

    box-shadow:
        0 7px 18px rgba(11, 34, 57, 0.12);
}


.brand-content {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.12;
}


.brand-content strong {
    color:
        var(--navy-950);

    font-size:
        1.02rem;

    font-weight:
        700;

    letter-spacing:
        -0.02em;
}


.brand-content small {
    margin-top:
        4px;

    color:
        var(--gray-500);

    font-size:
        0.66rem;

    font-weight:
        500;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.main-navigation {
    display:
        flex;

    align-items:
        center;
}


.navigation-list {
    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    list-style:
        none;
}


.navigation-list > li {
    position:
        relative;
}


.navigation-link,
.navigation-more-button {
    min-height:
        42px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    background:
        transparent;

    border:
        none;

    color:
        var(--gray-600);

    text-decoration:
        none;

    font-size:
        0.82rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        color var(--transition),
        background var(--transition);
}


.navigation-link:hover,
.navigation-link.active,
.navigation-more-button:hover {
    color:
        var(--navy-900);
}


.navigation-link::after {
    content:
        "";

    position:
        absolute;

    left:
        11px;

    right:
        11px;

    bottom:
        4px;

    height:
        2px;

    background:
        var(--sky-500);

    border-radius:
        999px;

    transform:
        scaleX(0);

    transition:
        transform var(--transition);
}


.navigation-link:hover::after,
.navigation-link.active::after {
    transform:
        scaleX(1);
}


/* =========================================================
   DROPDOWN "MÁS"
========================================================= */

.navigation-more-button i {
    font-size:
        0.64rem;

    transition:
        transform var(--transition);
}


.navigation-more.open .navigation-more-button i {
    transform:
        rotate(180deg);
}


.navigation-dropdown {
    position:
        absolute;

    top:
        calc(100% + 9px);

    right:
        0;

    width:
        220px;

    padding:
        8px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    list-style:
        none;

    background:
        var(--white);

    border:
        1px solid var(--gray-200);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-md);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-7px);

    pointer-events:
        none;

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}


.navigation-more.open .navigation-dropdown {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


.navigation-dropdown a {
    min-height:
        42px;

    padding:
        0 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--gray-600);

    border-radius:
        8px;

    text-decoration:
        none;

    font-size:
        0.78rem;

    font-weight:
        500;

    transition:
        background var(--transition),
        color var(--transition);
}


.navigation-dropdown a i {
    width:
        17px;

    color:
        var(--sky-500);
}


.navigation-dropdown a:hover {
    background:
        var(--sky-50);

    color:
        var(--navy-900);
}


/* =========================================================
   MENÚ MÓVIL
========================================================= */

.mobile-menu-button {
    width:
        44px;

    height:
        44px;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        1px solid var(--gray-200);

    background:
        var(--white);

    border-radius:
        9px;

    cursor:
        pointer;
}


.mobile-menu-button span {
    width:
        19px;

    height:
        2px;

    display:
        block;

    background:
        var(--navy-900);

    border-radius:
        999px;

    transition:
        transform var(--transition),
        opacity var(--transition);
}


.mobile-menu-button.open span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-button.open span:nth-child(2) {
    opacity:
        0;
}


.mobile-menu-button.open span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.hero {
    position:
        relative;

    min-height:
        100vh;

    padding-top:
        78px;

    display:
        flex;

    flex-direction:
        column;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );

    overflow:
        hidden;
}


/* Fondo muy suave */

.hero::before {
    content:
        "";

    position:
        absolute;

    width:
        620px;

    height:
        620px;

    top:
        120px;

    right:
        -260px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(90, 168, 216, 0.10) 0%,
            rgba(90, 168, 216, 0.025) 50%,
            transparent 70%
        );

    pointer-events:
        none;
}


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

.hero-container {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    flex:
        1;

    margin-inline:
        auto;

    padding:
        72px 0 64px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);

    align-items:
        center;

    gap:
        82px;
}


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

.hero-content {
    max-width:
        680px;
}


.hero-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        22px;

    color:
        var(--navy-700);

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.hero-eyebrow-line {
    width:
        28px;

    height:
        2px;

    background:
        var(--sky-500);

    border-radius:
        999px;
}


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

.hero-title {
    max-width:
        700px;

    color:
        var(--navy-950);

    font-size:
        clamp(
            3rem,
            5.6vw,
            5.3rem
        );

    font-weight:
        700;

    line-height:
        1.01;

    letter-spacing:
        -0.055em;
}


.hero-title span {
    display:
        block;

    margin-top:
        8px;

    color:
        var(--navy-700);

    font-weight:
        600;
}


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

.hero-description {
    max-width:
        590px;

    margin-top:
        26px;

    color:
        var(--gray-600);

    font-size:
        1.04rem;

    line-height:
        1.8;
}


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

.hero-actions {
    margin-top:
        31px;
}


.hero-primary-button {
    min-height:
        50px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        var(--navy-900);

    color:
        var(--white);

    border:
        1px solid var(--navy-900);

    border-radius:
        var(--radius-sm);

    text-decoration:
        none;

    font-size:
        0.86rem;

    font-weight:
        600;

    box-shadow:
        0 10px 24px rgba(11, 34, 57, 0.12);

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.hero-primary-button:hover {
    background:
        var(--navy-700);

    border-color:
        var(--navy-700);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px rgba(29, 79, 115, 0.15);
}


.hero-primary-button i {
    font-size:
        0.76rem;
}


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

.hero-topics {
    margin-top:
        46px;

    padding-top:
        24px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        11px;

    border-top:
        1px solid var(--gray-200);

    color:
        var(--gray-500);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.hero-topic-separator {
    width:
        4px;

    height:
        4px;

    background:
        var(--sky-400);

    border-radius:
        50%;
}


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

.hero-media {
    position:
        relative;

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;
}


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

.hero-image-wrapper {
    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 470px);

    height:
        530px;

    overflow:
        hidden;

    border-radius:
        0 0 0 70px;

    box-shadow:
        var(--shadow-lg);

    background:
        var(--gray-100);
}


.hero-image-wrapper::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(7, 24, 39, 0.20),
            transparent 48%
        );

    pointer-events:
        none;
}


.hero-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 0.7s ease;
}


.hero-image-wrapper:hover .hero-image {
    transform:
        scale(1.025);
}


/* =========================================================
   CAPTION SOBRE IMAGEN
========================================================= */

.hero-media-caption {
    position:
        absolute;

    z-index:
        4;

    left:
        -28px;

    bottom:
        36px;

    width:
        min(92%, 365px);

    padding:
        18px;

    display:
        flex;

    gap:
        14px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid rgba(226, 232, 240, 0.95);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(10px);

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


.media-caption-number {
    flex-shrink:
        0;

    color:
        var(--sky-500);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.hero-media-caption strong {
    display:
        block;

    color:
        var(--navy-950);

    font-size:
        0.83rem;

    font-weight:
        700;

    line-height:
        1.4;
}


.hero-media-caption p {
    margin-top:
        5px;

    color:
        var(--gray-500);

    font-size:
        0.70rem;

    line-height:
        1.55;
}


/* =========================================================
   DETALLE VISUAL
========================================================= */

.hero-media-accent {
    position:
        absolute;

    z-index:
        1;

    width:
        200px;

    height:
        200px;

    right:
        -35px;

    top:
        14px;

    border:
        1px solid var(--sky-200);

    border-radius:
        50%;
}


.hero-media-accent::before {
    content:
        "";

    position:
        absolute;

    width:
        14px;

    height:
        14px;

    top:
        26px;

    left:
        25px;

    border-radius:
        50%;

    background:
        var(--sky-500);

    box-shadow:
        0 0 0 7px rgba(90, 168, 216, 0.12);
}


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

.hero-footer {
    position:
        relative;

    z-index:
        3;

    border-top:
        1px solid var(--gray-200);

    background:
        rgba(255, 255, 255, 0.82);
}


.hero-footer-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    min-height:
        72px;

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.hero-footer p {
    color:
        var(--gray-500);

    font-size:
        0.75rem;
}


.hero-footer a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--navy-700);

    text-decoration:
        none;

    font-size:
        0.75rem;

    font-weight:
        600;

    transition:
        color var(--transition),
        transform var(--transition);
}


.hero-footer a:hover {
    color:
        var(--navy-950);

    transform:
        translateY(2px);
}


/* =========================================================
   PLACEHOLDER TEMPORAL
========================================================= */

.next-section-placeholder {
    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--sky-50);

    color:
        var(--gray-500);

    border-top:
        1px solid var(--gray-200);
}


/* =========================================================
   RESPONSIVE - 1080
========================================================= */

@media (max-width: 1080px) {

    .brand-content small {
        display:
            none;
    }


    .navigation-link,
    .navigation-more-button {
        padding:
            0 8px;

        font-size:
            0.77rem;
    }


    .navigation-link::after {
        left:
            8px;

        right:
            8px;
    }


    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.8fr);

        gap:
            50px;
    }


    .hero-image-wrapper {
        height:
            500px;
    }

}


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

@media (max-width: 880px) {

    .header-container {
        min-height:
            70px;
    }


    .mobile-menu-button {
        display:
            flex;
    }


    .main-navigation {
        position:
            absolute;

        top:
            70px;

        left:
            20px;

        right:
            20px;

        display:
            block;

        padding:
            14px;

        background:
            var(--white);

        border:
            1px solid var(--gray-200);

        border-radius:
            0 0 14px 14px;

        box-shadow:
            var(--shadow-md);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-8px);

        pointer-events:
            none;

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);
    }


    .main-navigation.open {
        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

        pointer-events:
            auto;
    }


    .navigation-list {
        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            2px;
    }


    .navigation-link,
    .navigation-more-button {
        width:
            100%;

        min-height:
            45px;

        padding:
            0 11px;

        justify-content:
            flex-start;

        border-radius:
            7px;

        font-size:
            0.82rem;
    }


    .navigation-link::after {
        display:
            none;
    }


    .navigation-link:hover,
    .navigation-link.active,
    .navigation-more-button:hover {
        background:
            var(--sky-50);
    }


    .navigation-more {
        width:
            100%;
    }


    .navigation-dropdown {
        position:
            static;

        width:
            100%;

        margin-top:
            4px;

        padding:
            4px 0 0 12px;

        background:
            transparent;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;

        display:
            none;

        opacity:
            1;

        visibility:
            visible;

        transform:
            none;

        pointer-events:
            auto;
    }


    .navigation-more.open .navigation-dropdown {
        display:
            flex;
    }


    .hero {
        padding-top:
            70px;
    }


    .hero-container {
        grid-template-columns:
            1fr;

        gap:
            64px;

        padding:
            58px 0;
    }


    .hero-content {
        max-width:
            760px;
    }


    .hero-title {
        max-width:
            760px;
    }


    .hero-description {
        max-width:
            650px;
    }


    .hero-media {
        width:
            min(100%, 620px);

        min-height:
            520px;

        margin-inline:
            auto;
    }


    .hero-image-wrapper {
        width:
            min(100%, 540px);

        height:
            500px;
    }


    .hero-media-caption {
        left:
            0;
    }

}


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

@media (max-width: 560px) {

    .header-container,
    .hero-container,
    .hero-footer-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .main-navigation {
        left:
            14px;

        right:
            14px;
    }


    .brand-symbol {
        width:
            39px;

        height:
            39px;
    }


    .brand-content strong {
        font-size:
            0.96rem;
    }


    .hero-container {
        padding:
            48px 0 42px;

        gap:
            48px;
    }


    .hero-title {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.6rem
            );

        line-height:
            1.02;
    }


    .hero-description {
        font-size:
            0.96rem;

        line-height:
            1.7;
    }


    .hero-primary-button {
        width:
            100%;
    }


    .hero-topics {
        gap:
            8px;

        font-size:
            0.62rem;
    }


    .hero-media {
        min-height:
            440px;
    }


    .hero-image-wrapper {
        width:
            100%;

        height:
            420px;

        border-radius:
            0 0 0 42px;
    }


    .hero-media-caption {
        left:
            10px;

        right:
            10px;

        bottom:
            18px;

        width:
            auto;
    }


    .hero-media-accent {
        width:
            140px;

        height:
            140px;

        right:
            -25px;

        top:
            -20px;
    }


    .hero-footer-container {
        min-height:
            82px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            5px;
    }

}


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

@media (max-width: 400px) {

    .hero-eyebrow {
        font-size:
            0.65rem;
    }


    .hero-image-wrapper {
        height:
            390px;
    }


    .hero-media-caption {
        padding:
            14px;
    }


    .hero-media-caption p {
        font-size:
            0.66rem;
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}

/* =========================================================
   ¿QUÉ ES LA IA?
========================================================= */

.about-ai-section {
    position: relative;

    padding:
        110px 0;

    background:
        var(--white);

    border-bottom:
        1px solid var(--gray-200);
}


.about-ai-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.82fr);

    gap:
        92px;

    align-items:
        center;
}


/* =========================================================
   ENCABEZADO DE SECCIÓN
========================================================= */

.section-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        23px;

    color:
        var(--gray-500);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.section-number {
    color:
        var(--sky-500);
}


.section-eyebrow-line {
    width:
        24px;

    height:
        1px;

    background:
        var(--gray-300);
}


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

.about-ai-content {
    max-width:
        660px;
}


.about-ai-title {
    max-width:
        610px;

    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4vw,
            3.65rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.about-ai-description {
    max-width:
        640px;

    margin-top:
        26px;

    color:
        var(--gray-600);

    font-size:
        1rem;

    line-height:
        1.9;
}


.about-ai-divider {
    width:
        100%;

    height:
        1px;

    margin:
        34px 0;

    background:
        var(--gray-200);
}


/* =========================================================
   CAPACIDADES
========================================================= */

.about-ai-capabilities {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


.about-ai-capability {
    display:
        grid;

    grid-template-columns:
        36px 1fr;

    gap:
        13px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--gray-200);
}


.about-ai-capability:first-child {
    padding-top:
        0;
}


.about-ai-capability:last-child {
    padding-bottom:
        0;

    border-bottom:
        none;
}


.capability-index {
    color:
        var(--sky-500);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    padding-top:
        2px;
}


.about-ai-capability strong {
    display:
        block;

    color:
        var(--navy-950);

    font-size:
        0.9rem;

    font-weight:
        700;
}


.about-ai-capability p {
    margin-top:
        5px;

    color:
        var(--gray-500);

    font-size:
        0.79rem;

    line-height:
        1.6;
}


/* =========================================================
   VISUAL
========================================================= */

.about-ai-visual {
    position:
        relative;

    min-height:
        510px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;
}


.about-ai-image-wrapper {
    position:
        relative;

    width:
        min(100%, 455px);

    height:
        500px;

    overflow:
        hidden;

    background:
        var(--gray-100);

    border-radius:
        54px 0 0 0;

    box-shadow:
        var(--shadow-md);
}


.about-ai-image-wrapper::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(7, 24, 39, 0.14),
            transparent 48%
        );

    pointer-events:
        none;
}


.about-ai-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 0.7s ease;
}


.about-ai-image-wrapper:hover .about-ai-image {
    transform:
        scale(1.025);
}


/* =========================================================
   NOTA VISUAL
========================================================= */

.about-ai-note {
    position:
        absolute;

    z-index:
        4;

    left:
        -30px;

    bottom:
        36px;

    width:
        min(92%, 340px);

    padding:
        16px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid var(--gray-200);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(10px);

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


.about-ai-note-icon {
    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--sky-100);

    border-radius:
        9px;

    color:
        var(--navy-700);

    font-size:
        0.82rem;
}


.about-ai-note div {
    display:
        flex;

    flex-direction:
        column;
}


.about-ai-note span {
    color:
        var(--gray-500);

    font-size:
        0.62rem;

    font-weight:
        600;
}


.about-ai-note strong {
    margin-top:
        3px;

    color:
        var(--navy-950);

    font-size:
        0.76rem;

    line-height:
        1.45;

    font-weight:
        700;
}


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

@media (max-width: 880px) {

    .about-ai-section {
        padding:
            80px 0;
    }


    .about-ai-container {
        grid-template-columns:
            1fr;

        gap:
            58px;
    }


    .about-ai-content {
        max-width:
            760px;
    }


    .about-ai-visual {
        width:
            min(100%, 600px);

        margin-inline:
            auto;

        min-height:
            500px;
    }


    .about-ai-image-wrapper {
        width:
            min(100%, 540px);

        height:
            480px;
    }


    .about-ai-note {
        left:
            0;
    }

}


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

@media (max-width: 560px) {

    .about-ai-section {
        padding:
            62px 0;
    }


    .about-ai-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );

        gap:
            44px;
    }


    .about-ai-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .about-ai-description {
        font-size:
            0.94rem;

        line-height:
            1.75;
    }


    .about-ai-visual {
        min-height:
            420px;
    }


    .about-ai-image-wrapper {
        width:
            100%;

        height:
            410px;

        border-radius:
            36px 0 0 0;
    }


    .about-ai-note {
        left:
            10px;

        right:
            10px;

        bottom:
            18px;

        width:
            auto;
    }

}

/* =========================================================
   BENEFICIOS + RIESGOS
========================================================= */

.benefits-risks-section {
    padding:
        110px 0;

    background:
        var(--sky-50);

    border-bottom:
        1px solid var(--gray-200);
}


.benefits-risks-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.benefits-risks-heading {
    margin-bottom:
        46px;
}


.benefits-risks-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.75fr);

    gap:
        70px;

    align-items:
        end;
}


.benefits-risks-heading h2 {
    max-width:
        650px;

    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.8rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.benefits-risks-heading p {
    color:
        var(--gray-600);

    font-size:
        0.96rem;

    line-height:
        1.8;
}


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

.benefits-risks-grid {
    display:
        grid;

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

    border-top:
        1px solid var(--gray-300);

    border-bottom:
        1px solid var(--gray-300);
}


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

.comparison-column {
    padding:
        36px 34px 38px;

    background:
        var(--white);
}


.benefits-column {
    border-right:
        1px solid var(--gray-300);
}


.risks-column {
    background:
        #fdfefe;
}


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

.comparison-column-header {
    margin-bottom:
        26px;
}


.comparison-label {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--gray-500);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.comparison-title-row {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.comparison-icon {
    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        0.9rem;
}


.benefit-icon {
    background:
        #eaf5ef;

    color:
        #2f7d5a;
}


.risk-icon {
    background:
        #fff3e8;

    color:
        #a85d2d;
}


.comparison-title-row h3 {
    color:
        var(--navy-950);

    font-size:
        1.4rem;

    font-weight:
        700;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   LISTA
========================================================= */

.comparison-list {
    list-style:
        none;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


.comparison-list li {
    min-height:
        64px;

    padding:
        13px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border-bottom:
        1px solid var(--gray-200);

    color:
        var(--gray-700);

    font-size:
        0.88rem;

    font-weight:
        500;
}


.comparison-list li:last-child {
    border-bottom:
        none;
}


.comparison-item-icon {
    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--sky-100);

    border-radius:
        9px;

    color:
        var(--navy-700);

    font-size:
        0.76rem;
}


.risk-item-icon {
    background:
        #fff5ed;

    color:
        #a85d2d;
}


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

.comparison-list li {
    transition:
        transform var(--transition),
        color var(--transition);
}


.comparison-list li:hover {
    transform:
        translateX(4px);

    color:
        var(--navy-950);
}


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

@media (max-width: 880px) {

    .benefits-risks-section {
        padding:
            80px 0;
    }


    .benefits-risks-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .benefits-risks-heading p {
        max-width:
            680px;
    }


    .benefits-risks-grid {
        grid-template-columns:
            1fr;
    }


    .benefits-column {
        border-right:
            none;

        border-bottom:
            1px solid var(--gray-300);
    }

}


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

@media (max-width: 560px) {

    .benefits-risks-section {
        padding:
            62px 0;
    }


    .benefits-risks-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .benefits-risks-heading {
        margin-bottom:
            34px;
    }


    .benefits-risks-heading h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .comparison-column {
        padding:
            27px 20px;
    }


    .comparison-title-row h3 {
        font-size:
            1.22rem;
    }


    .comparison-list li {
        font-size:
            0.82rem;
    }

}

/* =========================================================
   DEPENDENCIA + RECOMENDACIONES
========================================================= */

.habits-section {
    padding:
        110px 0;

    background:
        var(--white);

    border-bottom:
        1px solid var(--gray-200);
}


.habits-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.habits-heading {
    margin-bottom:
        50px;
}


.habits-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.75fr);

    gap:
        70px;

    align-items:
        end;
}


.habits-heading h2 {
    max-width:
        700px;

    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.75rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.habits-heading p {
    color:
        var(--gray-600);

    font-size:
        0.96rem;

    line-height:
        1.8;
}


/* =========================================================
   DEPENDENCIA
========================================================= */

.dependency-block {
    padding:
        34px;

    background:
        var(--navy-950);

    border-radius:
        20px;

    color:
        var(--white);
}


.dependency-intro {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding-bottom:
        26px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.dependency-icon {
    width:
        46px;

    height:
        46px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(120, 185, 224, 0.12);

    border:
        1px solid rgba(120, 185, 224, 0.20);

    border-radius:
        11px;

    color:
        var(--sky-400);

    font-size:
        1rem;
}


.dependency-label {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--sky-400);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.dependency-intro h3 {
    color:
        var(--white);

    font-size:
        1.35rem;

    font-weight:
        600;

    letter-spacing:
        -0.02em;
}


/* =========================================================
   SEÑALES
========================================================= */

.dependency-signals {
    display:
        grid;

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

    margin-top:
        6px;
}


.dependency-signal {
    min-height:
        125px;

    padding:
        24px 18px 20px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        22px;

    border-right:
        1px solid rgba(255, 255, 255, 0.10);
}


.dependency-signal:last-child {
    border-right:
        none;
}


.signal-number {
    color:
        var(--sky-400);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.dependency-signal > span:last-child {
    color:
        #e6edf3;

    font-size:
        0.82rem;

    line-height:
        1.5;

    font-weight:
        500;
}


/* =========================================================
   RECOMENDACIONES
========================================================= */

.recommendations-block {
    margin-top:
        52px;
}


.recommendations-header {
    margin-bottom:
        26px;
}


.recommendations-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--sky-500);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.recommendations-header h3 {
    max-width:
        720px;

    color:
        var(--navy-950);

    font-size:
        clamp(
            1.55rem,
            2.6vw,
            2.2rem
        );

    font-weight:
        650;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   LISTADO DE RECOMENDACIONES
========================================================= */

.recommendations-list {
    display:
        grid;

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

    border-top:
        1px solid var(--gray-200);

    border-left:
        1px solid var(--gray-200);
}


.recommendation-item {
    min-height:
        175px;

    padding:
        22px;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        var(--white);

    border-right:
        1px solid var(--gray-200);

    border-bottom:
        1px solid var(--gray-200);

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.recommendation-item:hover {
    z-index:
        2;

    background:
        var(--sky-50);

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-sm);
}


.recommendation-number {
    position:
        absolute;

    top:
        18px;

    right:
        18px;

    color:
        var(--gray-300);

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.recommendation-icon {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--sky-100);

    border-radius:
        9px;

    color:
        var(--navy-700);

    font-size:
        0.86rem;
}


.recommendation-item p {
    max-width:
        240px;

    color:
        var(--gray-700);

    font-size:
        0.88rem;

    line-height:
        1.55;

    font-weight:
        550;
}


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

@media (max-width: 1000px) {

    .dependency-signals {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .dependency-signal:nth-child(3) {
        border-right:
            none;
    }


    .dependency-signal:nth-child(-n+3) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }


    .recommendations-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 880px) {

    .habits-section {
        padding:
            80px 0;
    }


    .habits-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .habits-heading p {
        max-width:
            680px;
    }


    .dependency-signals {
        grid-template-columns:
            1fr 1fr;
    }


    .dependency-signal,
    .dependency-signal:nth-child(3) {
        border-right:
            1px solid rgba(255, 255, 255, 0.10);
    }


    .dependency-signal:nth-child(even) {
        border-right:
            none;
    }


    .dependency-signal:nth-child(-n+4) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }

}


@media (max-width: 560px) {

    .habits-section {
        padding:
            62px 0;
    }


    .habits-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .habits-heading {
        margin-bottom:
            34px;
    }


    .habits-heading h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .dependency-block {
        padding:
            24px 20px;

        border-radius:
            15px;
    }


    .dependency-intro {
        align-items:
            flex-start;
    }


    .dependency-signals {
        grid-template-columns:
            1fr;
    }


    .dependency-signal,
    .dependency-signal:nth-child(3),
    .dependency-signal:nth-child(even) {
        min-height:
            auto;

        padding:
            18px 0;

        flex-direction:
            row;

        justify-content:
            flex-start;

        gap:
            16px;

        border-right:
            none;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }


    .dependency-signal:last-child {
        border-bottom:
            none;
    }


    .signal-number {
        min-width:
            26px;
    }


    .recommendations-block {
        margin-top:
            40px;
    }


    .recommendations-list {
        grid-template-columns:
            1fr;
    }


    .recommendation-item {
        min-height:
            145px;
    }

}

/* =========================================================
   IA EN ENFERMERÍA
========================================================= */

.nursing-ai-section {
    padding:
        110px 0;

    background:
        var(--sky-50);

    border-bottom:
        1px solid var(--gray-200);
}


.nursing-ai-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 1.1fr);

    gap:
        90px;

    align-items:
        center;
}


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

.nursing-ai-content {
    max-width:
        620px;
}


.nursing-ai-title {
    color:
        var(--navy-950);

    font-size:
        clamp(
            2.3rem,
            4.2vw,
            3.7rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.nursing-ai-description {
    margin-top:
        25px;

    color:
        var(--gray-600);

    font-size:
        1rem;

    line-height:
        1.9;
}


.nursing-ai-divider {
    width:
        100%;

    height:
        1px;

    margin:
        34px 0;

    background:
        var(--gray-200);
}


/* =========================================================
   APLICACIONES
========================================================= */

.nursing-ai-features {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0;
}


.nursing-ai-feature {
    min-height:
        78px;

    padding:
        14px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border-bottom:
        1px solid var(--gray-200);
}


.nursing-ai-feature:first-child {
    padding-top:
        0;
}


.nursing-ai-feature:last-child {
    padding-bottom:
        0;

    border-bottom:
        none;
}


.nursing-feature-icon {
    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border:
        1px solid var(--sky-200);

    border-radius:
        10px;

    color:
        var(--navy-700);

    font-size:
        0.85rem;

    box-shadow:
        var(--shadow-sm);
}


.nursing-feature-label {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--sky-500);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.nursing-ai-feature strong {
    color:
        var(--navy-950);

    font-size:
        0.87rem;

    font-weight:
        650;
}


/* =========================================================
   MENSAJE
========================================================= */

.nursing-ai-message {
    margin-top:
        38px;

    padding-top:
        23px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    border-top:
        1px solid var(--gray-200);
}


.nursing-message-line {
    width:
        34px;

    height:
        2px;

    margin-top:
        11px;

    flex-shrink:
        0;

    background:
        var(--sky-500);
}


.nursing-ai-message p {
    max-width:
        420px;

    color:
        var(--navy-700);

    font-size:
        0.88rem;

    font-weight:
        600;

    line-height:
        1.7;
}


/* =========================================================
   VISUAL
========================================================= */

.nursing-ai-visual {
    position:
        relative;

    min-height:
        590px;
}


.nursing-image-main {
    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        min(82%, 490px);

    height:
        520px;

    overflow:
        hidden;

    background:
        var(--gray-100);

    border-radius:
        0 64px 0 0;

    box-shadow:
        var(--shadow-lg);
}


.nursing-image-main::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(7, 24, 39, 0.16),
            transparent 50%
        );

    pointer-events:
        none;
}


.nursing-image-main img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 0.7s ease;
}


.nursing-image-main:hover img {
    transform:
        scale(1.025);
}


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

.nursing-image-secondary {
    position:
        absolute;

    z-index:
        3;

    left:
        0;

    bottom:
        0;

    width:
        215px;

    height:
        250px;

    overflow:
        hidden;

    background:
        var(--gray-100);

    border:
        8px solid var(--sky-50);

    box-shadow:
        var(--shadow-md);
}


.nursing-image-secondary img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================================
   CAPTION
========================================================= */

.nursing-visual-caption {
    position:
        absolute;

    z-index:
        4;

    right:
        24px;

    bottom:
        28px;

    width:
        280px;

    padding:
        17px 18px;

    background:
        rgba(255, 255, 255, 0.97);

    border:
        1px solid var(--gray-200);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-md);

    backdrop-filter:
        blur(10px);

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


.nursing-visual-caption span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--sky-500);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.nursing-visual-caption strong {
    display:
        block;

    color:
        var(--navy-950);

    font-size:
        0.80rem;

    font-weight:
        700;

    line-height:
        1.5;
}


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

@media (max-width: 1000px) {

    .nursing-ai-container {
        grid-template-columns:
            1fr 0.9fr;

        gap:
            50px;
    }


    .nursing-image-secondary {
        width:
            180px;

        height:
            220px;
    }

}


@media (max-width: 880px) {

    .nursing-ai-section {
        padding:
            80px 0;
    }


    .nursing-ai-container {
        grid-template-columns:
            1fr;

        gap:
            58px;
    }


    .nursing-ai-content {
        max-width:
            720px;
    }


    .nursing-ai-visual {
        width:
            min(100%, 620px);

        margin-inline:
            auto;
    }

}


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

@media (max-width: 560px) {

    .nursing-ai-section {
        padding:
            62px 0;
    }


    .nursing-ai-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );

        gap:
            42px;
    }


    .nursing-ai-title {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .nursing-ai-description {
        font-size:
            0.94rem;

        line-height:
            1.75;
    }


    .nursing-ai-visual {
        min-height:
            490px;
    }


    .nursing-image-main {
        width:
            92%;

        height:
            420px;

        border-radius:
            0 38px 0 0;
    }


    .nursing-image-secondary {
        width:
            145px;

        height:
            175px;

        border-width:
            6px;
    }


    .nursing-visual-caption {
        right:
            0;

        bottom:
            18px;

        width:
            235px;

        padding:
            14px;
    }

}

/* =========================================================
   TEST DE DEPENDENCIA
========================================================= */

.test-section {
    padding:
        110px 0;

    background:
        var(--white);

    border-bottom:
        1px solid var(--gray-200);
}


.test-section-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.test-section-heading {
    margin-bottom:
        46px;
}


.test-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    gap:
        70px;

    align-items:
        end;
}


.test-heading-grid h2 {
    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.75rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.test-heading-grid > p {
    color:
        var(--gray-600);

    font-size:
        0.94rem;

    line-height:
        1.8;
}


/* =========================================================
   LAYOUT
========================================================= */

.test-layout {
    display:
        grid;

    grid-template-columns:
        minmax(250px, 0.58fr)
        minmax(0, 1.42fr);

    border:
        1px solid var(--gray-200);

    background:
        var(--white);
}


/* =========================================================
   PANEL INFORMATIVO
========================================================= */

.test-info-panel {
    padding:
        34px 30px;

    background:
        var(--navy-950);

    color:
        var(--white);
}


.test-info-icon {
    width:
        48px;

    height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        30px;

    background:
        rgba(120, 185, 224, 0.12);

    border:
        1px solid rgba(120, 185, 224, 0.20);

    border-radius:
        11px;

    color:
        var(--sky-400);

    font-size:
        1rem;
}


.test-info-label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--sky-400);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.test-info-panel h3 {
    color:
        var(--white);

    font-size:
        1.45rem;

    line-height:
        1.25;

    font-weight:
        600;
}


.test-info-panel > p {
    margin-top:
        12px;

    color:
        #c9d7e2;

    font-size:
        0.84rem;

    line-height:
        1.6;
}


.test-info-divider {
    height:
        1px;

    margin:
        30px 0;

    background:
        rgba(255, 255, 255, 0.12);
}


/* =========================================================
   ESCALA
========================================================= */

.test-scale {
    display:
        grid;

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

    gap:
        16px;
}


.test-scale div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.test-scale span {
    color:
        var(--sky-400);

    font-size:
        0.72rem;

    font-weight:
        700;
}


.test-scale small {
    color:
        #c5d2dc;

    font-size:
        0.66rem;
}


/* =========================================================
   FORMULARIO
========================================================= */

.test-form-panel {
    padding:
        34px 36px;
}


.test-question {
    padding:
        0 0 34px;

    margin-bottom:
        34px;

    border-bottom:
        1px solid var(--gray-200);
}


.test-question:last-of-type {
    margin-bottom:
        0;
}


.test-question-header {
    display:
        grid;

    grid-template-columns:
        38px 1fr;

    gap:
        12px;

    align-items:
        start;

    margin-bottom:
        18px;
}


.test-question-number {
    color:
        var(--sky-500);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    padding-top:
        3px;
}


.test-question-header p {
    color:
        var(--navy-950);

    font-size:
        0.92rem;

    line-height:
        1.6;
}


/* =========================================================
   OPCIONES
========================================================= */

.test-options {
    display:
        grid;

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

    gap:
        10px;
}


.test-option {
    position:
        relative;

    min-height:
        50px;

    padding:
        11px 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    background:
        var(--white);

    border:
        1px solid var(--gray-200);

    border-radius:
        var(--radius-sm);

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.test-option:hover {
    background:
        var(--sky-50);

    border-color:
        var(--sky-400);

    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow-sm);
}


.test-option input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.test-option-control {
    width:
        17px;

    height:
        17px;

    flex-shrink:
        0;

    border:
        2px solid var(--gray-300);

    border-radius:
        50%;

    background:
        var(--white);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


.test-option input:checked
+ .test-option-control {
    border-color:
        var(--navy-700);

    box-shadow:
        inset 0 0 0 4px var(--white),
        inset 0 0 0 9px var(--navy-700);
}


.test-option:has(input:checked) {
    background:
        var(--sky-50);

    border-color:
        var(--navy-700);
}


.test-option-text {
    color:
        var(--gray-700);

    font-size:
        0.82rem;

    font-weight:
        500;
}


/* =========================================================
   ACCIONES
========================================================= */

.test-actions {
    margin-top:
        30px;
}


.btn-test {
    min-height:
        48px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid var(--navy-900);

    border-radius:
        var(--radius-sm);

    background:
        var(--navy-900);

    color:
        var(--white);

    font-size:
        0.85rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.btn-test:hover {
    background:
        var(--navy-700);

    border-color:
        var(--navy-700);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(29, 79, 115, 0.16);
}


/* =========================================================
   RESULTADO
========================================================= */

.test-result {
    margin-top:
        18px;

    min-height:
        58px;

    padding:
        13px 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    background:
        var(--sky-50);

    border:
        1px solid var(--sky-200);

    border-left:
        4px solid var(--sky-500);

    color:
        var(--navy-900);

    font-size:
        0.82rem;

    font-weight:
        600;
}


.test-result-icon {
    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border:
        1px solid var(--sky-200);

    border-radius:
        8px;

    color:
        var(--navy-700);

    font-size:
        0.72rem;
}


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

@media (max-width: 880px) {

    .test-section {
        padding:
            80px 0;
    }


    .test-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .test-heading-grid > p {
        max-width:
            680px;
    }


    .test-layout {
        grid-template-columns:
            1fr;
    }


    .test-info-panel {
        padding:
            28px;
    }


    .test-scale {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    .test-section {
        padding:
            62px 0;
    }


    .test-section-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .test-section-heading {
        margin-bottom:
            34px;
    }


    .test-heading-grid h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .test-info-panel,
    .test-form-panel {
        padding:
            22px 18px;
    }


    .test-options {
        grid-template-columns:
            1fr;
    }


    .test-scale {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .btn-test {
        width:
            100%;
    }

}

/* =========================================================
   GALERÍA + VIDEOS
========================================================= */

.media-section {
    padding:
        110px 0;

    background:
        var(--sky-50);

    border-bottom:
        1px solid var(--gray-200);
}


.media-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.media-heading {
    margin-bottom:
        46px;
}


.media-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    gap:
        70px;

    align-items:
        end;
}


.media-heading-grid h2 {
    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.75rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.media-heading-grid p {
    color:
        var(--gray-600);

    font-size:
        0.94rem;

    line-height:
        1.8;
}


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

.media-gallery {
    display:
        grid;

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

    grid-auto-rows:
        300px;

    gap:
        16px;
}


.media-gallery-item {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--gray-100);

    border-radius:
        14px;
}


.media-gallery-large {
    grid-row:
        span 2;
}


.media-gallery-wide {
    grid-column:
        span 1;
}


.media-gallery-item::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(7, 24, 39, 0.78),
            rgba(7, 24, 39, 0.08) 65%,
            transparent
        );

    pointer-events:
        none;
}


.media-gallery-item img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.7s ease;
}


.media-gallery-item:hover img {
    transform:
        scale(1.035);
}


/* =========================================================
   CAPTION
========================================================= */

.media-gallery-item figcaption {
    position:
        absolute;

    z-index:
        3;

    left:
        20px;

    right:
        20px;

    bottom:
        18px;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        12px;

    color:
        var(--white);
}


.gallery-number {
    flex-shrink:
        0;

    padding-bottom:
        3px;

    color:
        var(--sky-400);

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.media-gallery-item figcaption div {
    display:
        flex;

    flex-direction:
        column;
}


.media-gallery-item figcaption strong {
    font-size:
        0.9rem;

    font-weight:
        650;
}


.media-gallery-item figcaption small {
    margin-top:
        3px;

    color:
        #d3e0e9;

    font-size:
        0.66rem;

    font-weight:
        400;
}


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

.videos-block {
    margin-top:
        72px;

    padding-top:
        42px;

    border-top:
        1px solid var(--gray-300);
}


.videos-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        28px;
}


.videos-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--sky-500);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.videos-header h3 {
    color:
        var(--navy-950);

    font-size:
        clamp(
            1.55rem,
            2.6vw,
            2.2rem
        );

    font-weight:
        650;

    letter-spacing:
        -0.03em;
}


.videos-youtube-icon {
    width:
        44px;

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--white);

    border:
        1px solid var(--gray-200);

    border-radius:
        10px;

    color:
        #c62828;

    font-size:
        1.05rem;

    box-shadow:
        var(--shadow-sm);
}


/* =========================================================
   GRID DE VIDEOS
========================================================= */

.videos-grid {
    display:
        grid;

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

    gap:
        20px;
}


.video-item {
    overflow:
        hidden;

    background:
        var(--white);

    border:
        1px solid var(--gray-200);

    border-radius:
        14px;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.video-item:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--sky-200);

    box-shadow:
        var(--shadow-md);
}


.video-frame {
    background:
        var(--navy-950);
}


.video-frame iframe {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    border:
        none;
}


/* =========================================================
   INFO VIDEO
========================================================= */

.video-info {
    padding:
        16px 18px;
}


.video-info span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--sky-500);

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.video-info strong {
    color:
        var(--navy-950);

    font-size:
        0.84rem;

    font-weight:
        650;
}


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

@media (max-width: 880px) {

    .media-section {
        padding:
            80px 0;
    }


    .media-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .media-heading-grid p {
        max-width:
            680px;
    }


    .media-gallery {
        grid-auto-rows:
            260px;
    }

}


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

@media (max-width: 560px) {

    .media-section {
        padding:
            62px 0;
    }


    .media-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .media-heading {
        margin-bottom:
            34px;
    }


    .media-heading-grid h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .media-gallery {
        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;
    }


    .media-gallery-large,
    .media-gallery-wide {
        grid-row:
            auto;

        grid-column:
            auto;
    }


    .media-gallery-item {
        height:
            280px;
    }


    .videos-block {
        margin-top:
            52px;

        padding-top:
            34px;
    }


    .videos-grid {
        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   RECURSOS DESCARGABLES
========================================================= */

.resources-section {
    padding:
        110px 0;

    background:
        var(--white);

    border-bottom:
        1px solid var(--gray-200);
}


.resources-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.resources-heading {
    margin-bottom:
        46px;
}


.resources-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    gap:
        70px;

    align-items:
        end;
}


.resources-heading h2 {
    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.75rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.resources-heading p {
    color:
        var(--gray-600);

    font-size:
        0.94rem;

    line-height:
        1.8;
}


/* =========================================================
   LISTADO
========================================================= */

.resources-list {
    border-top:
        1px solid var(--gray-300);
}


.resource-item {
    min-height:
        108px;

    padding:
        20px 18px;

    display:
        grid;

    grid-template-columns:
        42px 48px 1fr 42px;

    align-items:
        center;

    gap:
        16px;

    color:
        inherit;

    text-decoration:
        none;

    border-bottom:
        1px solid var(--gray-200);

    transition:
        background var(--transition),
        transform var(--transition),
        border-color var(--transition);
}


.resource-item:hover {
    background:
        var(--sky-50);

    border-bottom-color:
        var(--sky-200);

    transform:
        translateX(4px);
}


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

.resource-number {
    color:
        var(--gray-300);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


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

.resource-icon {
    width:
        44px;

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--sky-100);

    border:
        1px solid var(--sky-200);

    border-radius:
        10px;

    color:
        var(--navy-700);

    font-size:
        0.9rem;
}


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

.resource-content {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.resource-type {
    color:
        var(--sky-500);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.resource-content strong {
    color:
        var(--navy-950);

    font-size:
        0.92rem;

    font-weight:
        650;
}


/* =========================================================
   ACCIÓN
========================================================= */

.resource-action {
    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    justify-self:
        end;

    border:
        1px solid var(--gray-200);

    border-radius:
        9px;

    color:
        var(--gray-500);

    font-size:
        0.72rem;

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        transform var(--transition);
}


.resource-item:hover .resource-action {
    background:
        var(--navy-900);

    border-color:
        var(--navy-900);

    color:
        var(--white);

    transform:
        translateY(2px);
}


/* =========================================================
   NOTA
========================================================= */

.resources-note {
    margin-top:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.resources-note-line {
    width:
        30px;

    height:
        2px;

    background:
        var(--sky-500);
}


.resources-note p {
    color:
        var(--gray-500);

    font-size:
        0.74rem;
}


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

@media (max-width: 880px) {

    .resources-section {
        padding:
            80px 0;
    }


    .resources-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .resources-heading p {
        max-width:
            680px;
    }

}


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

@media (max-width: 560px) {

    .resources-section {
        padding:
            62px 0;
    }


    .resources-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .resources-heading {
        margin-bottom:
            34px;
    }


    .resources-heading h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .resource-item {
        min-height:
            96px;

        grid-template-columns:
            34px 42px 1fr;

        gap:
            12px;

        padding:
            18px 4px;
    }


    .resource-number {
        font-size:
            0.61rem;
    }


    .resource-icon {
        width:
            40px;

        height:
            40px;
    }


    .resource-content strong {
        font-size:
            0.84rem;

        line-height:
            1.45;
    }


    .resource-action {
        display:
            none;
    }

}

/* =========================================================
   CONTACTO
========================================================= */

.contact-section {
    padding:
        110px 0;

    background:
        var(--sky-50);

    border-bottom:
        1px solid var(--gray-200);
}


.contact-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;
}


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

.contact-heading {
    margin-bottom:
        46px;
}


.contact-heading-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.72fr);

    gap:
        70px;

    align-items:
        end;
}


.contact-heading h2 {
    color:
        var(--navy-950);

    font-size:
        clamp(
            2.25rem,
            4.3vw,
            3.75rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.contact-heading p {
    color:
        var(--gray-600);

    font-size:
        0.94rem;

    line-height:
        1.8;
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-layout {
    display:
        grid;

    grid-template-columns:
        minmax(290px, 0.75fr)
        minmax(0, 1.25fr);

    gap:
        52px;

    align-items:
        stretch;
}


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

.contact-info {
    padding:
        34px;

    background:
        var(--navy-950);

    color:
        var(--white);

    border-radius:
        18px;
}


.contact-info-label {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--sky-400);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.contact-info h3 {
    max-width:
        360px;

    color:
        var(--white);

    font-size:
        clamp(
            1.55rem,
            2.7vw,
            2.25rem
        );

    font-weight:
        600;

    line-height:
        1.25;

    letter-spacing:
        -0.03em;
}


.contact-info > p {
    margin-top:
        20px;

    color:
        #c8d7e2;

    font-size:
        0.84rem;

    line-height:
        1.75;
}


.contact-info-divider {
    height:
        1px;

    margin:
        30px 0;

    background:
        rgba(255, 255, 255, 0.12);
}


.contact-info-item {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 0;
}


.contact-info-item > span {
    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(120, 185, 224, 0.20);

    border-radius:
        9px;

    background:
        rgba(120, 185, 224, 0.10);

    color:
        var(--sky-400);

    font-size:
        0.78rem;
}


.contact-info-item div {
    display:
        flex;

    flex-direction:
        column;
}


.contact-info-item small {
    color:
        #91aabd;

    font-size:
        0.60rem;
}


.contact-info-item strong {
    margin-top:
        2px;

    color:
        var(--white);

    font-size:
        0.76rem;

    font-weight:
        600;
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form {
    padding:
        34px;

    background:
        var(--white);

    border:
        1px solid var(--gray-200);

    border-radius:
        18px;
}


.form-group {
    margin-bottom:
        19px;
}


.form-group label {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        7px;

    color:
        var(--gray-700);

    font-size:
        0.77rem;

    font-weight:
        600;
}


.form-group label i {
    color:
        var(--sky-500);

    font-size:
        0.72rem;
}


.form-group input,
.form-group textarea {
    width:
        100%;

    padding:
        13px 14px;

    background:
        var(--white);

    border:
        1px solid var(--gray-300);

    border-radius:
        var(--radius-sm);

    color:
        var(--navy-950);

    font-size:
        0.86rem;

    outline:
        none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


.form-group textarea {
    min-height:
        130px;

    resize:
        vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color:
        #94a3b8;
}


.form-group input:focus,
.form-group textarea:focus {
    border-color:
        var(--sky-500);

    background:
        #fcfeff;

    box-shadow:
        0 0 0 3px rgba(90, 168, 216, 0.12);
}


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

.btn-enviar {
    min-height:
        48px;

    padding:
        0 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    background:
        var(--navy-900);

    border:
        1px solid var(--navy-900);

    border-radius:
        var(--radius-sm);

    color:
        var(--white);

    font-size:
        0.84rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.btn-enviar:hover {
    background:
        var(--navy-700);

    border-color:
        var(--navy-700);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(29, 79, 115, 0.16);
}


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

.site-footer {
    padding:
        48px 0 30px;

    background:
        var(--navy-950);

    color:
        var(--white);
}


.footer-container {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        28px;
}


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

.footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.footer-brand-icon {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(120, 185, 224, 0.20);

    border-radius:
        9px;

    background:
        rgba(120, 185, 224, 0.10);

    color:
        var(--sky-400);
}


.footer-brand div {
    display:
        flex;

    flex-direction:
        column;
}


.footer-brand strong {
    font-size:
        0.92rem;

    font-weight:
        650;
}


.footer-brand span {
    margin-top:
        2px;

    color:
        #8fa8ba;

    font-size:
        0.62rem;
}


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

.social {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        7px;
}


.social a {
    width:
        38px;

    height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #aac3d6;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius:
        8px;

    text-decoration:
        none;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}


.social a:hover {
    color:
        var(--white);

    background:
        rgba(255, 255, 255, 0.07);

    transform:
        translateY(-2px);
}


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

.footer-copy {
    grid-column:
        1 / -1;

    padding-top:
        24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    text-align:
        center;
}


.footer-copy p:first-child {
    color:
        #b7cbd9;

    font-size:
        0.72rem;
}


.footer-copy p:last-child {
    margin-top:
        4px;

    color:
        #708da1;

    font-size:
        0.66rem;
}


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

@media (max-width: 880px) {

    .contact-section {
        padding:
            80px 0;
    }


    .contact-heading-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .contact-heading p {
        max-width:
            680px;
    }


    .contact-layout {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 560px) {

    .contact-section {
        padding:
            62px 0;
    }


    .contact-container,
    .footer-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .contact-heading {
        margin-bottom:
            34px;
    }


    .contact-heading h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.85rem
            );
    }


    .contact-info,
    .contact-form {
        padding:
            24px 20px;

        border-radius:
            14px;
    }


    .btn-enviar {
        width:
            100%;
    }


    .footer-container {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;
    }


    .social {
        justify-content:
            center;
    }


    .footer-brand {
        justify-content:
            center;
    }

}