/* ==========================================================
   RAHLUXI — RESPONSIVE
   ========================================================== */

/* Notebook y tablet horizontal */
@media (max-width: 1180px) {
    :root {
        --header-height: 126px;
    }

    .header-inner {
        width: calc(100% - 36px);
        gap: 28px;
    }

    .desktop-nav {
        gap: 24px;
    }

    .desktop-nav a {
        font-size: 12px;
    }

    .about-layout {
        grid-template-columns: 34% 1fr;
    }

    .about-copy {
        padding-right: 5vw;
    }
}

/* Tablet y Mobile */
@media (max-width: 820px) {
    :root {
        --header-height: 270px;
    }

    .site-header {
        height: var(--header-height);
    }

    .site-header.is-scrolled,
    .page-contact .site-header.is-scrolled {
        background: rgba(255,255,255,.72);
        box-shadow: none;
        backdrop-filter: blur(10px);
    }

    .page-contact .site-header.is-scrolled {
        background: rgba(5,9,20,.78);
    }

    .header-inner {
        position: relative;
        width: 100%;
        justify-content: center;
        padding: 28px 7vw 20px;
    }

    .desktop-nav {
        display: none;
    }

    .header-inner > .brand {
        width: 50vw;
        max-width: 255px;
    }

    .header-inner > .brand .brand-symbol {
        width: 132px;
        height: 132px;
        border-width: 12px;
    }

    .header-inner > .brand .brand-symbol span {
        width: 20px;
        height: 20px;
    }

    .header-inner > .brand .brand-name {
        font-size: 36px;
    }

    .menu-toggle {
        position: absolute;
        right: 7vw;
        top: 84px;
        display: block;
    }

    /* HOME MOBILE */
    .home-hero {
        min-height: 100svh;
    }

    .word-streams {
        inset: 25vh 0 5vh;
    }

    .word-line {
        font-size: clamp(90px, 19vw, 160px);
    }

    .hero-person {
        width: 92vw;
        height: 68vh;
    }

    .hero-bottom-fade {
        height: 27vh;
    }

    /* NOSOTROS MOBILE */
    .about-main {
        padding-top: var(--header-height);
        overflow: visible;
    }

    .about-layout {
        display: block;
        min-height: auto;
    }

    .about-photo {
        display: none;
    }

    .about-copy {
        padding: 32px 5.8vw 80px;
        font-size: clamp(26px, 5.6vw, 44px);
        line-height: 1.13;
    }

    .about-copy p {
        margin-bottom: 54px;
    }

    /* CONTACTO MOBILE */
    .contact-main {
        min-height: 100svh;
        padding: calc(var(--header-height) + 54px) 4.3vw 70px;
        align-items: start;
    }

    .contact-words {
        inset: 23vh 0 0;
        font-size: clamp(100px, 21vw, 185px);
        line-height: .9;
    }

    .contact-card {
        width: 100%;
        padding: 28px 28px 38px;
        border-radius: 8px;
    }

    .contact-card-header {
        padding: 0 20px 22px;
    }

    .contact-card h1 {
        margin-bottom: 18px;
        font-size: clamp(27px, 6vw, 38px);
    }

    .contact-card-header p {
        font-size: clamp(20px, 4vw, 29px);
        line-height: 1.16;
    }

    .contact-form {
        gap: 20px;
    }

    .contact-form label > span {
        left: 20px;
        top: 17px;
        font-size: clamp(18px, 3.5vw, 26px);
    }

    .contact-form input {
        height: 64px;
    }

    .contact-form textarea {
        min-height: 315px;
        padding-top: 60px;
    }

    .contact-form button {
        min-height: 65px;
        font-size: 24px;
    }
}

/* Mobile angosto */
@media (max-width: 520px) {
    :root {
        --header-height: 220px;
    }

    .header-inner > .brand .brand-symbol {
        width: 102px;
        height: 102px;
        border-width: 10px;
    }

    .header-inner > .brand .brand-name {
        font-size: 28px;
    }

    .menu-toggle {
        width: 46px;
        top: 66px;
    }

    .menu-toggle span {
        height: 5px;
        margin: 6px 0;
    }

    .brand-mobile .brand-symbol {
        width: 102px;
        height: 102px;
        border-width: 10px;
    }

    .brand-mobile .brand-name {
        font-size: 28px;
    }

    .menu-close {
        top: 25px;
        font-size: 62px;
    }

    .mobile-menu {
        padding-top: 28px;
    }

    .mobile-nav {
        gap: clamp(28px, 6vh, 48px);
    }

    .mobile-nav a {
        font-size: clamp(25px, 8vw, 38px);
    }

    .about-copy {
        padding-top: 20px;
        font-size: clamp(23px, 7.7vw, 38px);
    }

    .contact-main {
        padding-top: calc(var(--header-height) + 34px);
    }

    .contact-card {
        padding: 24px 18px 28px;
    }

    .contact-card-header {
        padding-inline: 8px;
    }

    .contact-form textarea {
        min-height: 270px;
    }
}