/* Variables CSS para colores y tipografía */
:root {
    --purple-color: #732689;
    /* Púrpura */
    --yellow: #FFFB8B;
    /* Amarillo vibrante */
    --text-color-light: #f0f0f0;
    --text-color-dark: #141414;
    --background-dark: #141414;
    --grid-line-color: #4C4C4C;
    --font-primary: 'Montserrat', sans-serif;
    /* Puedes importar una fuente */
    --font-secondary: 'Oswald', sans-serif;
    /* Para títulos grandes */
    /*--h2-font-family-dkt: 'Montserrat', sans-serif;
    --h2-font-style-dkt: italic;
    --h2-font-size-dkt: 2.5vw;
    --h2-font-color-dkt: white;*/
}

 ::selection {
    background-color: #2EBFA5; /* Amarillo muy claro */
    color: #450654;
}

::-moz-selection {
    background-color: #2EBFA5;
    color: #450654;
}

@font-face{
 font-family: 'Mango Grotesque Web';
 src: url(../fonts/MangoGrotesque-ExtBdIta.ttf);
 src: url(../fonts/MangoGrotesque-BoldItalic.ttf);
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*=========== CURSOR ===========*/

/* Importante: oculta el cursor real del sistema */
@media (hover: hover) and (pointer: fine) {
  body, a, button {
    cursor: none !important;
  }
}

/* CUSTOM CURSOR */
.cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
  mix-blend-mode: difference;
}

/* Ocultamos la manito */
.cursor.active {
  transform: scale(2);
  background-color: var(--yellow);
}

.carrousel-words-container {
    cursor: none !important;
}

/* Estado gigante para el carrusel */
.cursor.active-carrousel {
    transform: scale(20) !important; 
    background-color: var(--yellow);
    border: none;
    opacity: 1 !important;
}

/* Hide custom cursor on mobile/touch */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .cursor,
  .cursor-follower {
    display: none !important;
  }
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-color-light);
    line-height: 1.6;
    overflow-x: hidden;
    /* Evitar scroll horizontal */
}

 .header {
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(69, 6, 84, 0.65);
    position: fixed;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-lang] {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* El idioma activo se ve brillante y resaltado */
[data-lang].active {
    opacity: 1;
    font-weight: bold;
    text-decoration: none;
}

/* --- LOGO --- */
.logo {
    margin-left: 5%; 
    line-height: 1.2;
}

.logo a {
    text-decoration: none;
    color: var(--text-color);
}

.logo .logo-title {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: 600;
    font-style: italic;    
}

.logo .logo-subtitle {
    font-size: 0.9rem;
    line-height: 1.1rem;
    font-weight: 400;
    font-style: italic;    
}

/* --- NAVEGACIÓN DESKTOP --- */
.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    width: 70%; 
    margin-right: 5%;
    height: 100%;
}

.nav-list {
    display: flex; 
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    align-items: center; 
}

.nav-list li {
    font-style: italic;
    font-weight: 500;
    padding: 0; 
    /* Se elimina line-height: 70px; para usar solo Flexbox para el centrado vertical */
    white-space: nowrap; 
    display: flex; 
    align-items: center; /* Centra verticalmente el contenido (el <a>) */
    height: 100%; /* Ocupa los 70px de alto */
}

/* Enlaces de Navegación Estándar */
.nav-list a {
    padding: 0 0.5em; 
    font-size: clamp(14px, 1.1vw, 18px); 
    color: var(--text-color);
    text-decoration: none;
    opacity: 75%;
    transition: opacity 0.2s, text-shadow 0.2s;
    
    /* Clave para que el área de clic cubra toda la altura del LI (y por ende, del header) */
    display: flex; /* Usamos flex para centrar el texto dentro del 'a' */
    align-items: center; /* Centra el texto verticalmente */
    height: 100%; 
    line-height: normal; /* Aseguramos que no interfiera */
}

/* RESTAURAMOS LA REGLA: Hover independiente para cada enlace principal */
.nav-list a:hover {
    opacity: 100%;
    text-shadow: 0 0 15px var(--purple-color);
}

/* Ajustes para el espaciado de los separadores - Solo para LI que no son el botón 'lang' */
.nav-list li:not(.lang):not(:last-child)::after {
    content: "/";
    color: var(--text-color);
    opacity: 50%;
    margin: 0 0.6em; 
}

/* Estilo para el enlace activo */
.nav-list li a.nav-active {
    color: #FFFB8B !important;
    font-weight: 500;
    opacity: 1;
    border-bottom: none;
}

/* transición suave */
.nav-list li a {
    transition: color 0.3s ease;
}

/* --- ESTILOS DEL BOTÓN DE LENGUAJE --- */
.lang {
    display: flex;
    align-items: center;
    margin-left: 15px; 
    height: auto; 
    line-height: normal; 
    padding: 0;
}

/* Contenedor del Botón de Idioma */
.lang a {
    display: flex;
    align-items: center;
    border: var(--yellow-border) solid 2px;
    border-radius: 9999px; 
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 700;
    padding: 8px 0; 
    opacity: 100%; 
    color: var(--text-color);
    text-shadow: none; 
    transition: none; 
    cursor: default;
    /* Estos enlaces ya no necesitan ocupar toda la altura del header, solo el padding vertical de 8px */
    height: auto; 
    line-height: normal;
}

/* Estilos para los códigos de idioma */
.lang span {
    padding: 0 2px;
    cursor: pointer;
    opacity: 75%; /* Opacidad por defecto, igual que los enlaces */
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    line-height: 1;
    display: inline-block; 
    text-shadow: none !important; 
}

#lang-fr, #lang-es{
    line-height: 70px;
    padding: 0 13px;
}

/* Estilo para el idioma ACTIVO (sin cambios) */
.lang span.active {
    color: var(--yellow); /* Texto morado */
    font-weight: 900;
    opacity: 100%; 
    cursor: default; 
}

/* RESTAURAMOS LA REGLA: Hover independiente para el idioma inactivo */
.lang span:not(.active):not(.separator):hover {
    opacity: 100%;
}

/* Estilo del separador dentro del botón */
.lang a .separator {
    content: "·";
    color: var(--text-color);
    opacity: 75%;
    margin: 0 4px;
    cursor: default;          /* Hace que la flecha no cambie a manito */
    pointer-events: none;     /* Hace que el elemento sea "invisible" a los clics */
}
        
/* OCULTAR ELEMENTOS MÓVILES POR DEFECTO (Desktop) */
.burger-container, .nav-mobile-overlay {
    display: none;
}

/*----------------------------------------------------------*/
/*-------------distancias al header, navegación-------------*/
/*----------------------------------------------------------*/

#ceQueJaimeFaire-anchor{
    scroll-margin-top: 115px; /* Distancia personalizada*/
}
#competences{
    scroll-margin-top: 120px; /* Distancia personalizada*/
}
#etudes{
    scroll-margin-top: -200px; /* Distancia personalizada*/
}
#ekeko{
    scroll-margin-top: 0px; /* Distancia personalizada*/
}
#contacte{
    scroll-margin-top: 50px; /* Distancia personalizada */
}

/* 1. Desactivamos el smooth scroll global para que el salto sea limpio */

.websites, .websites1, .websites2, .websites3, .websites4
.carrousel-words-container, 
#ceQueJaimeFaire {
    will-change: transform;
    transition: none !important; /* Solo quitamos la transición a estos elementos */
}

/* 2. Definimos la animación de 0.5s, animación de diferente */
@keyframes microSlide {
    from {
        opacity: 0.8;
        transform: translateY(20px); /* Empieza un poco más abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Llega a su sitio */
    }
}

/* 3. Clase que activa el efecto */
.section-active-anim {
    animation: microSlide 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/*----------------------------------------------------------*/
/*----------------------------HERO--------------------------*/
/*----------------------------------------------------------*/

main{
    position: relative;
    background-color:#141414;
    z-index: 2;
    margin-bottom: 25vw;
    pointer-events: none;
}

main > * {
        pointer-events: auto;
}

.hero-container {
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    /* Necesitas una altura para que el centrado vertical funcione */ 
    padding-left: 20px; 
    padding-right: 20px;
    padding-top: 70px;
    display: grid; 
    z-index: 10;
}

.hero-text,
.image-wrapper {
    grid-column: 1 / 2; /* De la línea 1 a la 2 (ocupa 1 columna) */
    grid-row: 1 / 2;    /* De la línea 1 a la 2 (ocupa 1 fila) */
}

.image-wrapper {
    display: flex;
    justify-content: flex-end; /* Alinea la imagen a la derecha */
    align-items: center; 
    padding-right: 5%;
}

.hero-text {
    display: flex;
    flex-direction: column; 

    /* CLAVE para centrar verticalmente: */
    align-items: flex-start; /* Asegura que el texto se alinee a la izquierda dentro del contenedor Flex */
    justify-content:flex-start;
    margin-top: 13vw;
    
    padding-left: 5%; 

    z-index: 11; 
}

/* Estilo de la imagen de Santiago */

.image-wrapper{
    height: 45vw;
    overflow: hidden;
}

.santiago-photo {
   /* Por ejemplo: La imagen ocupará el 40% del ancho del viewport, 
       pero nunca será más ancha que 30rem */
    width: clamp(20rem, 50%, 40rem);
    background-color: #5b21b6;
    /* Ajusta según el diseño */
    display: flex;
    z-index: 10;
    transform: translateY(-30px); 

    /* Aplicar un filtro de color o un pseudo-elemento para el degradado en la imagen */
}

.hero-text .greeting {
    margin-bottom: 1rem;
    font-size: 2.5vw;
    font-family: montserrat;
    font-style: italic;
    font-weight: 700;
    color: var(--yellow);
}

.hero-text .main-title {
    font-size: 5.5vw;
    line-height: 6vw;
    font-family: montserrat;
    font-style: italic;
    font-weight: 900;
    color: var(--purple-color);
}

.hero-text .subtitle {
    padding-top: 1.5rem;
    font-family: montserrat;
    font-weight: 700;
    font-style: italic;
    font-size: 1.6vw;
    line-height: 2vw;
}

/*----------------------------------------------------------*/
/*---------------sección l'ame- WEBSITES--------------------*/
/*----------------------------------------------------------*/

.section2-container{
    max-width: 1920px;
}
.section2 {
    margin: auto;
    margin-top: -100px;
    width: 80%;
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    background-color: var(--grid-line-color);
    padding: 1px;
}

.section2 .estlame{
    display: flex;
    position: absolute;
    margin-top: 16%;
    margin-left: 15%;
    font-size: 3.7vw;
    font-style: italic;
    font-weight: 400;
    line-height: 3.7vw;
    z-index: 3;
}

.place1, 
.place2,
.place3,
.place4 {
    aspect-ratio: 1 / 1;
    width: 100%;
    border:none;
    background-color: #141414;
    /* CLAVE: Centra el contenido (el h2) en el flujo */
    display: flex;
    justify-content: center; /* Centrado horizontal del h2 */
    align-items: center;    /* Centrado vertical del h2 */
}
.place4 {
    align-items: flex-start;
    padding-top: 10%;
    position: relative;
}


.place1 .circle{
    position: relative;
    z-index: 1;
    width:80%;
    height: 80%;
    border-radius: 50%;
    background-color: #141414;
}

.place1 .circle::before { /*pseudoelemento*/
 content: "";
    position: absolute;
    inset: 0; /* Se ajusta al tamaño exacto del círculo */
    border-radius: 50%;
    padding: 15px; /* Grosor del borde */
    background: linear-gradient(
        to left,
        #141414 0%,
         #141414 20%,
        #732689
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; /* Para recortar el centro */
            mask-composite: exclude; 
    z-index: -1;
}

.place4 h2{
   font-size: 2.5vw;
   font-style: italic;
   font-weight: 800;
}


/*----------------------------------------------------------*/
/*---------------WEBSITES WEBSITES WEBSITES-----------------*/
/*----------------------------------------------------------*/


.container-big-text-web{
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100vw;
    max-width: 1920px;
}

.big-text-web{
    z-index: 2;
    height: 50vw;
}

.big-text-web .websites{
    z-index: 2;
    font-family: mango grotesque web;
    font-weight:900;
    font-size: 42.5vw;
    margin-left: -3.4%;
    margin-top: -31%;
    position: relative;
    line-height: 41vw;
    color: var(--purple-color);
}

.big-text-web .websites1{
    z-index: 2;
    font-family: mango grotesque web;
    font-weight:900;
    font-size: 42.5vw;
    margin-left: -3.4%;
    margin-top: -12%;
    position: relative;
    line-height: 41vw;
    color: var(--purple-color);
}

.big-text-web .websites2, .websites3, .websites4{
    display: none;
}


.carrousel-words-container{
    margin-top: -80%; /* Ajusta según necesites subirlo */
    width: 100%;
    display: flex;
    
    /* Crucial para el arrastre */
    overflow-x: auto; /* Permitimos scroll interno para que el JS lo mueva */
    scrollbar-width: none; /* Oculta barra en Firefox */
    white-space: nowrap;
    
    user-select: none;
    cursor: grab;
}

/* Ocultar barra de scroll en Chrome/Safari */
.carrousel-words-container::-webkit-scrollbar {
    display: none;
}

/* Cambiar cursor al hacer clic (cuando JS añade la clase) */
.carrousel-words-container.active {
    cursor: grabbing;
}

.carrousel-words {
    display: flex;
    width: max-content;
    /* Dejamos que la animación corra por defecto, el JS la pausará */
    will-change: transform; /* Optimización de rendimiento */
}

.carrousel-words p{
    display: inline-block;
    padding-right: 25px; /*espacio entre cada palabra*/
    font-style: italic;
    color: white;
    font-size: 3vw;
    line-height: 3vw;
    color: var(--yellow)
}


/* =========================================================== */
/* =================== PARALLAX WEBSITES ===================== */
/* =========================================================== */

.websites, .websites1, .websites2, .websites3, .websites4
.carrousel-words-container {
    will-change: transform;
    /* Evita que el navegador intente "adivinar" la posición, suaviza el cálculo */
    transition: transform 0.1s linear; 
}

/* Aseguramos que el contenedor de las palabras esté por encima de WEBSITES */
.carrousel-words-container {
    position: relative;
    z-index: 10;
}

/*----------------------------------------------------------*/
/*---------------sección tools / tech-----------------------*/
/*----------------------------------------------------------*/

.section3-container{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1920px;
    background-color: #141414;
}

.section3 {
    padding-top: 55%;
    margin-left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1px;
    padding: 1px;
}

.section3 .container-left {
    width: 50%;
    padding-top: 18%;
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 120px; /* Se detendrá a 120px del borde superior */
    height: fit-content; /* Asegura que solo ocupe el espacio de su contenido */
}

.container-left h2{
    font-size: 2.5vw;
    font-style: italic;
    line-height: 2.5vw;
    font-weight: 800;
}

.container-left .competences{
    margin-left: 10%;
}

.section3 .container-right {
width: 50%;
    display: flex;
    flex-direction: column;
    /* CLAVE: Evita que Safari estire las cards al 100% de la sección */
    align-items: center; 
    justify-content: flex-start;
    gap: 40vh;
    padding-bottom: 5vw;
}

.mes-competences{
    height: 20vw;
}

.intro-text,
.tools-card,
.tech-card,
.backend-card {

    /* 1. Geometría y Layout (Crucial para Safari) */
    width: 70%;
    aspect-ratio: 1 / 1;
    height: auto;       /* Evita el estiramiento vertical */
    max-height: 100%;   /* Evita que crezca más que su contenedor */
    flex-shrink: 0;     /* Evita que Safari colapse la card */
    flex-grow: 0;       /* FUERZA a que no crezca para rellenar espacio */
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: hidden;   /* Mantiene el contenido dentro de la relación 1:1 */

    /* 2. Estado Inicial y Animación */
    opacity: 0.25;
    transform: scale(1) translateZ(0); /* Escala base + Aceleración 3D */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    
    /* 3. Rendimiento y Fixes de Safari */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    margin: 0;
}

.tools-card, .tech-card, .backend-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.card-visible {
    opacity: 0.9 !important;
    transform: scale(1) !important;
}


.intro-text{
    display: flex;
    margin-top: 22vw;
    display: flex;
    align-items: center;
    opacity: 1;
    align-items: flex-end;
}

.intro-text p{
    font-size: 1.8vw;
    font-style: italic;
    text-align: center;
}

.tools-card p, .tech-card p, .backend-card p{
    font-style: italic;
    font-size: 1.7vw;
    line-height: 1.7vw;
    font-weight: 400;
}

.tools-card .card-color, .tech-card .card-color, .backend-card .card-color{
    padding: 10%;
}

.tools-card .card-color{
    height: 100%;
    width: 100%;
    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 0%;
       background-image: linear-gradient(
    
        to top left, 
        #141414 5%, 
        #732689 100%       
    );
}

.tools-card .card-color div{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /*apilar*/
    justify-content: center; /*abajo*/
    align-items: flex-end; /*derecha*/
}

.tech-card{
    position: relative;
}

.tech-card .card-color{
    width: 100%;
    height: 100%;
    z-index: 3;
    background-image: linear-gradient(
        to top right,
        var(--purple-color) 0%,
        var(--yellow) 60%
    );
}

.tech-card .triangulo{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background-image: linear-gradient(
        
        /* 1. Definir el Ángulo Diagonal */
        to bottom right, /* Va de abajo a la izquierda hacia arriba a la derecha (45 grados) */
        
       rgba(255, 255, 255, 0) 0%, /* #732689 con transparencia total (0) */
        rgba(255, 251, 139, 0) 50%, /* #FFFB8B con transparencia total (0) */
        
        /* 3. Segundo Color (Mitad Superior-Derecha) */
        #141414 50%,       /* El color Azul comienza inmediatamente en el 50% */
       #141414 100%       /* Y se mantiene sólido hasta el final */
    );
}

.tech-card .card-color div{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 5;
}

.tech-card .card-color p{
    color: #141414;
}

.tech-card .circulo-tech{
    position: absolute;
    left: 57%;
    top:57%;
    width: 35%;
    height: 35%;
    border-radius: 50%;
    z-index: 5;
        background-image: linear-gradient(
        60deg,
        #141414 20%, 
        #732689 100%       
    );
    
}

.backend-card{
    position: relative;
}

.backend-card div{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 1;
}

.backend-card .card-color{
    position: absolute;
    top: 8%;
    left: 8%;
    width: 23vw;
    height: 23vw;
    border-radius: 50%;
    z-index: -1;
    flex-shrink: 0;
    background-image: linear-gradient(
        to top, 
        #141414 0%, 
        #732689 100%       
    );
}

/*----------------------------------------------------------*/
/*---------------CV CV CV CV CV CV CV-----------------------*/
/*----------------------------------------------------------*/
.section4-container{
    position: relative;
    z-index: 2;
    background-color: #141414;
    width: 100%;
    max-width: 1920px;
}

.section4{
    padding-top:20vw;
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
    padding-bottom: 15%;
}

.section4 h2{
    font-size: 2.5vw;
    font-style: italic;
    line-height: 2.5vw;
    padding-top: 5%;
    padding-bottom: 5%;
    font-weight: 800;

}

.container-universities{
    margin: 1.5% 0;
    padding-left: 10%;
}

hr{
    border-color: #474747;
    margin-left: 5%;
}

.section4 .year{
    font-size: 1.4vw;
    line-height: 1.4vw;
    padding-bottom: 1%;
}
.section4 .univ-country{
    display: flex;
    align-items: baseline;
}
.section4 .univ-country .university{
    margin-bottom: 0.5%;
    font-size: 1.4vw;
    line-height: 1.4vw;
    font-weight: 300;
    font-style: italic;
    color: #FFFB8B;
}
.section4 .univ-country .country{
    font-size: 0.8vw;
    padding-left: 1%;
}
.section4 .studies{
    font-style: italic;
    font-weight: 400;
    font-size: 1.7vw;
    line-height: 1.7vw;
    margin-bottom: 1,5%;
}


/*----------------------------------------------------------*/
/*---------------------------EKEKO---------------------------*/
/*----------------------------------------------------------*/


.section5{
    max-width: 1920px;
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--purple-color);
    /* Sombra: eje-x, eje-y, desenfoque, propagación, color */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 25vw;
}

.text-ekeko-mob, .text-ekeko-1-mob{
    display: none;
}

.text-ekeko-1{
    padding-top: 11%;
    align-self: flex-start;
    width: 20%;
    margin-left: 10%;
}

.text-ekeko-1 p{
    font-family: var(--font-primary);
    font-size: 1.2vw;
    font-style: italic;
    font-weight: 500;
    text-align: left;
}

.text-ekeko-1 .smiley{
    font-size: 4vw;
    margin-left: -4%;
}

.photo-ekeko{
    width: 40%;
    overflow: hidden;
    padding: 12% 0;
    padding-left: 2%;
    padding-bottom: 5%;
}

.photo-ekeko img{
    width: 100%;
}

.text-ekeko{
    padding-bottom: 17%;
    width: 20%;
    align-self: flex-end;
}

.text-ekeko p{
    font-family: mango grotesque web;
    font-size: 3vw;
    line-height: 3vw;
    letter-spacing: 0.2vw;
    font-weight:500;
    color: #FFFB8B;
    text-align: right;
    text-transform: uppercase
}

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

footer{
    position: fixed;
        bottom: 0;
        left: 0;
    width: 100%;
    background-color: #FFFB8B;
    background-image: linear-gradient(
        60deg, 
        #141414 0%, 
        #471853 70%, 
        #FFFB8B 150% 
    );
    display: flex;
    align-items: center;
    z-index: 0;
    pointer-events: auto;
}
.footer-content{
    width: 80%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    margin-left: 10%;
    padding: 8vw 0;
}
.me-info{
        grid-column: 1 / 4;
        display: flex;
        flex-direction: column;
}
.contact{
    grid-column: 7 / 9;
    display: flex;
    flex-direction: column;
    /*background-color: #161616;*/
}
.me-info .profile, .me-info .me{
   font-family: mango grotesque web;
   font-weight: 200;
   font-size: 3vw;
   line-height: 3vw;
   letter-spacing: 0.1vw;
   text-align: end;
}

.me-info .profile{
    font-size: 2.7vw;
}

.me-info .me{
    color: #FFFB8B; 
    font-size: 4vw;   
    line-height: 4vw;
}
.contact, .media{
    font-style: italic;
    font-size: 1.2vw;
    line-height: 2vw;
    text-align: end;
    margin: 0;
}
.contact .title-contact{
    color:#FFFB8B;
}
.media{
    grid-column: 9 / 11;
    display: flex;
    flex-direction: column;
}
.linkedin a, .behance a{
    color: #f0f0f0;
}
.title-contact, .title-media{
    margin-bottom: 0.5vw;
    color: var(--yellow);
}
.media .prochainement{
    font-size: 0.9vw;
    line-height: 0.2vw;
    color: #c7c7c7;

}


@media (max-width: 1200px){
#ekeko{
    scroll-margin-top: 7vw; /* Distancia personalizada para Proyectos */
}
}

@media (max-width: 1150px){
.image-wrapper{
    height: 47vw;
}

.section2{
    margin-top: -4vw;
}
.carrousel-words-container{
    margin-top: -66%; /* Distancia personalizada para Proyectos */
}
.section5 .text-ekeko-1{
    padding-top: 15%;
}
}

/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
@media (max-width: 950px){


    /* OCULTAR LA NAVEGACIÓN DE ESCRITORIO */
    .header-content {
        display: none;
    }

    /* HABILITAR EL DISPLAY PARA MOSTRAR EL LOGO Y LA HAMBURGUESA */
    .header {
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
        display: flex; /* Para alinear el logo y el botón de la hamburguesa */
    }

    .logo {
        margin-left: 2%; 
    }

    /* BOTÓN HAMBURGUESA (Contenedor y SVG) */
    .burger-container {
        display: block;
        cursor: pointer;
        padding: 10px;
        width: 70px; 
        height: 70px;
        /* El CSS de la animación del SVG se agregará aquí más tarde */
    }

    .burger-container svg {
        width: 100%;
        height: 100%;
    }

    /* MENÚ DESPLEGABLE (Overlay) 950px*/
    .nav-mobile-overlay {
    display: block; 
    position: fixed;
    top: 69px;
    right: 0px;
    width: 400px;
    height: calc(100vh - 70px); 
    background-color: rgba(69, 6, 84, 0.9); 
    z-index: 999; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Estado inicial: Fuera de pantalla */
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);

    /* Transición de salida (Cierre): Fluida y profesional */
    transition: 
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
        opacity 0.5s ease, 
        visibility 0.5s;

    will-change: transform;
    }

    /* Estado ABIERTO */
    body.menu-open .nav-mobile-overlay {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        touch-action: pan-y;
    }

    /* Contenido del menú desplegable */
    .nav-mobile-overlay nav {
        /* Centrado para la lista de enlaces */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
        padding-top: 50px;
    }

    .nav-mobile-overlay .nav-list {
        flex-direction: column; 
        align-items: center;
        text-align: center;
        /* Resetear estilos de desktop */
        height: auto; 
    }

    .nav-mobile-overlay .nav-list li {
        width: 100%;
        line-height: normal; 
        padding: 0px 0;
        
    }

    .nav-mobile-overlay .nav-list li:hover {
        width: 100%;
        line-height: normal; 
        color: #FFFB8B;
    }

    /* Ocultar los separadores en móvil */
    .nav-mobile-overlay .nav-list li:not(:last-child)::after {
        content: none;
    }

    .nav-mobile-overlay .nav-list .lang{
        margin-top: 25%;
        margin-left: 0;
    }

    .nav-mobile-overlay .nav-list a {
        font-size: 1.5rem; 
        display: block;
        padding: 10px 0;
    }

    /* ESTADO ABIERTO (Clase que pondrá el JS en el BODY) */
    body.menu-open .nav-mobile-overlay {
        visibility: visible;
        opacity: 1;
        transform: translateY(0); /* Desplegar hacia abajo */
    }
            
    .hero-container{
        padding-left: 0; 
        padding-right: 0;
        padding-top: 70px;
    }

    .image-wrapper{
        padding-right: 3.1%;
        height: 47vw;
    }

    .santiago-photo {
    /* Por ejemplo: La imagen ocupará el 40% del ancho del viewport, 
        pero nunca será más ancha que 30rem */
        width: clamp(15rem, 45%, 30rem);
        height: auto;
        background-color: #5b21b6;
        /* Ajusta según el diseño */
        display: flex;
        z-index: 1;
        /* Aplicar un filtro de color o un pseudo-elemento para el degradado en la imagen */
    }

    .hero-text .subtitle {
        padding-top: 1.5rem;
        font-family: montserrat;
        font-weight: 700;
        font-style: italic;
        font-size: 1.7vw;
        line-height: 2vw;
    }

    .container-left h2{
        font-size: 3vw;
        line-height: 3vw;
    }

    /*----------------------------------------------------------*/
    /*-----------COMPETENCES COMPETENCES 950px------------------*/
    /*----------------------------------------------------------*/

    .section2 {
        margin: auto;
        margin-top: -5%;
    }

    .section3 .container-right {
        gap: 25vw;
    }

    /**/
    .intro-text,
    .tools-card,
    .tech-card,
    .backend-card{             
        padding: 0;
        width:85%
    }
    /**/
    .intro-text{
        margin-top: -4%;                
        padding: 10%;
        padding-bottom: 0;
        width: 100%;
        display: flex;
        align-items: flex-end;

    }
    /**/
    .intro-text p{             
        font-size: 2.2vw;
        font-style: italic;
    }
    /**/
    .tools-card p, .tech-card p, .backend-card p{   
        font-size: 2.1vw;
        line-height: 2.1vw;
        font-weight: 400;
    }
    /**/
    .tools-card .card-color, .tech-card .card-color, .backend-card .card-color{
        padding: 10%;
    }
    /**/
    .tech-card .triangulo{
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
    }
    /**/
    .tech-card .circulo-tech{
        position: absolute;
        left: 54%;
        top:54%;
        width: 40%;
        height: 40%;
        border-radius: 50%;
        z-index: 5;
            background-image: linear-gradient(
            60deg,
            #141414 20%, 
            #732689 100%       
        );
    }

    .backend-card .card-color{
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        z-index: -1;
        background-image: linear-gradient(
            to top, 
            #141414 0%, 
            #732689 100%       
        );
    }

    /*----------------------------------------------------------*/
    /*----------.----- WEBSITES WEBSITES 950px------------------*/
    /*----------------------------------------------------------*/

    .carrousel-words-container{
        margin-top: -60%;
        will-change: transform, opacity;
        /* Evitamos transiciones de tiempo largas aquí para que el JS mande, 
        pero dejamos un mínimo para suavizar */
        transition: opacity 0.2s linear;
    }


    /*----------------------------------------------------------*/
    /*---------------CV CV CV CV CV CV CV 950px-----------------*/
    /*----------------------------------------------------------*/

    .section4{
        margin-bottom: 5%;
    }

    .section4 h2{
        font-size: 3vw;
        line-height: 3vw;
        padding-top: 5%;
        padding-bottom: 5%;
        font-weight: 800;
    }

    .section4 .container-universities{
        margin-top: 2%;
        padding-left: 10%;
    }

    .section4 .year{
        font-size: (0.7rem, 1.5vw, 2rem);
        line-height: 1.5vw;
        padding-bottom: 1%;
    }

    .section4 .univ-country .university{
        margin-bottom: 0.5%;
        font-size: 2vw;
        line-height: 2vw;
    }

    .section4 .container-universities .country{
        font-size: 1.2vw;
        padding-left: 1%;
    }

    .section4 .studies{
        font-size: 2vw;
        line-height: 2vw;
        margin-bottom: 1,5%;
    }


    /*----------------------------------------------------------*/
    /*---------------------------EKEKO 950 PX--------------------*/
    /*----------------------------------------------------------*/

    .section5{
        margin-bottom: 0;
        box-shadow: none;
        padding-bottom: 0;
        position: relative;
    }

    .photo-ekeko{
        width:40%;
        overflow: hidden;
    }

    .text-ekeko-mob{
        display: none;
    }

    .section5 .text-ekeko-1{
        padding-top: 8%;
    }

    .text-ekeko-1 p{
        font-size: 1.4vw;
    }

    .text-ekeko{
        width: 26%;
    }

    .text-ekeko p{
        font-size: 4.2vw;
        line-height: 4.2vw;
        letter-spacing: 0.2vw;
        font-weight:500;
        color: #FFFB8B;
        margin-right: 20%;
    }


    /*----------------------------------------------------------*/
    /*--------------------------FOOTER 950 PX-------------------*/
    /*----------------------------------------------------------*/

    main{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    footer{
        position: relative;
        display: flex;
        align-items: center;
    }

    .footer-content{
        display: grid;
        width: 80%;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px;
        padding: 90px 0;
    }

    .me-info{
        grid-column: 1 / 5;
    }

    .me-info span{
    font-size: 3.5vw;
    line-height: 3.5vw;
    letter-spacing: 0.2vw;
    }

    .me-info .me{
        font-size: 4.5vw;   
        line-height: 4.5vw;
    }

    .me-info .profile{
        font-size: 3.1vw;
        line-height: 1;
    }

    .contact{
        grid-column: 6 / 10;
    }

    .media{
        grid-column: 10 / 13;
    }

    .contact, .media{
        font-size: 1.7vw;
        line-height: 2.3vw;
    }

    .contact .title-contact{
        margin-bottom: 0.7vw;
    }

    .media .title-media{
        margin-bottom: 0.5vw;
    }

    .media .prochainement{
        padding-left: 4%;
        font-size: 1.1vw;
        line-height: 0.6vw;
    }
}
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
@media (max-width: 768px){


/*----------------------------------------------------------*/
/*-------------------------- CURSOR ------------------------*/
/*----------------------------------------------------------*/

body, a, button, .carrousel-words-container {
    cursor: auto !important; /* Vuelve la flecha/manito normal */
  }

  .cursor, .cursor-follower {
    display: none !important; /* Se apaga el amarillo */
  }

/*----------------------------------------------------------*/
/*-------------- CARDS / COMPETENCES 768px -----------------*/
/*----------------------------------------------------------*/
    .section3 .container-right {
        gap: 35vw;
    }

/*----------------------------------------------------------*/
/*---------------------------ETUDES 768px---------------------------*/
/*----------------------------------------------------------*/

    .section4 h2{
        font-size: 3vw;
        line-height: 3vw;
        padding-top: 5%;
        padding-bottom: 5%;
        font-weight: 800;
    
    }
    
    .container-universities{
        margin-top: 4%;
    }
    
    .section4 .year{
        font-size: 1.8vw;
        line-height: 1.8vw;
    }
    
    .section4 .univ-country .university{
        margin-bottom: 0.5%;
        font-size: 2.3vw;
        line-height: 2vw;
    }


    .section4 .univ-country .country{
        font-size: 1.4vw;
    }

    .section4 .studies{
        font-size: 2.4vw;
        line-height: 2.4vw;
    }


/*----------------------------------------------------------*/
/*---------------------------EKEKO 768px---------------------------*/
/*----------------------------------------------------------*/


.photo-ekeko{
    width:50%;
    overflow: hidden;
    margin-bottom: 15%;
    margin-top: 15%;
    margin-left: -4%;
}

.text-ekeko-mob{
    display: none;
}

.text-ekeko-1{
    margin-top: 8%;
}

.text-ekeko-1 p{
    font-size: 1.8vw;
    width:26vw;
}

.text-ekeko p{
    font-size: 5.1vw;
    line-height: 5.1vw;
    letter-spacing: 0.2vw;
    font-weight:500;
    width: 25vw;
    color: #FFFB8B;
    margin-right: 38%;
    margin-left: -40%;
 }


/*----------------------------------------------------------*/
/*----------------------FOOTER 768px------------------------*/
/*----------------------------------------------------------*/
.me-info{
    grid-column: 7 / 13;
}

.me-info .me{
    font-size: clamp(1.8rem, 4.5vw, 3rem);  
    line-height: 1;
    letter-spacing: 0.13rem;
}

.me-info .profile{
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    line-height: 1;
    letter-spacing: 0.09rem;
    margin-bottom: 30px;
}

.contact{
    grid-column: 1 / 5;
    text-align: left;
}
.media{
    grid-column: 5 / 13;
    text-align: left;

}

.contact, .media{
    font-size: 1.7vw;
    line-height: 2.3vw;
}

.contact .title-contact{
    margin-bottom: 0.7vw;
}

.media .title-media{
    margin-bottom: 0.5vw;
}

.media .prochainement{
    font-size: 1.1vw;
    line-height: 0.6vw;
}


/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/            /*600px*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*//*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
@media (max-width: 600px){



.hero-container {
    max-width: 100%;
    display: flex;
    flex-direction: column; 
}

.hero-text{
    margin-left: 0;
    padding-left: 0;
}
.image-wrapper {
    display: flex;
    align-items: flex-end;
    align-items: center; 
    margin: 0 auto;
    margin-top: 10vw;
    position: relative;
    padding: 0;
    width: 90%;
    height: 98vw;
    overflow: hidden;
}

.image-wrapper img{
    width:100% ;
   object-fit: cover;
    /* Movemos la imagen hacia arriba para "cortar el techo" */
    transform: translateY(-20px); 
    /* Opcional: para que no se vea plana al cortar */
    transition: transform 0.3s ease;
}

.hero-text {
    margin-left: 5%;
    margin-top: 0;
}

/* Estilo de la imagen de Santiago */
.santiago-photo {
    width: clamp(20rem, 50%, 40rem);
}

.hero-text .greeting {
    margin-top: 10vw;
    margin-bottom: 1.77vw;
    font-size: clamp(1.2rem, 4vw, 6rem);
}

.hero-text .main-title {
    font-size: clamp(2.5rem, 10vw, 10rem);
    line-height: 0.9;
    width: 50%;
}

.hero-text .subtitle {
    padding-top: 3vw;
    font-size: clamp(0.8rem, 2.3vw, 6rem);
    line-height: 1.2;
    width: 100%;
}

/*----------------------------------------------------------*/
/*---------------column, est l'ame 600px-----------------------*/
/*----------------------------------------------------------*/

.section2 {
    margin: auto;
    margin-top: 50px;
    width: 80%;
    grid-template-columns: 1fr;
    -webkit-mask-image: linear-gradient(
        to bottom, 
        black 0%,
        black 85%,
        transparent 100%
    );
        mask-image: linear-gradient(
        to bottom, 
        black 0%, 
        black 85%, 
        transparent 100%
    );
}

.section2 .estlame{
    position: absolute;
    width: 44%;
    margin-top: 24%;
    margin-left: 18%;
    font-style: italic;
    line-height: 1.2;
    font-size: clamp(0.8rem, 6.5vw, 6rem);
    text-align: center;
}

.place2, .place3{
    display: none;
}

.place1, 
.place4 {
    aspect-ratio: 1 / 1;
    width: 100%;
    border:none;
    background-color: #141414;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.place4{
    align-items:flex-start;
}

.place4 h2{
    font-size: clamp(0.8rem, 6.5vw, 6rem);
    margin-top: 20vw;
    opacity: 1;
    text-align: centerd;
}

#ceQueJaimeFaire{
    margin: 0 auto;
}



/*----------------------------------------------------------*/
/*---------------websites websites 600px-----------------------*/
/*----------------------------------------------------------*/
    

.big-text-web{
    width: 100%;
    height: 180vw;
    max-width: 600px;
    overflow: hidden;
    transform: translateY(-30vw);
}

.big-text-web .websites,
.big-text-web .websites1,
.big-text-web .websites2,
.big-text-web  .websites3,
.big-text-web .websites4 {
    display: block;
    visibility: visible;
    font-family: mango grotesque web;
    font-weight: 900;
    font-size: 42.5vw;
    margin-left: -3.4%;
    position: relative;
    line-height: 43vw; 
    margin-bottom: 0; 
    margin-top: -15vw; 
    color: var(--purple-color);
}

.big-text-web .websites{
        transform: translateY(200px);
}


.carrousel-words-container{
    margin-top: -180%;
}
.carrousel-words p{
    font-size: 5vw;
    line-height: 5vw;
}


/*----------------------------------------------------------*/
/*---------------sección tools / tech 600px-----------------------*/
/*----------------------------------------------------------*/


.section3 {
    margin-top: 120vw;
    margin-left: 15%;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.section3 .container-left {
    width: 100%;
    padding-top: 10%;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative; /* Cambia de 'sticky' a 'relative' */
    top: 0 !important;   /* Ignora los 120px que pusimos antes */
}

.container-left .mes-competences{
    width: 100%;
    overflow: hidden;
}

.container-left h2{
    font-size: clamp(1.6rem, 7vw, 5rem);
    line-height: 1;
}

.container-left .mes{
    padding-left: 0%;
    margin-right: 70%;
}

.container-left .competences{
    padding-left: 1%;
    margin-left: 5%;
    text-align: right;
}

.section3 .container-right {
    width: 100%;
    display: flex;
    align-items:center;
    gap:60vw;
}

.intro-text{
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.intro-text p{
    font-size: 5vw;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.tools-card p, .tech-card p, .backend-card p{
    font-size: clamp(1rem, 4.5vw, 10rem);
    line-height: 1.2;
    
}

.container-right .intro-text,
.container-right .tools-card,
.container-right .tech-card,
.container-right .backend-card{
    width: 97%;
}

.container-right .intro-text{
    height: 60vw;
}

.container-right .tech-card .triangulo{
    width: 100%;
    height: 100%;
}


.tools-card .card-color,
.tech-card .card-color,
.backend-card .card-color{
    padding: 10%;
}

.tech-card .circulo-tech{
    position: absolute;
    left: 57%;
    top:57%;
    width: 40%;
    height: 40%;
}

.backend-card .card-color{
    position: absolute;
    top: 4vw;
    left: 3.5vw;
    width: 60vw;
    height: 60vw;
}

/*------------------------------------------------------------------*/
/*---------------------------ETUDES 600px---------------------------*/
/*------------------------------------------------------------------*/
.section4{
    width: 90%;
    margin-left: 5%;
    z-index: 2;
    max-width: 600px;
    overflow: hidden;
}

.mes-competences .mes{
    margin-left: 6vw;
}

.mes-competences .competences{
    margin-right: 6vw;
}

.section4 .container-universities{
    padding-left:5%;
    padding-right: 5%;
}

hr{
    margin-left: 5%;
}


.section4 h2{
    font-size: clamp(1.6rem, 7vw, 5rem) ;
    line-height: 3vw;
    margin-top: 35vw;
    margin-bottom: 15vw;
    font-weight: 800;
    text-align: center;
}

.section4 .year{
    font-size: clamp(.8rem, 3vw, 5rem) ;
    line-height: 1;
}

.section4 .univ-country .university{
    font-size: clamp(0.9rem, 3vw, 5rem) ;
    line-height: 1;
    margin: 1.2vw 0;
}

.section4 .univ-country .country{
    font-size: clamp(0.6rem, 2vw, 5rem) ;
}

.section4 .studies{
    font-size: clamp(1rem, 4.5vw, 5rem) ;
    line-height: 1;
    margin-bottom: 10vw;
}

/*----------------------------------------------------------------*/
/*--------------------------EKEKO 600px---------------------------*/
/*----------------------------------------------------------------*/


    .section5{
        flex-direction: column;
    }
    
    .photo-ekeko{
        width:80%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 5%;
        margin-bottom: 0;
    }
    
    .text-ekeko-1{
    display: none;
    }

    .text-ekeko{
        display: none;
    }

    .text-ekeko-1-mob{
        margin-top: 19%;
        display: inline;
        margin-bottom: -5%;
    }

    .text-ekeko-1-mob p{
        text-align: center;
        color: #FFFB8B;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-primary);
        font-size: clamp(0.9rem, 3.5vw, 3rem);
        line-height: 1.5;
        color: white;
    }

    .text-ekeko-1-mob .smiley{
            margin-bottom: 0;
            font-size: 10vw;
    }

    .text-ekeko-mob{
        margin-top: -10%;
        display:contents;
        text-align: center;
        color: #FFFB8B;
        font-family: mango grotesque web;
        font-size: clamp(2.2rem, 10vw, 3rem);
        line-height: 1;
        letter-spacing: 0.3vw;
    }

    .text-ekeko-mob p{
        margin-bottom: 22%;
        text-transform: uppercase;
    }


/*----------------------------------------------------------------*/
/*---------------------------FOOTER 600px---------------------------*/
/*----------------------------------------------------------------*/

.me-info{
    grid-column: 1 / 13;
}

.me-info .me{
    font-size: clamp(3rem, 10vw, 6rem);
    margin-bottom: 10px;
}

.me-info .profile{
    font-size: clamp(2.2rem, 7vw, 6rem);
    line-height: 0.9;
}

.contact{
    margin-top: 50px;
    grid-column: 1 / 13;
}
.media{
    grid-column: 1 / 13;
    margin-top: 10%;
}

.contact, .media{
    font-size: clamp(1rem, 3vw, 6rem);
    line-height: 1.8;
    width: 100%;
    text-align: right;
}

.contact .title-contact{
    margin-bottom: 0.7vw;
}

.media .title-media{
    margin-bottom: 0.5vw;
}

.media .prochainement{
    font-size: clamp(0.5rem, 2.2vw, 6rem);
    line-height: 0.6vw;
}

}

@media (max-width: 450px){

    /* MENÚ DESPLEGABLE (Overlay) */
    .nav-mobile-overlay {
        /* MOSTRAR EN MÓVIL (Aunque inicialmente oculto por JS) */
        right: 0px;
        width: 80%;
    }

    /* Contenido del menú desplegable */
    .nav-mobile-overlay nav {
        /* Centrado para la lista de enlaces */
        display: flex;
        justify-content: left;
        align-items: flex-start;
        padding-left: 10%;
    }

    .nav-mobile-overlay .nav-list .lang{
        margin-top: 25%;
        margin-left: 0;
        font-size: 6vw; 
    }

    .nav-mobile-overlay .nav-list a {
        font-size: 6vw; 
        display: block;
        padding: 10px 0;
    }

    .text-ekeko-1-mob{
        margin-top: 25%;
        margin-bottom: 1.5%;
    }

    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 5;
        opacity: 0;
        visibility: hidden;
                /* AL CERRAR: Espera 0.2s para que el menú tome la delantera */

        transition: opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s;
    }

    body.menu-open::after {
        opacity: 1;
        visibility: visible;
        /* AL ABRIR: Sin delay para impacto inmediato */
        transition: opacity 0.3s ease;
    }

     /* Animación suave para que la capa no aparezca de golpe */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .carrousel-words-container{
        margin-top: -180%;
    }
    }

     @media (max-width: 420px){
        .carrousel-words-container{
            margin-top: -173%;
        }
    }
       @media (max-width: 370px){
        .carrousel-words-container{
            margin-top: -165%;
        }
    }