/* =========================================================
   LOGOS HUB ACADEMY
   HOME
========================================================= */


:root {

    /* Marca */
    --academy-purple: #220E7A;
    --academy-purple-dark: #170A47;
    --academy-purple-deep: #11072F;

    --academy-green: #13E8A5;
    --academy-green-dark: #28bb8d;

    /* Neutros */
    --academy-white: #FFFFFF;

    --academy-soft: #FAF9FC;
    --academy-soft-alt: #F4F1FA;
    --academy-purple-soft: #F5F2FC;
    --academy-green-soft: #E9FBF5;

    --academy-text: #211C2B;
    --academy-muted: #706A78;

    --academy-line: #E4E0E8;

}


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


html {

    scroll-behavior: smooth;

}


.academy-page {

    margin: 0;

    background: var(--academy-white);

    font-family: "Nunito", sans-serif;

    color: var(--academy-text);

}


.academy-page *,
.academy-page *::before,
.academy-page *::after {

    box-sizing: border-box;

}


.academy-page h1,
.academy-page h2,
.academy-page h3,
.academy-page h4,
.academy-page p,
.academy-page ul {

    margin-top: 0;

}


.academy-page a {

    text-decoration: none;

}


.academy-page img {

    max-width: 100%;

}


.academy-container {

    width: min(
        1240px,
        calc(100% - 64px)
    );

    margin: 0 auto;

}


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


.academy-hero {

    position: relative;

    overflow: hidden;

    padding: 50px 0 60px;

    background:
        linear-gradient(
            120deg,
            #F8F6FC 0%,
            #FFFFFF 60%,
            #F3FCF9 100%
        );

}


.academy-hero::after {

    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 500px;
    height: 500px;

    border:
        1px solid
        rgba(34, 14, 122, .06);

    border-radius: 50%;

    pointer-events: none;

}


.academy-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(450px, .98fr);

    gap: 72px;

    align-items: center;

}


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


.academy-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-eyebrow::before {

    content: "";

    width: 30px;
    height: 7px;

    border-radius: 999px;

    background: var(--academy-green);

}


.academy-hero-copy h1 {

    max-width: 720px;

    margin-bottom: 24px;

    font-size:
        clamp(
            52px,
            6vw,
            76px
        );

    line-height: .97;

    font-weight: 800;

    letter-spacing: -3.4px;

    color: var(--academy-purple);

}


.academy-hero-copy h1 span {

    display: block;

    color: var(--academy-green);

}


.academy-hero-lead {

    max-width: 640px;

    margin-bottom: 0;

    font-size: 18px;
    line-height: 1.72;

    color: var(--academy-muted);

}


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


.academy-search {

    display: grid;

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

    align-items: center;

    gap: 10px;

    max-width: 660px;

    margin-top: 32px;

    padding:
        8px
        8px
        8px
        20px;

    background: var(--academy-white);

    border:
        2px solid
        var(--academy-purple);

    border-radius: 13px;

    box-shadow:
        0 14px 34px
        rgba(17, 15, 55, .08);

}


.academy-search > i {

    font-size: 18px;

    color: var(--academy-purple);

}


.academy-search input {

    width: 100%;

    padding: 12px 4px;

    border: 0;

    outline: none;

    background: transparent;

    font-family: inherit;
    font-size: 15px;

    color: var(--academy-text);

}


.academy-search input::placeholder {

    color: #8B8692;

}


.academy-search button {

    min-height: 44px;

    padding: 0 22px;

    border: 0;

    border-radius: 9px;

    background: var(--academy-purple);

    font-family: inherit;

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

    color: var(--academy-white);

    cursor: pointer;

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

}


.academy-search button:hover {

    background: var(--academy-purple);

    transform: translateY(-1px);

}


/* =========================================================
   SEARCH EXAMPLES
========================================================= */


.academy-search-examples {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 13px;

    font-size: 11px;

}


.academy-search-examples > span {

    color: #8A8590;

}


.academy-search-examples a {

    font-weight: 800;

    color: var(--academy-purple);

}


.academy-search-examples a:hover {

    text-decoration: underline;

}


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


.academy-hero-route {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 15px;

    margin-top: 27px;

    font-size: 12px;

}


.academy-hero-route > span {

    color: #74707C;

}


.academy-hero-route a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-weight: 800;

    color: var(--academy-purple);

}


/* =========================================================
   HAND NOTE
========================================================= */


.academy-hand-note {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    max-width: 350px;

    margin:
        25px
        0
        0
        45px;

    transform: rotate(-1deg);

}


.academy-hand-line {

    width: 34px;
    height: 1px;

    flex: 0 0 auto;

    margin-top: 16px;

    background: var(--academy-green);

    transform: rotate(-7deg);

}


.academy-hand-note > span:last-child {

    font-family:
        "Caveat",
        cursive;

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

    line-height: 1.03;

    letter-spacing: 0;

    color: var(--academy-purple);

}


.academy-hand-note strong {

    display: block;

    font: inherit;

    color: var(--academy-green-dark);

}


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


.academy-hero-courses {

    position: relative;

    max-width: 510px;

    margin-left: auto;

}


.academy-hero-featured {

    display: block;

    overflow: hidden;

    background: var(--academy-white);

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

    border-radius: 18px;

    color: var(--academy-text);

    box-shadow:
        0 24px 65px
        rgba(17, 15, 55, .13);

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

}


.academy-hero-featured:hover {

    transform: translateY(-5px);

    box-shadow:
        0 32px 75px
        rgba(17, 15, 55, .17);

}


.academy-hero-featured-image {

    position: relative;

    height: 245px;

    overflow: hidden;

    background: var(--academy-soft);

}


.academy-hero-featured-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.academy-live-badge {

    position: absolute;

    top: 16px;
    left: 16px;

    padding: 7px 11px;

    border-radius: 999px;

    background: var(--academy-green);

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

    letter-spacing: .6px;

    text-transform: uppercase;

    color: var(--academy-purple-deep);

}


.academy-hero-featured-body {

    padding: 25px;

}


.academy-course-category {

    margin-bottom: 8px;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-hero-featured h2 {

    margin-bottom: 9px;

    font-size: 27px;
    line-height: 1.15;

    color: var(--academy-purple-dark);

}


.academy-hero-featured p {

    margin-bottom: 17px;

    font-size: 13px;
    line-height: 1.6;

    color: var(--academy-muted);

}


.academy-hero-featured-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 16px;

    margin-bottom: 20px;

}


.academy-hero-featured-meta span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

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

    color: #676271;

}


.academy-hero-featured-meta i {

    color: var(--academy-purple);

}


.academy-hero-featured-link {

    display: flex;

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

    padding-top: 17px;

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

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

    color: var(--academy-purple);

}


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


.academy-hero-mini {

    position: absolute;

    left: -55px;
    bottom: -48px;

    z-index: 4;

    width: 360px;

    display: grid;

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

    gap: 14px;

    align-items: center;

    padding: 12px;

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

    border-radius: 14px;

    background: var(--academy-white);

    box-shadow:
        0 18px 42px
        rgba(17, 15, 55, .13);

    color: var(--academy-text);

    transition:
        transform .2s ease;

}


.academy-hero-mini:hover {

    transform: translateY(-3px);

}


.academy-hero-mini-image {

    width: 74px;
    height: 64px;

    overflow: hidden;

    border-radius: 9px;

    background: var(--academy-soft);

}


.academy-hero-mini-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


.academy-hero-mini span {

    display: block;

    margin-bottom: 2px;

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

    text-transform: uppercase;
    letter-spacing: 1px;

    color: var(--academy-purple);

}


.academy-hero-mini strong {

    display: block;

    margin-bottom: 3px;

    font-size: 13px;
    line-height: 1.25;

}


.academy-hero-mini small {

    font-size: 9px;

    color: var(--academy-muted);

}


.academy-hero-mini > i {

    justify-self: end;

    color: var(--academy-purple);

}


/* =========================================================
   TRUST STRIP
========================================================= */


.academy-trust {

    padding: 26px 0;

    background: var(--academy-purple);

    color: var(--academy-white);

}


.academy-trust-grid {

    display: grid;

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

}


.academy-trust-grid > div {

    min-height: 70px;

    display: grid;

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

    align-content: center;

    padding: 5px 30px;

    border-right:
        1px solid
        rgba(255, 255, 255, .13);

}


.academy-trust-grid > div:first-child {

    padding-left: 0;

}


.academy-trust-grid > div:last-child {

    border-right: 0;

}


.academy-trust-grid i {

    grid-row: 1 / 3;

    align-self: center;

    font-size: 20px;

    color: var(--academy-green);

}


.academy-trust-grid span {

    font-size: 12px;

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

}


.academy-trust-grid strong {

    font-size: 16px;

}


/* =========================================================
   SECTION HEADING
========================================================= */


.academy-section-heading {

    max-width: 830px;

    margin-bottom: 48px;

}


.academy-section-heading > span,
.academy-section-kicker {

    display: block;

    margin-bottom: 15px;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-section-heading h2 {

    margin-bottom: 14px;

    font-size:
        clamp(
            39px,
            4.4vw,
            56px
        );

    line-height: 1.04;

    letter-spacing: -2px;

    color: var(--academy-purple-dark);

}


.academy-section-heading > p {

    max-width: 700px;

    margin-bottom: 0;

    font-size: 16px;
    line-height: 1.7;

    color: var(--academy-muted);

}


.academy-heading-row {

    max-width: none;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

}


.academy-heading-row > div {

    max-width: 780px;

}


.academy-view-all {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding-bottom: 8px;

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

    color: var(--academy-purple);

}


/* =========================================================
   FEATURED COURSES
========================================================= */


.academy-featured {

    padding: 115px 0 125px;

    background: var(--academy-white);

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

}


.academy-course-grid {

    display: grid;

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

    gap: 19px;

}


.academy-card {

    min-width: 0;

    overflow: hidden;

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

    border-radius: 14px;

    background: var(--academy-white);

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

}


.academy-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(34, 14, 122, .28);

    box-shadow:
        0 18px 44px
        rgba(17, 15, 55, .08);

}


.academy-card-link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: var(--academy-text);

}


.academy-card-image {

    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--academy-soft);

}


.academy-card-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .35s ease;

}


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

    transform: scale(1.035);

}


.academy-card-level {

    position: absolute;

    left: 12px;
    bottom: 12px;

    padding: 6px 9px;

    border-radius: 999px;

    background: var(--academy-white);

    box-shadow:
        0 4px 14px
        rgba(17, 15, 55, .1);

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

    color: var(--academy-purple-deep);

}


.academy-card-body {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 19px;

}


.academy-card-category {

    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 1.3px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-card h3 {

    margin-bottom: 9px;

    font-size: 19px;
    line-height: 1.25;

    color: var(--academy-purple-deep);

}


.academy-card-body > p {

    margin-bottom: 18px;

    font-size: 12px;
    line-height: 1.55;

    color: var(--academy-muted);

}


.academy-card-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 7px 13px;

    margin-top: auto;
    margin-bottom: 17px;

}


.academy-card-meta span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 9px;

    color: #77717E;

}


.academy-card-meta i {

    color: var(--academy-purple);

}


.academy-card-action {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 14px;

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

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

    color: var(--academy-purple);

}


.academy-mobile-more {

    display: none;

}


/* =========================================================
   EXPERIENCIA DE APRENDIZAJE
========================================================= */

.academy-experience {

    position: relative;

    overflow: hidden;

    padding: 125px 0;

    background:
        linear-gradient(
            135deg,
            #F7F4FC 0%,
            #F4F0FA 100%
        );

}


/* detalle sutil */

.academy-experience::after {

    content: "";

    position: absolute;

    left: -180px;
    bottom: -240px;

    width: 500px;
    height: 500px;

    border:
        1px solid
        rgba(34, 14, 122, .055);

    border-radius: 50%;

    pointer-events: none;

}


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

.academy-experience-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap: 105px;

    align-items: start;

}


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

.academy-experience-heading {

    position: sticky;

    top: 115px;

    max-width: 480px;

}


.academy-experience-kicker {

    display: block;

    margin-bottom: 18px;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-experience-heading h2 {

    margin-bottom: 21px;

    font-size:
        clamp(
            40px,
            4.5vw,
            58px
        );

    line-height: 1.02;

    letter-spacing: -2px;

    color: var(--academy-purple-dark);

}


.academy-experience-heading h2 strong {

    display: block;

    font-weight: 800;

    color: var(--academy-green-dark);

}


.academy-experience-heading > p {

    max-width: 440px;

    margin-bottom: 0;

    font-size: 16px;
    line-height: 1.72;

    color: var(--academy-muted);

}

/* =========================================================
   FEATURED - CARD EXPLORAR MÁS
========================================================= */

.academy-card-explore {

    border-color:
        var(--academy-purple);

    background:
        var(--academy-purple);

}


.academy-card-explore:hover {

    border-color:
        var(--academy-purple);

    box-shadow:
        0 22px 50px
        rgba(34, 14, 122, .18);

}


.academy-card-explore-link {

    min-height: 100%;

    display: flex;

    flex-direction: column;

    padding: 23px;

    color:
        var(--academy-white);

}


/* =========================================================
   TOP
========================================================= */

.academy-card-explore-top {

    display: flex;

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

    gap: 15px;

    margin-bottom: 45px;

}


.academy-card-explore-top span {

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

    letter-spacing: 1.4px;

    text-transform: uppercase;

    color:
        var(--academy-green);

}


.academy-card-explore-top > i {

    font-size: 15px;

    color:
        var(--academy-green);

    transition:
        transform .2s ease;

}


.academy-card-explore:hover
.academy-card-explore-top > i {

    transform:
        translate(
            3px,
            -3px
        );

}


/* =========================================================
   MAIN
========================================================= */

.academy-card-explore-main {

    margin-top: auto;

}


.academy-card-explore-icon {

    width: 50px;
    height: 50px;

    margin-bottom: 25px;

    display: flex;

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

    border-radius: 14px;

    background:
        rgba(19, 232, 165, .14);

    font-size: 20px;

    color:
        var(--academy-green);

}


.academy-card-explore h3 {

    max-width: 230px;

    margin-bottom: 12px;

    font-size: 25px;

    line-height: 1.08;

    color:
        var(--academy-white);

}


.academy-card-explore p {

    max-width: 250px;

    margin-bottom: 28px;

    font-size: 12px;

    line-height: 1.6;

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

}


/* =========================================================
   ACTION
========================================================= */

.academy-card-explore-action {

    margin-top: auto;

    padding-top: 16px;

    display: flex;

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

    gap: 15px;

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

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

    color:
        var(--academy-green);

}


.academy-card-explore-action i {

    transition:
        transform .2s ease;

}


.academy-card-explore:hover
.academy-card-explore-action i {

    transform:
        translateX(4px);

}


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

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

    .academy-card-explore-top > i,
    .academy-card-explore-action i {

        transition: none;

    }

}

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

.academy-experience-hand {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin:
        34px
        0
        0
        30px;

}


.academy-experience-hand > span {

    width: 34px;
    height: 1px;

    flex: 0 0 auto;

    margin-top: 16px;

    background: var(--academy-green);

    transform: rotate(-7deg);

}


.academy-experience-hand p {

    max-width: 300px;

    margin: 0;

    font-family:
        "Caveat",
        cursive;

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

    line-height: 1.04;

    color: var(--academy-purple);

    transform: rotate(-1deg);

}


/* =========================================================
   PATH
========================================================= */

.academy-learning-path {

    position: relative;

}


/* línea vertical */

.academy-learning-path::before {

    content: "";

    position: absolute;

    top: 23px;
    bottom: 23px;
    left: 23px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            var(--academy-green) 0%,
            rgba(34, 14, 122, .18) 100%
        );

}


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

.academy-learning-step {

    position: relative;

    display: grid;

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

    gap: 26px;

    padding-bottom: 25px;

}


.academy-learning-step:last-child {

    padding-bottom: 0;

}


/* =========================================================
   MARKER
========================================================= */

.academy-learning-marker {

    position: relative;

    z-index: 2;

    width: 48px;
    height: 48px;

    display: flex;

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

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

    border-radius: 50%;

    background: var(--academy-white);

    box-shadow:
        0 8px 20px
        rgba(34, 14, 122, .07);

}


.academy-learning-marker span {

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

    letter-spacing: 1px;

    color: var(--academy-purple);

}


/* final */

.academy-learning-step-final
.academy-learning-marker {

    background: var(--academy-green);

    border-color: var(--academy-green);

}


.academy-learning-step-final
.academy-learning-marker span {

    color: var(--academy-purple-dark);

}


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

.academy-learning-content {

    min-height: 150px;

    display: grid;

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

    gap: 22px;

    padding:
        0
        0
        28px;

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

}


.academy-learning-step-final
.academy-learning-content {

    border-bottom: 0;

}


/* =========================================================
   ICON
========================================================= */

.academy-learning-icon {

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 15px;

    background: var(--academy-green-soft);

    font-size: 20px;

    color: var(--academy-purple);

}


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

.academy-learning-label {

    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 1.4px;

    text-transform: uppercase;

    color: var(--academy-green-dark);

}


.academy-learning-content h3 {

    margin-bottom: 8px;

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

    letter-spacing: -.5px;

    color: var(--academy-purple-dark);

}


.academy-learning-content p {

    max-width: 510px;

    margin: 0;

    font-size: 13px;
    line-height: 1.68;

    color: var(--academy-muted);

}


/* =========================================================
   RESULT
========================================================= */

.academy-experience-result {

    position: relative;

    z-index: 2;

    margin-top: 70px;

    padding:
        28px
        0
        0
        calc(39% + 30px);

    border-top:
        1px solid
        rgba(34, 14, 122, .12);

}


.academy-experience-result > span {

    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--academy-green-dark);

}


.academy-experience-result p {

    margin: 0;

    font-size:
        clamp(
            24px,
            2.7vw,
            34px
        );

    line-height: 1.1;

    color: var(--academy-purple-dark);

}


.academy-experience-result strong {

    display: block;

    color: var(--academy-purple);

}


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

.academy-learning-step {

    transition:
        transform .2s ease;

}


.academy-learning-step:hover {

    transform:
        translateX(4px);

}


.academy-learning-step:hover
.academy-learning-marker {

    border-color:
        var(--academy-green);

}


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

@media (max-width: 950px) {

    .academy-experience-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .academy-experience-heading {

        position: static;

        max-width: 700px;

    }


    .academy-experience-result {

        padding-left: 74px;

    }

}


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

@media (max-width: 720px) {

    .academy-experience {

        padding:
            82px
            0;

    }


    .academy-experience-layout {

        gap: 48px;

    }


    .academy-experience-heading h2 {

        font-size: 38px;

    }


    .academy-experience-hand {

        margin-left: 8px;

    }


    .academy-learning-step {

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

        gap: 17px;

    }


    .academy-learning-path::before {

        left: 20px;

    }


    .academy-learning-marker {

        width: 42px;
        height: 42px;

    }


    .academy-learning-content {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .academy-learning-icon {

        width: 46px;
        height: 46px;

    }


    .academy-experience-result {

        margin-top: 55px;

        padding:
            25px
            0
            0;

    }

}


/* =========================================================
   ÁREAS DE FORMACIÓN
   ¿QUÉ QUIERES APRENDER?
========================================================= */

.academy-schools {

    padding: 105px 0;

    background: #FAF9FC;

}


/* =========================================================
   HEADING
========================================================= */

.academy-schools-heading {

    max-width: 760px;

    margin-bottom: 42px;

}


.academy-schools-heading h2 {

    max-width: 700px;

}


/* =========================================================
   GRID COMPACTO
========================================================= */

.academy-schools-compact {

    display: grid;

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

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

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

    background:
        var(--academy-white);

}


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

.academy-schools-compact > a {

    min-height: 112px;

    display: grid;

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

    gap: 17px;

    align-items: center;

    padding: 24px;

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

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

    background:
        var(--academy-white);

    color:
        var(--academy-purple-dark);

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

}


.academy-schools-compact > a:hover {

    position: relative;

    z-index: 2;

    background:
        var(--academy-purple);

    color:
        var(--academy-white);

}


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

.academy-school-compact-icon {

    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 12px;

    background:
        var(--academy-green-soft);

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

    letter-spacing: -.2px;

    color:
        var(--academy-purple);

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

}


.academy-school-compact-icon i {

    font-size: 18px;

}


.academy-schools-compact > a:hover
.academy-school-compact-icon {

    background:
        var(--academy-green);

    color:
        var(--academy-purple-deep);

    transform:
        rotate(-4deg);

}


/* =========================================================
   NOMBRE DEL ÁREA
========================================================= */

.academy-schools-compact > a
> span:nth-child(2) {

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

    line-height: 1.25;

    letter-spacing: -.2px;

}


/* =========================================================
   FLECHA
========================================================= */

.academy-schools-compact > a
> i {

    justify-self: end;

    font-size: 14px;

    color:
        var(--academy-purple);

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

}


.academy-schools-compact > a:hover
> i {

    color:
        var(--academy-green);

    transform:
        translate(
            3px,
            -3px
        );

}


/* =========================================================
   VARIACIÓN SUTIL ENTRE ITEMS
========================================================= */

.academy-schools-compact > a:nth-child(2),
.academy-schools-compact > a:nth-child(5) {

    background:
        #FDFCFD;

}


.academy-schools-compact > a:nth-child(2):hover,
.academy-schools-compact > a:nth-child(5):hover {

    background:
        var(--academy-purple);

}


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

@media (max-width: 950px) {

    .academy-schools {

        padding:
            90px
            0;

    }


    .academy-schools-compact {

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

    }

}


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

@media (max-width: 620px) {

    .academy-schools {

        padding:
            76px
            0;

    }


    .academy-schools-heading {

        margin-bottom: 32px;

    }


    .academy-schools-compact {

        grid-template-columns: 1fr;

    }


    .academy-schools-compact > a {

        min-height: 90px;

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

        gap: 15px;

        padding:
            19px
            18px;

    }


    .academy-school-compact-icon {

        width: 42px;
        height: 42px;

    }


    .academy-schools-compact > a
    > span:nth-child(2) {

        font-size: 14px;

    }

}


/* =========================================================
   CAMINOS DE APRENDIZAJE
========================================================= */

.academy-pathways {

    position: relative;

    overflow: hidden;

    padding: 125px 0;

    background:
        linear-gradient(
            145deg,
            #F3F0FA 0%,
            #F7F5FB 52%,
            #EAF9F4 100%
        );

}


/* =========================================================
   DECORACIÓN
========================================================= */

.academy-pathways::before {

    content: "";

    position: absolute;

    top: -280px;
    right: -230px;

    width: 600px;
    height: 600px;

    border:
        1px solid
        rgba(34, 14, 122, .055);

    border-radius: 50%;

    pointer-events: none;

}


/* =========================================================
   HEADING
========================================================= */

.academy-pathways-heading {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .9fr);

    gap: 75px;

    align-items: end;

    margin-bottom: 55px;

}


.academy-pathways-kicker {

    display: block;

    margin-bottom: 17px;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-pathways-heading h2 {

    max-width: 780px;

    margin: 0;

    font-size:
        clamp(
            42px,
            4.8vw,
            60px
        );

    line-height: 1.02;

    letter-spacing: -2.2px;

    color: var(--academy-purple-dark);

}


.academy-pathways-heading h2 strong {

    display: block;

    font-weight: 800;

    color: var(--academy-purple);

}


.academy-pathways-heading > p {

    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    color: var(--academy-muted);

}


/* =========================================================
   GRID EDITORIAL
========================================================= */

.academy-pathways-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 18px;

}


/*
 * Primera fila:
 * Excel 2 columnas
 * Power BI 2 columnas
 * Mixta 2 columnas
 */

.academy-pathway-excel,
.academy-pathway-powerbi,
.academy-pathway-combined {

    grid-column: span 2;

}


/*
 * Segunda fila:
 * IA 3 columnas
 * Cyber 3 columnas
 */

.academy-pathway-ai,
.academy-pathway-cyber {

    grid-column: span 3;

}


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

.academy-pathway {

    position: relative;

    min-height: 380px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(34, 14, 122, .12);

    border-radius: 19px;

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

    color: var(--academy-text);

    box-shadow:
        0 16px 40px
        rgba(34, 14, 122, .045);

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

}


.academy-pathway:hover {

    transform: translateY(-6px);

    border-color:
        rgba(34, 14, 122, .22);

    box-shadow:
        0 25px 58px
        rgba(34, 14, 122, .10);

}


/* =========================================================
   POWER BI DESTACADO
========================================================= */

.academy-pathway-powerbi {

    background:
        linear-gradient(
            145deg,
            #2A1595 0%,
            #220E7A 58%,
            #170A47 100%
        );

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

    color: var(--academy-white);

    box-shadow:
        0 24px 58px
        rgba(34, 14, 122, .17);

}


/* línea superior */

.academy-pathway::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--academy-green),
            var(--academy-purple)
        );

}


.academy-pathway-powerbi::before {

    background: var(--academy-green);

}


/* =========================================================
   IA
========================================================= */

.academy-pathway-ai {

    min-height: 430px;

    background: #E6FAF3;

    border-color:
        rgba(10, 173, 126, .18);

}


/* =========================================================
   CYBER
========================================================= */

.academy-pathway-cyber {

    min-height: 430px;

    background:
        var(--academy-white);

}


/* =========================================================
   TOP
========================================================= */

.academy-pathway-top {

    display: flex;

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

    gap: 20px;

    margin-bottom: 45px;

}


.academy-pathway-top > span {

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

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-pathway-top > i {

    font-size: 16px;

    color: var(--academy-purple);

    transition:
        transform .2s ease;

}


.academy-pathway:hover
.academy-pathway-top > i {

    transform:
        translate(
            2px,
            -2px
        );

}


.academy-pathway-powerbi
.academy-pathway-top > span,
.academy-pathway-powerbi
.academy-pathway-top > i {

    color: var(--academy-green);

}


/* =========================================================
   MAIN
========================================================= */

.academy-pathway-main {

    margin-top: auto;

}


.academy-pathway-main small {

    display: block;

    margin-bottom: 8px;

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

    line-height: 1.4;

    color: var(--academy-green-dark);

}


.academy-pathway-main h3 {

    margin-bottom: 12px;

    font-size: 29px;
    line-height: 1.05;

    letter-spacing: -.8px;

    color: var(--academy-purple-dark);

}


.academy-pathway-main p {

    max-width: 400px;

    margin-bottom: 25px;

    font-size: 13px;
    line-height: 1.65;

    color: var(--academy-muted);

}


/* POWER BI */

.academy-pathway-powerbi
.academy-pathway-main small {

    color: var(--academy-green);

}


.academy-pathway-powerbi
.academy-pathway-main h3 {

    color: var(--academy-white);

}


.academy-pathway-powerbi
.academy-pathway-main p {

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

}


/* =========================================================
   PATH
========================================================= */

.academy-pathway-path {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    margin-bottom: 27px;

}


.academy-pathway-path span {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 0 9px;

    border-radius: 999px;

    background:
        var(--academy-purple-soft);

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

    color: var(--academy-purple);

}


.academy-pathway-path > i {

    width: 11px;
    height: 2px;

    border-radius: 999px;

    background: var(--academy-green);

}


.academy-pathway-powerbi
.academy-pathway-path span {

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

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

}


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

.academy-pathway-skill-visual {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        5px
        0
        55px;

}


.academy-pathway-skill-visual span {

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(34, 14, 122, .12);

    border-radius: 999px;

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

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

    color: var(--academy-purple-dark);

}


.academy-pathway-skill-visual
span.active {

    background:
        var(--academy-purple);

    border-color:
        var(--academy-purple);

    color:
        var(--academy-white);

}


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

.academy-pathway-cyber-visual {

    display: flex;

    align-items: center;

    gap: 25px;

    margin:
        3px
        0
        45px;

}


.academy-pathway-cyber-visual > div {

    width: 82px;
    height: 82px;

    flex: 0 0 auto;

    display: flex;

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

    border-radius: 21px;

    background:
        var(--academy-purple);

    color:
        var(--academy-green);

}


.academy-pathway-cyber-visual > div i {

    font-size: 32px;

}


.academy-pathway-cyber-visual ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.academy-pathway-cyber-visual li {

    position: relative;

    margin-bottom: 7px;

    padding-left: 17px;

    font-size: 11px;

    color: var(--academy-muted);

}


.academy-pathway-cyber-visual li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--academy-green-dark);

}


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

.academy-pathway-footer {

    margin-top: auto;

    padding-top: 18px;

    display: flex;

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

    border-top:
        1px solid
        rgba(34, 14, 122, .10);

}


.academy-pathway-footer span {

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

    color: var(--academy-purple);

}


.academy-pathway-footer i {

    color: var(--academy-purple);

    transition:
        transform .2s ease;

}


.academy-pathway:hover
.academy-pathway-footer i {

    transform:
        translateX(4px);

}


.academy-pathway-powerbi
.academy-pathway-footer {

    border-top-color:
        rgba(255, 255, 255, .14);

}


.academy-pathway-powerbi
.academy-pathway-footer span,
.academy-pathway-powerbi
.academy-pathway-footer i {

    color: var(--academy-green);

}


/* =========================================================
   BOTTOM
========================================================= */

.academy-pathways-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-top: 36px;

}


.academy-pathways-bottom p {

    max-width: 390px;

    margin: 0;

    font-family:
        "Caveat",
        cursive;

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

    line-height: 1.03;

    color:
        var(--academy-purple);

    transform:
        rotate(-1deg);

}


.academy-pathways-bottom p strong {

    display: block;

    font: inherit;

    color:
        var(--academy-green-dark);

}



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

@media (max-width: 1050px) {

    .academy-pathways-heading {

        grid-template-columns: 1fr;

        gap: 24px;

    }


    .academy-pathways-grid {

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

    }


    .academy-pathway-excel,
    .academy-pathway-powerbi,
    .academy-pathway-combined,
    .academy-pathway-ai,
    .academy-pathway-cyber {

        grid-column: span 1;

    }


    .academy-pathway-cyber {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 720px) {

    .academy-pathways {

        padding:
            82px
            0;

    }


    .academy-pathways-grid {

        grid-template-columns: 1fr;

    }


    .academy-pathway-excel,
    .academy-pathway-powerbi,
    .academy-pathway-combined,
    .academy-pathway-ai,
    .academy-pathway-cyber {

        grid-column: auto;

    }


    .academy-pathway {

        min-height: 340px;

        padding: 25px;

    }


    .academy-pathway-ai,
    .academy-pathway-cyber {

        min-height: 380px;

    }


    .academy-pathways-bottom {

        align-items: flex-start;

        flex-direction: column;

    }

}

/* =========================================================
   PATHWAYS - ACCIONES FINALES
========================================================= */

.academy-pathways-bottom-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-end;

    gap: 13px;

}


.academy-pathways-routes-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    color: var(--academy-purple);

}


.academy-pathways-routes-link i {

    transition:
        transform .2s ease;

}


.academy-pathways-routes-link:hover i {

    transform:
        translateX(4px);

}


.academy-pathways-help {

    min-height: 46px;

    padding:
        0
        18px;

    display: inline-flex;

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

    gap: 8px;

    border-radius: 999px;

    background:
        var(--academy-purple);

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

    color:
        var(--academy-white);

    box-shadow:
        0 10px 25px
        rgba(34, 14, 122, .12);

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

}


.academy-pathways-help:hover {

    transform:
        translateY(-2px);

    background:
        var(--academy-purple-dark);

}


@media (max-width: 720px) {

    .academy-pathways-bottom-actions {

        width: 100%;

        align-items: flex-start;
        justify-content: flex-start;

    }

}


/* =========================================================
   LOGOS WAY
========================================================= */


.academy-logos-way {

    padding: 125px 0;

    border-top: 1px solid rgba(34, 14, 122, .08);

    background: var(--academy-purple-dark);

    color: var(--academy-white);

}


.academy-logos-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, .95fr);

    gap: 90px;

    margin-bottom: 70px;

}


.academy-logos-grid > div:first-child > span {

    display: block;

    margin-bottom: 19px;

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

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--academy-green);

}


.academy-logos-grid h2 {

    max-width: 730px;

    margin-bottom: 0;

    font-size:
        clamp(
            43px,
            5vw,
            64px
        );

    line-height: 1.02;

    letter-spacing: -2.4px;

}


.academy-logos-grid h2 strong {

    display: block;

    color: var(--academy-green);

}


.academy-logos-copy p {

    margin-bottom: 17px;

    font-size: 16px;
    line-height: 1.75;

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

}


.academy-logos-note {

    display: block;

    margin-top: 30px;

    font-family:
        "Caveat",
        cursive;

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

    color: var(--academy-green);

}


.academy-benefits {

    display: grid;

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

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, .16);

}


.academy-benefits article {

    min-height: 220px;

    padding: 30px 26px;

    border-right:
        1px solid
        rgba(255, 255, 255, .13);

}


.academy-benefits article:last-child {

    border-right: 0;

}


.academy-benefits i {

    display: block;

    margin-bottom: 40px;

    font-size: 21px;

    color: var(--academy-green);

}


.academy-benefits strong {

    display: block;

    margin-bottom: 9px;

    font-size: 17px;

}


.academy-benefits p {

    margin-bottom: 0;

    font-size: 12px;
    line-height: 1.6;

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

}



/* =========================================================
   OTHER LEARNING
========================================================= */

.academy-other-learning {

    padding: 120px 0;

    background: #FFFEFF;

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

}


.academy-other-heading {

    max-width: 720px;

    margin-bottom: 45px;

}


.academy-other-heading > span {

    display: block;

    margin-bottom: 15px;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-other-heading h2 {

    margin: 0;

    font-size:
        clamp(
            39px,
            4.4vw,
            55px
        );

    line-height: 1.04;

    letter-spacing: -2px;

    color: var(--academy-purple-dark);

}


.academy-other-grid {

    display: grid;

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

    gap: 20px;

}


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

.academy-other-grid article {

    position: relative;

    min-height: 370px;

    padding: 40px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

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

    border-radius: 17px;

    background: var(--academy-soft);

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

}


/* detalle circular */

.academy-other-grid article::after {

    content: "";

    position: absolute;

    right: -60px;
    bottom: -60px;

    width: 165px;
    height: 165px;

    border:
        1px solid
        rgba(34, 14, 122, .08);

    border-radius: 50%;

    opacity: 0;

    transform: scale(.78);

    transition:
        opacity .28s ease,
        transform .28s ease;

    pointer-events: none;

}


.academy-other-grid article:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(34, 14, 122, .19);

    box-shadow:
        0 24px 55px
        rgba(34, 14, 122, .09);

}


.academy-other-grid article:hover::after {

    opacity: 1;

    transform:
        scale(1);

}


/* =========================================================
   CARD MORADA
========================================================= */

.academy-other-grid article:first-child {

    background:
        var(--academy-purple);

    border-color:
        var(--academy-purple);

    color:
        var(--academy-white);

}


.academy-other-grid article:first-child::after {

    border-color:
        rgba(19, 232, 165, .20);

}


/* =========================================================
   LABEL
========================================================= */

.academy-other-grid article > span {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 50px;

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

    letter-spacing: 1.6px;

    text-transform: uppercase;

    color:
        var(--academy-green-dark);

    transition:
        transform .22s ease,
        letter-spacing .22s ease;

}


.academy-other-grid
article:first-child > span {

    color:
        var(--academy-green);

}


.academy-other-grid
article:hover > span {

    transform:
        translateY(-2px);

    letter-spacing:
        1.9px;

}


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

.academy-other-grid h3 {

    position: relative;

    z-index: 2;

    max-width: 480px;

    margin-bottom: 15px;

    font-size: 29px;

    line-height: 1.1;

    color:
        var(--academy-purple-dark);

    transition:
        transform .22s ease;

}


.academy-other-grid
article:first-child h3 {

    color:
        var(--academy-white);

}


.academy-other-grid
article:hover h3 {

    transform:
        translateX(3px);

}


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

.academy-other-grid p {

    position: relative;

    z-index: 2;

    max-width: 500px;

    margin-bottom: 30px;

    font-size: 14px;

    line-height: 1.7;

    color:
        var(--academy-muted);

}


.academy-other-grid
article:first-child p {

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

}


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

.academy-other-grid a {

    position: relative;

    z-index: 2;

    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

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

    color:
        var(--academy-purple);

}


.academy-other-grid
article:first-child a {

    color:
        var(--academy-green);

}


.academy-other-grid a i {

    transition:
        transform .2s ease;

}


.academy-other-grid
article:hover a i {

    transform:
        translate(
            4px,
            -2px
        );

}


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

@media (max-width: 900px) {

    .academy-other-grid {

        grid-template-columns: 1fr;

    }

}


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

@media (max-width: 720px) {

    .academy-other-learning {

        padding:
            82px
            0;

    }


    .academy-other-grid article {

        min-height: 320px;

        padding: 30px;

    }


    .academy-other-grid article > span {

        margin-bottom: 38px;

    }


    .academy-other-grid h3 {

        font-size: 27px;

    }

}


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

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

    .academy-other-grid article,
    .academy-other-grid article::after,
    .academy-other-grid article > span,
    .academy-other-grid h3,
    .academy-other-grid a i {

        transition: none;

    }


    .academy-other-grid article:hover,
    .academy-other-grid article:hover::after,
    .academy-other-grid article:hover > span,
    .academy-other-grid article:hover h3,
    .academy-other-grid article:hover a i {

        transform: none;

    }

}


/* =========================================================
   FAQ
========================================================= */

.academy-faq {

    padding: 125px 0;

    background: #F7F5FA;

}


.academy-faq-grid {

    display: grid;

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

    gap: 100px;

    align-items: start;

}


/* =========================================================
   HEADING
========================================================= */

.academy-faq-heading {

    position: sticky;

    top: 110px;

}


.academy-faq-heading > span {

    display: block;

    margin-bottom: 16px;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--academy-purple);

}


.academy-faq-heading h2 {

    max-width: 500px;

    margin-bottom: 19px;

    font-size:
        clamp(
            39px,
            4.4vw,
            55px
        );

    line-height: 1.04;

    letter-spacing: -2px;

    color: var(--academy-purple-dark);

}


.academy-faq-heading p {

    max-width: 430px;

    margin-bottom: 24px;

    font-size: 14px;

    line-height: 1.7;

    color: var(--academy-muted);

}


.academy-faq-heading > a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

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

    color: var(--academy-purple);

}


.academy-faq-heading > a i {

    transition:
        transform .2s ease;

}


.academy-faq-heading > a:hover i {

    transform:
        translate(
            3px,
            -2px
        );

}


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

.academy-faq-list {

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

}


.academy-faq-list details {

    position: relative;

    overflow: hidden;

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

    transition:
        background .22s ease;

}


.academy-faq-list details:hover {

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

}


.academy-faq-list details[open] {

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

}


/* =========================================================
   QUESTION
========================================================= */

.academy-faq-list summary {

    min-height: 88px;

    padding:
        24px
        3px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    list-style: none;

    cursor: pointer;

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

    color:
        var(--academy-purple-dark);

    transition:
        color .2s ease,
        padding-left .2s ease;

}


.academy-faq-list
summary::-webkit-details-marker {

    display: none;

}


.academy-faq-list
details:hover summary {

    padding-left: 8px;

    color:
        var(--academy-purple);

}


.academy-faq-list
details[open] summary {

    color:
        var(--academy-purple);

}


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

.academy-faq-list summary i {

    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    display: flex;

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

    border:
        1px solid
        rgba(34, 14, 122, .12);

    border-radius: 50%;

    background:
        var(--academy-white);

    font-size: 13px;

    color:
        var(--academy-purple);

    transition:
        transform .24s ease,
        background .24s ease,
        color .24s ease,
        border-color .24s ease;

}


.academy-faq-list
details:hover summary i {

    border-color:
        rgba(34, 14, 122, .22);

    background:
        var(--academy-green-soft);

}


.academy-faq-list
details[open]
summary i {

    transform:
        rotate(45deg);

    border-color:
        var(--academy-green);

    background:
        var(--academy-green);

    color:
        var(--academy-purple-deep);

}


/* =========================================================
   RESPUESTA
========================================================= */

.academy-faq-list
details > div {

    padding:
        0
        45px
        27px
        8px;

    animation:
        academyFaqOpen
        .26s ease
        both;

}


.academy-faq-list
details p {

    max-width: 720px;

    margin: 0;

    font-size: 14px;

    line-height: 1.72;

    color:
        var(--academy-muted);

}


/* =========================================================
   ANIMACIÓN DE APERTURA
========================================================= */

@keyframes academyFaqOpen {

    from {

        opacity: 0;

        transform:
            translateY(-7px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 950px) {

    .academy-faq-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .academy-faq-heading {

        position: static;

        max-width: 700px;

    }

}


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

@media (max-width: 720px) {

    .academy-faq {

        padding:
            82px
            0;

    }


    .academy-faq-grid {

        gap: 40px;

    }


    .academy-faq-list summary {

        min-height: 76px;

        padding:
            21px
            2px;

        gap: 18px;

        font-size: 15px;

    }


    .academy-faq-list
    details:hover summary {

        padding-left: 2px;

    }


    .academy-faq-list summary i {

        width: 32px;
        height: 32px;

    }


    .academy-faq-list
    details > div {

        padding:
            0
            40px
            24px
            2px;

    }

}


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

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

    .academy-faq-heading > a i,
    .academy-faq-list details,
    .academy-faq-list summary,
    .academy-faq-list summary i {

        transition: none;

    }


    .academy-faq-list
    details > div {

        animation: none;

    }


    .academy-faq-list
    details:hover summary {

        padding-left: 3px;

    }

}



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


.academy-final {

    padding: 110px 0;

    background: var(--academy-white);

    color: var(--academy-white);

}


.academy-final-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    gap: 90px;

    align-items: end;

}


.academy-final-layout
> div:first-child > span {

    display: block;

    margin-bottom: 18px;

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

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--academy-green-dark);

}


.academy-final h2 {

    max-width: 720px;

    margin-bottom: 0;

    font-size:
        clamp(
            43px,
            5vw,
            63px
        );

    line-height: 1.02;

    letter-spacing: -2.3px;

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


.academy-final-layout
> div:last-child p {

    max-width: 490px;

    margin-bottom: 26px;

    font-size: 16px;
    line-height: 1.7;

    color:
        var(--academy-purple)

}


.academy-final-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

}


.academy-final-btn {

    display: inline-flex;

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

    gap: 9px;

    min-height: 50px;

    padding: 0 22px;

    border-radius: 999px;

    background: var(--academy-green);

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

    color: var(--academy-white);

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

}


.academy-final-btn:hover {

    transform: translateY(-2px);

    background: var(--academy-purple);

}


.academy-final-secondary {

    display: inline-flex;

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

    min-height: 50px;

    padding: 0 20px;

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

    border-radius: 999px;

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

    background: var(--academy-purple);

    color: var(--academy-white);

    transition:
        border-color .2s ease,
        transform .2s ease;

}


.academy-final-secondary:hover {

    transform: translateY(-2px);

    background-color: var(--academy-green-dark);

    color: var(--academy-white);

}


/* =========================================================
   GENERIC BUTTON
========================================================= */


.academy-btn {

    display: inline-flex;

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

    min-height: 48px;

    padding: 0 20px;

    border-radius: 999px;

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

}


.academy-btn-outline {

    border:
        1px solid
        var(--academy-purple);

    color: var(--academy-purple);

}


/* =========================================================
   ACCESSIBILITY
========================================================= */


.academy-page a:focus-visible,
.academy-page button:focus-visible,
.academy-page input:focus-visible,
.academy-page summary:focus-visible {

    outline:
        3px solid
        rgba(19, 232, 165, .55);

    outline-offset: 3px;

}


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


@media (max-width: 1050px) {

    .academy-container {

        width:
            min(
                100% - 48px,
                1240px
            );

    }


    .academy-hero-grid {

        grid-template-columns: 1fr;

        gap: 65px;

    }


    .academy-hero-copy {

        max-width: 760px;

    }


    .academy-hero-courses {

        width:
            min(
                100%,
                650px
            );

        margin: 0;

    }


    .academy-course-grid {

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

    }




    .academy-schools-grid {

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

    }


   
    .academy-logos-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .academy-benefits {

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

    }


    .academy-benefits
    article:nth-child(2) {

        border-right: 0;

    }


    .academy-benefits
    article:nth-child(-n+2) {

        border-bottom:
            1px solid
            rgba(255, 255, 255, .13);

    }


    .academy-faq-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .academy-faq-heading {

        position: static;

    }

}


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


@media (max-width: 720px) {

    .academy-container {

        width:
            calc(
                100% - 32px
            );

    }


    .academy-hero {

        padding:
            52px
            0
            76px;

    }


    .academy-hero-copy h1 {

        font-size: 44px;

        letter-spacing: -2px;

    }


    .academy-hero-lead {

        font-size: 16px;

    }


    .academy-search {

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

        padding:
            9px
            15px;

    }


    .academy-search button {

        grid-column: 1 / -1;

        width: 100%;

    }


    .academy-hand-note {

        margin-left: 12px;

    }


    .academy-hero-featured-image {

        height: 205px;

    }


    .academy-hero-mini {

        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;

        margin-top: 13px;

    }


    .academy-trust-grid {

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

    }


    .academy-trust-grid > div {

        padding: 14px;

        border-right: 0;

    }


    .academy-trust-grid
    > div:first-child {

        padding-left: 14px;

    }



    .academy-heading-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

    }


    .academy-heading-row
    .academy-view-all {

        display: none;

    }


    .academy-course-grid {

        grid-template-columns: 1fr;

    }


    .academy-mobile-more {

        display: block;

        margin-top: 30px;

        text-align: center;

    }


   
    
    .academy-schools-grid {

        grid-template-columns: 1fr;

    }


    .academy-school {

        min-height: 285px;

    }


    .academy-benefits {

        grid-template-columns: 1fr;

    }


    .academy-benefits article,
    .academy-benefits
    article:nth-child(2) {

        min-height: auto;

        padding:
            27px
            2px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .13);

    }


    .academy-benefits
    article:last-child {

        border-bottom: 0;

    }


    .academy-benefits i {

        margin-bottom: 24px;

    }


    .academy-other-grid {

        grid-template-columns: 1fr;

    }


    .academy-other-grid article {

        min-height: 320px;

        padding: 30px;

    }


    .academy-faq-list summary {

        min-height: 76px;

        font-size: 15px;

    }


    .academy-final-layout {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .academy-final-actions {

        align-items: stretch;

        flex-direction: column;

    }


    .academy-final-btn,
    .academy-final-secondary {

        width: 100%;

    }

}


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


@media (max-width: 430px) {

    .academy-container {

        width:
            calc(
                100% - 26px
            );

    }


    .academy-hero-copy h1 {

        font-size: 39px;

    }


    .academy-section-heading h2,
    .academy-experience-heading h2,
    .academy-faq-heading h2,
    .academy-logos-grid h2,
    .academy-final h2 {

        font-size: 37px;

    }


    .academy-hero-featured-body {

        padding: 21px;

    }


    .academy-hero-featured h2 {

        font-size: 23px;

    }


    .academy-hero-mini {

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

    }


    .academy-hero-mini-image {

        width: 60px;
        height: 56px;

    }


}


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


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

    html {

        scroll-behavior: auto;

    }


    .academy-search button,
    .academy-hero-featured,
    .academy-hero-mini,
    .academy-card,
    .academy-card-image img,
    .academy-school,
    .academy-route-card,
    .academy-skill-feature,
    .academy-faq-list summary i,
    .academy-final-btn,
    .academy-final-secondary {

        transition: none;

    }

}