/* =========================================================
   NUEVO COLEGIO MONTE GRANDE
   SITIO INSTITUCIONAL 2027

   Estética base:
   - Inspirada en landing Programa DEL
   - Montserrat
   - Blanco / Verde / Rojo
   - Diseño editorial
   - Responsive
========================================================= */


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

:root{

    --green:#0b7a43;
    --green-dark:#084c38;
    --green-deep:#062f26;
    --green-soft:#edf6f1;

    --red:#ed111c;
    --red-dark:#c80c15;

    --dark:#232426;
    --dark-2:#303235;

    --text:#4f5459;
    --muted:#757b80;

    --white:#ffffff;
    --off:#f7f8f7;

    --line:#e5e8e6;

    --radius-sm:12px;
    --radius:22px;
    --radius-lg:30px;

    --container:1180px;

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.06);

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

}


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

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    color:var(--dark);

    background:#fff;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

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

a{
    color:inherit;
    text-decoration:none;
}

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

button{
    cursor:pointer;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin-top:0;
}

p{
    margin-top:0;
}


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

.container{

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

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

}


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

.section{
    padding:78px 0;
}

.section-kicker{

    display:inline-block;

    margin-bottom:12px;

    color:var(--green);

    font-size:.76rem;

    font-weight:900;

    letter-spacing:.13em;

    text-transform:uppercase;

}

.section-heading{

    max-width:720px;

    margin-bottom:42px;

}

.section-heading h2,
.intro-copy h2,
.del-home-header h2,
.proposal-home-copy h2,
.contact-home-copy h2{

    margin:0;

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

    line-height:1.04;

    letter-spacing:-.035em;

    font-weight:700;

    color:var(--dark);

}


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

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

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

    border-bottom:
        1px solid rgba(0,0,0,.05);

    backdrop-filter:
        blur(12px);

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

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

}

.site-header.scrolled{

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

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

}


/* HEADER INNER */

.header-inner{

    min-height:92px;

    display:grid;

    grid-template-columns:
        210px
        1fr
        auto;

    gap:26px;

    align-items:center;

}


/* LOGO */

.brand{

    display:flex;

    align-items:center;

}

.brand img{

    width:190px;

    max-height:70px;

    object-fit:contain;

    object-position:left center;

}


/* NAV */

.main-nav{

    justify-self:center;

    display:flex;

    align-items:center;

    gap:28px;

}

.main-nav > a,
.nav-dropdown-toggle{

    position:relative;

    padding:12px 0;

    border:0;

    background:none;

    color:var(--dark);

    font-size:.91rem;

    font-weight:700;

    white-space:nowrap;

}


/* UNDERLINE */

.main-nav > a::after,
.nav-dropdown-toggle::after{

    content:"";

    position:absolute;

    left:0;
    right:100%;

    bottom:4px;

    height:2px;

    background:var(--green);

    transition:
        right .22s ease;

}

.main-nav > a:hover::after,
.nav-dropdown:hover .nav-dropdown-toggle::after{
    right:0;
}


/* DEL */

.main-nav .nav-del{

    color:var(--green);

    font-weight:800;

}


/* =========================================================
   DROPDOWN NIVELES
========================================================= */

.nav-dropdown{
    position:relative;
}

.nav-dropdown-menu{

    position:absolute;

    top:100%;
    left:50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width:215px;

    padding:10px;

    border:1px solid rgba(0,0,0,.04);

    border-radius:14px;

    background:#fff;

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.2s ease;

}

.nav-dropdown:hover .nav-dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);

}

.nav-dropdown-menu a{

    display:block;

    padding:11px 12px;

    border-radius:9px;

    color:var(--dark);

    font-size:.88rem;

    font-weight:600;

}

.nav-dropdown-menu a:hover{

    color:var(--green);

    background:var(--green-soft);

}


/* =========================================================
   BOTONES
========================================================= */

.btn{

    min-height:48px;

    display:inline-flex;

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

    padding:
        0 22px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    font-weight:800;

    font-size:.92rem;

    text-align:center;

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

}

.btn:hover{
    transform:translateY(-2px);
}


/* ROJO */

.btn-admissions{

    color:#fff;

    background:var(--red);

    box-shadow:
        0 10px 24px rgba(237,17,28,.18);

}

.btn-admissions:hover{

    color:#fff;

    background:var(--red-dark);

}


/* OUTLINE */

.btn-outline{

    color:var(--green);

    border-color:var(--green);

    background:transparent;

}

.btn-outline:hover{

    color:#fff;

    background:var(--green);

}


/* BLANCO */

.btn-light{

    color:var(--green-dark);

    background:#fff;

}

.btn-light:hover{

    color:var(--green-dark);

    background:#f2f5f3;

}


/* OUTLINE BLANCO */

.btn-outline-light{

    color:#fff;

    border-color:
        rgba(255,255,255,.75);

    background:transparent;

}

.btn-outline-light:hover{

    color:var(--green-dark);

    background:#fff;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle{

    display:none;

    border:0;

    padding:5px;

    background:none;

}

.menu-toggle span{

    display:block;

    width:27px;

    height:2px;

    margin:6px 0;

    background:var(--green-dark);

    transition:.2s;

}


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

.home-hero{

    position:relative;

    overflow:hidden;

    padding:
        72px 0
        58px;

    background:
        radial-gradient(
            circle at 77% 17%,
            rgba(11,122,67,.065),
            transparent 29%
        ),
        #fff;

}


/* GRID */

.hero-grid{

    display:grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap:56px;

    align-items:center;

}


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

.hero-copy{

    position:relative;

    z-index:2;

}


/* KICKER */

.hero-kicker{

    display:block;

    margin:0 0 12px;

    color:var(--green);

    font-size:.78rem;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/* TITULO */

.hero-copy h1{

    max-width:650px;

    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.75rem,
            4.7vw,
            5.05rem
        );

    line-height:1.03;

    letter-spacing:-.04em;

    font-weight:700;

}


/* ACENTO */

.hero-copy h1 span{
    color:var(--red);
}


/* TEXTO */

.hero-copy p{

    max-width:630px;

    margin:
        24px 0 0;

    color:#555a5f;

    font-size:1.04rem;

    line-height:1.68;

}


/* ACTIONS */

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:13px;

    margin-top:30px;

}


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

.hero-media{

    position:relative;

    z-index:2;

}

.hero-media picture{

    display:block;

    width:100%;

}

.hero-media img{

    width:100%;

    height:500px;

    object-fit:cover;

    object-position:center;

    border-radius:
        36px
        8px
        36px
        8px;

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

    transition:
        transform .55s ease;

}


/* HOVER */

@media(min-width:1024px){

    .hero-media:hover img{
        transform:scale(1.018);
    }

}


/* =========================================================
   HERO DECORATIVE LINES
========================================================= */

.hero-accent{

    position:absolute;

    z-index:1;

    pointer-events:none;

    border-radius:999px;

}


/* GREEN */

.hero-accent-green{
    width:420px;
    height:22px;

    right:-82px;
    bottom:39px;

    background:var(--green);

    transform:none;
}

.hero-accent-red{
    width:300px;
    height:23px;

    right:-36px;
    bottom:70px;

    background:var(--red);

    transform:none;
}


/* =========================================================
   INTRO
========================================================= */

.intro-home{

    padding-top:65px;

    padding-bottom:72px;

}

.intro-grid{

    display:grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:70px;

    align-items:start;

}

.intro-copy h2{
    max-width:610px;
}

.intro-text{

    padding-top:26px;

}

.intro-text p{

    margin:
        0 0 16px;

    color:var(--text);

    font-size:1.03rem;

    line-height:1.72;

}


/* =========================================================
   PROGRAMA DEL HOME
========================================================= */

.del-home{

    position:relative;

    overflow:hidden;

    background:var(--green-deep);

    color:#fff;

}


/* DECORACIÓN */

.del-home::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-210px;

    top:-220px;

    border:
        90px solid
        rgba(255,255,255,.025);

    border-radius:50%;

}


/* HEADER */

.del-home-header{

    position:relative;

    z-index:2;

    max-width:780px;

    margin-bottom:42px;

}

.del-home-header .section-kicker{

    color:#9ed0b4;

}

.del-home-header h2{

    color:#fff;

    max-width:730px;

}

.del-home-header p{

    max-width:690px;

    margin:
        20px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:1.04rem;

    line-height:1.7;

}


/* =========================================================
   DEL STAGES
========================================================= */

.del-stages{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:14px;

}

.del-stage{

    min-height:295px;

    padding:26px 24px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:18px;

    transition:
        transform .22s ease,
        background .22s ease;

}

.del-stage:hover{

    transform:
        translateY(-5px);

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

}


/* NUMBER */

.del-stage-number{

    color:
        rgba(255,255,255,.38);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.1em;

}


/* LEVEL */

.del-stage-level{

    display:block;

    margin-bottom:6px;

    color:#a8cfb8;

    font-size:.68rem;

    font-weight:800;

    letter-spacing:.11em;

    text-transform:uppercase;

}


/* STAGE TITLE */

.del-stage h3{

    margin:
        0 0 10px;

    color:#fff;

    font-size:1.7rem;

    line-height:1.08;

    font-weight:700;

}


/* STAGE TEXT */

.del-stage p{

    margin:0;

    color:
        rgba(255,255,255,.64);

    font-size:.9rem;

    line-height:1.55;

}


/* DEL BUTTON */

.del-home-action{

    position:relative;

    z-index:2;

    margin-top:34px;

}


/* =========================================================
   NIVELES
========================================================= */

.levels-home{

    background:#fff;

}

.levels-grid{

    display:grid;

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

    gap:22px;

}


/* CARD */

.level-card{

    display:block;

    overflow:hidden;

    border-radius:22px;

    background:#fff;

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

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

}

.level-card:hover{

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}


/* IMAGE */

.level-card-image{

    height:310px;

    overflow:hidden;

}

.level-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .5s ease;

}

.level-card:hover
.level-card-image img{

    transform:
        scale(1.04);

}


/* CONTENT */

.level-card-content{

    padding:
        25px
        26px
        28px;

}

.level-card-content span{

    display:block;

    margin-bottom:7px;

    color:var(--green);

    font-size:.69rem;

    font-weight:900;

    letter-spacing:.11em;

    text-transform:uppercase;

}

.level-card-content h3{

    margin:
        0 0
        10px;

    color:var(--dark);

    font-size:1.75rem;

    font-weight:700;

}

.level-card-content p{

    min-height:72px;

    margin:
        0 0
        18px;

    color:var(--text);

    font-size:.94rem;

    line-height:1.55;

}

.level-card-content strong{

    color:var(--green);

    font-size:.86rem;

    font-weight:800;

}


/* =========================================================
   PROPUESTA EDUCATIVA
========================================================= */

.proposal-home{

    position:relative;

    overflow:hidden;

    color:#fff;

    background:var(--green);

}

.proposal-home::after{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    right:-145px;

    top:-170px;

    border:
        82px solid
        rgba(255,255,255,.035);

    border-radius:50%;

}

.proposal-home-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:72px;

    align-items:center;

}

.proposal-home-copy
.section-kicker{

    color:#b8dcc6;

}

.proposal-home-copy h2{

    color:#fff;

    max-width:600px;

}

.proposal-home-copy p{

    max-width:590px;

    margin:
        20px 0
        28px;

    color:
        rgba(255,255,255,.72);

    font-size:1.02rem;

    line-height:1.7;

}


/* =========================================================
   PROPUESTA ITEMS
========================================================= */

.proposal-home-list{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:14px;

}

.proposal-item{

    display:grid;

    grid-template-columns:
        42px
        1fr;

    gap:15px;

    min-height:160px;

    padding:23px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:16px;

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

}

.proposal-item > span{

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:50%;

    color:#fff;

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

    font-size:.72rem;

    font-weight:800;

}

.proposal-item h3{

    margin:
        2px 0
        7px;

    color:#fff;

    font-size:1.12rem;

    font-weight:700;

}

.proposal-item p{

    margin:0;

    color:
        rgba(255,255,255,.65);

    font-size:.88rem;

    line-height:1.55;

}


/* =========================================================
   ADMISIONES
========================================================= */

.admissions-home{

    padding:
        22px 0
        72px;

    background:#fff;

}

.admissions-home-panel{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:
        42px
        46px;

    border-radius:
        22px;

    color:#fff;

    background:
        linear-gradient(
            120deg,
            var(--red),
            #b80912
        );

    box-shadow:
        0 18px 45px
        rgba(205,12,22,.18);

}

.admissions-home-panel span{

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.13em;

}

.admissions-home-panel h2{

    max-width:760px;

    margin:
        7px 0 0;

    color:#fff;

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.8rem
        );

    line-height:1.08;

    letter-spacing:-.025em;

    font-weight:700;

}


/* =========================================================
   CONTACT HOME
========================================================= */

.contact-home{

    background:var(--off);

}

.contact-home-grid{

    display:grid;

    grid-template-columns:
        1fr
        auto;

    gap:70px;

    align-items:center;

}

.contact-home-copy h2{

    max-width:750px;

}

.contact-home-copy p{

    max-width:690px;

    margin:
        20px 0 0;

    color:var(--text);

    font-size:1rem;

    line-height:1.7;

}

.contact-home-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

    min-width:235px;

}


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

.site-footer{

    padding:
        68px 0 0;

    color:#fff;

    background:var(--green-deep);

}


/* GRID */

.footer-grid{

    display:grid;

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

    gap:48px;

}


/* LOGO */

.footer-logo{

    width:100px;

    height:auto;

    filter:none;

}

.footer-tagline{

    margin-top:20px;

    color:
        rgba(255,255,255,.62);

    font-size:.96rem;

    line-height:1.65;

}


/* TITLES */

.site-footer h4{

    margin:
        0 0
        16px;

    color:#fff;

    font-size:.92rem;

    font-weight:700;

}


/* LINKS */

.site-footer a{

    display:block;

    margin:8px 0;

    color:
        rgba(255,255,255,.65);

    font-size:.88rem;

    transition:
        color .18s ease;

}

.site-footer a:hover{
    color:#fff;
}


/* BOTTOM */

.footer-bottom{

    margin-top:48px;

    padding:
        20px 0;

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

    color:
        rgba(255,255,255,.42);

    font-size:.8rem;

}


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

@media(max-width:991px){


    /* HEADER */

    .header-inner{

        min-height:76px;

        grid-template-columns:
            1fr
            auto;

    }

    .brand img{

        width:168px;

        max-height:58px;

    }


    /* MENU BUTTON */

    .menu-toggle{

        display:block;

        justify-self:end;

    }


    /* NAV */

    .main-nav{

        position:absolute;

        top:100%;

        left:0;
        right:0;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:
            16px
            22px
            22px;

        background:#fff;

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

    }

    .main-nav.open{
        display:flex;
    }

    .main-nav > a,
    .nav-dropdown{

        width:100%;

    }

    .main-nav > a{

        padding:
            13px 0;

    }

    .nav-dropdown-toggle{

        width:100%;

        padding:
            13px 0;

        text-align:left;

    }


    /* DROPDOWN MOBILE */

    .nav-dropdown-menu{

        position:static;

        width:100%;

        padding:
            3px 0
            10px 16px;

        transform:none;

        border:0;

        border-radius:0;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        display:none;

    }

    .nav-dropdown.open
    .nav-dropdown-menu{

        display:block;

    }


    /* HEADER CTA */

    .header-cta{
        display:none;
    }


    /* HERO */

    .home-hero{

        padding:
            52px 0
            55px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-copy{

        max-width:780px;

    }

    .hero-copy h1{

        max-width:730px;

        font-size:
            clamp(
                3.1rem,
                8vw,
                5rem
            );

    }

    .hero-media{

        max-width:780px;

    }

    .hero-media img{

        height:500px;

    }


    /* LINES */

    .hero-accent-green{

        right:-170px;

        bottom:25px;

    }

    .hero-accent-red{

        right:-110px;

        bottom:55px;

    }


    /* INTRO */

    .intro-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .intro-text{
        padding-top:0;
    }


    /* DEL */

    .del-stages{

        grid-template-columns:
            1fr 1fr;

    }


    /* LEVELS */

    .levels-grid{

        grid-template-columns:1fr;

    }

    .level-card{

        display:grid;

        grid-template-columns:
            1fr 1fr;

    }

    .level-card-image{
        height:100%;
        min-height:310px;
    }


    /* PROPOSAL */

    .proposal-home-grid{

        grid-template-columns:1fr;

        gap:42px;

    }


    /* ADMISSIONS */

    .admissions-home-panel{

        flex-direction:column;

        align-items:flex-start;

    }


    /* CONTACT */

    .contact-home-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .contact-home-actions{

        flex-direction:row;

        flex-wrap:wrap;

    }


    /* FOOTER */

    .footer-grid{

        grid-template-columns:
            1fr 1fr;

    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media(max-width:575px){


    /* CONTAINER */

    .container{

        width:
            calc(100% - 30px);

    }


    /* SECTIONS */

    .section{

        padding:
            56px 0;

    }


    /* GENERAL TITLES */

    .section-heading h2,
    .intro-copy h2,
    .del-home-header h2,
    .proposal-home-copy h2,
    .contact-home-copy h2{

        font-size:
            2.35rem;

        line-height:1.07;

    }


    /* HEADER */

    .brand img{
        width:150px;
    }


    /* HERO */

    .home-hero{

        padding:
            36px 0
            48px;

    }

    .hero-grid{
        gap:30px;
    }

    .hero-kicker{

        font-size:.67rem;

        margin-bottom:9px;

    }

    .hero-copy h1{

        font-size:
            3rem;

        line-height:1.04;

        letter-spacing:-.035em;

    }

    .hero-copy p{

        margin-top:18px;

        font-size:.96rem;

        line-height:1.62;

    }


    /* HERO ACTIONS */

    .hero-actions{

        flex-direction:column;

        margin-top:24px;

    }

    .hero-actions .btn{
        width:100%;
    }


    /* IMAGE */

    .hero-media img{

        height:440px;

        border-radius:
            24px
            6px
            24px
            6px;

    }


    /* DECORATIVE LINES */

    .hero-accent-green{

        width:260px;

        height:14px;

        right:-105px;

        bottom:16px;

    }

    .hero-accent-red{

        width:190px;

        height:15px;

        right:-70px;

        bottom:39px;

    }


    /* INTRO */

    .intro-home{

        padding-top:48px;

        padding-bottom:52px;

    }

    .intro-text p{

        font-size:.96rem;

    }


    /* DEL */

    .del-home-header{

        margin-bottom:28px;

    }

    .del-home-header p{

        font-size:.96rem;

    }

    .del-stages{

        grid-template-columns:1fr;

    }

    .del-stage{

        min-height:auto;

        gap:40px;

    }


    /* LEVELS */

    .section-heading{

        margin-bottom:28px;

    }

    .level-card{

        display:block;

    }

    .level-card-image{

        height:260px;

        min-height:auto;

    }

    .level-card-content p{
        min-height:auto;
    }


    /* PROPOSAL */

    .proposal-home-list{

        grid-template-columns:1fr;

    }

    .proposal-item{

        min-height:auto;

    }


    /* ADMISSIONS */

    .admissions-home{

        padding:
            14px 0
            55px;

    }

    .admissions-home-panel{

        padding:
            30px 25px;

    }

    .admissions-home-panel h2{

        font-size:2rem;

    }

    .admissions-home-panel .btn{

        width:100%;

    }


    /* CONTACT */

    .contact-home-actions{

        flex-direction:column;

    }

    .contact-home-actions .btn{

        width:100%;

    }


    /* FOOTER */

    .site-footer{

        padding-top:52px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:32px;

    }

    .footer-logo{
        width:200px;
    }

    .footer-bottom{

        margin-top:36px;

    }

}


/* =========================================================
   PAGINA INSTITUCION
========================================================= */


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

.internal-hero{
    position:relative;
    overflow:hidden;
    padding:68px 0 58px;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(11,122,67,.055),
            transparent 30%
        ),
        #fff;
}

.internal-hero-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:56px;
    align-items:center;
}

.internal-hero-copy{
    position:relative;
    z-index:2;
}

.internal-hero-copy h1{
    max-width:650px;
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.9rem
        );

    line-height:1.03;
    letter-spacing:-.038em;
    font-weight:700;
}

.internal-hero-copy h1 span{
    color:var(--red);
}

.internal-hero-copy p{
    max-width:620px;
    margin:24px 0 0;

    color:#555a5f;

    font-size:1.03rem;
    line-height:1.7;
}


/* HERO IMAGE */

.internal-hero-image{
    position:relative;
    z-index:2;
}

.internal-hero-image picture{
    display:block;
    width:100%;
}

.internal-hero-image img{
    width:100%;
    height:470px;

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

    border-radius:
        34px
        8px
        34px
        8px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.11);
}


/* LINEAS DECORATIVAS */

.internal-hero-accent{
    position:absolute;
    z-index:1;

    pointer-events:none;

    border-radius:999px;
}

.internal-hero-green{
    width:390px;
    height:20px;

    right:-80px;
    bottom:36px;

    background:var(--green);
}

.internal-hero-red{
    width:275px;
    height:22px;

    right:-32px;
    bottom:65px;

    background:var(--red);
}


/* =========================================================
   QUIENES SOMOS
========================================================= */

.institution-intro{
    padding-top:66px;
    padding-bottom:70px;
}

.institution-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}

.institution-title{
    max-width:600px;
    margin:0;

    color:var(--dark);

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

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.institution-intro-text p{
    margin:0 0 17px;

    color:var(--text);

    font-size:1.01rem;
    line-height:1.72;
}


/* =========================================================
   MISION Y VISION
========================================================= */

.mission-vision{
    background:var(--off);
}

.mission-vision-header{
    max-width:720px;
    margin-bottom:36px;
}

.mission-vision-header h2{
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.4rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.mission-vision-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}


/* CARD */

.identity-card{
    min-height:100%;
    padding:38px 36px;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:22px;

    box-shadow:
        0 12px 36px rgba(0,0,0,.05);
}

.identity-card-dark{
    color:#fff;
    background:var(--green-deep);
    border-color:transparent;
}


/* NUMERO */

.identity-number{
    display:block;
    margin-bottom:24px;

    color:var(--green);

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
}

.identity-card-dark .identity-number{
    color:#9ed0b4;
}


/* LABEL */

.identity-label{
    display:block;
    margin-bottom:8px;

    color:var(--green);

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.13em;
}

.identity-card-dark .identity-label{
    color:#a8cfb8;
}


/* TITULO */

.identity-card h3{
    max-width:500px;
    margin:0 0 24px;

    color:var(--dark);

    font-size:
        clamp(
            1.8rem,
            2.7vw,
            2.6rem
        );

    line-height:1.08;
    letter-spacing:-.025em;
    font-weight:700;
}

.identity-card-dark h3{
    color:#fff;
}


/* TEXTO */

.identity-card p{
    margin:0 0 17px;

    color:var(--text);

    font-size:.96rem;
    line-height:1.68;
}

.identity-card-dark p{
    color:
        rgba(255,255,255,.72);
}

.identity-card strong{
    color:var(--dark);
    font-weight:800;
}

.identity-card-dark strong{
    color:#fff;
}


/* =========================================================
   NUESTRA FORMA DE EDUCAR
========================================================= */

.education-values{
    background:#fff;
}

.education-values-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:72px;
    align-items:start;
}

.education-values-heading h2{
    max-width:570px;
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.education-values-heading p{
    max-width:560px;
    margin:20px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* VALUE LIST */

.education-values-list{
    border-top:
        1px solid var(--line);
}

.value-row{
    display:grid;

    grid-template-columns:
        54px
        1fr;

    gap:18px;

    padding:22px 0;

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

.value-row > span{
    width:44px;
    height:44px;

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

    border-radius:50%;

    color:var(--green);

    background:var(--green-soft);

    font-size:.72rem;
    font-weight:900;
}

.value-row h3{
    margin:1px 0 5px;

    color:var(--dark);

    font-size:1.15rem;
    font-weight:700;
}

.value-row p{
    margin:0;

    color:var(--text);

    font-size:.92rem;
    line-height:1.55;
}


/* =========================================================
   PROGRAMA DEL EN INSTITUCION
========================================================= */

.institution-del{
    position:relative;
    overflow:hidden;

    padding:76px 0;

    color:#fff;

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

.institution-del::after{
    content:"";

    position:absolute;

    width:470px;
    height:470px;

    right:-195px;
    top:-210px;

    border:
        86px solid
        rgba(255,255,255,.026);

    border-radius:50%;
}

.institution-del-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:68px;
    align-items:center;
}


/* COPY */

.institution-del-kicker{
    display:block;
    margin-bottom:10px;

    color:#a8cfb8;

    font-size:.74rem;
    font-weight:900;
    letter-spacing:.13em;
}

.institution-del-copy h2{
    max-width:630px;
    margin:0;

    color:#fff;

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

    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.institution-del-copy p{
    max-width:650px;
    margin:20px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:1rem;
    line-height:1.7;
}

.institution-del-copy .btn{
    margin-top:26px;
}


/* ETAPAS */

.institution-del-stages{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.institution-del-stages > div{
    min-height:150px;

    display:flex;
    flex-direction:column;

    justify-content:flex-end;

    padding:22px;

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

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:16px;
}

.institution-del-stages span{
    margin-bottom:auto;

    color:
        rgba(255,255,255,.36);

    font-size:.68rem;
    font-weight:900;
}

.institution-del-stages strong{
    color:#fff;

    font-size:1.35rem;
    line-height:1.1;
}

.institution-del-stages small{
    margin-top:5px;

    color:#a8cfb8;

    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}


/* =========================================================
   ADMISIONES EN INSTITUCION
========================================================= */

.institution-admissions{
    padding:22px 0 72px;
    background:#fff;
}


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

@media(max-width:991px){

    .internal-hero{
        padding:50px 0 54px;
    }

    .internal-hero-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .internal-hero-copy{
        max-width:760px;
    }

    .internal-hero-copy h1{
        max-width:720px;

        font-size:
            clamp(
                3rem,
                8vw,
                4.8rem
            );
    }

    .internal-hero-image{
        max-width:780px;
    }

    .internal-hero-image img{
        height:480px;
    }

    .internal-hero-green{
        right:-160px;
        bottom:24px;
    }

    .internal-hero-red{
        right:-105px;
        bottom:52px;
    }


    /* QUIENES SOMOS */

    .institution-intro-grid{
        grid-template-columns:1fr;
        gap:26px;
    }


    /* MISION VISION */

    .mission-vision-grid{
        grid-template-columns:1fr;
    }


    /* VALORES */

    .education-values-grid{
        grid-template-columns:1fr;
        gap:38px;
    }


    /* DEL */

    .institution-del-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

}


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

@media(max-width:575px){

    .internal-hero{
        padding:36px 0 46px;
    }

    .internal-hero-grid{
        gap:28px;
    }

    .internal-hero-copy h1{
        font-size:2.9rem;
        line-height:1.04;
    }

    .internal-hero-copy p{
        margin-top:18px;

        font-size:.95rem;
        line-height:1.62;
    }

    .internal-hero-image img{
        height:420px;

        border-radius:
            24px
            6px
            24px
            6px;
    }

    .internal-hero-green{
        width:250px;
        height:14px;

        right:-100px;
        bottom:14px;
    }

    .internal-hero-red{
        width:180px;
        height:15px;

        right:-64px;
        bottom:37px;
    }


    /* INTRO */

    .institution-intro{
        padding-top:50px;
        padding-bottom:52px;
    }

    .institution-title{
        font-size:2.35rem;
    }

    .institution-intro-text p{
        font-size:.95rem;
    }


    /* MISION / VISION */

    .mission-vision-header{
        margin-bottom:28px;
    }

    .identity-card{
        padding:28px 24px;
    }

    .identity-card h3{
        font-size:2rem;
    }

    .identity-card p{
        font-size:.93rem;
    }


    /* VALORES */

    .education-values-heading h2{
        font-size:2.35rem;
    }

    .education-values-heading p{
        font-size:.95rem;
    }

    .value-row{
        grid-template-columns:
            48px
            1fr;

        gap:14px;
    }


    /* DEL */

    .institution-del{
        padding:56px 0;
    }

    .institution-del-copy h2{
        font-size:2.35rem;
    }

    .institution-del-copy p{
        font-size:.95rem;
    }

    .institution-del-stages{
        grid-template-columns:1fr;
    }

    .institution-del-stages > div{
        min-height:125px;
    }


    /* ADMISIONES */

    .institution-admissions{
        padding:
            14px 0
            55px;
    }

}

/* =========================================================
   PAGINA NIVEL INICIAL
========================================================= */


/* =========================================================
   INTRO NIVEL
========================================================= */

.level-intro{
    padding-top:64px;
    padding-bottom:68px;
}

.level-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:68px;
    align-items:start;
}

.level-title{
    max-width:600px;
    margin:0;

    color:var(--dark);

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

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.level-intro-text p{
    margin:0 0 17px;

    color:var(--text);

    font-size:1rem;
    line-height:1.72;
}


/* HORARIO / ORGANIZACION */

.level-schedule{
    margin-top:28px;

    padding:20px 22px;

    border-left:4px solid var(--red);

    background:var(--off);

    border-radius:
        0 14px 14px 0;
}

.level-schedule span{
    display:block;

    margin-bottom:5px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.level-schedule strong{
    display:block;

    color:var(--dark);

    font-size:1rem;
    font-weight:800;
}


/* =========================================================
   DEL - DESPERTAR
========================================================= */

.level-del{
    position:relative;
    overflow:hidden;

    padding:76px 0;

    color:#fff;

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

.level-del::after{
    content:"";

    position:absolute;

    width:470px;
    height:470px;

    right:-185px;
    top:-205px;

    border:
        86px solid
        rgba(255,255,255,.026);

    border-radius:50%;
}

.level-del-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:66px;
    align-items:center;
}

.level-del-kicker{
    display:block;

    margin-bottom:10px;

    color:#a8cfb8;

    font-size:.74rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.level-del-copy h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            2.8rem,
            4.5vw,
            4.6rem
        );

    line-height:1;
    letter-spacing:-.035em;
    font-weight:700;
}

.level-del-copy h3{
    max-width:610px;

    margin:12px 0 0;

    color:#fff;

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

    line-height:1.18;
    font-weight:600;
}

.level-del-copy p{
    max-width:620px;

    margin:20px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:1rem;
    line-height:1.7;
}

.level-del-copy strong{
    color:#fff;
}

.level-del-copy .btn{
    margin-top:26px;
}


/* =========================================================
   DEL POINTS
========================================================= */

.level-del-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.level-del-points article{
    min-height:170px;

    padding:22px;

    display:flex;
    flex-direction:column;

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

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:16px;
}

.level-del-points article > span{
    margin-bottom:auto;

    color:
        rgba(255,255,255,.35);

    font-size:.68rem;
    font-weight:900;
}

.level-del-points h4{
    margin:26px 0 6px;

    color:#fff;

    font-size:1.25rem;
    font-weight:700;
}

.level-del-points p{
    margin:0;

    color:
        rgba(255,255,255,.62);

    font-size:.88rem;
    line-height:1.5;
}


/* =========================================================
   PROPUESTAS PRINCIPALES
========================================================= */

.level-proposals{
    background:#fff;
}

.level-proposals-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.level-proposal-card{
    min-height:245px;

    padding:28px 26px;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.045);

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

.level-proposal-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(11,122,67,.20);

    box-shadow:
        0 16px 38px rgba(0,0,0,.075);
}

.proposal-number{
    display:block;

    margin-bottom:28px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}

.level-proposal-card h3{
    margin:0 0 10px;

    color:var(--dark);

    font-size:1.35rem;
    line-height:1.12;
    font-weight:700;
}

.level-proposal-card p{
    margin:0;

    color:var(--text);

    font-size:.92rem;
    line-height:1.62;
}


/* =========================================================
   NUESTRA MIRADA / METODO
========================================================= */

.level-method{
    background:var(--off);
}

.level-method-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:68px;
    align-items:center;
}

.level-method-image{
    overflow:hidden;

    border-radius:
        30px 8px 30px 8px;

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

.level-method-image img{
    width:100%;
    height:470px;

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

    transition:
        transform .55s ease;
}

@media(min-width:1024px){

    .level-method-image:hover img{
        transform:scale(1.02);
    }

}

.level-method-copy h2{
    max-width:600px;

    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.level-method-copy p{
    max-width:600px;

    margin:20px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* =========================================================
   ACTIVIDADES
========================================================= */

.level-activities{
    background:#fff;
}

.activities-heading{
    max-width:720px;
    margin-bottom:34px;
}

.activities-heading h2{
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.activities-list{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:12px;
}

.activity-item{
    min-height:92px;

    display:flex;
    align-items:center;

    gap:16px;

    padding:18px 20px;

    border:
        1px solid var(--line);

    border-radius:14px;

    background:var(--off);
}

.activity-item span{
    flex:0 0 auto;

    width:36px;
    height:36px;

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

    border-radius:50%;

    color:var(--green);

    background:#fff;

    border:
        1px solid
        rgba(11,122,67,.12);

    font-size:.65rem;
    font-weight:900;
}

.activity-item strong{
    color:var(--dark);

    font-size:.9rem;
    line-height:1.35;
    font-weight:700;
}


/* =========================================================
   AJUSTES REVEAL EN CARDS
========================================================= */

.level-proposal-card.reveal,
.activity-item.reveal,
.level-del-points.reveal{
    will-change:
        opacity,
        transform;
}


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

@media(max-width:991px){

    /* INTRO */

    .level-intro-grid{
        grid-template-columns:1fr;
        gap:26px;
    }


    /* DEL */

    .level-del{
        padding:66px 0;
    }

    .level-del-grid{
        grid-template-columns:1fr;
        gap:40px;
    }


    /* PROPUESTAS */

    .level-proposals-grid{
        grid-template-columns:
            1fr 1fr;
    }


    /* METODO */

    .level-method-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .level-method-image{
        max-width:780px;
    }

    .level-method-image img{
        height:440px;
    }


    /* ACTIVIDADES */

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

}


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

@media(max-width:575px){

    /* INTRO */

    .level-intro{
        padding-top:48px;
        padding-bottom:52px;
    }

    .level-title{
        font-size:2.35rem;
    }

    .level-intro-text p{
        font-size:.95rem;
    }

    .level-schedule{
        margin-top:22px;

        padding:18px;
    }


    /* DEL */

    .level-del{
        padding:54px 0;
    }

    .level-del-copy h2{
        font-size:2.75rem;
    }

    .level-del-copy h3{
        font-size:1.45rem;
    }

    .level-del-copy p{
        font-size:.95rem;
    }

    .level-del-points{
        grid-template-columns:1fr;
    }

    .level-del-points article{
        min-height:140px;
    }


    /* PROPUESTAS */

    .level-proposals-grid{
        grid-template-columns:1fr;
    }

    .level-proposal-card{
        min-height:auto;

        padding:24px 22px;
    }

    .proposal-number{
        margin-bottom:20px;
    }


    /* METODO */

    .level-method-grid{
        gap:28px;
    }

    .level-method-image img{
        height:340px;
    }

    .level-method-copy h2{
        font-size:2.35rem;
    }

    .level-method-copy p{
        font-size:.95rem;
    }


    /* ACTIVIDADES */

    .activities-heading{
        margin-bottom:26px;
    }

    .activities-heading h2{
        font-size:2.35rem;
    }

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

    .activity-item{
        min-height:78px;

        padding:15px 16px;
    }

}

/* =========================================================
   PAGINA NIVEL PRIMARIO
========================================================= */


/* =========================================================
   RECORRIDO PRIMARIO
========================================================= */

.primary-journey{
    position:relative;
    overflow:hidden;

    padding:76px 0;

    background:var(--green-deep);
    color:#fff;
}

.primary-journey::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-210px;
    top:-220px;

    border:
        90px solid
        rgba(255,255,255,.025);

    border-radius:50%;
}

.primary-journey-header{
    position:relative;
    z-index:2;

    max-width:760px;

    margin-bottom:38px;
}

.primary-journey-header .section-kicker{
    color:#9ed0b4;
}

.primary-journey-header h2{
    margin:0;

    color:#fff;

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

    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.primary-journey-header p{
    max-width:680px;

    margin:20px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:1rem;
    line-height:1.68;
}


/* =========================================================
   DESCUBRIR / EXPLORAR CARDS
========================================================= */

.primary-journey-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.primary-stage{
    min-height:360px;

    display:flex;
    flex-direction:column;

    padding:30px 28px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:20px;

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

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

.primary-stage:hover{
    transform:translateY(-5px);

    background:
        rgba(255,255,255,.095);
}

.primary-stage-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:auto;
}

.primary-stage-number{
    color:
        rgba(255,255,255,.36);

    font-size:.7rem;
    font-weight:900;
    letter-spacing:.11em;
}

.primary-stage-tag{
    color:#a8cfb8;

    font-size:.69rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.primary-stage h3{
    margin:38px 0 8px;

    color:#fff;

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

    line-height:1;
    font-weight:700;
    letter-spacing:-.025em;
}

.primary-stage-lead{
    margin:0 0 15px;

    color:#fff;

    font-size:1rem;
    font-weight:600;
    line-height:1.45;
}

.primary-stage p:not(.primary-stage-lead){
    margin:0;

    color:
        rgba(255,255,255,.66);

    font-size:.92rem;
    line-height:1.62;
}

.primary-stage-link{
    display:inline-block;

    margin-top:24px;

    color:#fff;

    font-size:.86rem;
    font-weight:800;
}

.primary-stage-link:hover{
    color:#b9dec7;
}


/* =========================================================
   CICLOS
========================================================= */

.primary-cycle{
    background:#fff;
}

.primary-cycle-second{
    background:var(--off);
}

.cycle-header{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:68px;
    align-items:end;

    margin-bottom:30px;
}

.cycle-header h2{
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.6rem,
            4.5vw,
            4.4rem
        );

    line-height:1;
    letter-spacing:-.035em;
    font-weight:700;
}

.cycle-intro p{
    margin:0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* =========================================================
   HORARIOS
========================================================= */

.cycle-schedule{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:30px;
}

.cycle-schedule > div{
    padding:20px 22px;

    background:var(--off);

    border:
        1px solid var(--line);

    border-radius:14px;
}

.primary-cycle-second
.cycle-schedule > div{
    background:#fff;
}

.cycle-schedule-del{
    border-left:
        4px solid var(--red)!important;
}

.cycle-schedule span{
    display:block;

    margin-bottom:5px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.cycle-schedule strong{
    display:block;

    color:var(--dark);

    font-size:1rem;
    font-weight:800;
}


/* =========================================================
   PROPUESTAS POR CICLO
========================================================= */

.cycle-proposals{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}

.cycle-proposal-card{
    min-height:240px;

    padding:26px 24px;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

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

.cycle-proposal-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(11,122,67,.18);

    box-shadow:
        0 16px 38px rgba(0,0,0,.07);
}

.cycle-proposal-card > span{
    display:block;

    margin-bottom:25px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}

.cycle-proposal-card h3{
    margin:0 0 10px;

    color:var(--dark);

    font-size:1.25rem;
    line-height:1.18;
    font-weight:700;
}

.cycle-proposal-card strong{
    display:block;

    margin:-3px 0 9px;

    color:var(--green);

    font-size:.82rem;
    font-weight:800;
}

.cycle-proposal-card p{
    margin:0;

    color:var(--text);

    font-size:.9rem;
    line-height:1.6;
}


/* DESTACADA */

.cycle-proposal-featured{
    grid-column:span 2;

    background:var(--green-soft);

    border-color:
        rgba(11,122,67,.15);
}


/* =========================================================
   TRANSICION DESCUBRIR > EXPLORAR
========================================================= */

.primary-transition{
    padding:54px 0;

    background:var(--green);
    color:#fff;
}

.primary-transition-inner{
    max-width:820px;
}

.primary-transition-inner > span{
    display:block;

    margin-bottom:10px;

    color:
        rgba(255,255,255,.72);

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.primary-transition-inner h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            2.3rem,
            4vw,
            3.8rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.primary-transition-inner p{
    max-width:700px;

    margin:18px 0 0;

    color:
        rgba(255,255,255,.72);

    font-size:1rem;
    line-height:1.68;
}


/* =========================================================
   METODO / APRENDER CON SENTIDO
========================================================= */

.primary-method{
    background:#fff;
}

.primary-method-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:68px;
    align-items:center;
}

.primary-method-image{
    overflow:hidden;

    border-radius:
        30px 8px 30px 8px;

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

.primary-method-image img{
    width:100%;
    height:470px;

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

    transition:transform .55s ease;
}

@media(min-width:1024px){

    .primary-method-image:hover img{
        transform:scale(1.02);
    }

}

.primary-method-copy h2{
    max-width:610px;

    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.primary-method-copy p{
    max-width:610px;

    margin:20px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* =========================================================
   EJES DEL RECORRIDO
========================================================= */

.primary-pillars{
    background:var(--off);
}

.primary-pillars-header{
    max-width:720px;

    margin-bottom:34px;
}

.primary-pillars-header h2{
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.primary-pillars-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:14px;
}

.primary-pillar{
    min-height:180px;

    padding:22px;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:16px;
}

.primary-pillar > span{
    display:block;

    margin-bottom:22px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}

.primary-pillar h3{
    margin:0 0 8px;

    color:var(--dark);

    font-size:1.2rem;
    font-weight:700;
}

.primary-pillar p{
    margin:0;

    color:var(--text);

    font-size:.88rem;
    line-height:1.55;
}


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

@media(max-width:991px){

    .primary-journey{
        padding:64px 0;
    }

    .primary-journey-grid{
        grid-template-columns:1fr;
    }

    .primary-stage{
        min-height:300px;
    }


    /* CICLOS */

    .cycle-header{
        grid-template-columns:1fr;
        gap:20px;
    }

    .cycle-schedule{
        grid-template-columns:1fr;
    }

    .cycle-proposals{
        grid-template-columns:1fr 1fr;
    }

    .cycle-proposal-featured{
        grid-column:span 2;
    }


    /* METODO */

    .primary-method-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .primary-method-image{
        max-width:780px;
    }

    .primary-method-image img{
        height:440px;
    }


    /* PILARES */

    .primary-pillars-grid{
        grid-template-columns:1fr 1fr;
    }

}


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

@media(max-width:575px){

    .primary-journey{
        padding:54px 0;
    }

    .primary-journey-header{
        margin-bottom:26px;
    }

    .primary-journey-header h2{
        font-size:2.4rem;
    }

    .primary-journey-header p{
        font-size:.95rem;
    }

    .primary-stage{
        min-height:auto;

        padding:24px 22px;
    }

    .primary-stage h3{
        margin-top:32px;

        font-size:2.3rem;
    }


    /* CICLOS */

    .cycle-header h2{
        font-size:2.5rem;
    }

    .cycle-intro p{
        font-size:.95rem;
    }

    .cycle-schedule > div{
        padding:18px;
    }

    .cycle-proposals{
        grid-template-columns:1fr;
    }

    .cycle-proposal-card{
        min-height:auto;

        padding:23px 21px;
    }

    .cycle-proposal-featured{
        grid-column:auto;
    }


    /* TRANSICIÓN */

    .primary-transition{
        padding:46px 0;
    }

    .primary-transition-inner h2{
        font-size:2.35rem;
    }

    .primary-transition-inner p{
        font-size:.95rem;
    }


    /* METODO */

    .primary-method-image img{
        height:340px;
    }

    .primary-method-copy h2{
        font-size:2.35rem;
    }

    .primary-method-copy p{
        font-size:.95rem;
    }


    /* PILARES */

    .primary-pillars-header{
        margin-bottom:26px;
    }

    .primary-pillars-header h2{
        font-size:2.35rem;
    }

    .primary-pillars-grid{
        grid-template-columns:1fr;
    }

    .primary-pillar{
        min-height:auto;
    }

}


/* =========================================================
   PAGINA NIVEL SECUNDARIO
========================================================= */


/* =========================================================
   INTRO
========================================================= */

.secondary-intro{
    padding-top:64px;
    padding-bottom:68px;
}

.secondary-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:68px;
    align-items:start;
}

.secondary-title{
    max-width:620px;
    margin:0;

    color:var(--dark);

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

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.secondary-intro-text p{
    margin:0 0 17px;

    color:var(--text);

    font-size:1rem;
    line-height:1.72;
}


/* =========================================================
   DEL - LIDERAR
========================================================= */

.secondary-del{
    position:relative;
    overflow:hidden;

    padding:76px 0;

    color:#fff;

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

.secondary-del::after{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-190px;
    top:-210px;

    border:
        88px solid
        rgba(255,255,255,.026);

    border-radius:50%;
}

.secondary-del-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:66px;
    align-items:center;
}

.secondary-del-kicker{
    display:block;

    margin-bottom:10px;

    color:#a8cfb8;

    font-size:.74rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.secondary-del-copy h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            2.8rem,
            4.5vw,
            4.6rem
        );

    line-height:1;
    letter-spacing:-.035em;
    font-weight:700;
}

.secondary-del-copy h3{
    max-width:620px;

    margin:12px 0 0;

    color:#fff;

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

    line-height:1.18;
    font-weight:600;
}

.secondary-del-copy p{
    max-width:630px;

    margin:20px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:1rem;
    line-height:1.7;
}

.secondary-del-copy strong{
    color:#fff;
}

.secondary-del-copy .btn{
    margin-top:26px;
}


/* =========================================================
   DEL POINTS
========================================================= */

.secondary-del-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.secondary-del-points article{
    min-height:170px;

    padding:22px;

    display:flex;
    flex-direction:column;

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

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:16px;
}

.secondary-del-points article > span{
    margin-bottom:auto;

    color:
        rgba(255,255,255,.35);

    font-size:.68rem;
    font-weight:900;
}

.secondary-del-points h4{
    margin:26px 0 6px;

    color:#fff;

    font-size:1.25rem;
    font-weight:700;
}

.secondary-del-points p{
    margin:0;

    color:
        rgba(255,255,255,.62);

    font-size:.88rem;
    line-height:1.5;
}


/* =========================================================
   CICLOS
========================================================= */

.secondary-cycles{
    background:#fff;
}

.secondary-cycles-header{
    max-width:760px;

    margin-bottom:34px;
}

.secondary-cycles-header h2{
    margin:0;

    color:var(--dark);

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

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.secondary-cycles-header p{
    max-width:690px;

    margin:18px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}

.secondary-cycles-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}


/* CICLO CARD */

.secondary-cycle-card{
    min-height:100%;

    padding:32px 30px;

    border:
        1px solid var(--line);

    border-radius:20px;

    background:var(--off);
}

.secondary-cycle-card-dark{
    color:#fff;

    background:var(--green-deep);

    border-color:transparent;
}

.secondary-cycle-number{
    display:block;

    margin-bottom:23px;

    color:var(--green);

    font-size:.7rem;
    font-weight:900;
    letter-spacing:.11em;
}

.secondary-cycle-card-dark
.secondary-cycle-number{
    color:#9ed0b4;
}

.secondary-cycle-label{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:.7rem;
    font-weight:900;
    letter-spacing:.11em;
}

.secondary-cycle-card-dark
.secondary-cycle-label{
    color:#a8cfb8;
}

.secondary-cycle-card h3{
    margin:0 0 16px;

    color:var(--dark);

    font-size:2rem;
    line-height:1.08;
    font-weight:700;
}

.secondary-cycle-card-dark h3{
    color:#fff;
}

.secondary-cycle-card > p{
    margin:0 0 24px;

    color:var(--text);

    font-size:.94rem;
    line-height:1.65;
}

.secondary-cycle-card-dark > p{
    color:
        rgba(255,255,255,.68);
}


/* HORARIOS */

.secondary-cycle-schedule{
    display:grid;
    gap:10px;
}

.secondary-cycle-schedule > div{
    padding:14px 15px;

    border-radius:10px;

    background:#fff;

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

.secondary-cycle-card-dark
.secondary-cycle-schedule > div{
    border-color:
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.07);
}

.secondary-cycle-schedule span{
    display:block;

    margin-bottom:3px;

    color:var(--green);

    font-size:.66rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.secondary-cycle-card-dark
.secondary-cycle-schedule span{
    color:#a8cfb8;
}

.secondary-cycle-schedule strong{
    color:var(--dark);

    font-size:.9rem;
    font-weight:800;
}

.secondary-cycle-card-dark
.secondary-cycle-schedule strong{
    color:#fff;
}

.secondary-cycle-schedule
.secondary-cycle-del{
    border-left:
        4px solid var(--red);
}


/* =========================================================
   PROPUESTAS
========================================================= */

.secondary-proposals{
    background:var(--off);
}

.secondary-proposals-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}

.secondary-proposal-card{
    min-height:250px;

    padding:26px 24px;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

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

.secondary-proposal-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 16px 38px rgba(0,0,0,.07);
}

.secondary-proposal-card > span{
    display:block;

    margin-bottom:25px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}

.secondary-proposal-card h3{
    margin:0 0 10px;

    color:var(--dark);

    font-size:1.25rem;
    line-height:1.18;
    font-weight:700;
}

.secondary-proposal-card p{
    margin:0;

    color:var(--text);

    font-size:.9rem;
    line-height:1.6;
}

.secondary-proposal-featured{
    background:var(--green-soft);

    border-color:
        rgba(11,122,67,.15);
}


/* =========================================================
   INGLÉS GLOBAL
========================================================= */

.secondary-english{
    background:#fff;
}

.secondary-english-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:68px;
    align-items:center;
}

.secondary-english-image{
    overflow:hidden;

    border-radius:
        30px 8px 30px 8px;

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

.secondary-english-image img{
    width:100%;
    height:470px;

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

.secondary-english-copy h2{
    max-width:600px;

    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.9rem
        );

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.secondary-english-copy p{
    max-width:600px;

    margin:20px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}

.secondary-note{
    margin-top:26px;

    padding:18px 20px;

    background:var(--off);

    border-left:
        4px solid var(--red);

    border-radius:
        0 12px 12px 0;
}

.secondary-note strong{
    display:block;

    margin-bottom:6px;

    color:var(--dark);

    font-size:.9rem;
}

.secondary-note p{
    margin:0;

    font-size:.86rem;
    line-height:1.55;
}


/* =========================================================
   SKILLS
========================================================= */

.secondary-skills{
    background:var(--green-deep);

    color:#fff;
}

.secondary-skills-header{
    max-width:720px;

    margin-bottom:34px;
}

.secondary-skills-header .section-kicker{
    color:#a8cfb8;
}

.secondary-skills-header h2{
    margin:0;

    color:#fff;

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

    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.secondary-skills-grid{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);

    gap:12px;
}

.secondary-skill{
    min-height:170px;

    padding:21px;

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

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:15px;
}

.secondary-skill > span{
    display:block;

    margin-bottom:20px;

    color:
        rgba(255,255,255,.35);

    font-size:.66rem;
    font-weight:900;
}

.secondary-skill h3{
    margin:0 0 7px;

    color:#fff;

    font-size:1.08rem;
    font-weight:700;
}

.secondary-skill p{
    margin:0;

    color:
        rgba(255,255,255,.62);

    font-size:.84rem;
    line-height:1.5;
}


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

@media(max-width:991px){

    .secondary-intro-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

    .secondary-del-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .secondary-cycles-grid{
        grid-template-columns:1fr;
    }

    .secondary-proposals-grid{
        grid-template-columns:1fr 1fr;
    }

    .secondary-english-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .secondary-english-image{
        max-width:780px;
    }

    .secondary-english-image img{
        height:440px;
    }

    .secondary-skills-grid{
        grid-template-columns:1fr 1fr;
    }

}


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

@media(max-width:575px){

    .secondary-intro{
        padding-top:48px;
        padding-bottom:52px;
    }

    .secondary-title{
        font-size:2.35rem;
    }

    .secondary-intro-text p{
        font-size:.95rem;
    }


    /* DEL */

    .secondary-del{
        padding:54px 0;
    }

    .secondary-del-copy h2{
        font-size:2.75rem;
    }

    .secondary-del-copy h3{
        font-size:1.45rem;
    }

    .secondary-del-copy p{
        font-size:.95rem;
    }

    .secondary-del-points{
        grid-template-columns:1fr;
    }

    .secondary-del-points article{
        min-height:140px;
    }


    /* CICLOS */

    .secondary-cycles-header h2{
        font-size:2.35rem;
    }

    .secondary-cycle-card{
        padding:26px 22px;
    }

    .secondary-cycle-card h3{
        font-size:1.8rem;
    }


    /* PROPUESTAS */

    .secondary-proposals-grid{
        grid-template-columns:1fr;
    }

    .secondary-proposal-card{
        min-height:auto;

        padding:23px 21px;
    }


    /* INGLES */

    .secondary-english-image img{
        height:340px;
    }

    .secondary-english-copy h2{
        font-size:2.35rem;
    }

    .secondary-english-copy p{
        font-size:.95rem;
    }


    /* SKILLS */

    .secondary-skills-header h2{
        font-size:2.35rem;
    }

    .secondary-skills-grid{
        grid-template-columns:1fr;
    }

    .secondary-skill{
        min-height:auto;
    }

}

/* =========================================================
   PROGRAMA DEL
========================================================= */


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

.del-page-hero{
    position:relative;
    overflow:hidden;

    padding:70px 0 58px;

    background:
        radial-gradient(
            circle at 76% 17%,
            rgba(11,122,67,.06),
            transparent 30%
        ),
        #fff;
}

.del-page-hero-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:56px;
    align-items:center;
}

.del-page-hero-copy{
    position:relative;
    z-index:2;
}

.del-page-hero-copy h1{
    max-width:660px;
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            5.05rem
        );

    line-height:1.03;
    letter-spacing:-.04em;
    font-weight:700;
}

.del-page-hero-copy h1 span{
    color:var(--red);
}

.del-page-hero-copy p{
    max-width:630px;

    margin:24px 0 0;

    color:#555a5f;

    font-size:1.04rem;
    line-height:1.68;
}

.del-page-hero-visual{
    position:relative;
    z-index:2;
}

.del-page-hero-visual img{
    width:100%;
    height:500px;

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

    border-radius:
        36px 8px 36px 8px;

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


/* =========================================================
   SUMMARY
========================================================= */

.del-summary{
    padding-top:66px;
    padding-bottom:68px;
}

.del-summary-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:72px;
}

.del-summary-heading h2{
    margin:0;

    color:var(--dark);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.1rem
        );

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

.del-summary-copy p{
    margin:0 0 17px;

    color:var(--text);

    font-size:1rem;
    line-height:1.72;
}

.del-text-link{
    margin-top:8px;
    padding:0;

    border:0;

    color:var(--green);
    background:none;

    font-weight:800;
    font-size:.9rem;
}


/* =========================================================
   SIGNIFICADO DEL
========================================================= */

.del-meaning-section{
    padding:72px 0;

    background:var(--off);
}

.del-section-header{
    max-width:760px;
    margin-bottom:38px;
}

.del-section-header h2{
    margin:0;

    color:var(--dark);

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

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

.del-section-header > p{
    max-width:680px;

    margin:18px 0 0;

    color:var(--text);

    line-height:1.68;
}

.del-meaning-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.del-letter-card{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:20px;

    padding:26px;

    align-items:center;

    background:#fff;

    border:
        1px solid var(--line);

    border-radius:18px;
}

.del-letter{
    width:66px;
    height:66px;

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

    border-radius:50%;

    color:#fff;

    font-size:2rem;
    font-weight:800;
}

.del-letter-d{
    background:var(--green);
}

.del-letter-e{
    background:var(--red);
}

.del-letter-l{
    background:#777b7d;
}

.del-letter-card h3{
    margin:0 0 6px;

    color:var(--dark);

    font-size:1.18rem;
}

.del-letter-card p{
    margin:0;

    color:var(--text);

    font-size:.88rem;
    line-height:1.55;
}


/* =========================================================
   FOUNDATIONS
========================================================= */

.del-foundations{
    background:#fff;
}

.del-foundations-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.del-foundation{
    min-height:220px;

    padding:25px;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 10px 28px rgba(0,0,0,.04);
}

.del-foundation-icon{
    width:48px;
    height:48px;

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

    margin-bottom:28px;

    border-radius:50%;

    color:var(--green);

    background:var(--green-soft);

    font-size:1.25rem;
}

.del-foundation-red{
    color:var(--red);
    background:#fff0f1;
}

.del-foundation-gray{
    color:#777;
    background:#f1f2f2;
}

.del-foundation h3{
    margin:0 0 9px;

    color:var(--dark);

    font-size:1.15rem;
}

.del-foundation p{
    margin:0;

    color:var(--text);

    font-size:.89rem;
    line-height:1.58;
}


/* =========================================================
   JOURNEY
========================================================= */

.del-journey-section{
    position:relative;

    overflow:hidden;

    background:var(--green-deep);

    color:#fff;
}

.del-journey-section::after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-220px;
    top:-230px;

    border:
        90px solid rgba(255,255,255,.025);

    border-radius:50%;
}

.del-section-header-light{
    position:relative;
    z-index:2;
}

.del-section-header-light .section-kicker{
    color:#a8cfb8;
}

.del-section-header-light h2{
    color:#fff;
}

.del-section-header-light > p{
    color:
        rgba(255,255,255,.68);
}

.del-journey-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.del-journey-card{
    min-height:390px;

    display:flex;
    flex-direction:column;

    padding:24px;

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

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:18px;

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

.del-journey-card:hover{
    transform:translateY(-4px);

    background:
        rgba(255,255,255,.095);
}

.del-journey-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.del-journey-number{
    color:
        rgba(255,255,255,.35);

    font-size:.68rem;
    font-weight:900;
}

.del-stage-chip{
    color:#a8cfb8;

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.08em;
}

.del-journey-dot{
    width:10px;
    height:10px;

    margin-top:36px;

    border-radius:50%;
}

.del-journey-dot.green{
    background:var(--green);
}

.del-journey-dot.red{
    background:var(--red);
}

.del-journey-dot.gray{
    background:#999c9a;
}

.del-journey-card h3{
    margin:14px 0 9px;

    color:#fff;

    font-size:1.75rem;
}

.del-journey-lead{
    color:#fff!important;
    font-weight:600;
}

.del-journey-card p{
    margin:0 0 14px;

    color:
        rgba(255,255,255,.63);

    font-size:.87rem;
    line-height:1.55;
}

.del-open-drawer{
    margin-top:auto;
    padding:16px 0 0;

    text-align:left;

    color:#fff;

    background:none;
    border:0;

    font-size:.83rem;
    font-weight:800;
}


/* =========================================================
   COMPETENCIAS
========================================================= */

.del-competencies{
    background:#fff;
}

.del-competency-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.del-competency{
    min-height:72px;

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

    padding:0 22px;

    text-align:left;

    border:
        1px solid var(--line);

    border-radius:13px;

    background:var(--off);

    color:var(--dark);

    font-weight:700;

    transition:.2s;
}

.del-competency:hover{
    color:var(--green);

    background:var(--green-soft);

    border-color:
        rgba(11,122,67,.16);
}

.del-competency span{
    color:var(--green);

    font-size:1.2rem;
}


/* =========================================================
   DEL + INSTITUCION
========================================================= */

.del-institution{
    padding:76px 0;

    background:var(--off);
}

.del-institution-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:68px;
    align-items:center;
}

.del-institution-copy h2{
    max-width:610px;

    margin:0;

    color:var(--dark);

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

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

.del-institution-copy p{
    max-width:620px;

    margin:20px 0 0;

    color:var(--text);

    line-height:1.7;
}

.del-institution-route{
    border-top:
        1px solid var(--line);
}

.del-institution-route a{
    display:grid;

    grid-template-columns:
        1fr
        1.2fr
        auto;

    gap:15px;

    align-items:center;

    padding:20px 4px;

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

    transition:
        padding .2s ease,
        color .2s ease;
}

.del-institution-route a:hover{
    padding-left:12px;

    color:var(--green);
}

.del-institution-route span{
    color:var(--muted);

    font-size:.78rem;
    font-weight:700;
}

.del-institution-route strong{
    font-size:1.2rem;
}

.del-institution-route b{
    color:var(--green);

    font-size:1.2rem;
}


/* =========================================================
   DRAWER BACKDROP
========================================================= */

.del-drawer-backdrop{
    position:fixed;

    inset:0;

    z-index:1990;

    background:
        rgba(5,22,15,.52);

    backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;

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

.del-drawer-backdrop.is-visible{
    opacity:1;
    visibility:visible;
}


/* =========================================================
   DRAWER
========================================================= */

.del-drawer{
    position:fixed;

    top:0;
    right:0;

    z-index:2000;

    width:min(620px,92vw);
    height:100vh;

    overflow-y:auto;

    background:#fff;

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

    transform:
        translateX(105%);

    visibility:hidden;

    transition:
        transform .4s cubic-bezier(.22,.8,.35,1),
        visibility .4s;
}

.del-drawer.is-open{
    transform:translateX(0);

    visibility:visible;
}

body.drawer-open{
    overflow:hidden;
}

.del-drawer-header{
    position:sticky;

    top:0;

    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;

    padding:
        28px 32px
        24px;

    background:var(--green-deep);

    color:#fff;
}

.del-drawer-header span{
    display:block;

    margin-bottom:6px;

    color:#a8cfb8;

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.11em;
}

.del-drawer-header h2{
    margin:0;

    color:#fff;

    font-size:2.4rem;
    line-height:1.05;
}

.del-drawer-close{
    width:42px;
    height:42px;

    flex:0 0 auto;

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

    padding:0;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius:50%;

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

    color:#fff;

    font-size:1.7rem;
    line-height:1;
}

.del-drawer-body{
    padding:
        32px
        32px
        50px;
}

.del-drawer-lead{
    margin:0 0 28px;

    color:var(--dark);

    font-size:1.2rem;
    line-height:1.55;
    font-weight:600;
}

.del-drawer-body h3{
    margin:
        32px 0
        10px;

    color:var(--dark);

    font-size:1.1rem;
}

.del-drawer-body p{
    color:var(--text);

    line-height:1.7;
}

.del-drawer-body > .btn{
    margin-top:30px;
}


/* =========================================================
   DRAWER TAGS
========================================================= */

.drawer-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.drawer-tags span{
    padding:
        8px 11px;

    border-radius:999px;

    background:var(--green-soft);

    color:var(--green-dark);

    font-size:.78rem;
    font-weight:700;
}


/* =========================================================
   DRAWER SCHEDULE
========================================================= */

.drawer-schedule{
    padding:17px 18px;

    border-left:
        4px solid var(--red);

    border-radius:
        0 10px 10px 0;

    background:var(--off);
}

.drawer-schedule span,
.drawer-schedule-list span{
    display:block;

    margin-bottom:4px;

    color:var(--green);

    font-size:.69rem;
    font-weight:900;
    text-transform:uppercase;
}

.drawer-schedule strong,
.drawer-schedule-list strong{
    color:var(--dark);

    font-size:.92rem;
}

.drawer-schedule-list{
    display:grid;
    gap:8px;
}

.drawer-schedule-list > div{
    padding:14px 15px;

    background:var(--off);

    border:
        1px solid var(--line);

    border-radius:10px;
}

.drawer-schedule-list
.drawer-schedule-del{
    border-left:
        4px solid var(--red);
}


/* =========================================================
   MINI ETAPAS
========================================================= */

.drawer-mini-stages{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.drawer-mini-stages > div{
    padding:16px;

    background:var(--off);

    border-radius:10px;
}

.drawer-mini-stages span{
    display:block;

    margin-bottom:16px;

    color:var(--green);

    font-size:.66rem;
    font-weight:900;
}

.drawer-mini-stages strong{
    display:block;

    color:var(--dark);
}

.drawer-mini-stages small{
    color:var(--muted);
}


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

.del-competency-modal{
    position:fixed;

    z-index:2010;

    left:50%;
    top:50%;

    width:min(480px,calc(100% - 30px));

    padding:
        30px
        30px
        32px;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 24px 80px rgba(0,0,0,.2);

    transform:
        translate(-50%,-46%)
        scale(.96);

    opacity:0;
    visibility:hidden;

    transition:.25s;
}

.del-competency-modal.is-open{
    transform:
        translate(-50%,-50%)
        scale(1);

    opacity:1;
    visibility:visible;
}

.del-competency-modal > span{
    display:block;

    margin-bottom:8px;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.12em;
}

.del-competency-modal h3{
    margin:0 0 12px;

    color:var(--dark);

    font-size:1.7rem;
}

.del-competency-modal p{
    margin:0;

    color:var(--text);

    line-height:1.65;
}

.del-competency-modal-close{
    position:absolute;

    right:15px;
    top:15px;

    width:34px;
    height:34px;

    border:0;

    border-radius:50%;

    background:var(--off);

    font-size:1.4rem;
}


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

@media(max-width:991px){

    .del-page-hero-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .del-page-hero-visual{
        max-width:780px;
    }

    .del-summary-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .del-meaning-grid{
        grid-template-columns:1fr;
    }

    .del-foundations-grid{
        grid-template-columns:1fr 1fr;
    }

    .del-journey-grid{
        grid-template-columns:1fr 1fr;
    }

    .del-institution-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

}


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

@media(max-width:575px){

    .del-page-hero{
        padding:36px 0 46px;
    }

    .del-page-hero-copy h1{
        font-size:3rem;
    }

    .del-page-hero-copy p{
        font-size:.95rem;
    }

    .del-page-hero-visual img{
        height:440px;

        border-radius:
            24px 6px 24px 6px;
    }


    /* MEANING */

    .del-letter-card{
        grid-template-columns:58px 1fr;

        padding:20px;
    }

    .del-letter{
        width:54px;
        height:54px;

        font-size:1.6rem;
    }


    /* FOUNDATIONS */

    .del-foundations-grid{
        grid-template-columns:1fr;
    }

    .del-foundation{
        min-height:auto;
    }


    /* JOURNEY */

    .del-journey-grid{
        grid-template-columns:1fr;
    }

    .del-journey-card{
        min-height:auto;
    }


    /* COMPETENCIAS */

    .del-competency-grid{
        grid-template-columns:1fr;
    }


    /* ROUTE */

    .del-institution-route a{
        grid-template-columns:1fr auto;
    }

    .del-institution-route a span{
        grid-column:1 / 3;
    }


    /* DRAWER */

    .del-drawer{
        width:100%;
    }

    .del-drawer-header{
        padding:
            22px
            20px;
    }

    .del-drawer-header h2{
        font-size:2rem;
    }

    .del-drawer-body{
        padding:
            24px
            20px
            40px;
    }

    .drawer-mini-stages{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   PROPUESTA EDUCATIVA
========================================================= */

.education-intro{
    padding-top:64px;
    padding-bottom:68px;
}

.education-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:68px;
    align-items:start;
}

.education-intro-grid h2{
    max-width:610px;
    margin:0;

    color:var(--dark);

    font-size:clamp(2.35rem,4vw,4rem);
    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.education-intro-copy p{
    margin:0 0 17px;

    color:var(--text);

    font-size:1rem;
    line-height:1.72;
}


/* =========================================================
   AREAS
========================================================= */

.education-areas{
    background:var(--off);
}

.education-areas-header{
    max-width:760px;
    margin-bottom:36px;
}

.education-areas-header h2{
    margin:0;

    color:var(--dark);

    font-size:clamp(2.4rem,4vw,4rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.education-areas-header > p{
    max-width:680px;
    margin:18px 0 0;

    color:var(--text);
    line-height:1.68;
}

.education-areas-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.education-area-card{
    min-height:315px;

    display:flex;
    flex-direction:column;

    padding:24px;

    border:1px solid var(--line);
    border-radius:17px;

    background:#fff;

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

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

.education-area-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
}

.education-area-number{
    display:block;

    color:var(--green);

    font-size:.66rem;
    font-weight:900;
    letter-spacing:.1em;
}

.education-area-icon{
    width:46px;
    height:46px;

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

    margin:24px 0;

    border-radius:50%;

    color:var(--green);
    background:var(--green-soft);

    font-size:.95rem;
    font-weight:900;
}

.education-area-card h3{
    margin:0 0 9px;

    color:var(--dark);

    font-size:1.16rem;
    line-height:1.2;
    font-weight:700;
}

.education-area-card p{
    margin:0 0 20px;

    color:var(--text);

    font-size:.87rem;
    line-height:1.58;
}

.education-area-more{
    margin-top:auto;
    padding:0;

    border:0;

    text-align:left;

    color:var(--green);
    background:none;

    font-size:.82rem;
    font-weight:800;
}


/* =========================================================
   DEL
========================================================= */

.education-del{
    position:relative;
    overflow:hidden;

    padding:76px 0;

    color:#fff;
    background:var(--green-deep);
}

.education-del::after{
    content:"";

    position:absolute;

    width:470px;
    height:470px;

    right:-190px;
    top:-205px;

    border:
        86px solid rgba(255,255,255,.026);

    border-radius:50%;
}

.education-del-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:68px;
    align-items:center;
}

.education-del-kicker{
    display:block;

    margin-bottom:10px;

    color:#a8cfb8;

    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
}

.education-del-copy h2{
    max-width:630px;
    margin:0;

    color:#fff;

    font-size:clamp(2.4rem,4vw,4rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.education-del-copy p{
    max-width:630px;
    margin:20px 0 0;

    color:rgba(255,255,255,.70);

    line-height:1.7;
}

.education-del-copy strong{
    color:#fff;
}

.education-del-copy .btn{
    margin-top:26px;
}


/* ROUTE */

.education-del-route{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.education-del-route > div{
    min-height:140px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:20px;

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

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:15px;
}

.education-del-route span{
    margin-bottom:auto;

    color:#a8cfb8;

    font-size:.68rem;
    font-weight:800;
}

.education-del-route strong{
    color:#fff;

    font-size:1.35rem;
}


/* =========================================================
   LINKS POR NIVEL
========================================================= */

.education-levels{
    background:#fff;
}

.education-level-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.education-level-link{
    min-height:270px;

    display:flex;
    flex-direction:column;

    padding:27px 25px;

    border:
        1px solid var(--line);

    border-radius:18px;

    background:#fff;

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

.education-level-link:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 36px rgba(0,0,0,.07);
}

.education-level-link > span{
    display:block;

    margin-bottom:auto;

    color:var(--green);

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}

.education-level-link h3{
    margin:28px 0 9px;

    color:var(--dark);

    font-size:1.55rem;
}

.education-level-link p{
    margin:0 0 18px;

    color:var(--text);

    font-size:.9rem;
    line-height:1.58;
}

.education-level-link strong{
    margin-top:auto;

    color:var(--green);

    font-size:.84rem;
}


/* =========================================================
   EDUCATION DRAWER
========================================================= */

.education-drawer-close{
    width:42px;
    height:42px;

    flex:0 0 auto;

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

    padding:0;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius:50%;

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

    color:#fff;

    font-size:1.7rem;
    line-height:1;
}


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

@media(max-width:991px){

    .education-intro-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .education-areas-grid{
        grid-template-columns:1fr 1fr;
    }

    .education-del-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .education-level-links{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:575px){

    .education-intro{
        padding-top:48px;
        padding-bottom:52px;
    }

    .education-intro-grid h2{
        font-size:2.35rem;
    }

    .education-intro-copy p{
        font-size:.95rem;
    }

    .education-areas-grid{
        grid-template-columns:1fr;
    }

    .education-area-card{
        min-height:auto;
    }

    .education-del{
        padding:54px 0;
    }

    .education-del-copy h2{
        font-size:2.35rem;
    }

    .education-del-copy p{
        font-size:.95rem;
    }

    .education-del-route{
        grid-template-columns:1fr;
    }

    .education-del-route > div{
        min-height:115px;
    }

    .education-level-link{
        min-height:auto;
    }

}

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

.contact-page-main{
    background:#fff;
}

.contact-page-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:70px;
    align-items:start;
}


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

.contact-page-info h2{
    max-width:620px;
    margin:0;

    color:var(--dark);

    font-size:clamp(2.4rem,4vw,4rem);
    line-height:1.04;
    letter-spacing:-.035em;
    font-weight:700;
}

.contact-page-info > p{
    max-width:610px;
    margin:20px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* OPCIONES DIRECTAS */

.contact-direct-options{
    display:grid;
    gap:10px;

    margin-top:34px;
}

.contact-direct-card{
    display:grid;
    grid-template-columns:130px 1fr auto;
    gap:16px;
    align-items:center;

    padding:18px 20px;

    border:1px solid var(--line);
    border-radius:14px;

    background:var(--off);

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

.contact-direct-card:hover{
    transform:translateX(5px);

    background:var(--green-soft);

    border-color:
        rgba(11,122,67,.16);
}

.contact-direct-label{
    color:var(--green);

    font-size:.67rem;
    font-weight:900;
    letter-spacing:.1em;
}

.contact-direct-card strong{
    color:var(--dark);

    font-size:.96rem;
}

.contact-direct-card small{
    color:var(--green);

    font-size:.78rem;
    font-weight:700;
}


/* DIRECCIÓN */

.contact-address{
    margin-top:30px;

    padding:22px 24px;

    border-left:
        4px solid var(--red);

    border-radius:
        0 14px 14px 0;

    background:var(--off);
}

.contact-address > span{
    display:block;

    margin-bottom:5px;

    color:var(--green);

    font-size:.67rem;
    font-weight:900;
    letter-spacing:.1em;
}

.contact-address strong{
    color:var(--dark);

    font-size:1rem;
}

.contact-address p{
    margin:4px 0 0;

    color:var(--muted);

    font-size:.9rem;
}


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

.contact-form-card{
    padding:38px 36px;

    background:var(--green-deep);
    color:#fff;

    border-radius:22px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.11);
}

.contact-form-kicker{
    display:block;

    margin-bottom:8px;

    color:#a8cfb8;

    font-size:.7rem;
    font-weight:900;
    letter-spacing:.11em;
}

.contact-form-card h2{
    margin:0;

    color:#fff;

    font-size:2.35rem;
    line-height:1.05;
    letter-spacing:-.03em;
}

.contact-form-card > p{
    margin:12px 0 26px;

    color:rgba(255,255,255,.68);

    font-size:.94rem;
    line-height:1.6;
}


/* CAMPOS */

.contact-field{
    margin-bottom:16px;
}

.contact-field label{
    display:block;

    margin-bottom:7px;

    color:rgba(255,255,255,.82);

    font-size:.78rem;
    font-weight:700;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
    width:100%;

    padding:13px 14px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:10px;

    outline:0;

    color:#fff;

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

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

.contact-field textarea{
    resize:vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:rgba(255,255,255,.36);
}

.contact-field select{
    color:#fff;
}

.contact-field select option{
    color:var(--dark);
    background:#fff;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:
        rgba(255,255,255,.45);

    background:
        rgba(255,255,255,.10);
}

.contact-submit{
    width:100%;

    margin-top:5px;
}


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

.contact-admissions{
    padding:64px 0;

    background:var(--green);
    color:#fff;
}

.contact-admissions-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:50px;
    align-items:center;
}

.contact-admissions .section-kicker{
    color:
        rgba(255,255,255,.72);
}

.contact-admissions h2{
    max-width:650px;
    margin:0;

    color:#fff;

    font-size:clamp(2.2rem,3.8vw,3.6rem);
    line-height:1.04;
    letter-spacing:-.035em;
}

.contact-admissions p{
    max-width:640px;

    margin:17px 0 0;

    color:rgba(255,255,255,.72);

    line-height:1.65;
}


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

@media(max-width:991px){

    .contact-page-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .contact-form-card{
        max-width:760px;
    }

    .contact-admissions-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

}


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

@media(max-width:575px){

    .contact-page-info h2{
        font-size:2.35rem;
    }

    .contact-page-info > p{
        font-size:.95rem;
    }

    .contact-direct-card{
        grid-template-columns:1fr;

        gap:4px;
    }

    .contact-direct-card small{
        margin-top:6px;
    }

    .contact-form-card{
        padding:28px 22px;
    }

    .contact-form-card h2{
        font-size:2rem;
    }

    .contact-admissions{
        padding:52px 0;
    }

    .contact-admissions h2{
        font-size:2.3rem;
    }

    .contact-admissions-action .btn{
        width:100%;
    }

}

/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */

.whatsapp-float{
    position:fixed !important;
    right:24px !important;
    bottom:24px !important;
    z-index:9999 !important;

    display:block !important;

    width:58px !important;
    height:58px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background-color:#25D366 !important;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L.1 480l117.7-30.9c32.4 17.7 68.9 27 106 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.8l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.4c-5.5-2.8-32.8-16.1-37.9-17.9-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 17.9-17.6 21.7-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.7-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.7 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.3 4.6-12.9 4.6-24 3.2-26.3-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:30px 30px !important;

    box-shadow:
        0 7px 22px rgba(0,0,0,.22) !important;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.whatsapp-float:hover{
    transform:translateY(-3px) scale(1.04);

    box-shadow:
        0 11px 28px rgba(0,0,0,.27) !important;
}


/* MOBILE */

@media(max-width:575px){

    .whatsapp-float{
        right:16px !important;
        bottom:16px !important;

        width:56px !important;
        height:56px !important;

        background-size:29px 29px !important;
    }

}

/* =========================================================
   PERFIL DEL ESTUDIANTE DEL
========================================================= */

.del-profile{
    background:var(--off);
}

.del-profile-header{
    max-width:790px;
    margin-bottom:38px;
}

.del-profile-header h2{
    margin:0;

    color:var(--dark);

    font-size:clamp(2.5rem,4vw,4.1rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.del-profile-header > p{
    max-width:740px;

    margin:18px 0 0;

    color:var(--text);

    font-size:1rem;
    line-height:1.7;
}


/* GRID */

.del-profile-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}


/* CARD */

.del-profile-card{
    position:relative;

    min-height:320px;

    display:flex;
    flex-direction:column;

    padding:25px;

    text-align:left;

    border:1px solid var(--line);
    border-radius:18px;

    background:#fff;
    color:inherit;

    box-shadow:
        0 9px 28px rgba(0,0,0,.04);

    cursor:pointer;

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

.del-profile-card:hover{
    transform:translateY(-5px);

    border-color:
        rgba(11,122,67,.18);

    box-shadow:
        0 16px 38px rgba(0,0,0,.075);
}


.del-profile-number{
    color:var(--green);

    font-size:.66rem;
    font-weight:900;
    letter-spacing:.1em;
}


/* SIMBOLO */

.del-profile-symbol{
    width:48px;
    height:48px;

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

    margin:27px 0 23px;

    border-radius:50%;

    color:var(--green);

    background:var(--green-soft);

    font-size:1.25rem;
    font-weight:700;
}

.del-profile-symbol-red{
    color:var(--red);

    background:#fff0f1;
}

.del-profile-symbol-gray{
    color:#757879;

    background:#f0f1f1;
}


.del-profile-label{
    display:block;

    margin-bottom:7px;

    color:var(--muted);

    font-size:.62rem;
    line-height:1.4;
    font-weight:900;
    letter-spacing:.095em;
}


.del-profile-card h3{
    margin:0 0 10px;

    color:var(--dark);

    font-size:1.25rem;
    line-height:1.18;
    font-weight:700;
}

.del-profile-card p{
    margin:0 0 22px;

    color:var(--text);

    font-size:.87rem;
    line-height:1.58;
}

.del-profile-card > strong{
    margin-top:auto;

    color:var(--green);

    font-size:.8rem;
    font-weight:800;
}


/* =========================================================
   DETALLE DENTRO DE DRAWER
========================================================= */

.del-profile-detail{
    display:grid;
    gap:10px;

    margin-top:24px;
}

.del-profile-detail article{
    padding:19px 20px;

    background:var(--off);

    border:1px solid var(--line);

    border-radius:12px;
}

.del-profile-detail article > span{
    display:block;

    margin-bottom:12px;

    color:var(--green);

    font-size:.65rem;
    font-weight:900;
}

.del-profile-detail h3{
    margin:0 0 7px;

    color:var(--dark);

    font-size:1.03rem;
    line-height:1.3;
}

.del-profile-detail p{
    margin:0;

    color:var(--text);

    font-size:.88rem;
    line-height:1.6;
}


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

@media(max-width:991px){

    .del-profile-grid{
        grid-template-columns:1fr 1fr;
    }

}


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

@media(max-width:575px){

    .del-profile-header h2{
        font-size:2.4rem;
    }

    .del-profile-header > p{
        font-size:.95rem;
    }

    .del-profile-grid{
        grid-template-columns:1fr;
    }

    .del-profile-card{
        min-height:auto;
    }

}

/* =========================================================
   DEL - PROGRESION POR AÑO
========================================================= */

.del-progression{
    margin-top:34px;
}

.del-progression-heading{
    margin-bottom:18px;
}

.del-progression-heading > span{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:.67rem;
    font-weight:900;
    letter-spacing:.1em;
}

.del-progression-heading h3{
    margin:0 0 8px;

    color:var(--dark);

    font-size:1.35rem;
    line-height:1.2;
}

.del-progression-heading p{
    margin:0;

    color:var(--text);

    font-size:.88rem;
    line-height:1.6;
}


/* =========================================================
   ACORDEON
========================================================= */

.del-progression-item{
    margin-bottom:9px;

    border:1px solid var(--line);

    border-radius:13px;

    background:#fff;

    overflow:hidden;
}

.del-progression-item summary{
    min-height:72px;

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

    padding:15px 17px;

    cursor:pointer;

    list-style:none;

    transition:
        background .2s ease;
}

.del-progression-item summary::-webkit-details-marker{
    display:none;
}

.del-progression-item summary:hover{
    background:var(--green-soft);
}

.del-progression-item[open] summary{
    background:var(--green-soft);

    border-bottom:
        1px solid rgba(11,122,67,.12);
}

.del-progression-item summary div > span{
    display:block;

    margin-bottom:4px;

    color:var(--green);

    font-size:.63rem;
    font-weight:900;
    letter-spacing:.09em;
}

.del-progression-item summary strong{
    color:var(--dark);

    font-size:.92rem;
    line-height:1.35;
}

.del-progression-item summary > b{
    flex:0 0 auto;

    width:30px;
    height:30px;

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

    border-radius:50%;

    background:#fff;

    color:var(--green);

    font-size:1.1rem;
    font-weight:500;

    transition:
        transform .2s ease;
}

.del-progression-item[open]
summary > b{
    transform:rotate(45deg);
}


/* =========================================================
   AÑOS
========================================================= */

.del-year-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    padding:16px;
}

.del-year-grid-three{
    grid-template-columns:
        repeat(3,1fr);
}

.del-year-grid article{
    min-height:108px;

    padding:14px;

    border-radius:10px;

    background:var(--off);

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

.del-year-grid article > span{
    display:block;

    margin-bottom:8px;

    color:var(--green);

    font-size:.61rem;
    font-weight:900;
    letter-spacing:.08em;
}

.del-year-grid article strong{
    display:block;

    color:var(--dark);

    font-size:.82rem;
    line-height:1.35;
}

.del-year-grid article p{
    margin:8px 0 0;

    color:var(--text);

    font-size:.75rem;
    line-height:1.5;
}


/* =========================================================
   PRODUCTO FINAL
========================================================= */

.del-final-product{
    margin:
        0 16px
        16px;

    padding:14px 16px;

    border-left:
        4px solid var(--red);

    border-radius:
        0 10px 10px 0;

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

.del-final-product > span{
    display:block;

    margin-bottom:4px;

    color:#a8cfb8;

    font-size:.61rem;
    font-weight:900;
    letter-spacing:.09em;
}

.del-final-product strong{
    display:block;

    color:#fff;

    font-size:.85rem;
    line-height:1.4;
}

.del-final-product p{
    margin:6px 0 0;

    color:
        rgba(255,255,255,.64);

    font-size:.76rem;
    line-height:1.5;
}


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

@media(max-width:575px){

    .del-progression{
        margin-top:28px;
    }

    .del-year-grid,
    .del-year-grid-three{
        grid-template-columns:1fr;
    }

    .del-year-grid article{
        min-height:auto;
    }

    .del-progression-item summary{
        min-height:68px;

        padding:14px;
    }

}

/* =========================================================
   DEL - PROGRESIÓN INTERACTIVA
========================================================= */

.del-growth{
    background:var(--off);
}

.del-growth-header{
    max-width:820px;
    margin-bottom:38px;
}

.del-growth-header h2{
    margin:0;

    color:var(--dark);

    font-size:clamp(2.5rem,4vw,4.1rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.del-growth-header p{
    max-width:740px;

    margin:18px 0 0;

    color:var(--text);

    line-height:1.7;
}


/* =========================================================
   SELECTOR ETAPAS
========================================================= */

.del-growth-stage-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-bottom:18px;
}

.del-growth-stage-tab{
    position:relative;

    min-height:105px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;

    padding:18px 20px;

    text-align:left;

    border:1px solid var(--line);
    border-radius:15px;

    background:#fff;
    color:var(--dark);

    font-size:1.15rem;
    font-weight:800;

    cursor:pointer;

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

.del-growth-stage-tab > span{
    position:absolute;

    top:16px;
    right:17px;

    color:var(--green);

    font-size:.65rem;
    font-weight:900;
}

.del-growth-stage-tab small{
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:.68rem;
    font-weight:600;
}

.del-growth-stage-tab:hover{
    transform:translateY(-2px);

    border-color:
        rgba(11,122,67,.20);
}

.del-growth-stage-tab.is-active{
    background:var(--green-deep);
    border-color:var(--green-deep);
    color:#fff;
}

.del-growth-stage-tab.is-active > span{
    color:#a8cfb8;
}

.del-growth-stage-tab.is-active small{
    color:rgba(255,255,255,.58);
}


/* =========================================================
   PANEL DE ETAPA
========================================================= */

.del-growth-stage{
    display:none;

    padding:32px;

    border:1px solid var(--line);
    border-radius:20px;

    background:#fff;
}

.del-growth-stage.is-active{
    display:block;
}

.del-growth-stage-intro{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:50px;

    align-items:end;

    margin-bottom:28px;
}

.del-growth-stage-intro span{
    display:block;

    margin-bottom:5px;

    color:var(--green);

    font-size:.67rem;
    font-weight:900;
    letter-spacing:.1em;
}

.del-growth-stage-intro h3{
    margin:0;

    color:var(--dark);

    font-size:2.8rem;
    line-height:1;
    letter-spacing:-.035em;
}

.del-growth-stage-intro p{
    margin:0;

    color:var(--text);

    line-height:1.65;
}


/* =========================================================
   SELECTOR DE ÁREA
========================================================= */

.del-growth-area-tabs{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-bottom:24px;

    padding-bottom:24px;

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

.del-growth-area-tab{
    min-height:42px;

    padding:0 15px;

    border:1px solid var(--line);
    border-radius:999px;

    background:var(--off);
    color:var(--dark);

    font-size:.77rem;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.del-growth-area-tab:hover{
    color:var(--green);

    border-color:
        rgba(11,122,67,.22);
}

.del-growth-area-tab.is-active{
    color:#fff;

    background:var(--green);
    border-color:var(--green);
}


/* =========================================================
   CONTENIDO ÁREA
========================================================= */

.del-growth-area{
    display:none;
}

.del-growth-area.is-active{
    display:block;
}

.del-growth-area-heading{
    max-width:700px;

    margin-bottom:24px;
}

.del-growth-area-heading > span{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:.65rem;
    font-weight:900;
    letter-spacing:.1em;
}

.del-growth-area-heading h4{
    margin:0;

    color:var(--dark);

    font-size:clamp(1.6rem,2.5vw,2.25rem);
    line-height:1.12;
    letter-spacing:-.025em;
}


/* =========================================================
   TIMELINE
========================================================= */

.del-growth-timeline{
    position:relative;

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

    gap:9px;
}

.del-growth-three{
    grid-template-columns:repeat(3,1fr);
}


/* línea de evolución */

.del-growth-timeline::before{
    content:"";

    position:absolute;

    left:5%;
    right:5%;
    top:18px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--red)
        );

    opacity:.28;
}

.del-growth-timeline article{
    position:relative;
    z-index:1;

    min-height:140px;

    padding:40px 15px 16px;

    border:1px solid var(--line);
    border-radius:13px;

    background:var(--off);
}

.del-growth-timeline article::before{
    content:"";

    position:absolute;

    top:12px;
    left:15px;

    width:12px;
    height:12px;

    border:3px solid #fff;
    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 1px rgba(11,122,67,.25);
}

.del-growth-timeline article:last-child::before{
    background:var(--red);
}

.del-growth-timeline article > span{
    display:block;

    margin-bottom:8px;

    color:var(--green);

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.08em;
}

.del-growth-timeline article strong{
    display:block;

    color:var(--dark);

    font-size:.83rem;
    line-height:1.4;
}


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

.del-growth-result{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    margin-top:14px;

    padding:18px 20px;

    border-radius:12px;

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

.del-growth-result span{
    color:#a8cfb8;

    font-size:.65rem;
    font-weight:900;
    letter-spacing:.1em;
}

.del-growth-result strong{
    color:#fff;

    text-align:right;

    font-size:.95rem;
}


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

@media(max-width:991px){

    .del-growth-stage-intro{
        grid-template-columns:1fr;
        gap:12px;
    }

    .del-growth-timeline{
        grid-template-columns:repeat(3,1fr);
    }

}


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

@media(max-width:575px){

    .del-growth-header h2{
        font-size:2.4rem;
    }

    .del-growth-stage-tabs{
        grid-template-columns:1fr;
    }

    .del-growth-stage-tab{
        min-height:82px;
    }

    .del-growth-stage{
        padding:22px 18px;
    }

    .del-growth-stage-intro h3{
        font-size:2.4rem;
    }

    .del-growth-area-tabs{
        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:16px;

        scrollbar-width:none;
    }

    .del-growth-area-tabs::-webkit-scrollbar{
        display:none;
    }

    .del-growth-area-tab{
        flex:0 0 auto;
    }

    .del-growth-timeline,
    .del-growth-three{
        grid-template-columns:1fr;
    }

    .del-growth-timeline::before{
        left:20px;
        right:auto;
        top:20px;
        bottom:20px;

        width:2px;
        height:auto;

        background:
            linear-gradient(
                var(--green),
                var(--red)
            );
    }

    .del-growth-timeline article{
        min-height:auto;

        padding:
            18px 16px
            18px 48px;
    }

    .del-growth-timeline article::before{
        left:14px;
        top:20px;
    }

    .del-growth-result{
        align-items:flex-start;
        flex-direction:column;

        gap:5px;
    }

    .del-growth-result strong{
        text-align:left;
    }

}

/* =========================================================
   DEL - APRENDER HACIENDO
========================================================= */

.del-experiences{
    background:#fff;
}

.del-experiences-header{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;

    align-items:end;

    margin-bottom:40px;
}

.del-experiences-header h2{
    max-width:680px;

    margin:0;

    color:var(--dark);

    font-size:clamp(2.5rem,4vw,4.1rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.del-experiences-header > p{
    max-width:560px;

    margin:0;

    color:var(--text);

    font-size:.98rem;
    line-height:1.7;
}


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

.del-experiences-grid{
    display:grid;

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

    gap:14px;
}


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

.del-experience-card{
    position:relative;

    min-height:325px;

    display:flex;
    flex-direction:column;

    padding:23px;

    border:1px solid var(--line);
    border-radius:18px;

    background:var(--off);

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.del-experience-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(11,122,67,.18);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.06);
}


/* =========================================================
   CARD SUPERIOR
========================================================= */

.del-experience-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;
}

.del-experience-number{
    color:var(--green);

    font-size:.63rem;
    font-weight:900;
    letter-spacing:.08em;
}

.del-experience-category{
    color:var(--muted);

    text-align:right;

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.085em;
}


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

.del-experience-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding-top:44px;
}

.del-experience-icon{
    width:46px;
    height:46px;

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

    margin-bottom:22px;

    border-radius:50%;

    background:var(--green-soft);
    color:var(--green);

    font-size:1.15rem;
    font-weight:800;
}

.del-experience-icon-red{
    color:var(--red);

    background:#fff0f1;
}

.del-experience-icon-gray{
    color:#676b6d;

    background:#eceeee;
}

.del-experience-content h3{
    margin:0 0 10px;

    color:var(--dark);

    font-size:1.42rem;
    line-height:1.15;
    letter-spacing:-.02em;
}

.del-experience-content p{
    margin:0 0 25px;

    color:var(--text);

    font-size:.86rem;
    line-height:1.62;
}

.del-experience-content > strong{
    display:block;

    margin-top:auto;
    padding-top:16px;

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

    color:var(--green);

    font-size:.82rem;
    line-height:1.45;
    font-weight:800;
}


/* =========================================================
   CARD DESTACADA
========================================================= */

.del-experience-featured{
    background:var(--green-deep);
    border-color:var(--green-deep);
}

.del-experience-featured
.del-experience-number{
    color:#9dceb2;
}

.del-experience-featured
.del-experience-category{
    color:
        rgba(255,255,255,.52);
}

.del-experience-featured
.del-experience-icon{
    background:
        rgba(255,255,255,.10);

    color:#fff;
}

.del-experience-featured
.del-experience-content h3{
    color:#fff;
}

.del-experience-featured
.del-experience-content p{
    color:
        rgba(255,255,255,.70);
}

.del-experience-featured
.del-experience-content > strong{
    color:#fff;

    border-color:
        rgba(255,255,255,.12);
}


/* =========================================================
   CARD FINAL OSCURA
========================================================= */

.del-experience-dark{
    background:var(--dark);
    border-color:var(--dark);
}

.del-experience-dark
.del-experience-number{
    color:#c9cdcb;
}

.del-experience-dark
.del-experience-category{
    color:
        rgba(255,255,255,.46);
}

.del-experience-dark
.del-experience-icon{
    color:#fff;

    background:
        rgba(255,255,255,.10);
}

.del-experience-dark
.del-experience-content h3{
    color:#fff;
}

.del-experience-dark
.del-experience-content p{
    color:
        rgba(255,255,255,.66);
}

.del-experience-dark
.del-experience-content > strong{
    color:#fff;

    border-color:
        rgba(255,255,255,.12);
}


/* =========================================================
   PIE DE SECCION
========================================================= */

.del-experiences-footer{
    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:40px;

    align-items:center;

    margin-top:18px;

    padding:27px 30px;

    border-radius:16px;

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

.del-experiences-footer > div:first-child > span{
    display:block;

    margin-bottom:4px;

    color:var(--green);

    font-size:.63rem;
    font-weight:900;
    letter-spacing:.09em;
}

.del-experiences-footer > div:first-child > strong{
    display:block;

    color:var(--dark);

    font-size:1.05rem;
    line-height:1.35;
}


/* TAGS */

.del-experience-tags{
    display:flex;
    flex-wrap:wrap;

    justify-content:flex-end;

    gap:7px;
}

.del-experience-tags span{
    padding:8px 12px;

    border-radius:999px;

    background:#fff;

    border:
        1px solid rgba(11,122,67,.12);

    color:var(--dark);

    font-size:.7rem;
    font-weight:700;
}


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

@media(max-width:991px){

    .del-experiences-header{
        grid-template-columns:1fr;

        gap:18px;
    }

    .del-experiences-grid{
        grid-template-columns:1fr 1fr;
    }

    .del-experiences-footer{
        grid-template-columns:1fr;

        gap:18px;
    }

    .del-experience-tags{
        justify-content:flex-start;
    }

}


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

@media(max-width:575px){

    .del-experiences-header h2{
        font-size:2.4rem;
    }

    .del-experiences-grid{
        grid-template-columns:1fr;
    }

    .del-experience-card{
        min-height:auto;
    }

    .del-experience-content{
        padding-top:32px;
    }

    .del-experiences-footer{
        padding:22px 18px;
    }

}

/* =========================================================
   INSTITUCION - PILARES PEDAGOGICOS
========================================================= */

.institution-pillars{
    background:var(--off);
}

.institution-pillars-header{
    max-width:820px;
    margin-bottom:40px;
}

.institution-pillars-header h2{
    margin:0;

    color:var(--dark);

    font-size:clamp(2.5rem,4vw,4.1rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.institution-pillars-header p{
    max-width:720px;

    margin:18px 0 0;

    color:var(--text);

    font-size:.98rem;
    line-height:1.7;
}


/* GRID */

.institution-pillars-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}


/* CARD */

.institution-pillar{
    min-height:285px;

    display:flex;
    flex-direction:column;

    padding:24px;

    border:1px solid var(--line);
    border-radius:18px;

    background:#fff;

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

.institution-pillar:hover{
    transform:translateY(-4px);

    border-color:
        rgba(11,122,67,.18);

    box-shadow:
        0 15px 36px rgba(0,0,0,.055);
}


/* TOP */

.institution-pillar-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:38px;
}

.institution-pillar-top > span{
    color:var(--green);

    font-size:.65rem;
    font-weight:900;
    letter-spacing:.09em;
}


/* ICON */

.institution-pillar-icon{
    width:44px;
    height:44px;

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

    border-radius:50%;

    background:var(--green-soft);
    color:var(--green);

    font-weight:800;
}

.institution-pillar-icon-red{
    background:#fff0f1;
    color:var(--red);
}

.institution-pillar-icon-gray{
    background:#eceeee;
    color:#666a6c;
}


/* TEXT */

.institution-pillar h3{
    margin:0 0 11px;

    color:var(--dark);

    font-size:1.35rem;
    line-height:1.18;
    letter-spacing:-.02em;
}

.institution-pillar p{
    margin:0;

    color:var(--text);

    font-size:.87rem;
    line-height:1.65;
}


/* =========================================================
   PILAR DESTACADO
========================================================= */

.institution-pillar-featured{
    background:var(--green-deep);
    border-color:var(--green-deep);
}

.institution-pillar-featured
.institution-pillar-top > span{
    color:#a8cfb8;
}

.institution-pillar-featured
.institution-pillar-icon{
    color:#fff;

    background:
        rgba(255,255,255,.10);
}

.institution-pillar-featured h3{
    color:#fff;
}

.institution-pillar-featured p{
    color:
        rgba(255,255,255,.70);
}


/* =========================================================
   PILAR OSCURO
========================================================= */

.institution-pillar-dark{
    background:var(--dark);
    border-color:var(--dark);
}

.institution-pillar-dark
.institution-pillar-top > span{
    color:#c7cac9;
}

.institution-pillar-dark
.institution-pillar-icon{
    color:#fff;

    background:
        rgba(255,255,255,.10);
}

.institution-pillar-dark h3{
    color:#fff;
}

.institution-pillar-dark p{
    color:
        rgba(255,255,255,.68);
}


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

@media(max-width:991px){

    .institution-pillars-grid{
        grid-template-columns:1fr 1fr;
    }

}


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

@media(max-width:575px){

    .institution-pillars-header h2{
        font-size:2.4rem;
    }

    .institution-pillars-grid{
        grid-template-columns:1fr;
    }

    .institution-pillar{
        min-height:auto;
    }

    .institution-pillar-top{
        margin-bottom:28px;
    }

}

/* =========================================================
   INSTITUCION - VIDA INSTITUCIONAL
========================================================= */

.institution-life{
    overflow:hidden;

    background:#fff;
}

.institution-life-header{
    display:grid;
    grid-template-columns:1fr .8fr;

    gap:70px;

    align-items:end;

    margin-bottom:34px;
}

.institution-life-header h2{
    max-width:650px;

    margin:0;

    color:var(--dark);

    font-size:clamp(2.5rem,4vw,4.1rem);
    line-height:1.03;
    letter-spacing:-.035em;
    font-weight:700;
}

.institution-life-header-right{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;
}

.institution-life-header-right > p{
    max-width:480px;

    margin:0;

    color:var(--text);

    font-size:.95rem;
    line-height:1.7;
}


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

.institution-life-controls{
    display:flex;
    gap:7px;

    flex:0 0 auto;
}

.institution-life-arrow{
    width:44px;
    height:44px;

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

    padding:0;

    border:1px solid var(--line);
    border-radius:50%;

    background:#fff;
    color:var(--dark);

    font-size:1.1rem;

    cursor:pointer;

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

.institution-life-arrow:hover{
    color:#fff;

    background:var(--green);
    border-color:var(--green);
}


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

.institution-life-track{
    display:flex;

    gap:16px;

    width:100%;

    padding:0 0 18px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.institution-life-track::-webkit-scrollbar{
    display:none;
}


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

.institution-life-card{
    flex:0 0 calc((100% - 32px) / 3);

    min-width:340px;

    scroll-snap-align:start;
}


/* IMAGEN */

.institution-life-image{
    position:relative;

    width:100%;
    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:18px;
}

.institution-life-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .5s ease;
}

.institution-life-card:hover
.institution-life-image img{
    transform:scale(1.025);
}


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

.institution-life-copy{
    padding:18px 3px 0;
}

.institution-life-copy > span{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.095em;
}

.institution-life-copy h3{
    margin:0 0 7px;

    color:var(--dark);

    font-size:1.25rem;
    line-height:1.2;
    letter-spacing:-.015em;
}

.institution-life-copy p{
    max-width:350px;

    margin:0;

    color:var(--text);

    font-size:.84rem;
    line-height:1.55;
}


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

@media(max-width:991px){

    .institution-life-header{
        grid-template-columns:1fr;

        gap:16px;
    }

    .institution-life-header-right{
        align-items:center;
    }

.institution-life-card{
    flex:0 0 46%;
    min-width:300px;
}

}


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

@media(max-width:575px){

    .institution-life-header h2{
        font-size:2.4rem;
    }

    .institution-life-header-right{
        display:block;
    }

    .institution-life-controls{
        display:none;
    }

.institution-life-track{
    gap:12px;
    padding-left:0;
    padding-right:0;
}

.institution-life-card{
    flex:0 0 88%;
    min-width:0;
}

    .institution-life-image{
        border-radius:15px;
    }

}

/* =========================================================
   PRIMARIO - RECORRIDO DEL
========================================================= */

.primary-del-journey{
    background:#fff;
}

.primary-del-panel{
    display:grid;
    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    padding:48px;

    border-radius:24px;

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


/* =========================================================
   COPY
========================================================= */

.primary-del-copy{
    align-self:center;
}

.primary-del-copy .section-kicker{
    color:#a8cfb8;
}

.primary-del-copy h2{
    max-width:500px;

    margin:0;

    color:#fff;

    font-size:clamp(2.4rem,4vw,3.8rem);
    line-height:1.03;
    letter-spacing:-.035em;
}

.primary-del-copy p{
    max-width:520px;

    margin:18px 0 0;

    color:
        rgba(255,255,255,.70);

    font-size:.94rem;
    line-height:1.7;
}

.primary-del-copy p + p{
    margin-top:10px;
}

.primary-del-copy p strong{
    color:#fff;
}

.primary-del-copy .btn{
    margin-top:26px;
}


/* =========================================================
   RECORRIDO
========================================================= */

.primary-del-route{
    display:grid;
    grid-template-columns:1fr auto 1fr;

    gap:16px;

    align-items:center;
}


/* ETAPA */

.primary-del-stage{
    min-height:330px;

    display:flex;
    flex-direction:column;

    padding:25px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:18px;

    background:
        rgba(255,255,255,.07);
}

.primary-del-stage-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:46px;
}

.primary-del-stage-top > span{
    color:#9ac9ad;

    font-size:.65rem;
    font-weight:900;
}

.primary-del-stage-top small{
    color:
        rgba(255,255,255,.50);

    font-size:.63rem;
    font-weight:800;
    letter-spacing:.08em;
}

.primary-del-stage h3{
    margin:0 0 9px;

    color:#fff;

    font-size:1.65rem;
    line-height:1.1;
}

.primary-del-stage > p{
    margin:0 0 24px;

    color:
        rgba(255,255,255,.65);

    font-size:.82rem;
    line-height:1.55;
}


/* TAGS */

.primary-del-tags{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:auto;
}

.primary-del-tags span{
    padding:7px 10px;

    border-radius:999px;

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

    color:
        rgba(255,255,255,.82);

    font-size:.65rem;
    font-weight:700;
}


/* FLECHA */

.primary-del-arrow{
    color:#9ac9ad;

    font-size:1.6rem;
}


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

@media(max-width:991px){

    .primary-del-panel{
        grid-template-columns:1fr;

        gap:38px;
    }

}


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

@media(max-width:575px){

    .primary-del-panel{
        padding:30px 20px;

        border-radius:20px;
    }

    .primary-del-copy h2{
        font-size:2.4rem;
    }

    .primary-del-route{
        grid-template-columns:1fr;
    }

    .primary-del-stage{
        min-height:auto;
    }

    .primary-del-stage-top{
        margin-bottom:30px;
    }

    .primary-del-arrow{
        transform:rotate(90deg);

        text-align:center;
    }

}

/* =========================================================
   SECUNDARIO - RECORRIDO DEL
========================================================= */

.secondary-del-journey{
    background:#fff;
}

.secondary-del-panel{
    display:grid;
    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    padding:48px;

    border-radius:24px;

    background:var(--dark);
}


/* =========================================================
   COPY
========================================================= */

.secondary-del-copy{
    align-self:center;
}

.secondary-del-copy .section-kicker{
    color:#b9c2bd;
}

.secondary-del-copy h2{
    max-width:500px;

    margin:0;

    color:#fff;

    font-size:clamp(2.4rem,4vw,3.8rem);
    line-height:1.03;
    letter-spacing:-.035em;
}

.secondary-del-copy p{
    max-width:520px;

    margin:18px 0 0;

    color:rgba(255,255,255,.68);

    font-size:.94rem;
    line-height:1.7;
}

.secondary-del-copy p + p{
    margin-top:10px;
}

.secondary-del-copy p strong{
    color:#fff;
}

.secondary-del-copy .btn{
    margin-top:26px;
}


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

.secondary-del-visual{
    padding:28px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;

    background:rgba(255,255,255,.055);
}


/* TOP */

.secondary-del-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:48px;
}

.secondary-del-top span{
    display:block;

    margin-bottom:5px;

    color:#9fc8af;

    font-size:.63rem;
    font-weight:900;
    letter-spacing:.09em;
}

.secondary-del-top h3{
    margin:0;

    color:#fff;

    font-size:2rem;
    line-height:1;
}

.secondary-del-top > strong{
    color:rgba(255,255,255,.55);

    font-size:.75rem;
    letter-spacing:.08em;
}


/* =========================================================
   LINEA 1 A 6
========================================================= */

.secondary-del-line{
    position:relative;

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

    gap:8px;

    margin-bottom:30px;
}

.secondary-del-line::before{
    content:"";

    position:absolute;

    left:7%;
    right:7%;
    top:17px;

    height:2px;

    background:linear-gradient(
        90deg,
        var(--green),
        var(--red)
    );

    opacity:.7;
}

.secondary-del-year{
    position:relative;
    z-index:1;

    display:flex;
    justify-content:center;
}

.secondary-del-year span{
    width:36px;
    height:36px;

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

    border-radius:50%;

    border:3px solid var(--dark);

    background:var(--green);
    color:#fff;

    font-size:.67rem;
    font-weight:900;
}

.secondary-del-year-final span{
    background:var(--red);
}


/* =========================================================
   AREAS
========================================================= */

.secondary-del-focus{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.10);
}

.secondary-del-focus span{
    padding:8px 11px;

    border-radius:999px;

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

    color:rgba(255,255,255,.82);

    font-size:.67rem;
    font-weight:700;
}


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

.secondary-del-outcome{
    margin-top:26px;

    padding:18px;

    border-radius:12px;

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

.secondary-del-outcome span{
    display:block;

    margin-bottom:5px;

    color:#9ec6ac;

    font-size:.61rem;
    font-weight:900;
    letter-spacing:.09em;
}

.secondary-del-outcome strong{
    color:#fff;

    font-size:.9rem;
    line-height:1.45;
}


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

@media(max-width:991px){

    .secondary-del-panel{
        grid-template-columns:1fr;

        gap:38px;
    }

}


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

@media(max-width:575px){

    .secondary-del-panel{
        padding:30px 20px;

        border-radius:20px;
    }

    .secondary-del-copy h2{
        font-size:2.4rem;
    }

    .secondary-del-visual{
        padding:22px 16px;
    }

    .secondary-del-line{
        gap:3px;
    }

    .secondary-del-year span{
        width:32px;
        height:32px;

        font-size:.62rem;
    }

}

/* =========================================================
   CONTACTO - ENVÍO FORMULARIO
========================================================= */

.contact-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}


.contact-submit:disabled{
    opacity:.65;
    cursor:not-allowed;
    pointer-events:none;
}


.contact-form-status{
    display:none;

    margin-top:15px;
    padding:14px 16px;

    border-radius:10px;

    font-size:.84rem;
    line-height:1.5;
    font-weight:600;
}


.contact-form-status.is-success{
    display:block;

    color:var(--green-dark);

    background:var(--green-soft);

    border:
        1px solid
        rgba(11,122,67,.16);
}


.contact-form-status.is-error{
    display:block;

    color:#a30d15;

    background:#fff1f2;

    border:
        1px solid
        rgba(237,17,28,.16);
}

/* =========================================================
   CONTACTO - CONFIRMACION
========================================================= */

.contact-form-card.is-success
> .contact-form-kicker,

.contact-form-card.is-success
> h2,

.contact-form-card.is-success
> p,

.contact-form-card.is-success
> form{
    display:none;
}


.contact-success-panel{
    display:none;

    min-height:520px;

    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    padding:10px 0;
}


.contact-success-panel.is-visible{
    display:flex;
}


/* ICONO */

.contact-success-icon{
    width:58px;
    height:58px;

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

    margin-bottom:26px;

    border-radius:50%;

    background:#fff;
    color:var(--green);

    font-size:1.45rem;
    font-weight:900;
}


/* KICKER */

.contact-success-panel > span{
    display:block;

    margin-bottom:10px;

    color:#a8cfb8;

    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
}


/* TITULO */

.contact-success-panel h2{
    max-width:480px;

    margin:0 0 15px;

    color:#fff;

    font-size:2.15rem;
    line-height:1.08;
    letter-spacing:-.025em;
}


/* TEXTO */

.contact-success-panel p{
    max-width:470px;

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:.95rem;
    line-height:1.7;
}


/* BOTON */

.contact-success-panel .btn{
    margin-top:28px;
}


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

@media(max-width:575px){

    .contact-success-panel{
        min-height:430px;
        padding:5px 0;
    }

    .contact-success-panel h2{
        font-size:1.9rem;
    }

}

/* =========================================================
   SECUNDARIO - TITULO DE EGRESO
========================================================= */

.secondary-degree{
    background:var(--off);
}

.secondary-degree-panel{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:end;

    padding:38px 42px;

    border-radius:20px;

    background:#fff;

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

.secondary-degree-panel h2{
    max-width:620px;

    margin:0;

    color:var(--dark);

    font-size:clamp(2.2rem,3.5vw,3.4rem);
    line-height:1.05;
    letter-spacing:-.03em;
}

.secondary-degree-panel > p{
    margin:0;

    color:var(--text);

    font-size:.95rem;
    line-height:1.7;
}

.secondary-degree-panel > p strong{
    color:var(--dark);
}


@media(max-width:767px){

    .secondary-degree-panel{
        grid-template-columns:1fr;

        gap:18px;

        padding:28px 22px;
    }

    .secondary-degree-panel h2{
        font-size:2.25rem;
    }

}

@media(max-width:575px){

    .footer-logo{
        width:90px;
        height:auto;
    }

}

/* =========================================================
   INSTITUCION - PILARES MOBILE
========================================================= */

@media(max-width:575px){

    .institution-pillars{
        padding-top:56px;
        padding-bottom:56px;
    }

    .institution-pillars-header{
        margin-bottom:28px;
    }

    .institution-pillars-header h2{
        font-size:2.25rem;
        line-height:1.08;
        letter-spacing:-.03em;
    }

    .institution-pillars-header p{
        margin-top:16px;

        font-size:.95rem;
        line-height:1.62;
    }


    /* GRID */

    .institution-pillars-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }


    /* TARJETA */

    .institution-pillar{
        min-height:0;

        padding:20px;

        border:1px solid var(--line);
        border-radius:16px;

        background:#fff;

        box-shadow:none;
    }


    /* PARTE SUPERIOR */

    .institution-pillar-top{
        display:flex;
        align-items:center;
        justify-content:space-between;

        margin-bottom:18px;
    }

    .institution-pillar-top > span{
        font-size:.62rem;
        line-height:1;

        color:var(--green);
    }


    /* ICONO */

    .institution-pillar-icon{
        width:38px;
        height:38px;

        font-size:.95rem;
    }


    /* TITULO */

    .institution-pillar h3{
        margin:0 0 9px;

        font-size:1.25rem;
        line-height:1.2;
    }


    /* TEXTO */

    .institution-pillar p{
        margin:0;

        font-size:.87rem;
        line-height:1.58;
    }


    /* DESTACADA VERDE */

    .institution-pillar-featured{
        background:var(--green-deep);
        border-color:var(--green-deep);
    }

    .institution-pillar-featured
    .institution-pillar-top > span{
        color:#a8cfb8;
    }


    /* DESTACADA OSCURA */

    .institution-pillar-dark{
        background:var(--dark);
        border-color:var(--dark);
    }

    .institution-pillar-dark
    .institution-pillar-top > span{
        color:#c7cac9;
    }

}

@media(max-width:991px){

    .nav-dropdown-menu{
        margin-top:10px;
        padding:10px;

        background:#f2f7f4;

        border-radius:12px;
        border:1px solid rgba(11,122,67,.10);
    }

    .nav-dropdown-menu a{
        display:block;

        padding:12px 14px;

        border-radius:9px;

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

    .nav-dropdown-menu a + a{
        margin-top:3px;
    }

    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus{
        background:#ffffff;
        color:var(--green);
    }

}

/* =========================================================
   SECUNDARIO - DEL MOBILE FIX
========================================================= */

@media(max-width:575px){

    .secondary-del-journey{
        padding-top:55px;
        padding-bottom:55px;
        background:#fff;
    }


    .secondary-del-panel{
        display:block;

        padding:28px 20px;

        border-radius:20px;

        background:var(--dark);
    }


    /* COPY */

    .secondary-del-copy{
        display:block;
    }

    .secondary-del-copy .section-kicker{
        display:block;

        margin-bottom:12px;

        color:#a8cfb8;
    }

    .secondary-del-copy h2{
        margin:0 0 18px;

        color:#fff;

        font-size:2.35rem;
        line-height:1.05;
        letter-spacing:-.03em;
    }

    .secondary-del-copy p{
        margin:0 0 12px;

        color:rgba(255,255,255,.72);

        font-size:.92rem;
        line-height:1.62;
    }

    .secondary-del-copy p strong{
        color:#fff;
    }

    .secondary-del-copy .btn{
        display:inline-flex;

        margin-top:18px;
        margin-bottom:32px;
    }


    /* VISUAL */

    .secondary-del-visual{
        display:block;

        padding:20px 16px;

        border:1px solid rgba(255,255,255,.12);
        border-radius:16px;

        background:rgba(255,255,255,.055);
    }


    /* CABECERA */

    .secondary-del-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:15px;

        margin-bottom:28px;
    }

    .secondary-del-top span{
        color:#9fc8af;
    }

    .secondary-del-top h3{
        margin:0;

        color:#fff;

        font-size:1.7rem;
    }

    .secondary-del-top > strong{
        color:rgba(255,255,255,.6);
    }


    /* AÑOS */

    .secondary-del-line{
        position:relative;

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

        gap:4px;

        margin-bottom:24px;
    }

    .secondary-del-line::before{
        content:"";

        position:absolute;

        left:7%;
        right:7%;
        top:16px;

        height:2px;

        background:linear-gradient(
            90deg,
            var(--green),
            var(--red)
        );

        opacity:.65;
    }

    .secondary-del-year{
        position:relative;
        z-index:1;

        display:flex;
        justify-content:center;
    }

    .secondary-del-year span{
        width:32px;
        height:32px;

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

        border-radius:50%;

        border:3px solid var(--dark);

        background:var(--green);
        color:#fff;

        font-size:.62rem;
        font-weight:900;
    }

    .secondary-del-year-final span{
        background:var(--red);
    }


    /* AREAS */

    .secondary-del-focus{
        display:flex;
        flex-wrap:wrap;

        gap:6px;

        padding-top:20px;

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

    .secondary-del-focus span{
        padding:7px 10px;

        border-radius:999px;

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

        color:rgba(255,255,255,.85);

        font-size:.64rem;
        line-height:1.3;
        font-weight:700;
    }


    /* RESULTADO */

    .secondary-del-outcome{
        margin-top:22px;

        padding:15px;

        border-radius:11px;

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

    .secondary-del-outcome span{
        color:#9ec6ac;
    }

    .secondary-del-outcome strong{
        display:block;

        color:#fff;

        font-size:.84rem;
        line-height:1.45;
    }

}

/* =========================================================
   PROGRAMA DEL - PROGRESION MOBILE FIX
========================================================= */

@media(max-width:575px){

    .del-growth{
        padding-top:56px;
        padding-bottom:56px;
        background:var(--off);
    }


    /* HEADER */

    .del-growth-header{
        margin-bottom:28px;
    }

    .del-growth-header h2{
        font-size:2.35rem;
        line-height:1.08;
    }

    .del-growth-header p{
        font-size:.95rem;
        line-height:1.62;
    }


    /* =====================================================
       ETAPAS
    ====================================================== */

    .del-growth-stage-tabs{
        display:grid;
        grid-template-columns:1fr;

        gap:10px;

        margin-bottom:18px;
    }

    .del-growth-stage-tab{
        min-height:78px;

        padding:16px 18px;

        border:1px solid var(--line);
        border-radius:14px;

        background:#fff;
        color:var(--dark);

        text-align:left;
    }

    .del-growth-stage-tab > span{
        top:14px;
        right:16px;
    }

    .del-growth-stage-tab small{
        margin-top:4px;
    }

    .del-growth-stage-tab.is-active{
        background:var(--green-deep);
        border-color:var(--green-deep);
        color:#fff;
    }


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

    .del-growth-stage{
        display:none !important;

        padding:22px 18px;

        border:1px solid var(--line);
        border-radius:18px;

        background:#fff;
    }

    .del-growth-stage.is-active{
        display:block !important;
    }


    /* INTRO */

    .del-growth-stage-intro{
        display:block;

        margin-bottom:22px;
    }

    .del-growth-stage-intro > div{
        margin-bottom:12px;
    }

    .del-growth-stage-intro h3{
        font-size:2.15rem;
    }

    .del-growth-stage-intro p{
        font-size:.92rem;
        line-height:1.6;
    }


    /* =====================================================
       AREAS
    ====================================================== */

    .del-growth-area-tabs{
        display:flex;
        flex-wrap:nowrap;

        gap:7px;

        overflow-x:auto;

        margin-bottom:22px;

        padding-bottom:12px;

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

        scrollbar-width:none;
    }

    .del-growth-area-tabs::-webkit-scrollbar{
        display:none;
    }

    .del-growth-area-tab{
        flex:0 0 auto;

        min-height:40px;

        padding:0 14px;

        border:1px solid var(--line);
        border-radius:999px;

        background:var(--off);
        color:var(--dark);

        font-size:.76rem;
        font-weight:700;
    }

    .del-growth-area-tab.is-active{
        background:var(--green);
        border-color:var(--green);
        color:#fff;
    }


    /* =====================================================
       CONTENIDO DE AREA
    ====================================================== */

    .del-growth-area{
        display:none !important;
    }

    .del-growth-area.is-active{
        display:block !important;
    }

    .del-growth-area-heading{
        margin-bottom:20px;
    }

    .del-growth-area-heading h4{
        font-size:1.55rem;
        line-height:1.16;
    }


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

    .del-growth-timeline,
    .del-growth-three{
        display:grid;

        grid-template-columns:1fr;

        gap:10px;
    }

    .del-growth-timeline::before{
        display:none;
    }

    .del-growth-timeline article{
        min-height:auto;

        padding:16px;

        border:1px solid var(--line);
        border-radius:12px;

        background:var(--off);
    }

    .del-growth-timeline article::before{
        display:none;
    }

    .del-growth-timeline article > span{
        margin-bottom:6px;

        font-size:.62rem;
    }

    .del-growth-timeline article strong{
        font-size:.9rem;
        line-height:1.4;
    }


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

    .del-growth-result{
        display:block;

        margin-top:12px;

        padding:15px 16px;

        border-radius:11px;

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

    .del-growth-result span{
        display:block;

        margin-bottom:5px;
    }

    .del-growth-result strong{
        display:block;

        text-align:left;

        font-size:.86rem;
        line-height:1.45;
    }

}

/* =========================================================
   DEL - APRENDER HACIENDO MOBILE FIX
========================================================= */

@media(max-width:575px){

    .del-experiences{
        padding-top:56px;
        padding-bottom:56px;
        background:#fff;
    }


    /* HEADER */

    .del-experiences-header{
        display:block;
        margin-bottom:28px;
    }

    .del-experiences-header h2{
        font-size:2.25rem;
        line-height:1.08;
        letter-spacing:-.03em;
    }

    .del-experiences-header > p{
        margin-top:16px;

        font-size:.95rem;
        line-height:1.62;
    }


    /* GRID */

    .del-experiences-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }


    /* TARJETA */

    .del-experience-card{
        min-height:0;

        padding:20px;

        border:1px solid var(--line);
        border-radius:16px;

        background:var(--off);

        box-shadow:none;
    }


    /* PARTE SUPERIOR */

    .del-experience-top{
        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:12px;

        margin-bottom:22px;
    }

    .del-experience-number{
        font-size:.62rem;
    }

    .del-experience-category{
        max-width:70%;

        font-size:.58rem;
        line-height:1.35;
    }


    /* CONTENIDO */

    .del-experience-content{
        display:flex;
        flex-direction:column;

        padding-top:0;
    }

    .del-experience-icon{
        width:40px;
        height:40px;

        margin-bottom:16px;

        font-size:1rem;
    }

    .del-experience-content h3{
        margin-bottom:10px;

        font-size:1.35rem;
        line-height:1.15;
    }

    .del-experience-content p{
        margin-bottom:20px;

        font-size:.88rem;
        line-height:1.58;
    }

    .del-experience-content > strong{
        margin-top:0;
        padding-top:14px;

        font-size:.78rem;
        line-height:1.4;
    }


    /* DESTACADA VERDE */

    .del-experience-featured{
        background:var(--green-deep);
        border-color:var(--green-deep);
    }


    /* DESTACADA OSCURA */

    .del-experience-dark{
        background:var(--dark);
        border-color:var(--dark);
    }


    /* PIE DE SECCIÓN */

    .del-experiences-footer{
        display:block;

        margin-top:14px;

        padding:20px 18px;

        border-radius:14px;
    }

    .del-experience-tags{
        display:flex;
        flex-wrap:wrap;

        justify-content:flex-start;

        gap:6px;

        margin-top:14px;
    }

    .del-experience-tags span{
        padding:7px 10px;

        font-size:.67rem;
    }

}

/* =========================================================
   DEL - PERFIL DEL ESTUDIANTE MOBILE FIX
========================================================= */

@media(max-width:575px){

    .del-profile{
        padding-top:56px;
        padding-bottom:56px;
    }

    .del-profile-header{
        margin-bottom:28px;
    }

    .del-profile-header h2{
        font-size:2.3rem;
        line-height:1.08;
    }

    .del-profile-header > p{
        font-size:.95rem;
        line-height:1.62;
    }


    /* GRID */

    .del-profile-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
    }


    /* TARJETA */

    .del-profile-card{
        min-height:0;

        padding:20px;

        text-align:left;

        border-radius:16px;
    }


    /* NÚMERO */

    .del-profile-number{
        display:block;

        margin-bottom:14px;

        font-size:.62rem;
    }


    /* ICONO */

    .del-profile-symbol{
        width:40px;
        height:40px;

        margin:0 0 16px;

        font-size:1rem;
    }


    /* LABEL */

    .del-profile-label{
        margin-bottom:6px;

        font-size:.6rem;
        line-height:1.35;
    }


    /* TITULO */

    .del-profile-card h3{
        margin-bottom:9px;

        font-size:1.3rem;
        line-height:1.18;
    }


    /* TEXTO */

    .del-profile-card p{
        margin-bottom:18px;

        font-size:.88rem;
        line-height:1.58;
    }


    /* CTA */

    .del-profile-card > strong{
        margin-top:0;

        font-size:.78rem;
    }

}

/* =========================================================
   CONTACTO - FIX ESTADOS FORMULARIO
========================================================= */

/* HONEYPOT: NUNCA DEBE VERSE */

.contact-honeypot{
    position:absolute !important;

    left:-10000px !important;
    top:auto !important;

    width:1px !important;
    height:1px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    opacity:0 !important;
    pointer-events:none !important;
}

.contact-honeypot label,
.contact-honeypot input{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;

    opacity:0 !important;
    pointer-events:none !important;
}


/* =========================================================
   PANEL DE ÉXITO
========================================================= */

/* Por defecto SIEMPRE oculto */

.contact-success-panel{
    display:none !important;
}


/* Solamente aparece después del envío exitoso */

.contact-success-panel.is-visible{
    display:flex !important;

    min-height:430px;

    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}


/* =========================================================
   CUANDO EL FORMULARIO FUE ENVIADO
========================================================= */

.contact-form-card.is-success
> .contact-form-kicker,

.contact-form-card.is-success
> h2,

.contact-form-card.is-success
> p,

.contact-form-card.is-success
> form{
    display:none !important;
}


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

@media(max-width:575px){

    .contact-success-panel{
        display:none !important;
    }

    .contact-success-panel.is-visible{
        display:flex !important;

        min-height:400px;

        padding:10px 0;
    }

}