/* =========================================================
   GRUPO LAS LETRAS — RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 1100px) {

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

        .header-content {
            gap: 25px;
        }

        .menu {
            gap: 22px;
        }

        .menu a {
            font-size: 10px;
            letter-spacing: 1px;
        }


}


@media (max-width: 900px) {

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

        .header-content {
            min-height: 78px;
        }

        .logo img {
            max-width: 180px;
            max-height: 55px;
        }

        .menu {
            gap: 16px;
        }

        .menu a {
            font-size: 9px;
        }

        .menu a[href="#literario"] {
            padding: 8px 12px;
        }

        .theme-toggle {
            width: 34px;
            height: 34px;

            font-size: 14px;
        }


}


@media (max-width: 760px) {

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

        .header-content {
            min-height: 72px;
            position: relative;
        }


    /* ===== LOGO ===== */

        .logo img {
            max-width: 170px;
            max-height: 52px;
        }


    /* ===== BOTÓN HAMBURGUESA ===== */

        .menu-toggle {
            display: flex;

            width: 42px;
            height: 42px;

            padding: 0;
            margin-left: auto;

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

            flex-direction: column;

            gap: 5px;

            flex-shrink: 0;

            background: transparent;

            border: 1px solid var(--color-borde);

            color: inherit;

            cursor: pointer;

            transition:
                background 0.3s ease,
                border-color 0.3s ease;
        }


    /* ===== LÍNEAS DEL MENÚ ===== */

        .menu-toggle span {
            display: block;

            width: 20px;
            height: 1.5px;

            background: currentColor;

            transition:
                transform 0.3s ease,
                opacity 0.3s ease;
        }


    /* ===== MENÚ → X ===== */

        .menu-toggle.active span:nth-child(1) {
            transform:
                translateY(6.5px)
                rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform:
                translateY(-6.5px)
                rotate(-45deg);
        }


    /* ===== MENÚ MÓVIL ===== */

        .menu {
            position: absolute;

            top: 100%;
            left: 0;

            width: 100%;

            padding: 15px 5% 25px;

            display: none;

            flex-direction: column;
            align-items: stretch;

            gap: 0;

            background: var(--color-fondo);

            border-bottom: 1px solid var(--color-borde);

            box-shadow: var(--sombra-suave);

            z-index: 1000;
        }


        .menu.active {
            display: flex;
        }


    /* ===== ENLACES DEL MENÚ ===== */

        .menu a {
            width: 100%;

            padding: 15px 5px;

            border-bottom: 1px solid var(--color-borde);

            font-size: 11px;

            letter-spacing: 1.5px;

            text-align: left;
        }

        .menu a:last-of-type {
            border-bottom: none;
        }


    /* ===== ENLACE LITERARIO ===== */

        .menu a[href="#literario"] {
            margin-top: 12px;

            padding: 13px;

            border: 1px solid var(--color-dorado);

            text-align: center;
        }


    /* ===== BOTÓN TEMA ===== */

        .theme-toggle {
            width: 40px;
            height: 40px;

            margin-top: 15px;

            align-self: center;
        }


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

        .menu-toggle:hover {
            background: var(--color-superficie);
            border-color: var(--color-dorado);
        }

        .menu-toggle:focus-visible {
            outline: 2px solid var(--color-dorado);
            outline-offset: 3px;
        }


}


@media (max-width: 420px) {

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

        .header-content {
            min-height: 68px;
        }

        .logo img {
            max-width: 145px;
            max-height: 48px;
        }

        .menu-toggle {
            width: 40px;
            height: 40px;
        }


}


@media (max-width: 360px) {

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

        .logo img {
            max-width: 130px;
        }


}