/* =========================================================
   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
========================================================= */
.bottom-menu {
    position: static;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
 
    background: linear-gradient(
        135deg,
        #3d1b61 100%     /* lila oscuro/violeta profundo */
        #c0b8d8 25%,     /* plata-lila */
        #9b7fc7 50%,     /* lila medio */
        #6b3fb0 75%,     /* lila intenso */
        #3d1b61 100%     /* lila oscuro/violeta profundo */
    );
 
    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);
 
    overflow: visible;
}
 
/* =========================================================
   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;
    color: rgba(245, 235, 241, 0.78);
    text-decoration: none;
    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(13px, 1.6vw, 20px);
    cursor: pointer;
    padding: 0 clamp(4px, 1vw, 12px);
    transition:
        color 0.3s ease,
        background 0.35s ease,
        text-shadow 0.3s ease;
}
 
/* =========================================================
   TEXTO NAV
========================================================= */
.menu-text {
    position: relative;
    z-index: 2;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
	font-weight: bold;
    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
    line-height: 1.1;
}
 
/* =========================================================
   ORNAMENTO (solo hover)
========================================================= */
.menu-item::before {
    content: "༺───༻";
    position: absolute;
    z-index: 1;
    top: 25px;
    transform: translate(-50%, 8px);
    color: #d6b477;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(.22, 1, .36, 1);
}
 
/* =========================================================
   HOVER
========================================================= */
.menu-item:hover {
    color: #f3d8b1;
    text-shadow: 0 0 6px rgba(243, 216, 177, 0.22);
    background: linear-gradient(
        135deg,
        #7a5c1e 0%,
        #d4af37 15%,
        #fff6d5 25%,
        #ffffff 32%,
        #fff6d5 40%,
        #d4af37 50%,
        #a67c1e 62%,
        #f9e08c 75%,
        #b8860b 88%,
        #7a5c1e 100%
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine 4s linear infinite;
}
  
@keyframes shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.menu-item:hover .menu-text {
    color: #f3d8b1;
    text-shadow:
        0 0 5px rgba(232, 197, 142, 0.25),
        0 0 12px rgba(232, 197, 142, 0.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, 0.85);
    pointer-events: none;
}
 
/* =========================================================
   ACTIVO
========================================================= */
.menu-item.active {
    color: rgba(255, 245, 250, 0.95);
    text-shadow: 0 0 8px rgba(232, 197, 142, 0.12);
}
 
/* =========================================================
   INDICADOR
========================================================= */
.menu-indicator {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 2px;
    transform: translateX(-50%);
    color: transparent;
    background-color: #cca638;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 80%),
        linear-gradient(135deg,
            #996515 0%,
            #d4af37 20%,
            #fff3a8 40%,
            #aa771c 55%,
            #ffe875 70%,
            #8c6218 85%,
            #e6ca65 100%
        );
    background-blend-mode: overlay;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 6px rgba(243, 216, 177, 0.22);
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        background 0.3s ease,
        width 0.35s ease;
}
 
/* =========================================================
   SEGURIDAD TEXTO
========================================================= */
.bottom-menu .menu-text,
.bottom-menu .menu-item .menu-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}
 
.bottom-menu,
.menu-item,
.menu-icon,
.menu-text,
.menu-indicator {
    box-sizing: border-box;
}
/* =========================================================
   BOX SIZING
========================================================= */

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

/* CUERPO DE CONTACTO */
.contacto {
    width: 100%; flex: 0 0 auto; margin: 0;
    padding: 10px 16px 14px; color: var(--contact-white);
}
.contacto__inner {
    position: relative; display: flex; flex-direction: column;
    gap: var(--page-gap); width: 100%; max-width: var(--page-width);
    margin: 0 auto; padding: 0;
}
.contacto__inner::before, .contacto__inner::after { content: none; }

/* TÍTULO CONTACTO */
.contacto__header {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 58px; min-height: 58px; margin: 0; padding: 6px 16px;
    border: 1px solid rgba(212,175,55,.45);
    border-bottom-color: rgba(212,175,55,.85);
    background: rgba(61,27,97,.3);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 18px rgba(25,0,35,.24), 0 0 12px rgba(0,180,170,.1);
    overflow: hidden;
	margin-bottom: 30px;
}
.contacto__header h1 {
    position: relative; margin: 0; padding: 0 35px;
    font: 400 clamp(2rem, 3vw, 2.7rem)/1.1 "Aladin", system-ui;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff 0%, #fff1cc 28%, #f5cf83 55%, #b97b32 80%, #fff1b8 100%);
    background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(60,0,45,.6));
}
.contacto__header h1::before, .contacto__header h1::after {
    content: ""; position: absolute; top: 50%; width: clamp(18px, 5vw, 75px);
    height: 1px; background: rgba(244,210,139,.7);
}
.contacto__header h1::before { right: 100%; }
.contacto__header h1::after { left: 100%; }

/* CRISTAL PRINCIPAL */
.contacto__contenido {
	
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
    align-items: stretch; gap: 12px; width: 100%; margin: 0; padding: 12px;
    border: 1px solid rgba(255,230,245,.65); border-radius: 18px;
    background: rgba(100,30,130,.16);
    backdrop-filter: blur(13px) saturate(140%);
    -webkit-backdrop-filter: blur(13px) saturate(140%);
    box-shadow: 0 10px 28px rgba(37,0,61,.22), inset 0 1px 0 rgba(255,255,255,.3);
	margin-bottom: 30px;
}
.contacto__intro {
    position: relative; width: 100%; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    align-items: flex-start; gap: 9px; padding: 12px 18px;
    background: transparent; text-align: left;
}
.contacto__intro::after {
    content: ""; position: absolute; right: 0; top: 12%; width: 1px; height: 76%;
    background: linear-gradient(transparent, rgba(255,221,159,.8), transparent);
}


.contacto__intro h2 {
    display: table;
    position: relative;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto 4px;

    font: 400 clamp(2rem, 2.7vw, 3rem)/1.08 "Aladin", system-ui;

    letter-spacing: 1px;
    text-align: center;

      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fffef5 12%,
        #fff9d6 25%,
        #ffe88a 38%,
        #ffd45c 48%,
        #fff6cc 58%,
        #ffffff 72%,
        #ffe991 85%,
        #fffdf0 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(80, 35, 55, 0.15));
	
}


.contacto__intro h2 span {
    
    text-shadow: 0 2px 5px rgba(50,0,50,.5), 0 0 15px rgba(255,200,110,.2);
}
.contacto__intro p {
    width: 100%; margin: 0; color: #fff2fa;
    font-size: 1.5rem; line-height: 1.35;
    text-shadow: 0 2px 4px rgba(30,0,35,.5);
}

/* CUATRO TARJETAS */
.contacto__datos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto); align-content: center;
    gap: 9px; width: 100%; min-width: 0;
}
.contacto__card {
    position: relative; display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; width: 100%; min-width: 0; height: auto; min-height: 104px;
    padding: 12px; overflow: hidden;
    border: 1px solid rgba(255,223,245,.5); border-radius: 15px;
    background: linear-gradient(135deg, rgba(122,45,145,.72), rgba(213,71,171,.42));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(47,0,75,.18), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .3s, box-shadow .3s, border-color .3s, background .3s;
}
.contacto__card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 45%);
}
.contacto__card:hover {
    transform: translateY(-3px); border-color: rgba(255,218,150,.85);
    background: linear-gradient(135deg, rgba(130,40,160,.85), rgba(235,60,175,.58));
    box-shadow: 0 10px 22px rgba(48,0,75,.3), 0 0 12px rgba(255,190,215,.2);
}
.contacto__icon {
    position: relative; z-index: 1; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--contact-gold);
    background: linear-gradient(145deg, #a700d4, #f000a8 55%, #8d0caa);
    color: #fff; font: 21px Arial, sans-serif;
    box-shadow: 0 0 12px rgba(255,195,105,.35), inset 0 1px 6px rgba(255,255,255,.18);
    transition: transform .3s;
}
.contacto__card:hover .contacto__icon { transform: scale(1.06) rotate(4deg); }
.contacto__card-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.contacto__card-text h3 {
    margin: 0 0 4px; color: var(--contact-gold-light);
    font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.1 "Aladin", system-ui;
    letter-spacing: .4px; text-shadow: 0 2px 5px rgba(30,0,35,.5);
	   background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fffef5 12%,
        #fff9d6 25%,
        #ffe88a 38%,
        #ffd45c 48%,
        #fff6cc 58%,
        #ffffff 72%,
        #ffe991 85%,
        #fffdf0 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(80, 35, 55, 0.15));
	
}
.contacto__card-text p, .contacto__card-text a {
    display: block; max-width: 100%; margin: 0;
    color: #fff6ff; font-size: 1.5rem;
    line-height: 1.3; text-decoration: none; overflow-wrap: anywhere;
}
.contacto__card-text small { display: block; margin-top: 2px; font-size: .85em; }
.contacto__card-text a:hover {
    color: #f3d8b1;
    text-shadow: 0 0 6px rgba(243, 216, 177, 0.22);

    background: linear-gradient(
        135deg,
        #7a5c1e 0%,
        #d4af37 15%,
        #fff6d5 25%,
        #ffffff 32%,
        #fff6d5 40%,
        #d4af37 50%,
        #a67c1e 62%,
        #f9e08c 75%,
        #b8860b 88%,
        #7a5c1e 100%
    );

    background-size: 300% 300%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: shine 4s linear infinite;
}

/* ==========================================
   BRILLO DEL TEXTO
========================================== */

.contacto__card-text a:hover .menu-text {
    color: #f3d8b1;

    text-shadow:
        0 0 5px rgba(232, 197, 142, 0.25),
        0 0 12px rgba(232, 197, 142, 0.08);
}

/* ==========================================
   ANIMACIÓN DEL DORADO METÁLICO
========================================== */

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}




/* MENSAJE FINAL */
.contacto__final {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 105px; margin: 0; padding: 16px 20px;
    text-align: center; overflow: hidden;
    border: 1px solid rgba(255,224,245,.55); border-radius: 16px;
    background: linear-gradient(110deg, rgba(102,17,141,.65), rgba(171,27,155,.52), rgba(234,52,161,.42));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 9px 22px rgba(40,0,70,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.contacto__final::before, .contacto__final::after {
    content: ""; position: absolute; left: 20%; width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, #f4d28b, transparent);
}
.contacto__final::before { top: 10px; }
.contacto__final::after { bottom: 10px; }
.contacto__final-content { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: auto; }
.contacto__final-content > span { display: block; margin-bottom: 1px; color: #FFE991;
    text-shadow: 0 1px 2px rgba(80, 35, 55, 0.15); font-size: 1.1rem; }
.contacto__final h2 {
    margin: 0 0 3px; color: #f000a8;
    font: 400 clamp(1.8rem, 2.6vw, 2.7rem)/1.1 "Aladin", system-ui;
	 text-shadow:
        0 1px 0 rgba(45, 0, 40, 0.95),
        0 2px 1px rgba(35, 0, 40, 0.85),
        0 3px 3px rgba(25, 0, 35, 0.55),
        0 5px 7px rgba(20, 0, 30, 0.25); 
}
.contacto__final h2 strong {  color: #ff00b7;
    font-weight: 400;

    text-shadow:
        0 1px 0 rgba(45, 0, 40, 0.95),
        0 2px 1px rgba(35, 0, 40, 0.85),
        0 3px 3px rgba(25, 0, 35, 0.55),
        0 5px 7px rgba(20, 0, 30, 0.25); }
.contacto__final p { color: #ffffff; font-size: 1.5rem; line-height: 1.35; }

/* ============================================================
   RESPONSIVE — TABLETS
   ============================================================ */

@media (max-width: 991px) {

    .contacto {
        margin-top: -35px;
        padding: 15px 20px 45px;
    }

    .contacto__contenido {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contacto__intro {
        padding: 15px 10px;
        text-align: center;
    }

    .contacto__intro::after {
        display: none;
    }

    .contacto__intro h2 {
        font-size: clamp(2.3rem, 5vw, 3.3rem);
    }

    .contacto__intro p {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .contacto__datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   RESPONSIVE — TABLETS
   ============================================================ */

@media (max-width: 991px) {

    .contacto {
        margin-top: -35px;
        padding: 15px 20px 45px;
    }

    .contacto__contenido {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contacto__intro {
        padding: 15px 10px;
        text-align: center;
    }

    .contacto__intro::after {
        display: none;
    }

    .contacto__intro h2 {
        font-size: clamp(2.3rem, 5vw, 3.3rem);
    }

    .contacto__intro p {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .contacto__datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===========================
   FOOTER
=========================== */
.footer{
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
            linear-gradient(to right, #892be2c8 0%, #ff00aaa0 100%);
    color:#f5f5f5;
    padding:clamp(40px,5vw,80px) clamp(14px, 4vw, 20px) 30px;
    width: 100%;
    margin:auto;
    display: flex;
    flex-direction: column;
    text-align:center;
}

/* ===== Contenedor principal (FALTABA ESTO) ===== */
.footer-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* ===== Logo ===== */
.footer-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-bottom:25px;
}
.footer-logo img{
    width: clamp(120px, 15.96vw, 216px);
    height:auto;
}
/* ===== Información ===== */
.footer-info p {
    max-width:500px;
    margin: 0 auto;
    line-height:1.8;
    color: #ffffff;
    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
}
/* ===== Títulos ===== */
.footer h4{
    margin-bottom:20px;
    color: #e0468f;
    font-size: clamp(1.631rem, 2.898vw, 1.812rem);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
	letter-spacing: 2px;
    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;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
	color: #ffffff;
}
.footer-links a{
    color: #ffffff;
    text-decoration:none;
    transition:.3s;
}
.footer-links a:hover{
    color:white;
}
/* ===== Contacto ===== */
.footer-contact p{
    margin-bottom:14px;
    color: #ffffff;
    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
    word-break: break-word;
	
}

.footer-contact p a {
text-decoration: none;
color: #ffffff;
font-size: 1.5rem;
font-family: "Edu TAS Beginner", cursive;	
}

/* ===== Copyright ===== */
.footer-bottom{
    max-width:1300px;
    margin:50px auto 0;
    padding-top:25px;
    text-align:center;
    font-size: clamp(1.035rem, 1.84vw, 1.15rem);
    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: center;
    }
}


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

@media (max-width: 767px) {

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

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


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

    .bottom-menu {

        position: static;

        width: 100%;
        height: 40px;
        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 {

        font-size: 11.5px;
        white-space: normal;
		font-weight: bold;
    }

    .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 {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 22px;
    backdrop-filter: blur(16px);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 10px 40px, rgba(212, 175, 55, 0.15) 0px -1px 8px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 0, 0, 0.05) 0px -3px 8px inset, rgba(0, 180, 170, 0.2) 0px 0px 18px;
    overflow: hidden;
    padding: clamp(16px, 3vw, 26px);
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(212, 175, 55, 0.28) rgba(212, 175, 55, 0.28) rgba(212, 175, 55, 0.85);
    border-image: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.85);
}

/* línea izquierda */
.contacto__header h1::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;

    width: clamp(30px, 8vw, 120px);
    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        rgba(212, 175, 55, 0.8)
    );
}

/* línea derecha */
.contacto__header h1::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;

    width: clamp(30px, 8vw, 120px);
    height: 1px;

    background: linear-gradient(
        to left,
        transparent,
        rgba(212, 175, 55, 0.8)
    );
}



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

    .contacto__datos {

        grid-template-columns: 1fr;

        gap: 5px;
    }

    .contacto__card {

        min-height: 125px;

        padding: 20px;

        gap: 5px;
    }


    /* -------------------------
       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: 40px;
        padding:
            0 4px;
		border-radius: 10px;
    }

    .menu-item {

        height: 40px;

        padding: 0 2px;

        font-size: 10px;
    }

    .menu-icon {

        width: 21px;
        height: 21px;

        font-size: 21px;
    }

    .menu-text {

        
        font-size: 11.5px;
        font-weight: bold;
    }

    .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: 40px;
        padding: 0 2px;
		border-radius: 10;
    }

    .menu-item {

        height: 40px;

        padding: 0 1px;

        gap: 2px;
    }

    .menu-icon {

        width: 20px;
        height: 20px;

        font-size: 20px;
    }

    .menu-text {
        font-size: 11.5px;
        font-weight: bold;
        
    }

    .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{
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
            linear-gradient(to right, #892be2c8 0%, #ff00aaa0 100%);
    color:#f5f5f5;
    padding:clamp(40px,5vw,80px) clamp(14px, 4vw, 20px) 30px;
    width: 100%;
    margin:auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* ===== Contenedor principal (FALTABA ESTO) ===== */
.footer-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* ===== Logo ===== */
.footer-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-bottom:25px;
}
.footer-logo img{
    width: clamp(120px, 15.96vw, 216px);
    height:auto;
}
/* ===== Información ===== */
.footer-info p {
    max-width:500px;
    margin: 0 auto;
    line-height:1.8;
    color: #ffffff;
    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
}
/* ===== Títulos ===== */
.footer h4{
    margin-bottom:20px;
    color: #e0468f;
    font-size: clamp(1.631rem, 2.898vw, 1.812rem);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
	letter-spacing: 2px;
    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;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
	color: #ffffff;
}
.footer-links a{
    color: #ffffff;
    text-decoration:none;
    transition:.3s;
}
.footer-links a:hover{
    color:white;
}
/* ===== Contacto ===== */
.footer-contact p{
    margin-bottom:14px;
    color: #ffffff;
    font-family: "Edu TAS Beginner", cursive;
    font-size: clamp(1.549rem, 2.753vw, 1.721rem);
    word-break: break-word;
}
/* ===== Copyright ===== */
.footer-bottom{
    max-width:1300px;
    margin:50px auto 0;
    padding-top:25px;
    text-align:center;
    font-size: clamp(1.035rem, 1.84vw, 1.15rem);
    font-family:"Edu TAS Beginner", cursive;
    color:#d8d8d8;
    border-top:1px solid rgba(255,255,255,.15);
}
	
}

/* Tablets */
@media (max-width: 1024px) {
    .footer-container {
        flex-wrap: wrap;
        gap: 30px;
    }
	
	.footer-logo logo {
	width: 300px;
	}

    .footer-info,
    .footer-links,
    .footer-contact {
        
		font-family: "Edu TAS Beginner", cursive;
    }
}

/* Móviles y tablets pequeñas */
@media (max-width: 768px) {
	
	.footer h4 {
	font-family: "Aladin", system-ui;
	color: #e0468f;
	font-size: 1.5rem;
	
	}
	
    .footer-container {
		display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .footer-info,
    .footer-links,
    .footer-contact {
		
        font-family: "Edu TAS Beginner", cursive;
    }

    .footer-logo {
        display: flex;
        justify-content: center;
		color: #ffffff;
    }

	.footer-logo logo {
	width: 300px;
	}
	
	
    .footer-links ul {
        font-family: "Edu TAS Beginner", cursive;
		color: #ffffff;
    }

    .footer-bottom {
        text-align: center;
        padding: 15px 10px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .footer-container {
        gap: 20px;
        padding: 0 15px;
		color: #ffffff;
    }
	
	.footer-logo logo {
	width: 300px;
	}

    .footer-bottom {
		font-family: "Edu TAS Beginner", cursive;
        font-size: 0.85rem;
		color: #ffffff;
    }
}

/* ===========================
   TABLET
=========================== */
@media (min-width:768px){
    .footer-container{
        grid-template-columns:repeat(2,1fr);
        text-align:left;
    }
    .footer-info{
        grid-column:1 / -1;
    }
    .footer-logo{
        justify-content: center;
    }
    .footer-info p{
        margin:0;
    }
}

/* ===========================
   ESCRITORIO
=========================== */
@media (min-width:992px){
    .footer-container{
        grid-template-columns:2fr 1fr 1.3fr;
        gap:80px;
    }
    .footer-info{
        grid-column: auto;
    }
}

/* ===========================
   PANTALLAS GRANDES
=========================== */
@media (min-width:1400px){
    .footer{
        padding:80px 40px 35px;
    }
    .footer-container{
        gap:100px;
    }
}





/* =========================================================
   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%;
}
	/* En pantallas medianas/grandes: 3 columnas como en la imagen 2 */
@media (min-width: 768px) {
    .footer-container{
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
    }

    .footer-logo{
        justify-content: center;
    }

    .footer-info p{
        margin: 0;
    }
}
	
	
	@media (max-width: 600px) {

    .bottom-menu {

        height: 40px;
        padding: 0 2px;

    }

    .menu-item {

        height: 40px;

        padding: 0 2px;

        gap: 2px;

        font-size: 8px;
    }

    .menu-icon {

        width: 16px;
        height: 16px;

        font-size: 16px;
    }

    .menu-text {

		font-size: 11.5px;
		font-weight: bold;
        white-space: nowrap;
    }

    /* El ornamento ༺───༻ no cabe en 40px de alto, se oculta */
    .menu-item::before {

        display: none;
    }

    .menu-indicator {

        width: 28px;

        bottom: 1px;
    }

    .menu-item:hover .menu-indicator {

        width: 30px;
    }

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

        height: 18px;
    }
}

	
@media (max-width: 500px) {

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

    .bottom-menu {

        height: 40px;
        padding: 0 2px;
		border-radius: 10px;
    }

    .menu-item {

        height: 50px;

        padding: 0 1px;

        gap: 2px;

        font-size: 8px;
    }

    .menu-icon {

        width: 20px;
        height: 20px;

        font-size: 20px;
    }

    .menu-text {

       font-size: 11.5px;
       font-weight: bold;
      
    }

    .menu-item::before {

        bottom: 2px;

        font-size: 7px;
    }

    .menu-indicator {

        width: 32px;
    }

    .menu-item:hover .menu-indicator {

        width: 35px;
    }

    /* ... el resto de reglas de .contacto que ya tenías se quedan igual ... */
}