/* =========================================================
   LOGOS HUB INFORMÁTICO
   CONSTRUYE FUTURO
========================================================= */


/* =========================================================
   BASE
========================================================= */

.construye-page {
    background: var(--hub-blue-deep);

    color: var(--hub-text);
}


.cf-container {
    width: min(
        calc(100% - 64px),
        var(--hub-container)
    );

    margin-inline: auto;
}


.cf-section-index {
    color: var(--hub-purple);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.cf-index-light {
    color: var(--hub-green);
}


.cf-kicker {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--hub-green);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.cf-kicker::before {
    content: "";

    width: 34px;
    height: 1px;

    background: currentColor;
}


.cf-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: var(--hub-purple);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.cf-eyebrow-light {
    color: rgba(236,236,244,.55);
}


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

.cf-hero {
    background: var(--hub-blue-deep);

    border-bottom: 1px solid var(--hub-line-dark);
}


.cf-hero-grid {
    min-height: 690px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(340px, .7fr);
}


.cf-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        95px
        clamp(50px, 7vw, 100px)
        90px
        0;

    border-right: 1px solid var(--hub-line-dark);
}


.cf-logo {
    width: min(270px, 65%);

    margin: 46px 0 35px;
}


.cf-hero h1 {
    max-width: 850px;

    margin: 0;

    color: var(--hub-white);

    font-size: clamp(52px, 6.5vw, 94px);
    font-weight: 600;

    line-height: .95;
    letter-spacing: -.06em;
}


.cf-hero h1 span {
    display: block;

    color: var(--hub-green);
}


.cf-hero-side {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        90px
        0
        80px
        clamp(45px, 6vw, 78px);
}


.cf-hero-side-label {
    margin-bottom: 38px;

    color: rgba(236,236,244,.35);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .17em;
}


.cf-hero-side p {
    max-width: 450px;

    margin: 0 0 20px;

    color: var(--hub-muted);

    font-size: 17px;

    line-height: 1.8;
}


.cf-hero-side strong {
    color: var(--hub-text);

    font-weight: 600;
}


.cf-hand-note {
    width: fit-content;

    margin:
        55px
        0
        0
        auto;

    color: var(--hub-green);

    font-family: "Caveat", cursive;

    font-size: 30px;
    font-weight: 600;

    line-height: 1;

    transform: rotate(-2deg);
}


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

.cf-editorial-header {
    display: grid;

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

    gap: clamp(45px, 7vw, 100px);

    margin-bottom: 70px;
}


.cf-editorial-header h2 {
    max-width: 830px;

    margin: 0;

    color: var(--hub-ink);

    font-size: clamp(43px, 5vw, 70px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-editorial-header p {
    max-width: 620px;

    margin: 28px 0 0;

    color: var(--hub-ink-muted);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   DOS CAMINOS
========================================================= */

.cf-paths {
    padding: 120px 0 130px;

    background: var(--hub-light);
}


.cf-paths-grid {
    display: grid;

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

    border-top: 1px solid var(--hub-line-light);
    border-bottom: 1px solid var(--hub-line-light);
}


.cf-path {
    min-height: 500px;

    padding: 38px 48px 45px;

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--hub-line-light);
}


.cf-path:last-child {
    border-right: 0;
}


.cf-path-number {
    margin-bottom: 80px;

    color: var(--hub-purple);

    font-size: 11px;
    font-weight: 800;
}


.cf-path-content {
    margin-top: auto;
}


.cf-path-label {
    display: block;

    margin-bottom: 17px;

    color: var(--hub-purple);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.cf-path h3 {
    max-width: 530px;

    margin: 0;

    color: var(--hub-ink);

    font-size: clamp(28px, 3.2vw, 43px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -.035em;
}


.cf-path p {
    max-width: 510px;

    margin: 24px 0 0;

    color: var(--hub-ink-muted);

    font-size: 15px;

    line-height: 1.75;
}


.cf-arrow-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    width: fit-content;

    margin-top: 34px;
    padding-bottom: 5px;

    color: var(--hub-purple);

    border-bottom:
        1px solid rgba(34,14,122,.35);

    font-size: 13px;
    font-weight: 800;

    transition:
        gap .2s ease,
        border-color .2s ease;
}


.cf-arrow-link:hover {
    gap: 17px;

    border-bottom-color: var(--hub-green);
}


/* =========================================================
   PRINCIPIO
========================================================= */

.cf-belief {
    background: var(--hub-blue-soft);

    border-top: 1px solid var(--hub-line-dark);
    border-bottom: 1px solid var(--hub-line-dark);
}


.cf-belief-grid {
    display: grid;

    grid-template-columns:
        38%
        62%;
}


.cf-belief-left {
    min-height: 580px;

    padding:
        90px
        60px
        80px
        0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid var(--hub-line-dark);
}


.cf-belief-note {
    max-width: 300px;

    color: var(--hub-green);

    font-family: "Caveat", cursive;

    font-size: 34px;
    font-weight: 600;

    line-height: 1;

    transform: rotate(-2deg);
}


.cf-belief-right {
    min-height: 580px;

    padding:
        85px
        0
        85px
        clamp(55px, 8vw, 110px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.cf-belief-right h2 {
    max-width: 720px;

    margin: 0;

    color: var(--hub-white);

    font-size: clamp(43px, 5vw, 70px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-belief-right h2 span {
    display: block;

    color: var(--hub-green);
}


.cf-belief-right p {
    max-width: 640px;

    margin: 28px 0 0;

    color: var(--hub-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   BECAS
========================================================= */

.cf-scholarships {
    padding: 120px 0 130px;

    background: var(--hub-light-soft);
}


.cf-scholarships-header {
    display: grid;

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

    gap: clamp(45px, 7vw, 100px);
}


.cf-scholarships-header h2 {
    max-width: 800px;

    margin: 0;

    color: var(--hub-ink);

    font-size: clamp(43px, 5vw, 70px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-scholarships-header p {
    max-width: 630px;

    margin: 27px 0 0;

    color: var(--hub-ink-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   PARA QUIÉN
========================================================= */

.cf-fit {
    display: grid;

    grid-template-columns:
        38%
        62%;

    margin-top: 90px;

    border-top: 1px solid var(--hub-line-light);
}


.cf-fit-intro {
    padding:
        40px
        55px
        35px
        0;

    border-right: 1px solid var(--hub-line-light);
}


.cf-fit-intro h3 {
    max-width: 320px;

    margin: 0;

    color: var(--hub-ink);

    font-size: 29px;
    font-weight: 600;

    line-height: 1.15;
}


.cf-hand-dark {
    width: fit-content;

    margin-top: 120px;

    color: var(--hub-purple);

    font-family: "Caveat", cursive;

    font-size: 29px;

    transform: rotate(-2deg);
}


.cf-fit-list {
    padding-left: clamp(45px, 7vw, 90px);
}


.cf-fit-row {
    display: grid;

    grid-template-columns:
        55px
        1fr;

    gap: 20px;

    min-height: 125px;

    align-items: center;

    border-bottom: 1px solid var(--hub-line-light);
}


.cf-fit-row span {
    color: var(--hub-purple);

    font-size: 10px;
    font-weight: 800;
}


.cf-fit-row p {
    max-width: 600px;

    margin: 0;

    color: var(--hub-ink);

    font-size: 19px;

    line-height: 1.45;
}


/* =========================================================
   ACOMPAÑAMIENTO
========================================================= */

.cf-learning {
    padding: 120px 0 130px;

    background: var(--hub-blue-deep);
}


.cf-learning-grid {
    display: grid;

    grid-template-columns:
        38%
        62%;

    gap: clamp(50px, 8vw, 115px);
}


.cf-learning-intro h2 {
    max-width: 440px;

    margin: 28px 0 0;

    color: var(--hub-white);

    font-size: clamp(40px, 4.5vw, 62px);
    font-weight: 600;

    line-height: 1.02;
    letter-spacing: -.05em;
}


.cf-learning-intro p {
    max-width: 440px;

    margin: 28px 0 0;

    color: var(--hub-muted);

    font-size: 16px;

    line-height: 1.8;
}


.cf-learning-list {
    border-top: 1px solid var(--hub-line-dark);
}


.cf-learning-item {
    min-height: 145px;

    display: grid;

    grid-template-columns:
        55px
        minmax(220px, .8fr)
        minmax(250px, 1fr);

    gap: 28px;

    align-items: center;

    border-bottom: 1px solid var(--hub-line-dark);
}


.cf-learning-number {
    color: var(--hub-green);

    font-size: 10px;
    font-weight: 800;
}


.cf-learning-item h3 {
    margin: 0;

    color: var(--hub-white);

    font-size: 20px;
    font-weight: 600;
}


.cf-learning-item p {
    margin: 0;

    color: var(--hub-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   RSE
========================================================= */

.cf-rse {
    background: var(--hub-blue-soft);
}


.cf-rse-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;
}


.cf-rse-media {
    min-height: 720px;

    overflow: hidden;
}


.cf-rse-media img {
    width: 100%;
    height: 100%;

    min-height: 720px;

    object-fit: cover;
}


.cf-rse-content {
    min-height: 720px;

    padding:
        90px
        max(
            calc((100vw - var(--hub-container)) / 2),
            50px
        )
        90px
        clamp(60px, 8vw, 115px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.cf-rse-content h2 {
    max-width: 650px;

    margin: 0;

    color: var(--hub-white);

    font-size: clamp(43px, 5vw, 68px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-rse-content h2 span {
    color: var(--hub-green);
}


.cf-rse-content p {
    max-width: 610px;

    margin: 27px 0 0;

    color: var(--hub-muted);

    font-size: 16px;

    line-height: 1.8;
}


.cf-rse-topics {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 24px;

    margin-top: 35px;
}


.cf-rse-topics span {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: rgba(236,236,244,.72);

    font-size: 12px;
    font-weight: 700;
}


.cf-rse-topics span::before {
    content: "";

    width: 5px;
    height: 5px;

    background: var(--hub-green);
}


.cf-rse-action {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    min-height: 49px;

    margin-top: 40px;
    padding: 0 20px;

    border:
        1px solid rgba(19,232,165,.52);

    border-radius: 999px;

    color: var(--hub-green);

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

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


.cf-rse-action:hover {
    background: var(--hub-green);

    color: var(--hub-blue-deep);

    transform: translateY(-2px);
}


/* =========================================================
   CONEXIÓN
========================================================= */

.cf-connection {
    padding: 120px 0 130px;

    background: var(--hub-light);
}


.cf-connection-grid {
    display: grid;

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

    gap: clamp(45px, 7vw, 100px);
}


.cf-connection h2 {
    max-width: 850px;

    margin: 0 0 38px;

    color: var(--hub-ink);

    font-size: clamp(43px, 5vw, 70px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-connection h2 span {
    display: block;

    margin-top: 8px;

    color: var(--hub-purple);
}


.cf-connection p {
    max-width: 660px;

    margin: 0 0 20px;

    color: var(--hub-ink-muted);

    font-size: 16px;

    line-height: 1.8;
}


.cf-connection .cf-connection-strong {
    margin-top: 30px;

    color: var(--hub-ink);

    font-size: 19px;
    font-weight: 600;
}


/* =========================================================
   PRE POSTULACIÓN
========================================================= */

.cf-apply-intro {
    padding: 115px 0;

    background: var(--hub-blue-deep);
}


.cf-apply-intro-grid {
    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap: clamp(60px, 9vw, 135px);
}


.cf-apply-intro h2 {
    max-width: 670px;

    margin: 28px 0 0;

    color: var(--hub-white);

    font-size: clamp(43px, 5vw, 68px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.055em;
}


.cf-apply-copy p {
    max-width: 550px;

    margin: 0 0 22px;

    color: var(--hub-muted);

    font-size: 16px;

    line-height: 1.8;
}


.cf-apply-copy strong {
    color: var(--hub-text);
}


.cf-apply-note {
    width: fit-content;

    margin:
        45px
        0
        0
        auto;

    color: var(--hub-green);

    font-family: "Caveat", cursive;

    font-size: 29px;

    transform: rotate(-2deg);
}


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

.cf-form {
    padding: 120px 0;

    background: var(--hub-light-soft);
}


.cf-form-header {
    display: grid;

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

    gap: clamp(45px, 7vw, 100px);

    margin-bottom: 60px;
}


.cf-form-header h2 {
    max-width: 720px;

    margin: 0;

    color: var(--hub-ink);

    font-size: clamp(42px, 5vw, 66px);
    font-weight: 600;

    line-height: 1;
    letter-spacing: -.05em;
}


.cf-form-header p {
    max-width: 590px;

    margin: 25px 0 0;

    color: var(--hub-ink-muted);

    font-size: 16px;

    line-height: 1.75;
}


.cf-form-frame {
    max-width: 900px;

    margin:
        0
        0
        0
        auto;

    overflow: hidden;

    background: var(--hub-white);

    border:
        1px solid var(--hub-line-light);
}


.cf-form-frame iframe {
    display: block;

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

    border: 0;
}


.cf-form-help {
    max-width: 900px;

    margin:
        25px
        0
        0
        auto;

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

    gap: 25px;

    padding-top: 20px;

    border-top: 1px solid var(--hub-line-light);
}


.cf-form-help span {
    color: var(--hub-ink-muted);

    font-size: 13px;
}


.cf-form-help a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--hub-purple);

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   CIERRE
========================================================= */

.cf-final {
    background: var(--hub-blue-soft);

    border-top: 1px solid var(--hub-line-dark);
}


.cf-final-grid {
    min-height: 590px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(330px, .75fr);
}


.cf-final-grid > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        90px
        clamp(50px, 7vw, 100px)
        90px
        0;

    border-right: 1px solid var(--hub-line-dark);
}


.cf-final h2 {
    max-width: 800px;

    margin: 30px 0 0;

    color: var(--hub-white);

    font-size: clamp(46px, 6vw, 80px);
    font-weight: 600;

    line-height: .97;
    letter-spacing: -.06em;
}


.cf-final h2 span {
    display: block;

    color: var(--hub-green);
}


.cf-final-actions {
    display: flex;
    flex-direction: column;
}


.cf-final-action {
    flex: 1;

    min-height: 245px;

    padding:
        45px
        40px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-bottom: 1px solid var(--hub-line-dark);

    transition:
        background .22s ease,
        color .22s ease;
}


.cf-final-action:last-child {
    border-bottom: 0;
}


.cf-final-action small {
    color: var(--hub-green);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.cf-final-action strong {
    max-width: 280px;

    color: var(--hub-white);

    font-size: 22px;

    line-height: 1.25;
}


.cf-final-action > span {
    align-self: flex-end;

    color: var(--hub-green);

    font-size: 22px;
}


.cf-final-action:hover {
    background: var(--hub-green);

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


.cf-final-action:hover small,
.cf-final-action:hover strong,
.cf-final-action:hover > span {
    color: var(--hub-blue-deep);
}


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

@media (max-width: 950px) {

    .cf-container {
        width: min(
            calc(100% - 40px),
            var(--hub-container)
        );
    }


    .cf-hero-grid {
        grid-template-columns: 1fr;
    }


    .cf-hero-main {
        min-height: 550px;

        padding:
            80px
            20px
            70px;

        border-right: 0;
        border-bottom: 1px solid var(--hub-line-dark);
    }


    .cf-hero-side {
        min-height: 390px;

        padding:
            65px
            20px;
    }


    .cf-paths-grid {
        grid-template-columns: 1fr;
    }


    .cf-path {
        border-right: 0;
        border-bottom: 1px solid var(--hub-line-light);
    }


    .cf-path:last-child {
        border-bottom: 0;
    }


    .cf-editorial-header,
    .cf-scholarships-header,
    .cf-connection-grid,
    .cf-form-header {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .cf-belief-grid,
    .cf-fit,
    .cf-learning-grid {
        grid-template-columns: 1fr;
    }


    .cf-belief-left {
        min-height: 280px;

        padding:
            60px
            20px;

        border-right: 0;
        border-bottom: 1px solid var(--hub-line-dark);
    }


    .cf-belief-right {
        min-height: auto;

        padding:
            70px
            20px;
    }


    .cf-fit-intro {
        padding:
            40px
            0;

        border-right: 0;
        border-bottom: 1px solid var(--hub-line-light);
    }


    .cf-hand-dark {
        margin-top: 50px;
    }


    .cf-fit-list {
        padding-left: 0;
    }


    .cf-learning-grid {
        gap: 60px;
    }


    .cf-rse-grid {
        grid-template-columns: 1fr;
    }


    .cf-rse-media,
    .cf-rse-media img {
        min-height: 500px;
    }


    .cf-rse-content {
        min-height: auto;

        padding:
            75px
            30px;
    }


    .cf-apply-intro-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .cf-form-frame,
    .cf-form-help {
        margin-left: 0;
    }


    .cf-final-grid {
        grid-template-columns: 1fr;
    }


    .cf-final-grid > div:first-child {
        min-height: 470px;

        padding:
            80px
            20px;

        border-right: 0;
        border-bottom: 1px solid var(--hub-line-dark);
    }
}


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

@media (max-width: 650px) {

    .cf-container {
        width: min(
            calc(100% - 30px),
            var(--hub-container)
        );
    }


    .cf-hero-main {
        min-height: 500px;

        padding:
            65px
            15px
            55px;
    }


    .cf-logo {
        width: 210px;

        margin-top: 38px;
    }


    .cf-hero h1 {
        font-size: clamp(47px, 13.5vw, 67px);
    }


    .cf-hero-side {
        padding:
            55px
            15px;
    }


    .cf-hero-side p {
        font-size: 16px;
    }


    .cf-hand-note {
        font-size: 27px;
    }


    .cf-paths,
    .cf-scholarships,
    .cf-learning,
    .cf-connection,
    .cf-form {
        padding:
            85px
            0
            90px;
    }


    .cf-editorial-header {
        margin-bottom: 50px;
    }


    .cf-editorial-header h2,
    .cf-scholarships-header h2,
    .cf-connection h2,
    .cf-form-header h2 {
        font-size: 42px;
    }


    .cf-path {
        min-height: 440px;

        padding:
            30px
            22px
            35px;
    }


    .cf-path-number {
        margin-bottom: 60px;
    }


    .cf-path h3 {
        font-size: 31px;
    }


    .cf-belief-left {
        min-height: 240px;

        padding:
            55px
            15px;
    }


    .cf-belief-note {
        font-size: 28px;
    }


    .cf-belief-right {
        padding:
            60px
            15px
            70px;
    }


    .cf-belief-right h2 {
        font-size: 42px;
    }


    .cf-fit {
        margin-top: 60px;
    }


    .cf-fit-row {
        grid-template-columns:
            38px
            1fr;

        min-height: 110px;
    }


    .cf-fit-row p {
        font-size: 17px;
    }


    .cf-learning-intro h2 {
        font-size: 42px;
    }


    .cf-learning-item {
        grid-template-columns:
            38px
            1fr;

        gap:
            10px
            14px;

        padding:
            25px
            0;
    }


    .cf-learning-item p {
        grid-column: 2;
    }


    .cf-rse-media,
    .cf-rse-media img {
        min-height: 370px;
    }


    .cf-rse-content {
        padding:
            65px
            25px
            75px;
    }


    .cf-rse-content h2 {
        font-size: 43px;
    }


    .cf-rse-action {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    .cf-apply-intro {
        padding:
            85px
            0;
    }


    .cf-apply-intro h2 {
        font-size: 42px;
    }


    .cf-apply-note {
        font-size: 26px;
    }


    .cf-form-frame iframe {
        min-height: 1000px;
    }


    .cf-form-help {
        flex-direction: column;
        align-items: flex-start;
    }


    .cf-final-grid > div:first-child {
        min-height: 440px;

        padding:
            70px
            15px;
    }


    .cf-final h2 {
        font-size: clamp(43px, 13vw, 61px);
    }


    .cf-final-action {
        min-height: 215px;

        padding:
            38px
            20px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

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

        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}