/* =========================================================
   GRUPO LAS LETRAS
   PÁGINA PRÓXIMAMENTE
   RESPONSIVE
========================================================= */


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

@media (max-width: 900px) {

    .page-under-construction {
        min-height: calc(100vh - 80px);

        padding: 90px 0;
    }


    .page-under-construction::before {
        width: 550px;
        height: 550px;
    }


    .page-under-construction::after {
        width: 750px;
        height: 750px;
    }


    .page-under-construction h1 {
        font-size: clamp(3.2rem, 9vw, 5rem);
    }


    .page-under-construction .container::before {
        left: -50px;
    }


    .page-under-construction .container::after {
        right: -50px;
    }
}


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

@media (max-width: 760px) {

    .page-under-construction {
        min-height: calc(100vh - 70px);

        padding: 80px 0;
    }


    /* -----------------------------------------------------
       DECORACIÓN
    ----------------------------------------------------- */

    .page-under-construction::before {
        width: 400px;
        height: 400px;
    }


    .page-under-construction::after {
        width: 580px;
        height: 580px;
    }


    .page-under-construction .container::before,
    .page-under-construction .container::after {
        display: none;
    }


    /* -----------------------------------------------------
       SÍMBOLO
    ----------------------------------------------------- */

    .construction-symbol {
        width: 62px;
        height: 62px;

        margin-bottom: 25px;

        font-size: 22px;
    }


    /* -----------------------------------------------------
       ETIQUETA
    ----------------------------------------------------- */

    .construction-label {
        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: 3px;
    }


    /* -----------------------------------------------------
       TÍTULO
    ----------------------------------------------------- */

    .page-under-construction h1 {
        max-width: 500px;

        margin-bottom: 25px;

        font-size: clamp(2.7rem, 12vw, 4rem);

        line-height: 0.97;

        letter-spacing: -1px;
    }


    /* -----------------------------------------------------
       TEXTO
    ----------------------------------------------------- */

    .construction-message {
        font-size: 17px;

        line-height: 1.65;
    }


    .page-under-construction .container > p:not(.construction-message) {
        font-size: 14px;

        line-height: 1.8;
    }


    /* -----------------------------------------------------
       ESTADO
    ----------------------------------------------------- */

    .construction-status {
        margin-top: 28px;

        padding: 9px 15px;

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    /* -----------------------------------------------------
       SEPARADOR
    ----------------------------------------------------- */

    .construction-divider {
        width: 140px;

        margin: 38px auto 32px;
    }


    /* -----------------------------------------------------
       CITA
    ----------------------------------------------------- */

    .page-under-construction blockquote {
        max-width: 450px;

        padding: 0 22px;

        font-size: 1.3rem;

        line-height: 1.45;
    }


    .page-under-construction blockquote::before {
        top: -28px;
        left: 0;

        font-size: 60px;
    }


    /* -----------------------------------------------------
       NAVEGACIÓN
    ----------------------------------------------------- */

    .construction-navigation {
        flex-direction: column;

        gap: 20px;

        margin-top: 38px;
    }


    .construction-navigation a {
        font-size: 12px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 420px) {

    .page-under-construction {
        padding: 65px 0 75px;
    }


    .page-under-construction::before {
        width: 320px;
        height: 320px;
    }


    .page-under-construction::after {
        width: 470px;
        height: 470px;
    }


    .construction-symbol {
        width: 56px;
        height: 56px;

        margin-bottom: 22px;
    }


    .page-under-construction h1 {
        font-size: 2.65rem;
    }


    .construction-message {
        font-size: 16px;
    }


    .page-under-construction .container > p:not(.construction-message) {
        font-size: 13.5px;
    }


    .construction-status {
        margin-top: 25px;
    }


    .construction-divider {
        margin-top: 34px;
        margin-bottom: 30px;
    }


    .page-under-construction blockquote {
        padding: 0 15px;

        font-size: 1.18rem;
    }


    .construction-navigation {
        margin-top: 34px;
    }
}