/* =========================================================
   VARIABLES
========================================================= */

:root {

    --purple: #892be2;
    --purple-light: #a855f7;

    --pink: #ff00aa;
    --pink-light: #ff59c7;

    --gradient:
        linear-gradient(
            110deg,
            #892be2c8 0%,
            #ff00aaa0 100%
        );

    --white: #ffffff;

    --glass:
        rgba(255, 255, 255, 0.78);

    --glass-strong:
        rgba(255, 255, 255, 0.90);

    --dark: #18121c;

    --text: #27212b;

    --muted: #6d6472;

    --radius: 30px;

    --shadow:
        0 20px 60px rgba(57, 0, 80, .18);

    --glow:
        0 0 35px rgba(255, 255, 255, .55);
}


/* =========================================================
   RESET GLOBAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--text);

    font-family: "Edu TAS Beginner", cursive;

    background-image: url("../IMG/FONDOS.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}


/* =========================================================
   TIPOGRAFÍAS
========================================================= */

.aladin-regular {
    font-family: "Aladin", system-ui;
    font-weight: 400;
    font-style: normal;
}


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

header {
    width: 100%;
    height: 100px;
}


/* =========================================================
   NAV PRINCIPAL
========================================================= */

.bottom-menu {

    position: static;

    width: 100%;
    min-width: 0;
    height: 50px;

    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 0 30px;

    background: linear-gradient(
        135deg,
        #3d1b61 100%
        #c0b8d8 25%,
        #9b7fc7 50%,
        #6b3fb0 75%,
        #3d1b61 100%
    );

    border: 1px solid rgba(212, 175, 55, 0.28);
    border-bottom: 1px solid rgba(212, 175, 55, 0.85);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.45),
        0 -1px 8px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* =========================================================
   ELEMENTOS DEL NAV
========================================================= */

.menu-item {

    position: relative;
    z-index: 101;

    flex: 1 1 0;
    min-width: 0;

    height: 50px;

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

    padding: 0 12px;

    color: rgba(245, 235, 241, 0.78);

    text-decoration: none;

    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(15px, 1.4vw, 20px);

    cursor: pointer;

    transition:
        color 0.3s ease,
        background 0.35s ease,
        text-shadow 0.3s ease;
}


/* =========================================================
   TEXTO DEL MENU
========================================================= */

.menu-text {

    position: relative;
    z-index: 2;

    display: block;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    visibility: visible;
    opacity: 1;

    transform: none;

    text-align: center;

    white-space: nowrap;

    pointer-events: none;

    color: inherit;

    font-family: inherit;
    font-size: inherit;

    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
}


/* =========================================================
   ORNAMENTO
========================================================= */

.menu-item::before {

    content: "༺───༻";

    position: absolute;
    z-index: 1;

    left: 50%;
    bottom: 3px;

    transform: translate(-50%, 8px);

    color: #d6b477;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: normal;

    letter-spacing: .5px;

    white-space: nowrap;
    line-height: 1;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .4s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1);
}

.menu-item:hover::before {

    opacity: 1;

    transform: translate(-50%, 0);
}


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

.menu-item:hover {

    color: #f3d8b1;

    text-shadow:
        0 0 6px rgba(243, 216, 177, .22);

    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(212, 175, 55, .07),
            transparent 65%
        );
}

.menu-item:hover .menu-text {

    color: #f3d8b1;

    text-shadow:
        0 0 5px rgba(232, 197, 142, .25),
        0 0 12px rgba(232, 197, 142, .08);
}


/* =========================================================
   SEPARADORES
========================================================= */

.menu-item:nth-child(1)::after,
.menu-item:nth-child(2)::after,
.menu-item:nth-child(3)::after {

    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 1px;
    height: 34px;

    transform: translateY(-50%);

    background: rgba(212, 175, 55, .85);

    pointer-events: none;
}


/* =========================================================
   ACTIVO
========================================================= */

.menu-item.active {

    color: rgba(255, 245, 250, .95);

    text-shadow:
        0 0 8px rgba(232, 197, 142, .12);
}


/* =========================================================
   INDICADOR
========================================================= */

.menu-indicator {

    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 0;

    width: 48px;
    height: 2px;

    transform: translateX(-50%);

    background: #e8c58e;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        background .3s ease,
        width .35s ease;
}

.menu-item:hover .menu-indicator {

    width: 48px;

    opacity: 1;

    background: #d8b77c;

    box-shadow:
        0 0 5px rgba(216, 183, 124, .25);
}


/* =========================================================
   SEGURIDAD DEL TEXTO
========================================================= */

.bottom-menu .menu-text,
.bottom-menu .menu-item .menu-text {

    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   BOX SIZING
========================================================= */

.bottom-menu,
.menu-item,
.menu-icon,
.menu-text,
.menu-indicator {
    box-sizing: border-box;
}


/* =========================================================
   CONTACTO
========================================================= */

.contacto {

    width: 100%;
    min-width: 0;

    padding:
        20px
        clamp(15px, 3.2vw, 50px)
        70px;

    margin-top: -65px;
}


/* =========================================================
   CONTENEDOR CONTACTO
========================================================= */

.contacto__inner {

    position: relative;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: clamp(20px, 3vw, 35px);

    border: 1px solid rgba(0, 0, 0, .20);

    border-radius: 20px;

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

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .22),
        inset 0 0 20px rgba(255, 255, 255, .65);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    overflow: hidden;
}


/* =========================================================
   MANCHAS
========================================================= */

.contacto__inner::before {

    content: "";

    position: absolute;

    width: clamp(250px, 35vw, 500px);
    height: clamp(250px, 35vw, 500px);

    left: clamp(-250px, -15vw, -100px);
    top: 200px;

    background: rgba(255, 0, 170, .20);

    filter: blur(80px);

    border-radius: 50%;

    pointer-events: none;
}

.contacto__inner::after {

    content: "";

    position: absolute;

    width: clamp(250px, 35vw, 500px);
    height: clamp(250px, 35vw, 500px);

    right: clamp(-250px, -15vw, -100px);
    top: -150px;

    background: rgba(57, 190, 176, .22);

    filter: blur(80px);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   CABECERA CONTACTO
========================================================= */

.contacto__header {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 850px;

    margin: 0 auto clamp(30px, 4vw, 50px);

    padding: clamp(10px, 2vw, 20px);

    text-align: center;
}

.contacto__small {

    display: block;

    margin-bottom: 12px;

    color: #7d19a5;

    font-family: "Aladin", system-ui;

    font-size: clamp(.7rem, 1vw, .85rem);

    font-weight: 700;

    letter-spacing: clamp(2px, .5vw, 4px);
}

.contacto__header h1 {

    margin-bottom: 20px;

    color: #ffffff;

    font-family: "Aladin", system-ui;

    font-size: clamp(
        2rem,
        5vw,
        4.5rem
    );

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

    overflow-wrap: break-word;
}

.contacto__header p {

    width: 100%;
    max-width: 750px;

    margin: 0 auto;

    color: #222;

    font-size: clamp(
        1.1rem,
        1.8vw,
        1.5rem
    );

    line-height: 1.7;

    font-family: "Edu TAS Beginner", cursive;
}


/* =========================================================
   CONTENIDO CONTACTO
========================================================= */

.contacto__contenido {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(0, 1.2fr);

    gap: clamp(20px, 2.5vw, 30px);

    align-items: stretch;
}


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

.contacto__intro {

    min-width: 0;

    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: clamp(25px, 3vw, 45px);

    border-radius: 18px;

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

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

    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, .45),
        0 5px 20px rgba(0, 0, 0, .10);
}

.contacto__intro h2 {

    margin-bottom: 25px;

    color: #000;

    font-family: "Aladin", system-ui;

    font-size: clamp(
        2rem,
        3.5vw,
        3.2rem
    );

    line-height: 1.1;
}

.contacto__intro h2 span {

    display: block;

    font-family: "Aladin", system-ui;

    color: #7d19a5;
}

.contacto__intro p {

    margin-bottom: 15px;

    color: #222;

    font-size: clamp(
        1.1rem,
        1.8vw,
        1.5rem
    );

    font-family: "Edu TAS Beginner", cursive;

    line-height: 1.7;
}


/* =========================================================
   BOTÓN ESCRÍBENOS
========================================================= */

.contacto__boton {

    width: fit-content;
    max-width: 100%;

    display: inline-flex;

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

    gap: 12px;

    margin-top: 20px;

    padding: 14px 30px;

    border-radius: 30px;

    background: linear-gradient(
        to right,
        #892be2,
        #ff00aa
    );

    color: #fff;

    text-decoration: none;

    font-family: "Aladin", system-ui;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(137, 43, 226, .25);

    transition: .3s ease;
}

.contacto__boton span {

    font-size: 1.3rem;

    transition: .3s ease;
}

.contacto__boton:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(137, 43, 226, .35);
}

.contacto__boton:hover span {

    transform: translateX(5px);
}


/* =========================================================
   TARJETAS CONTACTO
========================================================= */

.contacto__datos {

    min-width: 0;

    display: grid;

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

    gap: clamp(15px, 2vw, 20px);
}

.contacto__card {

    min-width: 0;
    min-height: 155px;

    display: flex;

    align-items: center;

    gap: 20px;

    padding: clamp(18px, 2vw, 25px);

    border-radius: 16px;

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

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

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, .50),
        0 5px 15px rgba(0, 0, 0, .08);

    transition: .3s ease;
}

.contacto__card:hover {

    transform: translateY(-5px);

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

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .12);
}


/* =========================================================
   ICONOS
========================================================= */

.contacto__icon {

    width: clamp(48px, 5vw, 60px);
    height: clamp(48px, 5vw, 60px);

    flex: 0 0 auto;

    display: flex;

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

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #892be2,
        #ff00aa
    );

    color: white;

    font-size: clamp(1.2rem, 2vw, 1.5rem);

    box-shadow:
        0 5px 15px rgba(137, 43, 226, .30);
}


/* =========================================================
   TEXTO TARJETAS
========================================================= */

.contacto__card-text {

    min-width: 0;
}

.contacto__card-text h3 {

    margin-bottom: 7px;

    letter-spacing: 2px;

    color: #000;

    font-family: "Aladin", system-ui;

    font-size: clamp(
        1rem,
        1.4vw,
        1.15rem
    );
}

.contacto__card-text p,
.contacto__card-text a {

    display: block;

    max-width: 100%;

    color: #333;

    font-family: "Edu TAS Beginner", cursive;

    font-size: clamp(
        1rem,
        1.7vw,
        1.5rem
    );

    line-height: 1.5;

    text-decoration: none;

    overflow-wrap: anywhere;
}

.contacto__card-text a:hover {

    color: #7d19a5;
}


/* =========================================================
   SECCIÓN FINAL
========================================================= */

.contacto__final {

    position: relative;
    z-index: 2;

    width: 100%;

    min-height: 230px;

    display: flex;

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

    margin-top: 35px;

    padding: clamp(30px, 4vw, 45px)
             clamp(20px, 3vw, 30px);

    text-align: center;

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 0, 170, .35),
            rgba(137, 43, 226, .30)
        );

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

    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, .30);
}

.contacto__final::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -80px;
    bottom: -220px;

    border-radius: 50%;

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

    filter: blur(20px);
}

.contacto__final::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -200px;

    border-radius: 50%;

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

    filter: blur(25px);
}

.contacto__final-content {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    margin: auto;
}

.contacto__final-content > span {

    display: block;

    margin-bottom: 10px;

    color: #7d19a5;

    font-size: clamp(
        1.5rem,
        3vw,
        2rem
    );
}

.contacto__final h2 {

    margin-bottom: 15px;

    color: #000;

    font-family: "Aladin", system-ui;

    font-size: clamp(
        1.8rem,
        4vw,
        3.5rem
    );

    line-height: 1.1;
}

.contacto__final h2 strong {

    font-family: "Aladin", system-ui;

    color: #7d19a5;
}

.contacto__final p {

    margin-bottom: 25px;

    color: #333;

    font-family: "Edu TAS Beginner", cursive;

    font-size: clamp(
        1.1rem,
        1.7vw,
        1.5rem
    );

    line-height: 1.7;
}


/* =========================================================
   BOTÓN FINAL
========================================================= */

.contacto__final-boton {

    display: inline-flex;

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

    max-width: 100%;

    padding: 14px 32px;

    border-radius: 30px;

    background: linear-gradient(
        to right,
        #892be2,
        #ff00aa
    );

    color: #fff;

    text-decoration: none;

    font-family: "Aladin", system-ui;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(137, 43, 226, .30);

    transition: .3s ease;
}

.contacto__final-boton:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(137, 43, 226, .40);
}


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

.footer {

    width: 100%;
    min-width: 0;

    margin: 0 auto;

    padding:
        clamp(40px, 5vw, 80px)
        clamp(15px, 3vw, 40px)
        30px;

    display: flex;

    flex-direction: column;

    text-align: center;

    background:
        linear-gradient(
            to right,
            #892be2c8 0%,
            #ff00aaa0 100%
        );

    color: #f5f5f5;
}


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

.footer-container {

    width: 100%;
    max-width: 1300px;

    margin: 0 auto;

    display: grid;

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

    gap: clamp(30px, 6vw, 80px);

    text-align: left;
}


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

.footer-logo {

    display: flex;

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

    gap: 15px;

    margin-bottom: 25px;
}

.footer-logo img {

    width: clamp(
        60px,
        8vw,
        108px
    );

    max-width: 100%;

    height: auto;
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.footer-info {

    min-width: 0;
}

.footer-info p {

    width: 100%;
    max-width: 500px;

    margin: 0;

    line-height: 1.8;

    color: black;

    font-family: "Edu TAS Beginner", cursive;

    overflow-wrap: break-word;
}


/* =========================================================
   TÍTULOS FOOTER
========================================================= */

.footer h4 {

    margin-bottom: 20px;

    color: white;

    font-size: clamp(
        1.4rem,
        2vw,
        1.8rem
    );

    font-family: "Aladin", system-ui;
}


/* =========================================================
   ENLACES
========================================================= */

.footer-links ul {

    list-style: none;

    padding: 0;
}

.footer-links li {

    margin-bottom: 14px;
}

.footer-links ul li a {

    font-family:
        "Edu TAS Beginner",
        cursive;
}

.footer-links a {

    color: black;

    text-decoration: none;

    transition: .3s;
}

.footer-links a:hover {

    color: white;
}


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

.footer-contact {

    min-width: 0;
}

.footer-contact p {

    margin-bottom: 14px;

    color: black;

    font-family:
        "Edu TAS Beginner",
        cursive;

    overflow-wrap: anywhere;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom {

    width: 100%;
    max-width: 1300px;

    margin: 50px auto 0;

    padding-top: 25px;

    text-align: center;

    font-size: .95rem;

    font-family:
        "Edu TAS Beginner",
        cursive;

    color: #d8d8d8;

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


/* =========================================================
   TABLET GRANDE
   768px → 991px
========================================================= */

@media (max-width: 991px) {

    /* -------------------------
       CONTACTO
    ------------------------- */

    .contacto {
        padding:
            20px
            20px
            60px;

        margin-top: -45px;
    }

    .contacto__contenido {

        grid-template-columns: 1fr;

        gap: 25px;
    }


    /* -------------------------
       INTRO
    ------------------------- */

    .contacto__intro {
        padding: 35px;
    }


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

    .footer-container {

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

        gap: 40px;
    }

    .footer-info {

        grid-column: 1 / -1;
    }

    .footer-logo {

        justify-content: flex-start;
    }
}


/* =========================================================
   TABLET / MÓVIL
   701px → 767px
========================================================= */

@media (max-width: 767px) {

    /* -------------------------
       HEADER
    ------------------------- */

    header {
        height: auto;
        min-height: 82px;
    }


    /* -------------------------
       NAV
    ------------------------- */

    .bottom-menu {

        position: static;

        width: 100%;
        height: 82px;
        min-height: 82px;

        margin: 0;

        padding: 0 10px;

        border-radius: 0;
    }

    .menu-item {

        height: 72px;

        padding: 0 5px;

        gap: 5px;

        font-size: 12px;
    }

    .menu-icon {

        width: 23px;
        height: 23px;

        font-size: 23px;
    }

    .menu-text {

        max-width: 90px;

        font-size: 10px;

        line-height: 1.2;

        white-space: normal;
    }

    .menu-item::before {

        bottom: 4px;

        font-size: 9px;

        letter-spacing: 0;
    }

    .menu-indicator {

        width: 42px;

        bottom: 5px;
    }

    .menu-item:hover .menu-indicator {

        width: 42px;
    }

    .menu-item:not(:last-child)::after {

        height: 26px;
    }


    /* -------------------------
       CONTACTO
    ------------------------- */

    .contacto {

        padding:
            15px
            12px
            50px;

        margin-top: -25px;
    }

    .contacto__inner {

        padding: 20px 15px;

        border-radius: 18px;
    }

    .contacto__header {

        padding: 10px 5px;

        margin-bottom: 25px;
    }

    .contacto__header h1 {

        font-size: clamp(
            2rem,
            10vw,
            3.5rem
        );
    }


    /* -------------------------
       TARJETAS
    ------------------------- */

    .contacto__datos {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .contacto__card {

        min-height: 125px;

        padding: 20px;

        gap: 15px;
    }


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

    .contacto__final {

        min-height: 210px;

        margin-top: 25px;

        padding: 30px 20px;

        border-radius: 16px;
    }


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

    .footer {

        padding:
            45px
            15px
            25px;
    }

    .footer-container {

        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;
    }

    .footer-info {

        grid-column: auto;
    }

    .footer-logo {

        justify-content: center;
    }

    .footer-info p {

        margin: 0 auto;
    }

    .footer-bottom {

        margin-top: 35px;
    }
}


/* =========================================================
   MÓVILES PEQUEÑOS
   401px → 700px
========================================================= */

@media (max-width: 500px) {

    /* -------------------------
       NAV
    ------------------------- */

    .bottom-menu {

        height: 78px;
        min-height: 78px;

        padding:
            0 4px;
    }

    .menu-item {

        height: 72px;

        padding: 0 2px;

        font-size: 10px;
    }

    .menu-icon {

        width: 21px;
        height: 21px;

        font-size: 21px;
    }

    .menu-text {

        max-width: 70px;

        font-size: 9px;
    }

    .menu-item::before {

        bottom: 3px;

        font-size: 8px;
    }

    .menu-indicator {

        width: 38px;
    }

    .menu-item:hover .menu-indicator {

        width: 40px;
    }


    /* -------------------------
       CONTACTO
    ------------------------- */

    .contacto {

        padding:
            10px
            8px
            40px;

        margin-top: -15px;
    }

    .contacto__inner {

        padding:
            18px
            10px;

        border-radius: 15px;
    }

    .contacto__header h1 {

        font-size:
            clamp(
                1.9rem,
                12vw,
                3rem
            );
    }

    .contacto__header p {

        font-size: 1.1rem;

        line-height: 1.55;
    }

    .contacto__intro {

        padding: 25px 18px;
    }

    .contacto__intro h2 {

        font-size: 2rem;
    }

    .contacto__intro p {

        font-size: 1.15rem;

        line-height: 1.6;
    }


    /* -------------------------
       BOTONES
    ------------------------- */

    .contacto__boton,
    .contacto__final-boton {

        width: 100%;

        max-width: 100%;

        padding:
            13px
            20px;

        text-align: center;
    }


    /* -------------------------
       CARDS
    ------------------------- */

    .contacto__card {

        min-height: 115px;

        padding: 17px;

        gap: 13px;
    }

    .contacto__icon {

        width: 48px;
        height: 48px;

        font-size: 1.2rem;
    }

    .contacto__card-text h3 {

        font-size: 1rem;

        letter-spacing: 1px;
    }

    .contacto__card-text p,
    .contacto__card-text a {

        font-size: 1.05rem;

        line-height: 1.4;
    }


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

    .contacto__final {

        padding:
            30px
            15px;
    }

    .contacto__final h2 {

        font-size:
            clamp(
                1.7rem,
                8vw,
                2.5rem
            );
    }

    .contacto__final p {

        font-size: 1.1rem;

        line-height: 1.55;
    }


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

    .footer {

        padding:
            40px
            12px
            25px;
    }

    .footer h4 {

        font-size: 1.5rem;
    }

    .footer-info p,
    .footer-contact p,
    .footer-links a {

        font-size: 1rem;

        line-height: 1.6;
    }
}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   400px O MENOS
========================================================= */

@media (max-width: 400px) {

    html,
    body {

        width: 100%;

        overflow-x: hidden;
    }


    /* -------------------------
       HEADER
    ------------------------- */

    header {

        width: 100%;

        min-height: 76px;
    }


    /* -------------------------
       NAV
    ------------------------- */

    .bottom-menu {

        width: 100%;

        height: 76px;
        min-height: 76px;

        padding: 0 2px;
    }

    .menu-item {

        height: 70px;

        padding: 0 1px;

        gap: 2px;
    }

    .menu-icon {

        width: 20px;
        height: 20px;

        font-size: 20px;
    }

    .menu-text {

        max-width: 60px;

        font-size: 8px;

        line-height: 1.15;
    }

    .menu-item::before {

        bottom: 2px;

        font-size: 7px;
    }

    .menu-indicator {

        width: 32px;

        height: 2px;
    }

    .menu-item:hover .menu-indicator {

        width: 35px;
    }

    .menu-item:not(:last-child)::after {

        height: 24px;
    }


    /* -------------------------
       CONTACTO
    ------------------------- */

    .contacto {

        width: 100%;

        padding:
            8px
            5px
            35px;

        margin-top: -10px;
    }

    .contacto__inner {

        width: 100%;

        padding:
            15px
            8px;

        border-radius: 13px;
    }

    .contacto__header {

        padding:
            8px
            2px;
    }

    .contacto__small {

        font-size: .65rem;

        letter-spacing: 2px;
    }

    .contacto__header h1 {

        font-size:
            clamp(
                1.7rem,
                11vw,
                2.6rem
            );

        line-height: 1;
    }

    .contacto__header p {

        font-size: 1rem;

        line-height: 1.5;
    }


    /* -------------------------
       INTRO
    ------------------------- */

    .contacto__intro {

        padding:
            22px
            15px;

        border-radius: 14px;
    }

    .contacto__intro h2 {

        font-size: 1.8rem;

        margin-bottom: 18px;
    }

    .contacto__intro p {

        font-size: 1.05rem;

        line-height: 1.5;
    }


    /* -------------------------
       CARDS
    ------------------------- */

    .contacto__card {

        min-height: 105px;

        padding:
            14px
            12px;

        gap: 10px;

        border-radius: 13px;
    }

    .contacto__icon {

        width: 43px;
        height: 43px;

        font-size: 1rem;
    }

    .contacto__card-text h3 {

        font-size: .9rem;

        letter-spacing: 1px;
    }

    .contacto__card-text p,
    .contacto__card-text a {

        font-size: .95rem;

        line-height: 1.35;
    }


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

    .contacto__final {

        min-height: 190px;

        padding:
            25px
            12px;

        border-radius: 14px;
    }

    .contacto__final-content > span {

        font-size: 1.4rem;
    }

    .contacto__final h2 {

        font-size:
            clamp(
                1.5rem,
                8vw,
                2.2rem
            );
    }

    .contacto__final p {

        font-size: 1rem;

        line-height: 1.5;
    }


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

    .footer {

        padding:
            35px
            10px
            20px;
    }

    .footer-logo img {

        width: 65px;
    }

    .footer h4 {

        font-size: 1.35rem;

        margin-bottom: 15px;
    }

    .footer-info p,
    .footer-contact p,
    .footer-links a {

        font-size: .95rem;

        line-height: 1.5;
    }

    .footer-bottom {

        margin-top: 30px;

        padding-top: 20px;

        font-size: .8rem;
    }
}


/* =========================================================
   PANTALLAS GRANDES
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .contacto {

        padding-left: 4%;
        padding-right: 4%;
    }

    .contacto__inner {

        padding: 40px;
    }

    .footer {

        padding:
            80px
            40px
            35px;
    }

    .footer-container {

        gap: 100px;
    }
}


/* =========================================================
   PANTALLAS ULTRA GRANDES
   1800px+
========================================================= */

@media (min-width: 1800px) {

    .contacto__inner {

        max-width: 1600px;
    }

    .contacto__contenido {

        gap: 40px;
    }

    .footer-container,
    .footer-bottom {

        max-width: 1500px;
    }
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   EVITAR DESBORDAMIENTOS DE IMÁGENES
========================================================= */

img,
svg,
video,
iframe {

    max-width: 100%;
}


/* =========================================================
   ELEMENTOS DE TEXTO LARGOS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {

    overflow-wrap: break-word;
}


/* =========================================================
   SEGURIDAD EXTRA PARA CONTENEDORES
========================================================= */

section,
main,
article,
footer,
header,
nav {

    max-width: 100%;
}