/* Importar fuente Inter si no carga por CDN */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*
=============================================================
====================== COLORES Y TEMAS ======================
=============================================================
*/
:root {
    /* === TEMA POR DEFECTO: MORADO & GRIS === */
    /* MORADOS (Originales de la marca) */
    --c-purple-400: 167 139 250;
    /* #a78bfa */
    --c-purple-500: 139 92 246;
    /* #8b5cf6 (Principal) */
    --c-purple-600: 124 58 237;
    /* #7c3aed */
    --c-purple-800: 91 33 182;
    /* #5b21b6 */
    --c-purple-900: 76 29 149;
    /* #4c1d95 */

    /* AZULES (Sustituyen al azul secundario) */
    --c-cyan-400: 92 182 255;
    /* #5cb6ff azul general del otro tema*/
    --c-cyan-500: 23 117 194;
    /* #1775c2 un poco mas oscuro*/

    /* AMARILLOS */
    --c-yellow-400: 254 255 171;
    /* #feffab (Amarillo oscuro) */
    --c-yellow-500: 247 255 92;
    /* #f7ff5c (Amarillo principal) */
    --c-yellow-600: 234 236 82;
    /* #eaec52 un poco mas oscuro */
    --c-yellow-800: 185 187 46;
    /* #b9bb2e un poco mas oscuro */
    --c-yellow-900: 122 123 26;
    /* #7a7b1a un poco mas oscuro */

    /* GRIS AZULADO DEL FONDO */
    --c-gray-400: 255 255 255;
    /* #ffffff */
    --c-gray-500: 123 166 202;
    /* #7ba6ca */
    --c-gray-800: 7 89 133;
    /* #075985 */
    --c-gray-900: 30 41 59;
    /* #1e293b */
    --c-gray-950: 11 17 32;
    /* #0b1120 */
    --c-gray-980: 11 17 32;
    /* #000000 */

    /* === TEMA ALTERNATIVO: AZUL & AMARILLO (Se activa con la clase .theme-blue) === */
    body.theme-blue {
        /* AZUL (Sustituyen a la variable 'purple' original) */
        --c-purple-400: 143 205 255;
        /* #8fcdff claro*/
        --c-purple-500: 92 182 255;
        /* #5cb6ff (Azul Principal) */
        --c-purple-600: 23 117 194;
        /* #1775c2 un poco mas oscuro*/
        --c-purple-800: 32 97 150;
        /* #206196 menos saturado (tirando a oscuro)*/
        --c-purple-900: 11 72 122;
        /* #0b487a mas oscuro*/

        /* MORADOS (Sustituyen a la variable 'cyan' original) */
        --c-cyan-400: 167 139 250;
        /* #a78bfa */
        --c-cyan-500: 139 92 246;
        /* #8b5cf6 (Principal) */

        /* BLANCOS DEL FONDO (sustituyen a "gray"*/
        --c-gray-400: 0, 76, 148;
        /* #004c94 */
        --c-gray-980: 255 255 255;
        /* #ffffff */
        --c-gray-800: 237 245 255;
        /* #edf5ff */
        --c-gray-900: 214 233 255;
        /* #d6e9ff */
        --c-gray-950: 114 164 224;
        /* #72a4e0 */
        --c-gray-500: 114 164 224;
        /* #1e395e */

        /* AMARILLOS */
        --c-yellow-400: 254 255 171;
        /* #feffab (Amarillo oscuro) */
        --c-yellow-500: 247 255 92;
        /* #f7ff5c (Amarillo principal) */
        --c-yellow-600: 234 236 82;
        /* #eaec52 un poco mas oscuro */
        --c-yellow-800: 185 187 46;
        /* #b9bb2e un poco mas oscuro */
        --c-yellow-900: 122 123 26;
        /* #7a7b1a un poco mas oscuro */
    }
}

/* Transición suave de colores al cambiar de tema + Tipografia  URWGothic-Book */
body {
    font-family: Telespania, sans-serif;
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* Asegurar que todos los elementos hereden la transición de color */
div,
span,
a,
button,
h1,
h2,
h3,
p,
i,
section,
header,
footer {
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

/* Efectos de la animación de fondo */
@keyframes pulse-light {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.animate-pulse-light {
    animation: pulse-light 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* Ajuste de selección de texto */
::selection {
    background-color: rgb(var(--c-yellow-500) / 0.85);
    color: rgb(var(--c-purple-800));
}



/*
================================================================
=================== CORRECION DEL MENU MOVIL ===================
================================================================
*/
/* Los estilos base deben estar en el ID, no en la clase .mobile-menu-closed */
#mobile-menu {
    position: fixed;
    inset: 0;
    /* top:0, right:0, bottom:0, left:0 */
    z-index: 60;
    /* Mayor que el header (z-50) para cubrirlo */
    background-color: rgba(3, 7, 18, 0.7);
    /* Fondo oscuro casi opaco */
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Clases de estado (solo controlan la posición) */
.mobile-menu-closed {
    transform: translateX(100%);
}

.mobile-menu-open {
    transform: translateX(0);
}



/*
==============================================
=========== BOTONES DE LA PAGINA =============
==============================================
*/
/* === Botón Volver Arriba === */
#back-to-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    background-color: rgb(var(--c-purple-500));
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 9999px;
    padding: 0.75rem;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

#back-to-top-btn:hover {
    background-color: rgb(var(--c-purple-600));
    box-shadow: 0 0 15px rgb(var(--c-cyan-400) / 0.5);
    transform: scale(1.1);
    cursor: pointer;
}

#back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* === Botón Cambiar Tema === */
#theme-toggle-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 2rem;
    /*azul por defecto*/
    background-color: rgb(var(--c-cyan-400));
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 9999px;
    padding: 0.75rem;
    z-index: 40;
    cursor: pointer;
    transition: all 0.3s ease;
}

#theme-toggle-btn:hover {
    background-color: rgb(var(--c-cyan-400));
    color: white;
    /* El texto se vuelve blanco al hacer hover */
    transform: scale(1.1);
    box-shadow: 0 0 15px rgb(var(--c-cyan-400) / 0.5);
}

/* === Botón Cambiar Tipo de Letra === */
#fontFamily-toggle-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 6rem;
    /*azul por defecto*/
    background-color: rgb(var(--c-yellow-500));
    color: rgb(var(--c-cyan-400));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 9999px;
    padding: 0.75rem;
    z-index: 40;
    cursor: pointer;
    transition: all 0.3s ease;
}

#fontFamily-toggle-btn:hover {
    box-shadow: 0 0 15px rgb(var(--c-cyan-400) / 0.5);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgb(var(--c-yellow-500) / 0.5);
}



/*
=================================================================
====================== PARTES DE LA PÁGINA ======================
=================================================================
*/
/* === BODY === */
body {
    background-color: rgb(var(--c-gray-900));
    /* Fondo oscuro por defecto */
    color: rgb(var(--c-gray-800));
    /* Texto gris claro por defecto */
    -webkit-font-smoothing: antialiased;
    /* antialiased */
    -moz-osx-font-smoothing: grayscale;
}


/* === HEADER === */
header {
    position: sticky;
    top: 0;
    z-index: 5000;
    width: 100%;
    background-color: rgba(3, 7, 18, 0.9);
    /* gray-950/80 */
    backdrop-filter: blur(16px);
    /* backdrop-blur-lg */
    border-bottom: 1px solid rgba(0, 204, 255);
    /* border-b border-gray-800/50 */
}

header a:hover img {
    transform: rotate(360deg);
}

/* Clases de utilidad para animaciones al hacer scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}


/* === CLASE LOGOTIPO === */
.logotipoRSSmall {
    font-family: Ethnocentric, sans-serif;
    color: #8b5cf6;
    text-shadow: 0.5px 0px 0px rgb(0, 204, 255),
        0px 0.5px 0px rgb(0, 204, 255),
        -0.5px 0px 0px rgb(0, 204, 255),
        0px -0.5px 0px rgb(0, 204, 255);
    font-size: 1.7rem;
    font-style: italic;
    font-weight: bolder;
    letter-spacing: 0.11em;
    margin-right: 15px;
}

.logotipoRSBig {
    font-family: Ethnocentric, sans-serif;
    color: #8b5cf6;
    text-shadow: 1px 0px 0px rgb(0, 204, 255),
        0px 1px 0px rgb(0, 204, 255),
        -1px 0px 0px rgb(0, 204, 255),
        0px -1px 0px rgb(0, 204, 255);
    font-size: 1.7rem;
    font-style: italic;
    font-weight: bolder;
    letter-spacing: 0.11em;
}

/* Animacion Logo Header (Giro 360) --- */
header a img {
    /* Transición suave para el giro */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}


/* === SECCION DE INICIO (HERO) === */
.seccionInicio {
    background-color: rgb(var(--c-gray-980) / 0.9);
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1rem;
    background-image: url('../assets/images/background-hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Texto Titulo*/
.textoHero {
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.25;
    font-size: 3rem;
}

@media (min-width: 768px) {

    /* md: desde 768px */
    .textoHero {
        font-size: 4.5rem;
        /* text-7xl */
    }
}

@media (min-width: 1024px) {

    /* lg: desde 1024px */
    .textoHero {
        font-size: 6rem;
        /* text-8xl */
    }
}

/*Texto subtitulo */
.subtextoHero {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgb(var(--c-gray-400));
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .subtextoHero {
        font-size: 1.5rem;
        /* md:text-2xl */
        line-height: 2rem;
        /* md:text-2xl */
    }
}

@media (min-width: 1024px) {
    .subtextoHero {
        font-size: 1.875rem;
        /* lg:text-3xl */
        line-height: 2.25rem;
        /* lg:text-3xl */
    }
}

/* Botón "contactanos" */
.contactanosB {
    width: 78%;
    height: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-left: 5rem;
    padding-right: 2rem;
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.contactanosB:hover {
    transform: scale(1.03);
}

/* === SOBRE NOSOTROS === */
.about {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: rgb(var(--c-gray-900) / 0.5);
    color: rgb(var(--c-gray-400))
}

.contAbout {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.imgAbout {
    justify-self: start;
    /* Para alinear a la izquierda en pantallas grandes */
    ;
    border-radius: 9999px;
    box-shadow: 0 25px 50px -12px rgb(var(--c-purple-800) / 0.5);
    /* shadow-2xl + shadow-purple-900/30 */
    width: 100%;
    /* w-full */
    max-width: 24rem;
    /* max-w-sm (24rem = 384px) */
    margin-left: auto;
    /* mx-auto */
    margin-right: auto;
    object-fit: cover;
    /* object-cover */
}

.textoAbout {
    justify-self: end;
    /* Para alinear a la derecha en pantallas grandes */
    ;
    margin-right: 5em;
}

.textoAbout p {
    font-size: 1.125rem;
    /* text-lg */
    color: rgb(var(--c-gray-400));
    margin-bottom: 1rem;
    /* mb-4 */
    line-height: 1.75rem;
    /* leading-relaxed */
    text-align: justify;
}

.textoAbout h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: rgb(var(--c-purple-500));
}

/* Para pantallas medianas en adelante (md: min-width 768px) */
@media (min-width: 768px) {
    .textoAbout {
        padding-right: 3rem;
        /* pr-12 (12 * 0.25rem = 3rem) */
    }
}

/* Para pantallas medianas en adelante (md: min-width 768px) */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        /* md:grid-cols-2 */
    }
}


/* === NUESTRO EQUIPO  === */
.team {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-image: url('../assets/images/items\ web/fondoBlur.png');
    background-position: center;
    background-size: cover;
}

.team h2 {
    text-align: center;
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 2.5rem;
    /* mb-6 */
    color: rgb(var(--c-yellow-500));
}

/*marco team*/
.marco {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(var(--c-purple-400));
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.marco:hover {
    border-color: rgb(var(--c-cyan-400));
    position: relative;
    /*Grupos de animaciones*/
    -webkit-animation:
        glitch 1s cubic-bezier(0, 0, 0, 0) infinite,
        glitchMotion 3s cubic-bezier(0, 0, 0, 0) infinite;

    animation:
        glitch 1s cubic-bezier(0, 0, 0, 0) infinite,
        glitchMotion 3s cubic-bezier(0, 0, 0, 0) infinite;

    /*Luz detras de imagen*/
    .imagenIntegrante {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 9999px;
        border-width: 2px;
        border-color: rgb(var(--c-cyan-400));
        /* Forzar suavizado: */
        image-rendering: high-quality;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /*Cambio texto cargos*/
    cargos {
        color: rgb(var(--c-purple-400));
    }
}

.cargos {
    color: rgb(var(--c-cyan-400));
    font-weight: 500;
    margin-bottom: 1rem;
}

.imagenIntegrante {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
    border-width: 2px;
    border-color: rgb(var(--c-cyan-400));
}

/* Efecto Glitch */
@keyframes glitch {

    /*animacion glitch por frames*/
    0% {
        box-shadow: -2px 0 rgba(255, 0, 157, 0.7), 2px 0 cyan;
        text-shadow: -0.5px 0 rgba(255, 0, 157, 0.7), 0.5px 0 cyan;
    }

    20% {
        box-shadow: -3px 0 rgba(255, 0, 157, 0.7), 3px 0 cyan;
        text-shadow: -0.6px 0 rgba(255, 0, 157, 0.7), 0.6px 0 cyan;
    }

    40% {
        box-shadow: -2px 0 rgba(255, 0, 157, 0.7), 2px 0 cyan;
        text-shadow: 0.5px 0 rgba(255, 0, 157, 0.7), 0.5px 0 cyan;
    }

    60% {
        box-shadow: -2px 0 rgba(255, 0, 157, 0.7), 2px 0 cyan;
        text-shadow: 0.3px 0 rgba(255, 0, 157, 0.7), 0.3px 0 cyan;
    }

    80% {
        box-shadow: -2px 0 rgba(255, 0, 157, 0.7), 2px 0 cyan;
        text-shadow: 0.8px 0 rgba(255, 0, 157, 0.7), 0.8px 0 cyan;
    }

    100% {
        box-shadow: -4px 0 rgba(255, 0, 157, 0.7), 4px 0 cyan;
        text-shadow: -0.5px 0 rgba(255, 0, 157, 0.7), 0.5px 0 cyan;
    }
}

@keyframes glitchMotion {

    /*animacion movimiento glitch por frames*/
    7% {
        transform: translateX(-3px);
    }

    7.5% {
        transform: translateX(0) translateY(0);
    }

    40% {
        transform: translateX(1px);
    }

    40.5% {
        transform: translateX(-1px) translateY(0);
    }

    40.9% {
        transform: translateX(0) translateY(0);
    }

    70% {
        transform: translateX(0);
    }

    70.5% {
        transform: translateX(2px) translateY(0);
    }

    70.9% {
        transform: translateX(0) translateY(0);
    }
}

@-webkit-keyframes glitchMotion {
    /*animacion movimiento glitch por frames*/

}


/* === NUESTROS SERVICIOS === */
.services {
    padding-top: 6rem;
    /* py-24 equivale a padding vertical 6rem (24 * 0.25rem) */
    padding-bottom: 6rem;
    background-color: rgb(var(--c-gray-980) / 0.8);
    /* bg-gray-950 en Tailwind corresponde a este color */
    border-top-width: 1px;
    /* border-t */
    border-top-color: rgba(31, 41, 55, 0.3);
}

.services h2 {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: rgb(var(--c-cyan-400));
}

.servicesP {
    color: rgb(var(--c-gray-400));
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 4rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.marcoSer {
    background-color: rgb(var(--c-yellow-500));
    box-shadow: 0 0 15px 10px rgb(var(--c-yellow-600)) inset;
    border: 1px solid rgb(var(--c-purple-400));
    padding: 2rem;
    width: 100%;
    text-align: center;
    justify-self: end;
}

.marcoSer:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
    background-color: rgb(var(--c-yellow-600));
    /*Grupos de animaciones*/
    -webkit-animation:
        glitch 1s cubic-bezier(0, 0, 0, 0) infinite,
        glitchMotion 3s cubic-bezier(0, 0, 0, 0) infinite;

    animation:
        glitch 1s cubic-bezier(0, 0, 0, 0) infinite,
        glitchMotion 3s cubic-bezier(0, 0, 0, 0) infinite;
}

.marcoSerH3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: rgb(var(--c-purple-500));
}

.marcoSerP {
    color: rgb(var(--c-yellow-900));
    text-align: justify;
}

.iconoMarcoSer {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    color: rgb(var(--c-purple-500));
    margin-bottom: 1.5rem;

}


/* === SECCIÓN DE NUESTROS JUEGOS === */
.puenteJuegos {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-image: url('../assets/images/items\ web/fondoBlur.png');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    align-items: center;
}

.juegos {
    position: relative;
    text-align: center;
}

.juegos h2 {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 2.5rem;
    /* mb-6 */
    color: rgb(var(--c-yellow-500));
}

.juegos p {
    padding-bottom: 3em;
    color: white;
}

.puerta {
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 300px;
    width: 160px;
}

.puerta:hover {
    cursor: pointer;
}


/* === SECCION DE NUESTRO BLOG === */
.blogCont {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: rgb(var(--c-gray-900) / 0.5);

    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.blog {
    justify-self: start;
    margin-left: auto;
    margin-right: auto;
}

.blog h2 {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 1.5rem;
    /* mb-6 */
    color: rgb(var(--c-purple-500));
    /* text-purple-500 */
}

.blog p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgb(var(--c-gray-400));
    margin-bottom: 2.5rem;
}

.imgblog {
    max-width: 35em;
    height: 25em;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    box-shadow: 0 0 50px -8px rgb(var(--c-purple-800) / 0.5);
    /* shadow-2xl + shadow-purple-900/30 */
}

.imgblog:hover {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}


/* === SECCION DE ALUMNOS DE PRÁCTICAS === */
.alumnosPracCont {
    background-color: rgb(var(--c-gray-980) / 0.8);
    /* bg-gray-950 en Tailwind corresponde a este color */
    padding-top: 5rem;
    padding-bottom: 5rem;

    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
}

.alumnosPrac {
    justify-self: start;
    margin-left: auto;
    margin-right: auto;
}

.alumnosPrac h2 {
    text-align: right;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: rgb(var(--c-cyan-400));
}

.alumnosPrac p {
    color: rgb(var(--c-gray-400));
    font-size: 1.25rem;
    text-align: right;
    margin-bottom: 4rem;
}

.imgAlumPrac {
    max-width: 35em;
    height: 25em;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
    box-shadow: 0 0 50px -8px rgb(var(--c-purple-800) / 0.5);
    /* shadow-2xl + shadow-purple-900/30 */
}

.imgAlumPrac:hover {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}

/* === SECCION DE CONTACTO === */
.contact {
    padding-top: 7rem;
    padding-bottom: 1rem;
    background-color: rgb(var(--c-gray-900) / 0.5);
}

.contact p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgb(var(--c-gray-400));
    margin-bottom: 2.5rem;
    max-width: 40rem;
    /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

contact h2 {
    font-size: 2.25rem;
    /* text-4xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 1.5rem;
    /* mb-6 */
    color: rgb(var(--c-purple-500));
    /* text-purple-500 */
}

.contenedorGrandeCopiar {
    position: relative;
    background-color: rgb(var(--c-purple-400));
    border: 1px solid rgb(var(--c-yellow-500));
    max-width: 32rem;
    /* max-w-lg */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    margin-top: 4rem;
    /* mt-16 */
    padding: 1.5rem;
    /* p-6 */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.tituloContacto {
    font-size: 1.125rem;
    color: rgb(var(--c-gray-980));
    margin-bottom: 1rem;
}

.contenedorCorreo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: rgb(var(--c-gray-900) / 0.6);
    color: rgb(var(--c-yellow-600));
    padding: 0.75rem;
    /* p-3 */
}

/* BOTÓN Copiar Correo */
.copCorreo {
    flex-shrink: 0;
    width: auto;
    margin-left: 1rem;
    background-color: rgb(var(--c-yellow-500));
    color: rgb(var(--c-purple-800));
    font-weight: 700;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    transition-property: background-color;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copCorreo:hover {
    background-color: rgb(var(--c-yellow-600));
    ;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.textoCopVerde {
    color: rgb(var(--c-gray-980));
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
    text-align: center;
}

/* Ratita de Contacto */
.ratitaContacto {
    width: 100%;
    overflow: hidden;
    /* Oculta la imagen cuando está fuera del contenedor */
    position: relative;
    height: 90px;
    /* Ajusta según el tamaño de la imagen */
}

.imgRatitaContacto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    /* Ajusta la altura */
    animation: run-across 5s linear infinite;
}

@keyframes run-across {
    0% {
        left: -100%;
        /* Empieza fuera a la izquierda */
    }

    100% {
        left: 100%;
        /* Termina fuera a la derecha */
    }
}

/* === FOORTER === */
footer {
    background-color: rgba(3, 7, 18, 0.7);
    border-bottom: 1px solid rgba(31, 41, 55, 0.7);
    padding-top: 2rem;
    padding-bottom: 2rem;
}



/*
=====================================================
====================== FUENTES ======================
=====================================================
*/
/* Fuente importada del Logotipo */
@font-face {
    font-family: "Ethnocentric";
    src: url("../assets/fonts/Ethnocentric-Regular.otf") format("truetype");
}

/* Fuente general para la web */
@font-face {
    /*una opcion pero no es la puesta*/
    font-family: "URWGothic-Book";
    src: url("../assets/fonts/URWGothic-Book.otf") format("truetype");
}

@font-face {
    font-family: "Telespania";
    src: url("../assets/fonts/Telespania.ttf") format("truetype");
}