/* Definición de variables de color */
:root {
    --primary-color: #1E88E5;
    --secondary-color: #B0B0B0;
    --dark-background: #2C2C2C;
    --dark-card-background: #1A1D21;
    --light-background: #F1F3F5;
    --text-color-light: rgb(250, 250, 250);
    --text-color-dark: #f5f5f5;
    --accent-color: yellow;
    --bg-color-acces: rgba(219, 219, 5, 0.61);
    --ac-color-a: #00aaff;
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-ui: 'Orbitron', 'Courier New', monospace;
}


/* Elementos del switch */
* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, .navbar-brand, .trabajos-title, .about-title, .contacto-title {
    font-family: var(--font-display);
    letter-spacing: 2px;
}

.nav-link, .btn, label, p, li {
    font-family: var(--font-body);
}

#toggleMenuButton, #btnAumentarTexto, #btnReducirTexto, #btnAltoContraste, #btnResetearEstilos, #changeLanguage {
    font-family: var(--font-body);
}

/* Fix scroll-offset para navbar fijo: evita que el título quede tapado */
section {
    scroll-margin-top: 90px;
}

section#inicio {
    scroll-margin-top: 0;
}



#instagram:hover, #twitter:hover, #linkedin:hover {
    transform: scale(1.1); 
}

.trabajo-card.blur {
    filter: blur(3px);
    transition: filter 0.3s ease;
  }
  



/* Hover para los elementos del nav */
.nav-link:hover {
    color: var(--hover-color) ;
    text-decoration: underline;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

section {
    margin: 5%;
}

/* ---- Diferenciación visual entre secciones ---- */

/* Estudios: fondo ligeramente distinto del body */
section#estudios {
    margin: 0;
    padding: 5% 5%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f8f9fa;
    border-top: 3px solid var(--primary-color);
}

/* Proyectos: fondo un poco más oscuro */
section#trabajos {
    margin: 0;
    padding: 5% 5%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #eef1f5;
    border-top: 3px solid var(--primary-color);
}

/* About: fondo blanco limpio */
section#about {
    margin: 0;
    padding: 5% 5%;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f8f9fa;
    border-top: 3px solid var(--primary-color);
}

/* Contacto */
section#contacto {
    margin: 0;
    padding: 5% 5%;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #eef1f5;
    border-top: 3px solid var(--primary-color);
}

/* Quotes y tech sin margen lateral */
section#quotes {
    margin: 0;
    border-top: 3px solid var(--primary-color);
}

section#inicio {
    margin: 0;
    padding: 0;
}

section#tech {
    margin: 0;
}

/* Modo oscuro: ajustar fondos diferenciados */
[data-theme='dark'] section#estudios,
[data-theme='dark'] section#about {
    background-color: #1e2124;
}

[data-theme='dark'] section#trabajos,
[data-theme='dark'] section#contacto {
    background-color: #16181b;
}



.menu-accesibilidad {
    display: flex;
    align-items: center;
}

#toggleMenuButton {
    background-color: rgb(168, 67, 67);
    color: var(--text-color-light);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#toggleMenuButton:hover {
    background-color: var(--bg-color-acces);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#toggleMenuButton i {
    font-size: 2.5rem;
}

#toggleMode {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

#toggleMode i {
    color: white; /* Luna blanca en modo claro */
    transition: color 0.3s ease;
}

#toggleMode:hover {
    transform: scale(1.2);
}




.hero-image {
    background-image: url('../imagenes/hero.jpg') ;
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color-light);
}

.trabajos-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.trabajo-card {
    position: relative;
    padding: 2%;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--light-background);
    flex-shrink: 0;
    margin: 20px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}

.trabajo-card:hover {
    transform: translateY(-10px) scale(1.3);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Se muestra por encima de las demás */
}

.card-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.card-content {
    padding: 1rem;
    text-align: center;
}

.card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}



.label-left, .label-right {
    font-size: 0.8rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.label-left {
    left: 5px;
}

.label-right {
    right: 5px;
}
  

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 400px; /* Ancho máximo */
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.5s ease-in-out, border 0.5s ease-in-out;
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}


.map-container:hover iframe {
    transform: scale(1.02); /* Ligero aumento de tamaño */
}


/* //////////////////////////////////////////MODO OSCURO/////////////////////////////////////////////////////////*/
[data-theme='dark'] {
    background-color: var(--dark-background);
    color: var(--text-color-dark);
}

[data-theme='dark'] .trabajo-card {
    background-color: var(--dark-card-background);
    color: var(--text-color-dark);
}


/* En modo oscuro, el sol será amarillo */
[data-theme='dark'] #modeIcon {
    color: var(--accent-color) ;
}

[data-theme='dark'] .c-fe30__inner {
    color: var(--text-color-dark);
    background-color: var(--dark-background);
    border: solid black 4px;
}

[data-theme='dark'] .c-fe30__close {
    color: var(--text-color-dark);
}


[data-theme='dark'] .c-fe30__inner {
    border: solid black 4px;
}

[data-theme='dark'] .c-fe30__photo {
    border: solid black 4px;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#animacionder:hover,#animacioniz:hover {
    transform:scale(1.2);
}
/* ////////////////////////////////////// Modo alto contraste ///////////////////////////////////////////////////////////////////////////////////////////////// */
.alto-contraste {
    background-color: black ;
    color: var(--accent-color) ;
}

.alto-contraste #instagrama,#twittera,#linkedina {
    background-color: black;
}

/* Encabezado */
.alto-contraste header {
    background-color: black ;
    color: var(--accent-color) ;
}

/* Footer */
.alto-contraste footer {
    background-color: black ;
    color: var(--accent-color) ;
}

/* Estilos de enlaces */
.alto-contraste a {
    color: var(--accent-color) ;
    text-decoration: underline;
}

.alto-contraste a:hover {
    color: var(--ac-color-a) ;
}

/* Botón de accesibilidad */
.alto-contraste #toggleMenuButton {
    background-color: var(--accent-color) ;
    color: black ;
}

/* Menú de accesibilidad */
.alto-contraste #menuOpciones {
    background-color: black ;
    color: var(--accent-color) ;
}

.alto-contraste #menuOpciones button {
    background-color: var(--accent-color) ;
    color: black ;
}

.alto-contraste #quote {
    color: var(--accent-color);
}

.alto-contraste #Verproyectos {
    background-color: black;
    color: var(--accent-color);
    border: solid var(--accent-color) 3px;
}

/* Tarjetas de proyectos */
.alto-contraste .trabajo-card {
    background-color: black ;
    color: var(--accent-color) ;
    border: 2px solid var(--accent-color) ;
}

.alto-contraste iframe {
    border: 3px solid var(--accent-color)  ;
}


.alto-contraste #botonenviar {
    background-color: black;
    color: var(--accent-color);
    border: 2px solid var(--accent-color) ;
}

/* Párrafos del footer */
.alto-contraste footer p {
    color: var(--accent-color) ;
}

/* Íconos */
.alto-contraste i {
    color: var(--accent-color) ;
}

/* Input y textarea en modo alto contraste */
.alto-contraste input,
.alto-contraste textarea {
    background-color: black ;
    color: var(--accent-color) ;
    border: 1px solid var(--accent-color) ;
}



/* Modo alto contraste para los iconos flotantes */
.alto-contraste #redes a {
    background-color: black ; /* Fondo negro */
    border: 2px solid var(--accent-color) ; /* Borde amarillo */
}

/* Cambiar color de los íconos dentro de los botones */
.alto-contraste #redes i {
    color: var(--accent-color) ;
}

/* Aplica hover al enlace y al icono dentro */
.alto-contraste #redes a:hover,
.alto-contraste #redes a:hover i {
    background-color: var(--accent-color) ;
    color: black ;
    transform: scale(1.2);
}

.alto-contraste .left, .alto-contraste .right {
    color: var(--accent-color);
}
.alto-contraste #container {
    background-color: black;
    border: solid 2px var(--accent-color);
}

.alto-contraste #container.select-right #item, .alto-contraste #item {
    background-color: black;
    border: solid 2px var(--accent-color); 
}

.alto-contraste #container:hover {
    background-color:black;
  }

.alto-contraste #redes a {
    background-color: black !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 50% !important;
}

.alto-contraste #redes i {
    color: var(--accent-color) !important;
}

.alto-contraste #redes a:hover,
.alto-contraste #redes a:hover i {
    background-color: var(--accent-color) !important;
    color: black !important;
    transform: scale(1.2);
} 

.alto-contraste header {
    background-color: black !important;
    color: var(--accent-color) !important;
}

.alto-contraste navbar {
    background-color: black !important;
}

.alto-contraste .navbar-nav .nav-link {
    color: var(--accent-color) !important;
}

.alto-contraste .navbar-nav .nav-link:hover {
    color: var(--ac-color-a) !important;
    text-decoration: underline;
}

.alto-contraste .quote, .alto-contraste .name{
    background-color: black !important;
    color: var(--text-color-dark) !important;
    border: solid var(--accent-color) 2px !important;
}

.alto-contraste footer a {
    color: var(--accent-color) !important;
}

.alto-contraste footer a:hover {
    color: var(--ac-color-a) !important;
}

.alto-contraste footer {
    background-color: black !important; /* Forzamos el color negro */
}

.alto-contraste .c-fe30__inner  {
    background-color: black;
    color: var(--text-color-dark);
    border: solid var(--accent-color) 2px;
}

.alto-contraste .c-fe30__photo {
    border: solid var(--accent-color) 4px;
}

.alto-contraste .c-fe30__close {
    color: var(--accent-color);
}

/* Ajustar el color de los iconos de la flecha */
.alto-contraste .ir-arriba i.fa-arrow-up {
    color: black !important; /* Cambia el color de la flecha a negro */
}

.alto-contraste .navbar-toggler {
    color: var(--accent-color);
}

.alto-contraste .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffff00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  /* Alto contraste: sections */
.alto-contraste section#inicio,
.alto-contraste section#estudios,
.alto-contraste section#trabajos,
.alto-contraste section#about,
.alto-contraste section#contacto,
.alto-contraste section#quotes,
.alto-contraste section#tech {
    background-color: black !important;
    color: var(--accent-color) !important;
    border-top-color: var(--accent-color) !important;
}

.alto-contraste section#inicio {
    border-top: none !important;
}


/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
    display:none;
    background-repeat:no-repeat;
    font-size:20px;
    color:black;
    cursor:pointer;
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:10000;
  }

@media (max-width: 768px) {
    .estudios-images {
        flex-direction: column;
        margin-bottom: 2rem;
    }
    
    #redes {
        display: none;
    }

    #animacionder:hover, #animacioniz:hover {
        transform: none !important;
    }

    .trabajo-card:hover {
        transform: none !important;
    }
    

    .us_mobile_hide {
        display: none;
    }
}



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Estilos para el contenedor c-fe30 */
.c-fe30 {
    bottom: 20px; /* margen desde el fondo */
    right: 20px;  /* margen desde el lado derecho */
    opacity: 0;
    position: fixed;
    text-align: center;
    transition: opacity 0.5s ease;
    z-index: 9999; /* FIX: por encima de todo el resto de la página */
}

.c-fe30.visible {
    animation: fe30-anime 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    opacity: 1;
}

/* Estilos para el interior del componente */
.c-fe30__inner {
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    color: #2d2f31;
    font-size: 14px;
    line-height: 1.45;
    margin: 10px;
    padding: 40px 20px 10px;
    position: relative;
    transform: perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1);
    /* transform-style: preserve-3d eliminado: causaba que el fondo se viera transparente */
    width: 250px;
}

/* Botón de cierre */
.c-fe30__close {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #2d2f31;
}

/* Foto de autor */
.c-fe30__photo {
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1);
    display: block;
    height: 80px;
    position: absolute;
    top: -50px;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%) translateZ(26px);
    width: 80px;
}

/* Imagen dentro de la foto */
.c-fe30__img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Estilo para el enlace interno */
.c-fe30__link {
    color: #c584f8;
    display: inline-block;
    transform: translateZ(18px);
}
.c-fe30__link:hover {
    text-decoration: none;
}

/* Keyframes para la animación de entrada */
@keyframes fe30-anime {
    0% {
      opacity: 0;
      transform: translate(0, 100%);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
}