/*=========================================================
= CURSO AUTOGESTIVO :: ¿Y AHORA QUÉ ESTUDIO?
=========================================================*/


/*---------------------------------------------------------
= FUENTES
---------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');


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

:root {
    --ink:#10162f;
    --paper:#fffdf8;
    --lime:#d8ff5f;
    --coral:#ff6b5f;
    --violet:#6c63ff;
    --cyan:#51d7d0;
    --soft:#f4f2ed;
    --yellow:#ffd65a;
}


/*---------------------------------------------------------
= GENERAL
---------------------------------------------------------*/

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Manrope,sans-serif;
}

.container {
    max-width:1180px;
}

.narrow {
    max-width:1000px;
}

.section-space {
    padding:64px 0;
}

.section-heading {
    max-width:760px;
    margin-bottom:26px;
}

.section-kicker {
    display:inline-block;
    margin-bottom:10px;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.section-heading h2,
.intro h2,
.objective-section h2 {
    font:700 clamp(2rem,3.5vw,3.35rem)/1.08 'Space Grotesk';
    letter-spacing:-.045em;
}

.section-heading h2 span,
.intro h2 span {
    background:linear-gradient(transparent 63%,var(--lime) 63%);
}


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

.topbar {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,253,248,.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(16,22,47,.08);
}

.header-logos {
    display:flex;
    align-items:center;
    gap:16px;
}

.header-logos img {
    width:auto;
    object-fit:contain;
}

.header-logos img:nth-of-type(1) {
    height:58px;
}

.header-logos img:nth-of-type(2),
.header-logos img:nth-of-type(3) {
    height:48px;
}

.logo-divider {
    width:1px;
    height:48px;
    background:#b8bbc5;
}

.topbar nav a {
    color:var(--ink);
    text-decoration:none;
    font-size:.9rem;
    font-weight:700;
    transition:.2s;
}

.topbar nav a:hover {
    color:var(--violet);
}

.btn-register {
    padding:12px 30px;
    background:var(--ink);
    color:white;
    border-radius:999px;
    font-weight:700;
}

.btn-register:hover {
    background:var(--violet);
    color:white;
}


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

.hero {
    position:relative;
    background:var(--ink);
    color:white;
}

.min-vh-75 {
    min-height:0;
}

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

.eyebrow {
    display:inline-block;
    margin-bottom:22px;
    color:var(--lime);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hero-title {
    width:100%;
    margin:0 0 24px;
}

.hero-title img {
    display:block;
    width:100%;
    max-width:620px;
    height:auto;
}

.lead-copy {
    max-width:600px;
    margin-bottom:18px;
    font-size:clamp(1.25rem,2vw,1.75rem);
    line-height:1.45;
}

.hero-text {
    max-width:590px;
    margin-bottom:0;
    color:#c8cbda;
    line-height:1.6;
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
    margin-top:26px;
}

.btn-primary-custom {
    padding:14px 24px;
    background:var(--lime);
    color:var(--ink);
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    transition:.2s;
}

.btn-primary-custom:hover {
    background:white;
    color:var(--ink);
}

.microcopy {
    color:#c8cbda;
    font-size:.8rem;
}

.microcopy i {
    margin-right:4px;
    color:white;
}


/*---------------------------------------------------------
= HERO :: JÓVENES
---------------------------------------------------------*/

.hero-visual {
    position:relative;
    width:100%;
    min-height:460px;
}

.hero-students {
    position:absolute;
    top:50%;
    left:53%;  /* un poco más ESPACIO DE LOS JOVENES HERO */
    width:110%;   /* un poco más grande LOS JOVENES HERO */
    max-width:720px;
    height:auto;
    transform:translate(-50%,-50%);
}


/*---------------------------------------------------------
= TU RUTA EMPIEZA AQUÍ
---------------------------------------------------------*/

.big-copy {
    font-size:1.35rem;
}

.intro p {
    line-height:1.65;
}

.map-card {
    padding:32px;
    background:var(--lime);
    border-radius:28px;
    box-shadow:10px 10px 0 var(--ink);
    transform:rotate(2deg);
}

.map-card i {
    font-size:2.5rem;
}

.map-card h3 {
    margin-top:15px;
    font:700 1.7rem 'Space Grotesk';
}

.intro blockquote {
    max-width:900px;
    margin:28px 0 0;
    padding:8px 0 8px 28px;
    border-left:8px solid var(--coral);
    font-size:1.2rem;
}

.intro blockquote strong {
    display:block;
    margin-top:8px;
}


/*---------------------------------------------------------
= ENCABEZADOS COMPACTOS :: TARJETAS
---------------------------------------------------------*/

#para-mi .section-heading,
#logros .section-heading { margin-bottom:16px; }

#para-mi .section-heading h2,
#logros .section-heading h2 {
    margin-bottom:8px;
    font-size:clamp(1.8rem,2.8vw,2.65rem);
    line-height:1.12;
}

#para-mi .section-heading p { margin:0; font-size:.94rem; }

@media(max-width:650px) {
    #para-mi .section-heading h2,
    #logros .section-heading h2 { font-size:clamp(1.55rem,6vw,2rem); }
}

/*---------------------------------------------------------
= ¿ESTE CURSO ES PARA MÍ?
---------------------------------------------------------*/

.soft-bg {
    background:var(--soft);
}

 .choice-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.choice-card {
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    grid-template-rows:38px auto;
    align-content:start;
    gap:9px 10px;
    min-height:0;
    padding:13px 14px;
    background:var(--paper);
    border:2px solid var(--ink);
    border-radius:13px;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
    transition:background .2s,box-shadow .2s,transform .2s;
}

.choice-card > i {
    grid-column:1;
    grid-row:1;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin:0;
    background:var(--lime);
    border-radius:9px;
    font-size:1.2rem;
    line-height:1;
}

.choice-card > span {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    font-size:.7rem;
    font-weight:800;
}

.choice-card > p {
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
    font-size:.88rem;
    font-weight:700;
    line-height:1.4;
}

.choice-card:hover {
    box-shadow:4px 4px 0 var(--ink);
    transform:translateY(-2px);
}

.choice-card.selected {
    background:var(--lime);
    box-shadow:4px 4px 0 var(--ink);
    transform:translateY(-2px);
}

.choice-card.selected > i {
    background:var(--paper);
}

.choice-card:focus-visible {
    outline:3px solid var(--violet);
    outline-offset:3px;
}

.reassure {
    margin-top:12px;
    padding:12px 18px;
    background:var(--ink);
    color:white;
    border-radius:12px;
    opacity:1;
    text-align:center;
    font-size:.9rem;
    line-height:1.45;
}

.reassure.active { opacity:1; }
.reassure b { color:var(--lime); }


/*---------------------------------------------------------
= ¿QUÉ BUSCAMOS CON ESTE CURSO?
---------------------------------------------------------*/

.objective-section {
    background:var(--violet);
    color:white;
}

.giant-number {
    display:block;
    color:rgba(255,255,255,.12);
    font:700 7rem/.85 'Space Grotesk';
}

.light {
    color:var(--lime);
}

.objective-section h2 span {
    color:var(--lime);
}

.objective-section .row {
    --bs-gutter-x:28px;
    --bs-gutter-y:18px;
}

.objective-section p {
    font-size:1.05rem;
    line-height:1.65;
}

.objective-final {
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.3);
}


/*---------------------------------------------------------
= AL TERMINAR ESTA RUTA PODRÁS
---------------------------------------------------------*/

 .achievement-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.achievement-grid article {
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    grid-template-rows:38px auto auto;
    align-content:start;
    gap:8px 10px;
    min-height:0;
    padding:13px 14px;
    border:2px solid var(--ink);
    border-radius:13px;
    transition:box-shadow .2s,transform .2s;
}

.achievement-grid article:nth-child(2n) { background:#f6f4ff; }

.achievement-grid article:hover {
    box-shadow:4px 4px 0 var(--ink);
    transform:translateY(-2px);
}

.achievement-grid article > i {
    grid-column:1;
    grid-row:1;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin:0;
    background:var(--lime);
    border-radius:9px;
    font-size:1.25rem;
    line-height:1;
}

.achievement-grid article > b {
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
    font-size:.68rem;
    letter-spacing:.08em;
}

.achievement-grid article > h3 {
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
    font:700 1.12rem/1.25 'Space Grotesk',sans-serif;
}

.achievement-grid article > p {
    grid-column:1 / -1;
    grid-row:3;
    margin:0;
    color:#555b70;
    font-size:.88rem;
    line-height:1.45;
}


/*---------------------------------------------------------
= ¿CÓMO SERÁ TU RECORRIDO?
---------------------------------------------------------*/

.route-section {
    background:#effcfa;
}

.route-tabs {
    display:flex;
    align-items:center;
    justify-content:center;
    margin:28px 0 24px;
}

.route-tab {
    min-width:190px;
    background:transparent;
    border:0;
}

.route-tab span {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    margin:auto;
    background:white;
    border:3px solid var(--ink);
    border-radius:50%;
    font:700 1.2rem 'Space Grotesk';
}

.route-tab:focus-visible {
    outline:3px solid var(--violet);
    outline-offset:3px;
    border-radius:12px;
}

.route-tab.active span {
    background:var(--ink);
    color:var(--lime);
}

.route-tab b,
.route-tab small {
    display:block;
}

.route-tab b {
    margin-top:12px;
    font-family:'Space Grotesk';
    font-size:1.1rem;
}

.route-tab small {
    color:#6a7083;
}

.route-line {
    width:100px;
    height:3px;
    margin-top:-40px;
    background:var(--ink);
}

.route-panel {
    max-width:900px;
    margin:auto;
    padding:26px;
    background:white;
    border:2px solid var(--ink);
    border-radius:28px;
    box-shadow:10px 10px 0 var(--cyan);
}

.route-panel h3 {
    font:700 1.7rem 'Space Grotesk';
}

.route-panel .question {
    margin-top:14px;
    padding:12px 16px;
    background:var(--lime);
    border-radius:14px;
    font-weight:800;
}

.route-footer {
    display:flex;
    align-items:center;
    max-width:850px;
    margin:24px auto 0;
    gap:18px;
}

.route-footer i {
    font-size:2.5rem;
}

.route-footer p {
    margin:0;
}


/*---------------------------------------------------------
= BOTÓN :: DESCUBRE CÓMO APRENDERÁS
---------------------------------------------------------*/

.btn-learning-info {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:12px;
    padding:11px 22px;
    background:transparent;
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:999px;
    font-size:.9rem;
    font-weight:800;
    transition:background .2s,color .2s,transform .2s;
}

.btn-learning-info:hover {
    background:var(--ink);
    color:var(--lime);
    transform:translateY(-2px);
}

.btn-learning-info:focus-visible {
    outline:3px solid var(--violet);
    outline-offset:3px;
}


/*---------------------------------------------------------
= MODAL :: DESCUBRE CÓMO APRENDERÁS
---------------------------------------------------------*/

.learning-modal {
    overflow:hidden;
    background:var(--ink);
    color:white;
    border:2px solid var(--ink);
    border-radius:24px;
}

.learning-modal .modal-header {
    align-items:flex-start;
    padding:25px 28px 15px;
    border-bottom:0;
}

.learning-modal-kicker {
    display:block;
    margin-bottom:8px;
    color:var(--lime);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.15em;
}

.learning-modal .modal-title {
    color:white;
    font:700 clamp(1.5rem,3vw,2rem)/1.15 'Space Grotesk',sans-serif;
}

.learning-modal .btn-close {
    flex-shrink:0;
    margin-left:12px;
}

.learning-modal .modal-body {
    padding:0 28px 20px;
}

.learning-modal-intro {
    margin-bottom:20px;
    color:#d8dce8;
    font-size:.95rem;
    line-height:1.6;
}


/*---------------------------------------------------------
= MODAL :: TARJETAS DE APRENDIZAJE
---------------------------------------------------------*/

.learning-modal-card {
    height:100%;
    min-height:0;
    padding:18px;
    background:#222b4b;
    border:1px solid #394363;
    border-radius:16px;
    transition:transform .2s,background .2s;
}

.learning-modal-card:hover {
    background:#2d385c;
    transform:translateY(-3px);
}

.learning-modal-card i {
    display:block;
    margin-bottom:12px;
    color:var(--lime);
    font-size:1.7rem;
}

.learning-modal-card h3 {
    margin-bottom:6px;
    color:white;
    font:700 1rem 'Space Grotesk',sans-serif;
}

.learning-modal-card p {
    margin:0;
    color:#d8dce8;
    font-size:.82rem;
    line-height:1.45;
}


/*---------------------------------------------------------
= MODAL :: REFLEXIÓN FINAL
---------------------------------------------------------*/

.learning-modal-message {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding:15px 18px;
    background:var(--lime);
    color:var(--ink);
    border-radius:14px;
}

.learning-modal-message i {
    flex-shrink:0;
    font-size:1.7rem;
}

.learning-modal-message p {
    margin:0;
    font-size:.9rem;
    line-height:1.5;
}


/*---------------------------------------------------------
= MODAL :: PIE Y BOTÓN
---------------------------------------------------------*/

.learning-modal .modal-footer {
    padding:0 28px 24px;
    border-top:0;
}

.learning-modal .modal-footer .btn-primary-custom {
    border:0;
    font-size:.9rem;
}


/*---------------------------------------------------------
= RESPONSIVE :: MODAL DE APRENDIZAJE
---------------------------------------------------------*/

@media(max-width:650px) {

    .btn-learning-info {
        padding:10px 16px;
        font-size:.82rem;
    }

    .learning-modal {
        border-radius:18px;
    }

    .learning-modal .modal-header {
        padding:20px 18px 12px;
    }

    .learning-modal .modal-title {
        font-size:1.45rem;
    }

    .learning-modal .modal-body {
        padding:0 18px 16px;
    }

    .learning-modal-intro {
        margin-bottom:15px;
        font-size:.88rem;
    }

    .learning-modal-card {
        min-height:100px;
        padding:13px;
        border-radius:12px;
    }

    .learning-modal-card i {
        margin-bottom:8px;
        font-size:1.4rem;
    }

    .learning-modal-card h3 {
        font-size:.9rem;
    }

    .learning-modal-card p {
        font-size:.76rem;
    }

    .learning-modal-message {
        gap:10px;
        margin-top:15px;
        padding:12px;
    }

    .learning-modal-message i {
        font-size:1.4rem;
    }

    .learning-modal-message p {
        font-size:.8rem;
    }

    .learning-modal .modal-footer {
        padding:0 18px 18px;
    }

}


/*---------------------------------------------------------
=  INICIA TU RUTA DE APRENDIZAJE :: ¿QUÉ VAMOS A EXPLORAR?
---------------------------------------------------------*/

.learning-section {
    background:var(--paper);
    padding:54px 0;
}

.learning-section .section-heading {
    max-width:850px;
    margin-bottom:32px;
}

.learning-section .section-heading h2 {
    font-size:clamp(2.3rem,4.2vw,3.8rem);
    line-height:1.1;
}

.learning-intro {
    max-width:680px;
    margin:14px auto 0;
    font-size:1rem;
    line-height:1.6;
    color:#555b70;
}

.learning-stage {
    margin-bottom:28px;
}

.learning-stage-header {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.learning-stage-header h3 {
    margin:0;
    font:700 1.3rem 'Space Grotesk',sans-serif;
}

.learning-stage-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:13px;
    color:var(--ink);
    font-size:1.35rem;
}

.discover-icon {
    background:var(--lime);
}

.explore-icon {
    background:var(--cyan);
}

.decide-icon {
    background:var(--yellow);
}


/*---------------------------------------------------------
= TARJETAS DE LOS MÓDULOS
---------------------------------------------------------*/

.learning-card {
    position:relative;
    min-height:155px;
    height:100%;
    padding:22px 24px;
    background:white;
    border:2px solid var(--ink);
    border-radius:20px;
    transition:transform .25s,box-shadow .25s;
}

.learning-card:hover {
    transform:translateY(-3px);
    box-shadow:5px 5px 0 var(--ink);
}

.learning-number {
    display:inline-block;
    margin-bottom:9px;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--violet);
}

.learning-card h4 {
    max-width:90%;
    margin-bottom:8px;
    font:700 1.35rem 'Space Grotesk',sans-serif;
    line-height:1.2;
}

.learning-card p {
    max-width:90%;
    margin:0;
    color:#555b70;
    font-size:.92rem;
    line-height:1.5;
}

.learning-card-icon {
    position:absolute;
    right:20px;
    bottom:16px;
    color:var(--violet);
    font-size:1.65rem;
    opacity:.55;
}

.learning-stage:nth-of-type(3) .learning-card-icon {
    color:#159c98;
}

.learning-stage:nth-of-type(4) .learning-card-icon {
    color:#c18b00;
}


/*---------------------------------------------------------
= MAPA DE DECISIÓN
---------------------------------------------------------*/

.learning-map {
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:8px;
    padding:20px 24px;
    background:var(--lime);
    border:2px solid var(--ink);
    border-radius:20px;
}

.learning-map-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:56px;
    height:56px;
    background:var(--ink);
    color:var(--lime);
    border-radius:16px;
    font-size:1.7rem;
}

.learning-map h3 {
    margin-bottom:5px;
    font:700 1.3rem 'Space Grotesk',sans-serif;
}

.learning-map p {
    margin:0;
    font-size:.95rem;
    line-height:1.5;
}


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

@media(max-width:991px) {

    .learning-section {
        padding:48px 0;
    }

    .learning-section .section-heading h2 {
        font-size:clamp(2.2rem,5vw,3.2rem);
    }

    .learning-card {
        padding:20px;
    }

    .learning-card h4 {
        font-size:1.25rem;
    }

}


/*---------------------------------------------------------
= RESPONSIVE :: MÓVIL
---------------------------------------------------------*/

@media(max-width:650px) {

    .learning-section {
        padding:38px 0;
    }

    .learning-section .section-heading {
        margin-bottom:25px;
    }

    .learning-section .section-heading h2 {
        font-size:2.3rem;
    }

    .learning-intro {
        margin-top:12px;
        font-size:.95rem;
        line-height:1.5;
    }

    .learning-stage {
        margin-bottom:25px;
    }

    .learning-stage-header {
        gap:10px;
        margin-bottom:12px;
    }

    .learning-stage-header h3 {
        font-size:1.15rem;
    }

    .learning-stage-icon {
        width:40px;
        height:40px;
        font-size:1.2rem;
    }

    .learning-stage .row {
        --bs-gutter-y:12px;
    }

    .learning-card {
        min-height:0;
        padding:18px 20px;
        border-radius:17px;
    }

    .learning-number {
        margin-bottom:7px;
        font-size:.68rem;
    }

    .learning-card h4 {
        margin-bottom:6px;
        font-size:1.2rem;
    }

    .learning-card p {
        max-width:90%;
        font-size:.88rem;
        line-height:1.45;
    }

    .learning-card-icon {
        right:15px;
        bottom:12px;
        font-size:1.4rem;
    }

    .learning-map {
        flex-direction:row;
        align-items:center;
        gap:12px;
        padding:17px;
        border-radius:17px;
    }

    .learning-map-icon {
        width:46px;
        height:46px;
        border-radius:13px;
        font-size:1.4rem;
    }

    .learning-map h3 {
        margin-bottom:4px;
        font-size:1.15rem;
    }

    .learning-map p {
        font-size:.85rem;
        line-height:1.45;
    }

}

/*---------------------------------------------------------
=  FINALIZA TU RUTA DE APRENDIZAJE :: ¿QUÉ VAMOS A EXPLORAR?
---------------------------------------------------------*/


/*---------------------------------------------------------
= FOOTER :: BASE INSTITUCIONAL
---------------------------------------------------------*/

.site-footer {
    padding:30px 0;
    background:#e9edf2;
    color:var(--ink);
    font-size:.85rem;
}

.footer-logos {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:20px;
}

.footer-logos img {
    display:block;
    width:auto;
    max-width:45%;
    max-height:62px;
    object-fit:contain;
}

.footer-copyright {
    padding:15px 0;
    border-top:1px solid #c9d1dc;
    border-bottom:1px solid #c9d1dc;
}

.footer-copyright p,
.footer-bottom p {
    margin:0;
    line-height:1.6;
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:16px;
}

.footer-bottom a {
    color:var(--ink);
    font-weight:800;
    text-decoration:none;
}

.footer-bottom a:hover {
    text-decoration:underline;
}


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


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

@media(max-width:991px) {

    .section-space {
        padding:52px 0;
    }

    .hero-content {
        text-align:center;
    }

    .eyebrow {
        margin-bottom:20px;
    }

    .hero-title img {
        max-width:600px;
        margin:auto;
    }

    .lead-copy,
    .hero-text {
        margin-right:auto;
        margin-left:auto;
    }

    .hero-actions {
        justify-content:center;
    }

    .hero-visual {
        max-width:700px;
        min-height:460px;
        margin:auto;
    }

    .hero-students {
        width:100%;
        max-width:700px;
    }

    .choice-grid,
    .achievement-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .section-heading h2,
    .intro h2,
    .objective-section h2 {
        font-size:clamp(2.1rem,4.7vw,3rem);
    }

    .route-tabs {
        align-items:stretch;
    }

    .route-line {
        width:40px;
    }

    .header-logos img:nth-of-type(1) {
        height:48px;
    }

    .header-logos img:nth-of-type(2),
    .header-logos img:nth-of-type(3) {
        height:40px;
    }

}


/*---------------------------------------------------------
= MÓVIL
---------------------------------------------------------*/

@media(max-width:650px) {

    .header-logos {
        gap:8px;
    }

    .logo-divider {
        height:34px;
    }

    .btn-register {
        padding:9px 12px;
        font-size:.75rem;
    }

    .topbar .container {
        gap:8px;
    }

    .header-logos {
        min-width:0;
    }

    .header-logos img:nth-of-type(1) {
        height:34px;
    }

    .header-logos img:nth-of-type(2),
    .header-logos img:nth-of-type(3) {
        height:28px;
    }

    .section-space {
        padding:40px 0;
    }

    .section-heading {
        margin-bottom:20px;
    }

    .section-heading h2,
    .intro h2,
    .objective-section h2 {
        font-size:clamp(1.85rem,7vw,2.55rem);
        line-height:1.12;
    }

    .intro blockquote {
        margin-top:22px;
        padding-left:16px;
        font-size:1.05rem;
    }

    .map-card {
        padding:22px;
        transform:none;
        box-shadow:5px 5px 0 var(--ink);
    }

    .eyebrow {
        font-size:.68rem;
        letter-spacing:.12em;
    }

    .hero-title {
        margin-bottom:20px;
    }

    .hero-title img {
        width:100%;
        max-width:500px;
    }

    .lead-copy {
        font-size:1.25rem;
    }

    .hero-actions {
        flex-direction:column;
        justify-content:center;
        gap:14px;
    }

    .hero-visual {
        min-height:290px;
    }

    .hero-students {
        width:105%;
    }

    .hero .row {
        padding-top:30px !important;
        padding-bottom:24px !important;
        --bs-gutter-y:10px;
    }

    .choice-grid,
    .achievement-grid {
        grid-template-columns:1fr;
        gap:10px;
    }

    .choice-card,
    .achievement-grid article {
        padding:12px 13px;
        grid-template-columns:36px minmax(0,1fr);
        grid-template-rows:36px auto;
        gap:7px 9px;
        border-radius:12px;
    }

    .choice-card > i,
    .achievement-grid article > i {
        width:36px;
        height:36px;
        font-size:1.15rem;
    }

    .choice-card > p,
    .achievement-grid article > p {
        font-size:.86rem;
        line-height:1.4;
    }

    .achievement-grid article {
        grid-template-rows:36px auto auto;
    }

    .achievement-grid article > h3 { font-size:1.05rem; }
    .reassure { padding:12px; font-size:.84rem; }

    .route-tabs {
        flex-direction:row;
        align-items:flex-start;
        gap:4px;
        margin:22px 0 18px;
    }

    .route-line {
        display:none;
    }

    .route-tab {
        flex:1;
        min-width:0;
        padding:0 2px;
    }

    .route-tab span {
        width:42px;
        height:42px;
        font-size:.95rem;
    }

    .route-tab b {
        margin-top:7px;
        font-size:.82rem;
    }

    .route-tab small {
        font-size:.68rem;
        line-height:1.3;
    }

    .route-panel {
        padding:19px;
        border-radius:18px;
        box-shadow:5px 5px 0 var(--cyan);
    }

    .route-panel h3 {
        font-size:1.45rem;
    }

    .route-footer {
        gap:12px;
    }

    .route-footer i {
        font-size:1.9rem;
    }

    .footer-logos img {
        max-height:46px;
    }

}


/*---------------------------------------------------------
= INICIA ANTES DE EMPEZAR :: ¿YA SABES QUÉ VAS A ESTUDIAR?
---------------------------------------------------------*/

.start-section {
    background:var(--ink);
    color:white;
}

.start-heading {
    max-width:850px;
    margin:0 auto 24px;
}

.start-heading .section-kicker {
    color:var(--lime);
}

.start-heading h2 {
    margin:12px 0 5px;
    color:white;
    font:700 clamp(1.4rem,3vw,2rem) 'Space Grotesk',sans-serif;
}

.start-heading h3 {
    margin-bottom:12px;
    color:var(--lime);
    font:800 clamp(2rem,4vw,3rem) 'Space Grotesk',sans-serif;
}

.start-heading p {
    margin:0;
    color:#c8cbda;
    font-size:.95rem;
}


/*---------------------------------------------------------
= ANTES DE EMPEZAR :: OPCIONES DE RESPUESTA
---------------------------------------------------------*/

.start-options {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    max-width:1050px;
    margin:auto;
    gap:15px;
}

.start-option {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100px;
    padding:20px 15px;
    background:#242d4b;
    color:white;
    border:2px solid #46506c;
    border-radius:20px;
    font-size:.95rem;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s,transform .2s;
}

.start-option:hover {
    border-color:var(--lime);
    transform:translateY(-4px);
}

.start-option.active {
    background:var(--lime);
    color:var(--ink);
    border-color:var(--lime);
    box-shadow:5px 5px 0 var(--cyan);
}

.start-option:focus-visible {
    outline:3px solid var(--cyan);
    outline-offset:4px;
}

.start-emoji {
    display:block;
    margin-bottom:12px;
    font-size:2.4rem;
    line-height:1;
}


/*---------------------------------------------------------
= ANTES DE EMPEZAR :: MENSAJE Y BOTÓN
---------------------------------------------------------*/

.start-result {
    max-width:750px;
    margin:20px auto 0;
}

.start-result[hidden] {
    display:none !important;
}

.start-result p {
    margin-bottom:20px;
    color:white;
    font-size:1.05rem;
    line-height:1.6;
}

.start-result strong {
    color:var(--lime);
}

.start-result .btn-primary-custom {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px 28px;
    background:var(--lime);
    color:var(--ink);
    border:2px solid var(--lime);
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    transition:background .2s,transform .2s;
}

.start-result .btn-primary-custom:hover {
    background:white;
    border-color:white;
    color:var(--ink);
    transform:translateY(-3px);
}


/*---------------------------------------------------------
= RESPONSIVE :: ANTES DE EMPEZAR
---------------------------------------------------------*/

@media(max-width:991px) {

    .start-options {
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:650px;
    }

    .start-option {
        min-height:105px;
    }

}

@media(max-width:575px) {

    .start-heading {
        margin-bottom:25px;
    }

    .start-heading h2 {
        font-size:1.35rem;
    }

    .start-heading h3 {
        font-size:2rem;
    }

    .start-heading p {
        font-size:.85rem;
    }

    .start-options {
        gap:12px;
    }

    .start-option {
        min-height:100px;
        padding:15px 10px;
        border-radius:15px;
        font-size:.82rem;
    }

    .start-emoji {
        margin-bottom:9px;
        font-size:2rem;
    }

    .start-result {
        margin-top:25px;
    }

    .start-result p {
        font-size:.9rem;
    }

    .start-result .btn-primary-custom {
        padding:12px 22px;
        font-size:.85rem;
    }

}

/*---------------------------------------------------------
= FINALIZA ANTES DE EMPEZAR :: ¿YA SABES QUÉ VAS A ESTUDIAR?
---------------------------------------------------------*/


/*=========================================================
= INICIA MODAL :: REGISTRO DE ESTUDIANTES
==========================================================*/

        .registro-modal{
            border:0;
            border-radius:22px;
            overflow:hidden;
            background:#ffffff;
            box-shadow:0 24px 70px rgba(16,22,47,.18);
        }

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

        .registro-header{
            align-items:flex-start;
            padding:25px 28px 17px;
            border-bottom:1px solid #e9eaf0;
        }

        .registro-header .btn-close{
            margin:0;
            flex-shrink:0;
        }

        .registro-kicker{
            display:block;
            color:#6c63ff;
            font-family:"Manrope",sans-serif;
            font-size:10px;
            font-weight:900;
            letter-spacing:1.5px;
            margin-bottom:7px;
        }

        .registro-header h2{
            color:#10162f;
            font-family:"Space Grotesk",sans-serif;
            font-size:25px;
            font-weight:800;
            line-height:1.2;
            margin:0 0 8px;
        }

        .registro-header p{
            color:#667085;
            font-size:13px;
            line-height:1.6;
            margin:0;
        }

        /*---------------------------------------------------------
        = CUERPO Y CAMPOS
        ---------------------------------------------------------*/

        .registro-modal .modal-body{
            padding:22px 28px 25px;
        }

        .registro-campo{
            margin-bottom:17px;
        }

        .registro-campo .form-label{
            display:block;
            color:#10162f;
            font-size:13px;
            font-weight:800;
            margin-bottom:7px;
        }

        .registro-campo .form-label span{
            color:#e64c57;
        }

        .registro-campo .form-control,
        .registro-campo .form-select{
            min-height:44px;
            border:1px solid #dce0e8;
            border-radius:11px;
            padding:10px 13px;
            background-color:#ffffff;
            color:#10162f;
            font-size:13px;
            box-shadow:none;
            transition:border-color .2s ease,box-shadow .2s ease;
        }

        .registro-campo .form-control:focus,
        .registro-campo .form-select:focus{
            border-color:#6c63ff;
            box-shadow:0 0 0 3px rgba(108,99,255,.12);
        }

        .registro-campo .form-control::placeholder{
            color:#98a0ae;
        }

        /*---------------------------------------------------------
        = OPCIONES DE PROCEDENCIA
        ---------------------------------------------------------*/

        .registro-radios{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }

        .registro-radio{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            background:#f6f7fa;
            border:1px solid #e5e7ed;
            border-radius:11px;
            cursor:pointer;
            font-size:13px;
            font-weight:700;
            color:#10162f;
            transition:background .2s ease,border-color .2s ease;
        }

        .registro-radio:hover{
            background:#f0efff;
            border-color:#6c63ff;
        }

        .registro-radio input{
            margin:0;
            accent-color:#6c63ff;
        }

        /*---------------------------------------------------------
        = VALIDACIÓN DE CORREOS
        ---------------------------------------------------------*/

        .registro-mensaje-correo{
            min-height:0;
            margin-top:5px;
            font-size:12px;
            font-weight:700;
        }

        .registro-mensaje-correo.error{
            color:#dc3545;
        }

        .registro-mensaje-correo.correcto{
            color:#198754;
        }

        /*---------------------------------------------------------
        = AVISO DE PRIVACIDAD
        ---------------------------------------------------------*/

        .registro-privacidad{
            padding:16px;
            margin-top:6px;
            border:1px solid #e8eaf0;
            border-radius:14px;
            background:#f8f9fc;
        }

        .registro-privacidad-titulo{
            display:flex;
            align-items:center;
            gap:9px;
            margin-bottom:12px;
            color:#10162f;
            font-size:14px;
        }

        .registro-privacidad-titulo i{
            color:#6c63ff;
            font-size:18px;
        }

        .registro-privacidad .form-check{
            margin-bottom:10px;
        }

        .registro-privacidad .form-check-input{
            cursor:pointer;
            border-color:#aeb5c3;
        }

        .registro-privacidad .form-check-input:checked{
            background-color:#6c63ff;
            border-color:#6c63ff;
        }

        .registro-privacidad .form-check-label{
            color:#344054;
            font-size:12px;
            line-height:1.6;
            cursor:pointer;
        }

        .registro-privacidad p{
            color:#667085;
            font-size:11px;
            line-height:1.6;
            margin:0 0 5px;
        }

        .registro-privacidad a{
            color:#5147e5;
            font-size:12px;
            font-weight:800;
            text-decoration:none;
        }

        .registro-privacidad a:hover{
            text-decoration:underline;
        }

        /*---------------------------------------------------------
        = MENSAJES GENERALES
        ---------------------------------------------------------*/

        .registro-mensaje{
            margin-top:12px;
            font-size:12px;
            font-weight:700;
        }

        .registro-mensaje.error{
            color:#dc3545;
        }

        .registro-mensaje.correcto{
            color:#198754;
        }

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

        .registro-acciones{
            display:flex;
            justify-content:flex-end;
            flex-wrap:wrap;
            gap:10px;
            margin-top:20px;
        }

        .registro-btn-cancelar,
        .registro-btn-continuar{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            padding:12px 17px;
            border-radius:11px;
            font-size:12px;
            font-weight:800;
            transition:all .2s ease;
        }

        .registro-btn-cancelar{
            border:1px solid #dce0e8;
            background:#ffffff;
            color:#344054;
        }

        .registro-btn-cancelar:hover{
            background:#f3f4f7;
        }

        .registro-btn-continuar{
            border:1px solid #10162f;
            background:#10162f;
            color:#ffffff;
        }

        .registro-btn-continuar:not(:disabled):hover{
            background:#6c63ff;
            border-color:#6c63ff;
        }

        .registro-btn-continuar:disabled{
            background:#c4c8d2;
            border-color:#c4c8d2;
            cursor:not-allowed;
            opacity:1;
        }

        .registro-obligatorios{
            color:#98a0ae;
            font-size:11px;
            text-align:right;
            margin:12px 0 0;
        }

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

        @media(max-width:575.98px){

            .registro-modal{
                border-radius:17px;
            }

            .registro-header{
                padding:20px 19px 15px;
            }

            .registro-header h2{
                font-size:22px;
            }

            .registro-modal .modal-body{
                padding:19px;
            }

            .registro-acciones{
                flex-direction:column-reverse;
            }

            .registro-btn-cancelar,
            .registro-btn-continuar{
                width:100%;
            }

        }

/*=========================================================
= FINALIZA MODAL :: REGISTRO DE ESTUDIANTES
==========================================================*/


/*=========================================================
= INICIA BOTONES :: APRENDIZAJE Y REGISTRO
==========================================================*/

.route-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

.route-actions .btn-learning-info{
    margin:0;
}

.btn-route-register{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 22px;
    border:2px solid #10162f;
    border-radius:50px;
    background:#d8ff5f;
    color:#10162f;
    font-family:"Manrope",sans-serif;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:all .25s ease;
}

.btn-route-register:hover{
    background:#10162f;
    color:#ffffff;
    transform:translateY(-2px);
}

.btn-route-register:focus-visible{
    outline:3px solid #6c63ff;
    outline-offset:3px;
}

@media(max-width:575.98px){
    .route-actions{
        flex-direction:column;
    }

    .route-actions .btn-learning-info,
    .btn-route-register{
        width:100%;
        max-width:320px;
    }
}
/*=========================================================
= FINALIZA BOTONES :: APRENDIZAJE Y REGISTRO
==========================================================*/