/* =========================================================
   MOTIVACIÓN SALSERA
   Responsive styles
========================================================= */


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   1050px and below
========================================================= */

@media (max-width: 1050px) {

    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .navbar {
        width: min(100% - 30px, 1000px);
    }

    .nav-links {
        gap: 18px;
    }

    .nav-cta {
        padding: 11px 13px;
    }


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

    .hero-content {
        grid-template-columns: 47% 53%;
    }

    .hero-copy {
        padding-right: 20px;
    }

    .hero-copy h1 {
        font-size: clamp(2.8rem, 5vw, 4.3rem);
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-preview {
        gap: 45px;
    }

    .about-copy h2 {
        font-size: clamp(2rem, 4vw, 3rem);
    }


    /* -----------------------------------------------------
       COURSES
    ----------------------------------------------------- */

    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================
   TABLETS
   850px and below
========================================================= */

@media (max-width: 850px) {

    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .navbar {
        min-height: 68px;
    }

    .logo img {
        width: 125px;
    }

    /*
       Desktop navigation disappears.
       Hamburger controls the mobile menu.
    */

    .nav-links {
        display: none;

        position: absolute;

        top: 68px;
        left: 0;
        right: 0;

        width: 100%;

        padding: 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        margin: 0;

        background: white;

        border-top: 1px solid #eee4dd;
        border-bottom: 1px solid #eee4dd;

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

        z-index: 1000;
    }

    /*
       JavaScript should add .active when hamburger
       is clicked.
    */

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: flex;

        align-items: center;

        width: 100%;

        min-height: 48px;

        padding: 12px 8px;

        border-bottom: 1px solid #f0e7e1;

        color: var(--text);

        font-size: 0.82rem;
    }

    .nav-links li:last-child a {
        border-bottom: 0;
    }

    .nav-links li a:hover {
        color: var(--red);
    }

    .desktop-lang {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-lang {
        display: flex;

        align-items: center;

        padding: 15px 8px 5px;
    }

    .mobile-lang select {
        width: 100%;

        padding: 10px;

        border: 1px solid var(--border);
        border-radius: 8px;

        background: #fff;

        color: var(--text);

        font-size: 0.78rem;
    }


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

    .hero-content {
        width: min(100% - 40px, 700px);

        min-height: auto;

        grid-template-columns: 1fr;

        padding: 0;
    }

    .hero-copy {
        max-width: 650px;

        padding: 70px 0 55px;

        order: 1;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 8vw, 4.5rem);
    }

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

        font-size: 0.95rem;
    }

    .hero-image {
        min-height: 420px;

        order: 2;

        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 22px;
    }


    /* -----------------------------------------------------
       STATS
    ----------------------------------------------------- */

    .stats-section {
        width: min(100% - 40px, 700px);

        margin: -30px auto 0;
    }

    .stats-card {
        grid-template-columns: repeat(2, 1fr);

        border-radius: 28px;
    }

    .stat {
        min-height: 75px;
    }

    .stat:nth-child(2) {
        border-right: 0;
    }

    .stat:nth-child(1),
    .stat:nth-child(2) {
        border-bottom: 1px solid #eee3db;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-preview {
        width: min(100% - 40px, 700px);

        grid-template-columns: 1fr;

        gap: 40px;

        margin: 70px auto 80px;
    }

    .about-image {
        min-height: 420px;
    }

    .about-image img {
        height: 420px;
    }

    .about-copy {
        padding-right: 0;
    }

    .about-copy h2 {
        font-size: clamp(2.2rem, 6vw, 3.4rem);
    }

    .about-text {
        max-width: 650px;
    }


    /* -----------------------------------------------------
       COURSES
    ----------------------------------------------------- */

    .courses-heading {
        padding: 65px 20px 55px;
    }

    .course-grid {
        width: min(100%, 700px);

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

        gap: 18px;
    }

    .course-card {
        min-height: 250px;

        padding: 27px;
    }


    /* -----------------------------------------------------
       FINAL CTA
    ----------------------------------------------------- */

    .final-cta {
        padding: 80px 20px;
    }

    .cta-content {
        max-width: 600px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

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

        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   LARGE PHONES
   650px and below
========================================================= */

@media (max-width: 650px) {

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

    body {
        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .navbar {
        width: calc(100% - 30px);

        min-height: 64px;
    }

    .logo img {
        width: 115px;
    }

    .nav-links {
        top: 64px;
    }


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

    .hero-content {
        width: calc(100% - 30px);
    }

    .hero-copy {
        padding: 55px 0 45px;
    }

    .hero-copy .eyebrow {
        margin-bottom: 13px;
    }

    .hero-copy h1 {
        font-size: clamp(2.65rem, 13vw, 4rem);

        letter-spacing: -1.8px;

        margin-bottom: 20px;
    }

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

        line-height: 1.7;

        margin-bottom: 23px;
    }


    /* -----------------------------------------------------
       HERO FEATURES
    ----------------------------------------------------- */

    .hero-features {
        display: grid;

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

        gap: 10px;

        margin-bottom: 25px;
    }

    .hero-feature {
        grid-template-columns: 30px 1fr;

        column-gap: 6px;

        min-width: 0;
    }

    .feature-icon {
        width: 29px;
        height: 29px;

        font-size: 0.95rem;
    }

    .hero-feature strong {
        font-size: 0.6rem;
    }

    .hero-feature small {
        font-size: 0.56rem;
    }


    /* -----------------------------------------------------
       HERO BUTTONS
    ----------------------------------------------------- */

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-bottom: 18px;
    }

    .hero-buttons .btn {
        width: 100%;

        justify-content: center;
    }

    .social-proof {
        font-size: 0.62rem;

        line-height: 1.4;
    }


    /* -----------------------------------------------------
       HERO IMAGE
    ----------------------------------------------------- */

    .hero-image {
        min-height: 350px;

        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 18px;
    }


    /* -----------------------------------------------------
       STATS
    ----------------------------------------------------- */

    .stats-section {
        width: calc(100% - 30px);

        margin-top: -25px;
    }

    .stats-card {
        grid-template-columns: repeat(2, 1fr);

        border-radius: 24px;
    }

    .stat {
        min-height: 70px;

        gap: 8px;
    }

    .stat-icon {
        font-size: 1.25rem;
    }

    .stat strong {
        font-size: 0.82rem;
    }

    .stat small {
        font-size: 0.57rem;

        margin-top: 3px;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-preview {
        width: calc(100% - 30px);

        gap: 32px;

        margin: 55px auto 70px;
    }

    .about-image {
        min-height: 360px;

        border-radius: 18px;
    }

    .about-image img {
        height: 360px;
    }

    .about-badge {
        right: 12px;
        bottom: 15px;

        width: 82px;
        height: 82px;
    }

    .about-copy .eyebrow {
        margin-bottom: 11px;

        font-size: 0.62rem;
    }

    .about-copy h2 {
        font-size: clamp(2rem, 10vw, 3rem);

        line-height: 1.06;

        letter-spacing: -1px;

        margin-bottom: 19px;
    }

    .about-copy h2 i {
        font-size: 1.2rem;

        margin-left: 4px;
    }

    .about-text {
        font-size: 0.85rem;

        line-height: 1.7;

        margin-bottom: 20px;
    }

    .about-list {
        gap: 10px;

        margin-bottom: 23px;
    }

    .about-list li {
        gap: 8px;

        font-size: 0.7rem;

        line-height: 1.45;
    }

    .about-list li > span:first-child {
        flex-basis: 17px;

        width: 17px;
        height: 17px;

        font-size: 0.6rem;
    }


    /* -----------------------------------------------------
       COURSES HEADING
    ----------------------------------------------------- */

    .courses-heading {
        padding: 55px 18px 48px;
    }

    .courses-heading h2 {
        font-size: clamp(2.3rem, 11vw, 3.3rem);
    }

    .courses-heading > p:not(.eyebrow) {
        max-width: 420px;

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

        font-size: 0.76rem;
    }


    /* -----------------------------------------------------
       COURSES
    ----------------------------------------------------- */

    .courses-section {
        padding: 55px 15px 75px;
    }

    .course-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .course-card {
        min-height: 225px;

        padding: 25px;
    }

    .course-number {
        top: 17px;
        right: 19px;

        font-size: 2rem;
    }

    .course-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 18px;
    }

    .course-card h3 {
        font-size: 1.3rem;
    }

    .course-card p {
        font-size: 0.73rem;
    }


    /* -----------------------------------------------------
       FINAL CTA
    ----------------------------------------------------- */

    .final-cta {
        padding: 70px 18px;
    }

    .cta-content h2 {
        font-size: clamp(2.4rem, 11vw, 3.5rem);

        line-height: 1.05;
    }

    .cta-content .btn {
        width: 100%;

        justify-content: center;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    footer {
        padding: 45px 20px 25px;
    }

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

        gap: 30px;

        padding-bottom: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-brand img {
        width: 130px;
    }

}


/* =========================================================
   SMALL PHONES
   480px and below
========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------------------
       NAVIGATION
    ----------------------------------------------------- */

    .navbar {
        width: calc(100% - 24px);
    }

    .logo img {
        width: 105px;
    }


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

    .hero-content {
        width: calc(100% - 24px);
    }

    .hero-copy {
        padding-top: 45px;
        padding-bottom: 40px;
    }

    .hero-copy h1 {
        font-size: clamp(2.45rem, 14vw, 3.4rem);

        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 0.84rem;
    }


    /* -----------------------------------------------------
       HERO FEATURES
    ----------------------------------------------------- */

    .hero-features {
        gap: 7px;
    }

    .hero-feature {
        grid-template-columns: 26px 1fr;

        column-gap: 5px;
    }

    .feature-icon {
        width: 26px;
        height: 26px;

        font-size: 0.85rem;
    }

    .hero-feature strong {
        font-size: 0.54rem;
    }

    .hero-feature small {
        font-size: 0.51rem;
    }


    /* -----------------------------------------------------
       HERO IMAGE
    ----------------------------------------------------- */

    .hero-image {
        min-height: 290px;

        border-bottom-left-radius: 55px;
    }


    /* -----------------------------------------------------
       STATS
    ----------------------------------------------------- */

    .stats-section {
        width: calc(100% - 24px);
    }

    .stats-card {
        border-radius: 20px;
    }

    .stat {
        min-height: 65px;

        gap: 6px;
    }

    .stat-icon {
        font-size: 1.05rem;
    }

    .stat strong {
        font-size: 0.74rem;
    }

    .stat small {
        font-size: 0.52rem;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-preview {
        width: calc(100% - 24px);

        margin-top: 45px;
    }

    .about-image {
        min-height: 310px;
    }

    .about-image img {
        height: 310px;
    }

    .about-badge {
        width: 75px;
        height: 75px;

        right: 10px;
        bottom: 12px;
    }

    .about-badge span {
        font-size: 0.6rem;
    }

    .about-badge strong {
        font-size: 0.74rem;
    }

    .about-badge small {
        font-size: 0.47rem;
    }

    .about-copy h2 {
        font-size: clamp(1.85rem, 10.5vw, 2.7rem);
    }

    .about-text {
        font-size: 0.82rem;
    }

    .about-list li {
        font-size: 0.67rem;
    }


    /* -----------------------------------------------------
       COURSES
    ----------------------------------------------------- */

    .courses-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .course-card {
        min-height: 215px;

        padding: 23px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .final-cta {
        padding: 60px 15px;
    }

    .cta-content h2 {
        font-size: 2.35rem;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    footer {
        padding-left: 15px;
        padding-right: 15px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   360px and below
========================================================= */

@media (max-width: 360px) {

    .hero-copy h1 {
        font-size: 2.3rem;
    }

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

        gap: 9px;
    }

    .hero-feature {
        grid-template-columns: 30px 1fr;
    }

    .hero-feature strong {
        font-size: 0.62rem;
    }

    .hero-feature small {
        font-size: 0.56rem;
    }

    .stats-card {
        grid-template-columns: 1fr;
    }

    .stat {
        border-right: 0;

        border-bottom: 1px solid #eee3db;
    }

    .stat:last-child {
        border-bottom: 0;
    }

    .about-copy h2 {
        font-size: 1.85rem;
    }

    .course-card {
        padding: 21px;
    }

}