/* -----------------------------------------------------------SEGUNDA PAGINA--------------------------*/




@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;800&family=Urbanist:wght@400;600&display=swap');



/* Color de fondo para toda la página */
body {
    background-color: #5B6C8F;
    color: white; 
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
   overflow: hidden; /* evita scroll, pero no genera zoom */
}

/* --- ESTILOS DE LA CABECERA / MENÚ --- */

.navbar {
    display: flex;
    align-items: center; 
    padding: 40px 140px;
    background-color: rgba(0, 0, 0, 0); 
    position: relative;
    z-index: 91000 !important;
    opacity: 0;
    animation: fadeInDown 1.5s ease-out forwards;
    justify-content: space-between;
}



.logo img {
    height: 100px;
    margin-right: 90px;
}

.menu {
  position: absolute;        /* la sacamos del flujo para centrarla en la barra */
  left: 50%;                 /* punto central del viewport/elemento padre */
  top: 50%;                  /* opcional: centra verticalmente dentro de la navbar */
  transform: translate(-50%, -50%); /* centra exactamente por su propio ancho/alto */
  display: flex;
  gap: 55px;
  justify-content: center;
  align-items: center;
  pointer-events: auto; /* mantener interactividad */
  z-index: 100000; /* por encima de la imagen si hace falta */
  width: auto; /* que mida su contenido */
}

/* Modificación del botón */
.menu a {
    color: white; /* Color inicial (blanco) */
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: color 0.1s; 
    font-family: urbanist, sans-serif;
    text-transform: uppercase;
    cursor: default;
    display: inline-block;
    position: relative; 
    z-index:  20 !important;
    padding: 0 20px; 
    cursor: pointer; 
    transition: color 0.3s, font-size 0.3s;
}

/* El texto dentro del botón (MENU o X) */
.menu a #menu-text {
    /* El span es el que cambia de color, hereda del padre por defecto */
    color: inherit;
    transition: color 0.3s;
}

/* CLASE ACTIVA: El botón cambia de color a negro cuando el overlay está abierto */
.menu a.active, 
.menu a.active #menu-text {
    /* ¡CRÍTICO! El texto debe ser NEGRO para verse sobre la cortina blanca */
    color: black !important; 
}


/* Corchete de apertura '[' */
.menu a::before {
    content: '['; 
    color: inherit; /* Hereda el color del <a>, que será blanco o negro */
    font-size: 2em;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 3;
    font-weight: normal;
    pointer-events: none;
}

/* Corchete de cierre ']' */
.menu a::after {
    content: ']';
    color: inherit; /* Hereda el color del <a>, que será blanco o negro */
    font-size: 2em;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 3;
    font-weight: normal;
    pointer-events: none;
}




.content-body {
    display: flex;
    justify-content: flex-start;
    padding: 65px 30px;
    max-width: 1200px;
    margin: 0 auto; 
    position: relative; 
    
}

.left-column {
    flex: 0 0 40%;
    
    /* --- CAMBIO CRÍTICO: ALINEAR A LA IZQUIERDA --- */
    text-align: left; /* Asegura que los elementos en línea empiecen a la izquierda */
    
    padding-right: 0px;
    margin-left: -27px; /* Mantén tu corrección de posición horizontal del bloque */
    
    display: flex;
    flex-direction: column;
    justify-content: right;
    
    /* Elimina align-items/justify-content si no lo necesitas para espaciar */
    /* justify-content: right; (Esto debería ser flex-start o flex-end si es flex) */
    
    position: relative;
    z-index: 9999;
}

.title-lg {
    font-size: 3em; 
    font-weight: 800;
    margin: 0; 
    text-transform: uppercase;
    line-height: 1.0; 
    color: #ffffff; 
    font-family: 'Outfit', sans-serif;
    animation: fadeInUp 1.5s ease-out 0.4s forwards; /* 0.4s delay */
      opacity: 0;
    transform: translateY(60px);
    /* --- CAMBIO CRÍTICO: BLOQUE PARA ALINEACIÓN CONSISTENTE A LA IZQUIERDA --- */
    display: block; /* Ahora se alinea como un bloque normal, comenzando a la izquierda */
    
    /* ... animación ... */
}

.title-lg2 {
    font-size: 16em; 
    font-weight: 800;
    margin: 0; 
    margin-left: -0.05em;
    /* Mantenemos el ajuste vertical que necesites */
    margin-top: -11px; 
    
    
    line-height: 1.0; 
    color: #ffffff; 
    font-family: 'Outfit', sans-serif;
    
    white-space: nowrap; 
    display: block; /* Correcto */
    overflow: hidden; 
     z-index: 9999 !important;
    /* ... animación ... */
    /* ... (otros estilos) ... */
    
    /* --- NUEVA ANIMACIÓN: Aparece desde abajo (fadeInUp) --- */
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.5s forwards; /* 0.5s delay (un poco después) */
    
    /* ... (resto del código) ... */

}
.info-sm {
    font-size: 1.19em; 
    margin-top: 10px; 
    font-weight: medium;
    font-family: 'Urbanist', sans-serif;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.6s forwards;
    line-height: 1.7;
}

/* --- ESTILOS DE LA IMAGEN PRINCIPAL (SE DEJA POSICIÓN FIJA Y TRANSICIONES) --- */
.right-column #main-image {
    position: fixed;
    transition: top 0.5s ease-in-out, right 0.5s ease-in-out;
    will-change: top, right; 
    max-width: none; 
    object-fit: cover;
    border-radius: 10px;
    opacity: 0; 
    animation: fadeInUp 1.5s ease-out 0.9s forwards; 
    /* 💥 CORRECCIÓN VISIBILIDAD: Le damos un z-index para que se muestre */
    z-index: 105;
    pointer-events: none !important;

    cursor: pointer; /* Muestra la manita al pasar el mouse */
    
}

/* --- ESTILO DE LA ESQUINA INFERIOR DERECHA --- */






/* --- ESTILOS DEL MODAL --- */
/* Overlay: inicial oculto, pero interactuable cuando está abierto */
.modal {
    display: none; /* inicia oculto */
    position: fixed;
    z-index:999999  !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5b6c8fc0;
    justify-content: center;
    align-items: center;
    padding: 0px;
    pointer-events: auto; /* permite clicks en todo el overlay */
   
    
}

/* Modal contenido */
.modal-content {
    background-color: #ffffff;
    color: #5B6C8F;
    padding: 70px;
    border-radius: 2px;
    max-width: 400px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    z-index: 99999999999;
     font-size: 0.9rem;  /* cambia el tamaño general */
      font-family: 'Urbanist', sans-serif;
      font-weight: 900;
}

.tiempo-respuesta {
    font-size: 14px;
    opacity: 0.7;
    margin-top: -30px;
    margin-bottom: 25px;
}



.gracias-box {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    animation: fadeIn 0.6s ease-out;
}

.gracias-box p {
     font-family: 'Urbanist', sans-serif;
      font-weight: 900;
    font-size: 18px;
    margin-top: 10px;
}

.gracias-img {
    width: 190px;   /* Ajusta el tamaño */
    
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0.9;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}




/* Botón cerrar */
.close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #E91E63;
     z-index: 99999999999;

}

/* Cambia color al pasar mouse */
.close-btn:hover {
    color: #5B6C8F;
     z-index: 99999999999;
}



.close-btn:hover,
.close-btn:focus {
    color: #5B6C8F;
    text-decoration: none;
    cursor: pointer;
     z-index: 99999999999;
}

/* Animación extra */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ---- ESTILO INTERNO DEL FORMULARIO ---- */
.modal-content h2 {
    margin-top: -10px;   /* sube el título dentro del modal */
    margin-bottom: 40px;
    font-size: 1.2rem;
     font-family: 'Urbanist', sans-serif;
      font-weight: 900;
}



/* contenedor del formulario */
.modal-form {
    display: flex;
    flex-direction: column;
    gap:14px;  /* espacio entre cada sección */
     font-family: 'Urbanist', sans-serif;
      font-weight: 900;
}

/* cada label + input */
.modal-form label {
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
}

.modal-form input,
.modal-form textarea {
    margin-top:-22px;
    display: block; 
    width: 100%;
    padding: 5px;
    border: 1px solid #5B6C8F;
    border-radius: 1px;
    font-size: 0.8rem;
    box-sizing: border-box;
}

/* textarea más grande */
.modal-form textarea {
    min-height: 5px;
    resize: vertical;
}

/* botón enviar */
.modal-form button[type="submit"] {
    margin-top: 20px;
    background-color: #E91E63;
    color: white;
    border: none;
    padding: 10px;
    font-weight: bold;
    border-radius: 1px;
    cursor: pointer;
}

.modal-form button[type="submit"]:hover {
    background-color: #5B6C8F;
}


/* --- KEYFRAMES --- */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}/* /* --- BOTÓN DE RESERVAS CON ONDA SUAVE --- */
.reservas-btn {
    background-color: #E91E63; 
    color: rgb(255, 255, 255); 
    text-decoration: none;
    font-weight: 900;
    padding: 4px 5px; 
    border-radius: 1px; 
    font-family: 'Urbanist', sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-left: auto; 
   /* Entrada suave */ 
    /* --- CAMBIO: Usamos fadeInDown para que caiga desde arriba --- */
    opacity: 1;
    animation: fadeInDown 1.5s ease-out forwards;
    
    /* CRÍTICO: El botón debe ser el contexto de posición */
    position: relative; 
    
    
    
    /* Asegúrate de que el botón esté por encima de la onda */
    z-index: 10000; 
}

/* Onda/destello detrás del botón con misma forma */
.reservas-btn::before {
    content: "";
    
    /* La posición absoluta se basa en el padre (.reservas-btn) */
    position: absolute;
    
    /* Centrarlo perfectamente */
    top: 50%;
    left: 50%;
    
    /* Hazlo ligeramente más grande que el botón para la onda */
    width: 105%; 
    height: 155%;
    
    background-color: #E91E63;
    border-radius:2px;
    
    /* El z-index debe ser NEGATIVO para ir detrás del botón (z-index: 2) */
    z-index: -2; 

    /* Transformación inicial para centrar */
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    animation: wave-button 2s infinite;
    
}

/* Animación onda/destello */
@keyframes wave-button {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* --- ESTILOS DE LA CINTA DE TEXTO (SCROLLING MARQUEE) --- */

.scrolling-text-container {
    width: 50%;
    margin: 50px auto 0 auto;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 370px;
    text-align: center;

    mask-image: linear-gradient(to right,
                                rgba(0,0,0,0) 0%,
                                rgba(0,0,0,1) 15%,
                                rgba(0,0,0,1) 85%,
                                rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right,
                                        rgba(0,0,0,0) 0%,
                                        rgba(0,0,0,1) 15%,
                                        rgba(0,0,0,1) 85%,
                                        rgba(0,0,0,0) 100%);
}

/* Track que contiene 2 copias del texto */
.scrolling-track {
    display: inline-flex; /* Mantiene ambas copias alineadas */
    white-space: nowrap;
    animation: loop 20s linear infinite;
}

.scrolling-track span {
    color: #F8A07B;
    font-size: 1.1em;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    word-spacing: 1em;
    padding-right: 2em; /* separador para suavizar unión */
}

/* Animación perfecta sin saltos */
@keyframes loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* --- NUEVO KEYFRAME para aparecer desde arriba --- */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        /* Se desplaza hacia arriba, fuera de la pantalla */
        transform: translateY(-60px); 
    }
    100% {
        opacity: 1;
        /* Llega a su posición normal */
        transform: translateY(0);
    }
}


@keyframes buttonFadeDown {
    0% {
        opacity: 0;
        transform: translateY(-100px); /* Movimiento un poco más drástico */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Keyframe para que el contenido del overlay aparezca gradualmente */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.overlay {
    height: 0; /* INICIA CERRADO */
    width: 100%;
    position: fixed; /* Cubre toda la pantalla */
     z-index: 90000 !important; /* Máximo z-index para estar sobre todo */
    top: 0;
    left: 0;
    background-color: white; /* Color de la cortina */
    overflow-y: hidden; /* Oculta el contenido extra al cerrarse */
    transition: height 0.5s ease-in-out; /* TRANSICIÓN CLAVE: Baja suavemente */
     transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
     pointer-events: none; 
     
}
.overlay.closing {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.overlay {
    pointer-events: none;
}

.overlay.open ~ .social-icons img {
    pointer-events: none;
}
/* ACTIVAR SOLO ZONAS INTERACTIVAS */
.overlay.open .overlay-content,
.overlay.open .overlay-footer,
.overlay.open .overlay-x {
    pointer-events: auto;
}

.overlay.active {
  pointer-events: auto;   /* solo captura clics cuando está activo */
}
/* Estado abierto (añadido por JavaScript) */
.overlay.open {
    pointer-events: auto; /* solo captura clicks cuando está abierto */
    opacity: 1;
    height: 100%;
    
}

/* --- ESTILOS DEL CONTENIDO DENTRO DEL OVERLAY (TRES TEXTOS) --- */
.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Espacio entre los textos centrales */
    /* Aseguramos que el contenido esté visible */
    opacity: 0; 
    transform: translateY(20px);
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s; /* Pequeño retraso para que aparezca después de la cortina */
}

/* Para que el contenido aparezca cuando el overlay está abierto */
.overlay.open .overlay-content {
    opacity: 1;
    transform: translateY(0);
}

.overlay-content a {
    padding: 10px;
    text-decoration: none;
    font-size: 4.0em; 
    color: #E91E63; /* Color del texto (ej. el color de fondo de tu body) */
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    transition: color 0.3s;
    line-height: 0.5; /* <-- aquí ajustas el interlineado */
}

.overlay-content a:hover {
    color: #E91E63; /* Color de hover */
}


#menu-toggle {
    position: relative;
    z-index: 9999999 !important;
    display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
}

#menu-toggle.active {
    font-weight: bold; /* Muy gruesa */
    
    color: #5B6C8F !important;
}



.footer {
    text-align: center;            /* Centra el texto */
    padding: 20px 0;               /* Espacio arriba y abajo */
    font-family: 'Urbanist', sans-serif;
    font-size: 1em;
    color: white;                  /* Cambia según tu fondo */
    background-color: transparent; /* O un color si quieres */
    
    position: fixed;               /* Fijo en la ventana */
    bottom: 0;                     /* Siempre abajo */
    left: 0;
    width: 100%;                   /* Que ocupe todo el ancho */
    
    z-index: 1000;                 /* Por encima del contenido */
}



/* CSS */
.overlay-footer {
    position: absolute; /* relativo al overlay */
    bottom: 20px;
    left: 140px; /* mismo valor que padding-left de navbar */
    color: #5B6C8F;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
    font-size: 1em;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}



.overlay.show {
    pointer-events: auto;
    opacity: 1;
}


.overlay-footer,
.overlay-footer-right {
    position: fixed; /* ⚡ clave: fixed en vez de absolute */
    bottom: 20px;
    font-family: 'Urbanist', sans-serif;
    font-weight: 600;
    font-size: 1em;
    pointer-events: auto; /* ⚡ permite clicks */
    z-index: 2000; /* encima del overlay-content */
}

.overlay-footer {
    left: 140px;
    color: #5B6C8F;
}

.overlay-footer-right {
    right: 140px;
    color: #5B6C8F;
}

.overlay-footer-right a {
    color: #5B6C8F;
    text-decoration: none;
}

.overlay-footer-right a:hover {
    text-decoration: underline;
}












/* ==========================================================================
/* ==========================================================================
   NUEVOS ESTILOS EQUIPO (REDISEÑO) - CORREGIDO Y RESPONSIVE
   ========================================================================== */

/* Ajuste general del body para esta página */
body.team-page {
    background-color: #5B6C8F;
    margin: 0;
    padding: 0;
    /* CAMBIO CLAVE PARA PORTÁTIL/ESCRITORIO: Ocultar el scroll */
    overflow: hidden; 
    
    /* Altura total y ANCHO total del viewport */
    height: 100%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
  

}

.contenedor-principal {
    width: 90%; 
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ocupar el espacio restante en el layout flex */
    flex-grow: 1; 
    position: relative;
    padding-bottom: 50px;
    /* ELIMINAMOS EL SCROLL INTERNO EN ESCRITORIO */
    /* overflow-y: auto; */ 
     justify-content: flex-start;
}

/* --- 1. ENCABEZADO (TITULO Y SUBTITULO) --- */
.team-intro {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.3s forwards;
}

.team-title {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5vw;
    font-weight: 800;
    color: white;
    margin: 0 auto;          /* centra el bloque horizontalmente */
    text-align: center;       /* centra el texto dentro del bloque */
    text-transform: uppercase;
    line-height: 1.3;
   
    word-wrap: break-word;
}

.team-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.1rem; 
    color: white;
    margin: 15px auto 0 auto;  /* top 15px, auto horizontal para centrar */
    font-weight: 400;
    line-height: 1.7;
    max-width: 500px;
    opacity: 0.9;
    text-align: center;        /* centra el texto */
}


/* --- 2. GRID DE LOS MIEMBROS --- */
.equipo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw; 
    width: 100%;
    margin-top: -6vw; 
    margin-right: -1.5vw; 
    position: relative; 
}

/* ESTILO POR DEFECTO PARA AMBAS GALLETAS (Lucía) */
.bloque-miembro {
    position: relative; 
    /* Dimensiones responsivas sin padding-bottom (Lucía) */
    width: 30vw; 
    height: 38.25vw; /* 30vw * (510/400) = 38.25vw */
    max-width: 400px; 
    max-height: 510px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ESTILO ESPECÍFICO PARA XAVI (bloque-miembro:first-child) */
.equipo-grid > .bloque-miembro:first-child {
    /* Galleta de Xavi más pequeña: 25vw (max 333px) */
    width: 25vw; 
    height: 31.875vw; /* 25vw * (510/400) = 31.875vw */
    max-width: 333px;
    max-height: 409px;
}


/* --- 3. NOMBRES LATERALES (XAVI / LU) --- */
.nombre-lateral {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5vw; 
    font-weight: 800;
    color: white;
    text-transform: uppercase;

    white-space: normal; 
    display: block;      
    width: 15vw; 
    max-width: 200px;

    position: absolute; 
    z-index: 5;
    top: 50%; /* sigue centrado vertical */
    transform: translateY(-60%) translateX(0); /* empieza ligeramente arriba */
    opacity: 0;

    animation: fadeInUp 1s ease-out forwards;
}



/* 3a. Ocultar el texto de hover por defecto, y mostrar el nombre original */
.nombre-lateral .name-hover-sm { 
    display: none;
}
.nombre-lateral .name-original {
    display: block; /* Asegura que XAVI/LU estén visibles */
}

/* 3b. Forzar el salto de línea en el texto de hover (elemento inyectado en HTML) */
.nombre-lateral {
  position: absolute;
  z-index: 0; /* actualmente visible detrás de la galleta */
  transition: opacity 0.3s ease;
}

/* 3c. ESTILO DE HOVER: Cuando el cookie es sobrevolado, afecta al hermano (~) .nombre-lateral */
.cookie-container:hover ~ .nombre-lateral .name-original {
    display: none; /* Oculta XAVI/LU */
}

.cookie-container:hover ~ .nombre-lateral .name-hover-sm {
    /* Muestra el mensaje de hover con estilos específicos */
    display: block; 
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6em;
}


/* 2. Posicionamiento específico para XAVI (Izquierda) */
/* El texto se alinea a la derecha para que la envoltura comience cerca de la galleta */
.nombre-lateral.izquierda {
    right: 90%; /* CAMBIO: De 350px a 110% (relativo al padre) */
    text-align: right; 
}
/* regla específica para Xavi */

#nombreXavi {
    right: 87%;
    top: 50%;
    
}

#nombreLucia {
    left: 92%;
    top: 50%;
 
}


/* 3. Posicionamiento específico para LU (Derecha) */
/* El texto se alinea a la izquierda para que la envoltura comience cerca de la galleta */
.nombre-lateral.derecha {
    
    left: 90%; /* CAMBIO: De 350px a 110% (relativo al padre) */
    text-align: left; 
}
/* Cuando se rompe la galleta, ocultamos el nombre */
.nombre-lateral.oculto {
    opacity: 0;
    transform: translateY(-50%) scale(0.9); 
    pointer-events: none;
}

/* --- 4. CONTENEDOR GALLETA --- */
.cookie-container {
    
    position: relative; 
    display: inline-block;
    top: 0; 
    left: 0; 
    width: 85%;   
    height: 100%;  
   
    /* IMPORTANTE: z-index más alto que el nombre lateral */
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 0.6s forwards;
}



.cookie-img {
    pointer-events: auto;
    position: absolute;
    cursor: pointer;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    top: -5%; 
    left: 13%; 
    width: 85%;
    height: 100%;
    display: block;
    
    /* 🔥 ARREGLA EL PEDO */
    object-fit: contain; 
    image-rendering: auto;
    max-width: none;      /* evita escalados raros CON LA WEB */
    max-height: none;     /* evita que CHROME Y LOS DEMAS limiten la imagen */
    aspect-ratio: auto;   /* hace que la imagen respete su forma real */
    
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    z-index: 10; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); 
}



/* Mantenemos la galleta entera más pequeña */
.cookie-img.entera { 
    transform: scale(0.85); 
}

/* Hacemos la galleta rota más grande (para Lu) */
.cookie-img.rota {
  position: absolute;
  z-index: 10; /* más alto que el nombre lateral */
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Imagen entera CONFIGURAR específica para Xavi */
.equipo-grid > .bloque-miembro:first-child .cookie-img.entera {
    top: -5%;
    left: 5%;
    transform: scale(0.85); /* solo para Xavi */
}
/* Imagen entera CONFIGURAR específica para LU */
.equipo-grid > .bloque-miembro:nth-child(2) .cookie-img.entera {
    top: -3%;
    left: 15%;
    transform: scale(0.82);
}



/* Estados al hacer click */
.cookie-container.clicked .cookie-img.entera { 
    opacity: 0; 
    transform: scale(0.85); /* Mantenemos la escala mientras desaparece */
}

.cookie-container.clicked .cookie-img.rota { 
    opacity: 1; 
    transform: scale(1.2); /* Mantenemos la escala por defecto para Lu */
}

/* Imagen rota CONFIGURACION específica para Xavi */
.equipo-grid > .bloque-miembro:first-child .cookie-img.rota {
    top: -3%;
    left: 9%;
    transform: scale(1.4);
}
/* Imagen rota CONFIGURACION específica para LU */
.equipo-grid > .bloque-miembro:nth-child(2) .cookie-img.rota {
    top: 0%;
    left: 8%;
    transform: scale(1.2);
}



/* Mostrar solo al pasar mouse y SI NO está rota */
.cookie-container:hover .click-hint {
    opacity: 0 !important; 
    transform: translate(-50%, -50%); 
}

/* Si ya está rota (clase clicked), no mostramos el mensaje */
.cookie-container.clicked:hover .click-hint {
    opacity: 0 !important;
}

/* --- 6. CONTENIDO INTERNO (ROLES Y BOTÓN) --- */
.cookie-content {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-in-out;
    pointer-events: none;
     z-index: 12; 
}

/* Estilo del texto "DISEÑADOR GRÁFICO..." */
.rol-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem; /* CAMBIO: De em a rem (más controlable) */
    font-weight: 900;
    line-height: 0.95;
    color: white;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    z-index: 2; 
}

.btn-portfolio {
    background-color: #E91E63;
    color: white;
    font-family: 'Urbanist', sans-serif;
    font-weight: 900; 
    font-size: 0.9em;
    text-transform: uppercase;
    border: none;
    padding: 4px 5px; 
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    letter-spacing: 1px;
    z-index: 12; 
}

.btn-portfolio:hover {
    background-color: #c2185b;
    transform: scale(1.05);
     z-index: 12; 
}

/* Mostrar contenido cuando está clickeado */
.cookie-container.clicked .cookie-content {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
    .btn-portfolio:focus,
    .cookie-container:focus {
    outline: none;
    box-shadow: none; /* Por si el navegador añade un box-shadow en el foco */
    }
/* web-/styles.css (Línea 890 aprox.) */

/* --- NUEVO: Indicador de sonido para la interacción móvil --- */
/* Aproximadamente en la línea 890 */

/* --- NUEVO: Indicador de sonido para la interacción móvil --- */
.cookie-hint-mobile {
    display: block; /* CAMBIO: Ahora es visible por defecto en todas las vistas */
    position: fixed;
    bottom: 80px; 
    right: 25px; /* Posición estandarizada */
    z-index: 100001;
    text-align: center;
    color: white;
    font-family: 'Urbanist', sans-serif;
    opacity: 0.9;
    transition: opacity 0.3s;
    pointer-events: none;
}

.cookie-hint-mobile .sound-icon {
    font-size: 1.5rem;
    color: #F8A07B; /* Color naranja */
    margin-bottom: 5px;
}

.cookie-hint-mobile p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}


/* ==========================================================================
/* ==========================================================================
   ESTILOS DE LA PÁGINA DE MANTENIMIENTO (PÁGINA PUENTE) - AJUSTADOS
   ========================================================================== */

/* Ajuste general del body para esta página */
body.maintenance-page {
    /* Mantenemos el mismo fondo que las otras páginas */
    background-color: #5B6C8F; 
    /* Forzamos el layout para que el GIF ocupe toda la altura */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Ocultar el scroll en desktop */
    overflow: hidden; 
}


.maintenance-content {
    display: flex;
    flex: 1; /* Ocupa el espacio restante entre el header y el footer */
    max-width: 1600px;
    width: 100%;
    margin: auto; /* Centrar horizontalmente */
    /* Se mantiene padding vertical reducido para maximizar el espacio */
    padding: 0 140px; 
    position: relative;
    box-sizing: border-box; 
    align-items: stretch;
}

.left-section {
    /* 🚨 CAMBIO DE DISTRIBUCIÓN: Le damos mucho más espacio al texto (75% del ancho disponible) */
    flex: 1.5; 
    display: flex;
    flex-direction: column;
    /* Se añadió padding vertical para evitar que el texto toque el header/footer */
    padding-top: 0px;
    padding-bottom: 150px;
    justify-content: center; /* Centrar verticalmente el texto */
    align-items: flex-start;
    padding-right: 5vw;
    /* CRÍTICO: Bajamos el z-index para que el GIF lo cubra */
    z-index: 5;
}

.bridge-title {
    font-family: 'Outfit', sans-serif;
    /* Tamaño ajustado para que quepa en el viewport (mantenido) */
    font-size: 3.5vw; 
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    line-height: 1.3;
    text-transform: uppercase;
     animation: fadeInUp 1.5s ease-out;
      max-width: 700px;
}

.bridge-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.1rem;
    color: white;
    margin-bottom: 15px;
      font-weight: 400;
    line-height: 1.7;
    max-width: 440px; /* Limitar el ancho del texto */
     animation: fadeInUp 1.5s ease-out;
}


.descargar-servicios-btn {
    background-color: #E91E63; 
    color: white; 
    text-decoration: none;
    font-weight: 900;
    padding: 6px 10px; 
    border-radius: 1px; 
    font-family: 'Urbanist', sans-serif;
    text-transform: uppercase;
    font-size: 0.9em;

    display: inline-block; 
    margin-top: 10px;

    /* Animación igual */
    opacity: 1;
    animation: fadeInUp 1.5s ease-out;

    position: relative;
    z-index: 10000;
}

/* Hover igual también */
.descargar-servicios-btn:hover {
    background-color: #d01755;
    transform: scale(1.03);
    transition: 0.2s ease;
}


.social-links {
    margin-top: 30px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    display: flex;
    /* 💥 CAMBIO CLAVE: Usamos 'gap' para la separación horizontal sin divisores */
    gap: 25px; 
    
    margin-bottom: 20px;
}

.social-links a {
    /* Color inicial BLANCO */
    color: white; 
    text-decoration: none;
    transition: color 0.3s;
    /* 💥 CAMBIO CLAVE: Aumentamos el tamaño (de 1.5em a 2em) */
    font-size: 2em; 
    line-height: 1; 
}

.social-links a:hover {
    /* Color rosa en hover */
    color: #E91E63;
}

.right-section {
    /* 🚨 CAMBIO DE DISTRIBUCIÓN: Le damos menos espacio al contenedor del GIF (25% del ancho disponible) */
    flex: 0.5; 
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Alinear el GIF a la parte inferior */
    position: relative; /* Contexto de posicionamiento */
    /* 🚨 CAMBIO: Permite que el GIF se desborde fuera del contenedor para moverlo a la derecha */
    overflow: visible; 
}

.maintenance-gif {
    /* Posicionamiento absoluto */
    position: absolute;
    bottom: 0; 
    /* 💥 CAMBIO CLAVE: Mover el GIF mucho más a la derecha (10vw fuera del contenedor) */
    right: -25vw; 
    
    /* Mantiene la altura al 100% de la sección derecha */
    height: 100%; 
    width: auto;
    max-width: none;
    
    /* 💥 CAMBIO CLAVE: Aumentamos la escala para una presencia dominante */
    transform: scale(1.3); 
    transform-origin: bottom right;

    object-fit: contain;
    pointer-events: none;
    /* CRÍTICO: El GIF va por encima de todo */
    z-index: 15; 
}


/* --- MEDIA QUERY para hacerlo responsivo en móviles (Mantenido) --- */


/* --- EFECTO DE TEXTO DESLIZANTE (CINTA) PARA EL OVERLAY --- */
.overlay-content a {
    position: relative;
    display: inline-block;
    overflow: hidden; /* evita que se vea el texto fuera */
}

.overlay-content a span {
    display: block;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

/* al pasar el mouse */
.overlay-content a:hover span {
    animation: slideUpOnce 0.45s ease forwards;
}

@keyframes slideUpOnce {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-100%);
        opacity: 0;
    }
    41% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Evita el corte de letras con descendentes (p, q, g, y, j) */
.overlay-content a {
    line-height: 0.8em;   /* más espacio vertical */
    padding-bottom: 10px;  /* evita que la cola se corte */
}





/* Redes sociales abajo a la derecha (en fila) */
.social-icons {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: row;      /* 🔥 ahora en fila */
    gap: 15px;
    z-index: 1000;
}

.social-icons img {
    width: 20px;
    height: 30px;
    filter: invert(1);        /* 🔥 los vuelve blancos */
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.3s ease; /* 🔥 delay */
}


.social-icons img:hover {
    transform: translateY(-3px) scale(1.1); /* hover elegante */
    opacity: 1;
}







/* Logo animación: baja desde arriba */
.overlay-logo {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Footer animación: sube desde abajo */


/* Social icons: suben desde abajo */
.overlay-social-icons {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Cuando overlay está abierto, activamos animación con retrasos */
.overlay.open .overlay-logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.overlay.open .overlay-footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.overlay.open .overlay-social-icons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}


.overlay-logo,
.overlay-footer,
.overlay-social-icons {
    opacity: 1;        /* visibles por defecto */
    transform: translateY(0); /* posición normal */
    transition: opacity 0.5s ease, transform 0.5s ease;
}



/* ==========================================================================
// --- SECCION DE MEDIA QUERIES ---
// ========================================================================== */


/* --- MEDIA QUERY para hacerlo responsivo en móviles (General 850px) --- */
@media (max-width: 850px) {
    .navbar {
        flex-direction: column;
        padding: 20px;
    }
    .menu {
        margin-top: 15px;
        flex-wrap: wrap; 
        justify-content: center;
    }
    .content-body {
        flex-direction: column; 
        padding: 20px;
    }
    .left-column {
        padding-right: 0;
        margin-bottom: 30px;
    }
    .body {
        padding-left: 40px;
        padding-right: 40px;
    }
}



/* ------------------------------
   TABLET Y MÓVIL GENERAL (<=768px) - Navbar, Overlay Menu/Footer, Modal, Social Icons
   ------------------------------ */
@media (max-width: 768px) {
    
    /* Navbar: Disposición horizontal Logo | Menu | Reservas */
    .navbar { 
        flex-direction: row; 
        padding: 20px 20px; 
        align-items: center; 
        justify-content: space-between; 
    }
    .logo img { 
        height: 80px; /* Tamaño del logo en tablet/móvil */
    }
    .menu {
        flex-grow: 1; /* Permite que el menú se centre */
        text-align: center;
        position: static;
        transform: none;
        gap: 10px;
        padding: 0 10px;
    }
    .reservas-btn { 
        font-size: 0.85em; 
        margin-left: 0; 
    }
    
    /* Overlay Menu: Tamaño de fuente fluido reducido */
    .overlay-content {
        gap: 15px;
    }
    .overlay-content a {
        font-size: 7vw; /* Se ajusta el tamaño de fuente usando Viewport Width (7vw) */
        line-height: 1.0; 
    }
    
    .overlay-footer{
    text-align: center;            /* Centra el texto */
    padding: 20px 0;               /* Espacio arriba y abajo */
    font-family: 'Urbanist', sans-serif;
    font-size: 1em;
    color: #5B6C8F;                  /* Cambia según tu fondo */
    background-color: transparent; /* O un color si quieres */
    position: absolute;               /* Fijo en la ventana */
    bottom: 0;                     /* Siempre abajo */
    left: 0;
    width: 100%;  
    }

    /* Modal: Ajuste de padding para tablet */
    .modal-content {
      padding: 40px 30px; 
      max-width: 90%;
      margin: 20px auto;
    }
    
    /* Social Icons: Posición y tamaño ajustados */
.social-icons {
        bottom: 50px; /* Posición vertical: 50px desde abajo */
        right: auto; /* Anular la posición fija a la derecha */
        left: 50%; /* Colocar el punto de anclaje al 50% del ancho */
        transform: translateX(-50%); /* Mover hacia atrás el 50% de su propio ancho para centrar */
        justify-content: center; /* Asegura que los iconos se centren internamente */
        width: auto; /* Permite que el contenedor solo mida el ancho de los iconos */
    }
    .social-icons img {
        width: 26px;
        height: 26px;
    }
}

/* ------------------------------
   C) TABLETS (>=481 && <=768)
   ------------------------------ */
@media (min-width: 481px) and (max-width: 768px) {
  /* Página Principal: Flujo vertical */
    /* MODIFICACIÓN: Aumentar Padding en Tablets */
  .html {
    overflow-x: hidden;
  }  
  .body{
    min-width: 100%;
  }
  .content-body { padding: 60px 40px; flex-direction: column; }
  .left-column { flex-basis: 100%; margin-left: 0; text-align: left; }
  .title-lg { font-size: 2.4em; }
  .title-lg2 { font-size: 10em; margin-left: 0; }
  
   /* Imagen de la tarta relativa y más grande que en móvil */
    /* MODIFICACIÓN: Posicionamiento de la Tarta */
  #main-image { 
      position: relative !important; 
      max-width: 75%; 
      height: auto; 
      margin: 30px auto; 
      display: block; 
      left: auto !important; 
      right: auto !important; 
      top: auto !important; 
      transform: none; 
      margin-top: -80px !important; /* Mueve la imagen hacia arriba */
      z-index: 1;
  }
    .info-sm { 
        margin-top: -50px; /* Mueve el info-sm hacia arriba */
        padding-top: 80px; /* Compensación para empujar el texto hacia abajo */
        position: relative;
        z-index: 10;
    }
  
  .scrolling-text-container { position: relative; margin-top: 300px; width: 100%; left: 50%; transform: translateX(-50%); }
  
}



/* ------------------------------
   B) MÓVILES PEQUEÑOS (<=480)
   ------------------------------ */
@media (max-width: 480px) {

 
  /* Modal Ajuste Extremo */
  .modal-content {
max-width: 100%;

  }
.overlay{
overflow: hidden;

}
.overlay-open{
 overflow: hidden;
}


/* LOGO más pequeño */
.navbar .logo img {
    width: 25%;   /* antes 100%, ajusta al gusto */
    height: auto;
}

/* Menú más pequeño SIN alterar la posición */
.menu a {
    font-size: 0.65em;   /* más chico */
    padding: 4px 6px;    /* más chico */
    /* NO toco margin-top NI nada de posición */
    margin-top: -40px;
}

/* Botón reservas más pequeño SIN moverlo */
.reservas-btn {
    font-size: 0.65em;
    padding: 4px 8px;
}


.menu {
    position: absolute;      /* para sacarlo del flujo y poder centrarlo */
    left: 50%;               /* centro horizontal */
    transform: translateX(-50%);  /* ajuste exacto */
    text-align: center;
}



  /* Overlay Menu: Usar un valor un poco más grande en móviles muy pequeños para impacto */
  .overlay-content a {
      font-size: 8vw; /* Ajustado a 8vw */
  }

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: -10px; /* separa del footer */
}
.social-icons img {
    width: 26px;
    height: 26px;
}

   html, body {
    min-height: 100vh; /* siempre cubre pantalla */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
}

 
  /* Este es el bloque que contiene TODO tu contenido de la página */
  .main-wrapper {
    flex: 1; 
    display: flex;
    flex-direction: column;

    /* CLAVE: centrado sin alterar los espacios internos */
    justify-content: center;
  }

  /* El contenido interno mantiene tus espacios originales */
  .content-body {
    margin: 0 auto;     /* solo centra horizontal → NO toca márgenes internos */
  }


  /* Página Principal: Flujo vertical */
    /* MODIFICACIÓN: Aumentar Padding en Móviles */
 


/* Para title-lg */
.left-column {
     max-width: 310px;
    margin: 0 auto;  /* centra horizontalmente */
    text-align: left; /* o center si quieres centrar el texto */
}

.title-lg {
    font-size: 2.2em;
    margin-bottom: 1.2rem;
    margin-top: 0rem;
}

.title-lg2 {
    font-size: 5.3em;
    white-space: normal;
    text-align: left; 
}


  


/* Imagen */
#main-image {
width: 130%;
    max-width: 350px;   /* límite para que no se haga gigante */
    height: auto;
    
    display: block;
    margin: 130px auto;  /* siempre centrada, sin empujar nada */
    left: -5%;

    position: relative;
    transform: none !important;  /* cancela desplazamientos raros */
    z-index: 5;
}



  
 .info-sm {
    max-width: 100%;        /* ahora sí será más ancho */
    margin: 0 auto;        /* centra el bloque */
    padding-top: 30px;
    position: relative;
    z-index: 10;
    font-size: 1em;
    text-align: center;
}

    .scrolling-text-container { position: absolute; margin-top: 415px; width: 100%; left: 50%; transform: translateX(-50%); }
 
.modal {
    display: none; /* inicia oculto */
    position: fixed;
    z-index: 999999 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5b6c8fc0;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;     /* centra vertical */
    padding: 10px;           /* espacio entre los bordes de la pantalla y el contenido */
    box-sizing: border-box;
    pointer-events: auto;
}

.modal-content {
    background-color: #fff;   /* tu contenido interno */
    max-width: 300px;         /* ancho máximo */
    width: 100%;              /* ocupa todo el ancho disponible dentro del padding */
    max-height: 90%;          /* altura máxima para que no desborde la pantalla */
    overflow-y: auto;         /* scroll si el contenido es demasiado grande */
    border-radius: 2px;       /* opcional, bordes redondeados */
    padding: 30px;            /* padding interno */
    box-sizing: border-box;
}

/* Botón cerrar */
.close-btn {
    position: absolute;
    top: 0px;
    right: 10px;
}

footer.footer {
  margin-top: auto; /* empuja el footer al fondo */
   
    width: 100%;
    text-align: center;
    padding: 10px 0;
}


    .overlay-footer-right a {
        font-size: 10px;
    }


     
    /* Overlay Menu: Tamaño de fuente fluido reducido */
    .overlay-content {
        gap: 15px;
    }
    .overlay-content a {
        font-size: 12vw; /* Se ajusta el tamaño de fuente usando Viewport Width (7vw) */
        line-height: 1.0; 
    }
    
    .overlay-footer-right {
    text-align: center;            /* Centra el texto */
    padding: 10px 0;               /* Espacio arriba y abajo */
    font-family: 'Urbanist', sans-serif;
    font-size: 1em;
    color: #5B6C8F;                  /* Cambia según tu fondo */
    background-color: transparent; /* O un color si quieres */
    position: absolute;               /* Fijo en la ventana */
    bottom: 0;                     /* Siempre abajo */
    left: 0;
    width: 100%;  
    }

     .overlay-footer{
    text-align: center;            /* Centra el texto */
    padding: 30px 0;               /* Espacio arriba y abajo */
    font-family: 'Urbanist', sans-serif;
    font-size: 1em;
    color: #5B6C8F;                  /* Cambia según tu fondo */
    background-color: transparent; /* O un color si quieres */
    position: absolute;               /* Fijo en la ventana */
    bottom: 0;                     /* Siempre abajo */
    left: 0;
    width: 100%;  
    }
    



    
/* Ajuste general del body para esta página */
  body.maintenance-page {
        overflow: auto; /* permite scroll */
    }


.maintenance-content {
    display: flex;
    flex: 1; /* Ocupa el espacio restante entre el header y el footer */
    max-width: 1600px;
    width: 100%;
    margin: auto; /* Centrar horizontalmente */
    /* Se mantiene padding vertical reducido para maximizar el espacio */
    padding: 0 140px; 
    position: relative;
    box-sizing: border-box; 
    align-items: stretch;
}
.left-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* texto arriba */
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 5vw;
}

.bridge-title {
    font-family: 'Outfit', sans-serif;
    /* Tamaño ajustado para que quepa en el viewport (mantenido) */
    font-size: 3.5vw; 
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    line-height: 1.3;
    text-transform: uppercase;
     animation: fadeInUp 1.5s ease-out;
      max-width: 700px;
}

.bridge-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 15px;
      font-weight: 400;
    line-height: 1.5;
    max-width: 840px; /* Limitar el ancho del texto */
     animation: fadeInUp 1.5s ease-out;
}



.descargar-servicios-btn {
    margin-top: 15px; /* solo separa del último párrafo */
}
.descargar-servicios-btn:hover {
    background-color: #d01755;
    transform: scale(1.03);
}


.social-links {
    margin-top: 30px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    display: flex;
    /* 💥 CAMBIO CLAVE: Usamos 'gap' para la separación horizontal sin divisores */
    gap: 25px; 
    
    margin-bottom: 20px;
}

.social-links a {
    /* Color inicial BLANCO */
    color: white; 
    text-decoration: none;
    transition: color 0.3s;
    /* 💥 CAMBIO CLAVE: Aumentamos el tamaño (de 1.5em a 2em) */
    font-size: 2em; 
    line-height: 1; 
}

.social-links a:hover {
    /* Color rosa en hover */
    color: #E91E63;
}

.right-section {
    /* 🚨 CAMBIO DE DISTRIBUCIÓN: Le damos menos espacio al contenedor del GIF (25% del ancho disponible) */
    flex: 0.5; 
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* Alinear el GIF a la parte inferior */
    position: relative; /* Contexto de posicionamiento */
    /* 🚨 CAMBIO: Permite que el GIF se desborde fuera del contenedor para moverlo a la derecha */
    overflow: visible; 
}

.maintenance-gif {
    /* Posicionamiento absoluto */
    position: absolute;
    bottom: 0; 
    /* 💥 CAMBIO CLAVE: Mover el GIF mucho más a la derecha (10vw fuera del contenedor) */
    right: -25vw; 
    
    /* Mantiene la altura al 100% de la sección derecha */
    width: auto;
    max-width: none;
    
    /* 💥 CAMBIO CLAVE: Aumentamos la escala para una presencia dominante */
    transform: scale(1.3); 
    transform-origin: bottom right;

    object-fit: contain;
    pointer-events: none;
    /* CRÍTICO: El GIF va por encima de todo */
    z-index: 15; 
}
    
}











/* -------------------------------------------------------
   💻 iPad Pro 12.9 vertical (1366px de alto, 1024px ancho)
------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* ajustes aquí */
      #main-image {
        width: 55%;
        top: 200px;
        right: 50px;
    }

    .title-lg2 {
        font-size: 12em;
    }
}

/* --- RESPONSIVE ESPECÍFICO EQUIPO (Móvil/Tablet) --- */
@media (max-width: 900px) {
    
   
/* LOGO más pequeño */
.navbar .logo img {
    width: 25%;   /* antes 100%, ajusta al gusto */
    height: auto;
}

/* Menú más pequeño SIN alterar la posición */
.menu a {
    font-size: 0.85em;   /* más chico */
    padding: 4px 6px;    /* más chico */
    /* NO toco margin-top NI nada de posición */
    margin-top: -40px;
}

/* Botón reservas más pequeño SIN moverlo */
.reservas-btn {
    font-size: 0.85em;
    padding: 4px 8px;
}


.menu {
    position: absolute;      /* para sacarlo del flujo y poder centrarlo */
    left: 50%;               /* centro horizontal */
    transform: translateX(-50%);  /* ajuste exacto */
    text-align: center;
}
    
    .contenedor-principal{
        width: 100%;
        padding-top: 0px;
    }
    /* Contenido de Equipo */
    .team-title {
        font-size: 8vw;
    }
    
    .team-subtitle {
          font-family: 'Urbanist', sans-serif;
    font-size: 0.9rem;
    color: white;
    margin-bottom: 18px;
    margin-top: -1PX;
      font-weight: 400;
    line-height: 1.5;
    max-width: 240px; /* Limitar el ancho del texto */
     animation: fadeInUp 1.5s ease-out;
 

    }


      /* Oculta el texto original en móvil */
    .team-subtitle {
        font-size: 0;        /* truco para esconder texto sin romper el layout */
        line-height: 0;
    }

    /* Inserta NUEVO TEXTO solo en móvil */
    .team-subtitle::after {
        content: "Cocinamos con método, chispa y visión. Cada proyecto es único."; /* Nuevo texto */
        font-size: 1rem;     /* ajusta si quieres más grande */
        line-height: 1.5;
        display: block;
        color: white;        /* o el color que uses en la web */
        font-family: 'Urbanist', sans-serif;
           max-width: 240px; /* Limitar el ancho del texto */
     animation: fadeInUp 1.5s ease-out;
 
    }


    /* MODIFICACIÓN: Reducir separación */
 .equipo-grid {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 65%;
    margin-top: 3vw; 
    margin-right: 0vw; 
    position: relative;
    padding-bottom: 0px; 
}

    
    /* MODIFICACIÓN: Aumentar el tamaño de las galletas (Lucía) */
    .bloque-miembro {
        width: 100%; 
        height: 50vw; 
        max-width: 100%; /* Galleta más grande */
        max-height: 50%;
        margin-top: -41px;
    }
    
    /* MODIFICACIÓN: Ajuste proporcional para Xavi */
    .equipo-grid > .bloque-miembro:first-child {
        width: 80%; 
        height: 50vw;
        max-width: 77%; /* Galleta más grande */
        max-height: 50%;
        margin-bottom: -10px;
    }

    
    
    /* MODIFICACIÓN: Nombre debajo de la galleta (fijo y sin hover) */
    .nombre-lateral {
        transform: none; 
        order: 2; 
        width: 20%; 
        text-align: center !important; 
        margin-top: 0x; 
        margin-bottom: 0px; 
        margin-right: 100px;
        font-size: 4vw; 
        max-width: none;
        z-index: 5;
    }
    
    #nombreXavi {
        left: 10%;
        top: 40%;
        z-index: 5;
    }

    #nombreLucia {
        left: 15%;
        top: 50%;
        z-index: 5;
    }
    
    .cookie-img {
    pointer-events: auto;
    position: absolute;
    cursor: pointer;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    top: -5%; 
    left: 13%; 
    width: 85%;
    height: 100%;
    display: block;
    
    /* 🔥 ARREGLA EL PEDO */
    object-fit: contain; 
    image-rendering: auto;
    max-width: none;      /* evita escalados raros CON LA WEB */
    max-height: none;     /* evita que CHROME Y LOS DEMAS limiten la imagen */
    aspect-ratio: auto;   /* hace que la imagen respete su forma real */
    
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    z-index: 10 !important; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); 
}

    /* Imagen rota CONFIGURACION específica para Xavi */
.equipo-grid > .bloque-miembro:first-child .cookie-img.rota {
    top: -3%;
    left: 9%;
    transform: scale(1.4);
}
/* Imagen rota CONFIGURACION específica para LU */
.equipo-grid > .bloque-miembro:nth-child(2) .cookie-img.rota {
    top: 0%;
    left: 8%;
    transform: scale(1.2);
}

    /* Ocultar el texto de hover y forzar la visibilidad del nombre original */
    .nombre-lateral .name-hover-sm { 
        display: none !important; /* Force hide hover text */
    }
    .nombre-lateral .name-original {
        display: block !important; /* Force show original text */
    }
    
    /* Anular el efecto de hover en el media query (sin cambio de texto) */
    .cookie-container:hover ~ .nombre-lateral .name-original {
        display: block !important; 
    }
    .cookie-container:hover ~ .nombre-lateral .name-hover-sm {
        display: none !important; 
    }
    .cookie-container,
    .cookie-content .btn-portfolio,
    .navbar a {
        /* Esta regla es clave para los navegadores móviles basados en WebKit (Android/iOS) */
        -webkit-tap-highlight-color: transparent !important;
        -moz-tap-highlight-color: transparent !important;
    }






    /* RESTO DE PAGINAS */
    body.team-page .cookie-hint-mobile {
        display: block;
        bottom: 140px; 
        right: 40px;
    }
   
    .btn-portfolio {
    background-color: #E91E63;
    color: white;
    font-family: 'Urbanist', sans-serif;
    font-weight: 900; 
    font-size: 0.8em;
    text-transform: uppercase;
    border: none;
    padding: 2px 5px; 
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    letter-spacing: 1px;
    z-index: 12; 
    margin-top: -15px;
}
    .rol-titulo {
        font-size: 1.4rem;
    }
    
    .nombre-lateral.oculto {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

    /* --- PÁGINAS PUENTE (Mantenimiento) --- */
    body.maintenance-page {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto; 
        min-height: 100vh;
    }
    
    .maintenance-content {
        /* Texto primero, luego GIF */
        flex-direction: column; 
        padding: 20px 5vw;
        align-items: center;
    }

    .left-section {
        flex: 1; 
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px; 
        width: 100%;
        align-items: center; 
        text-align: center;
        display: contents;
    }
    .bridge-subtitle {
        text-align: center;
        max-width: auto;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 0;
        order: 3;
        margin: 0;
    }
    .social-links {
        justify-content: center;
    }

    
    .bridge-title {
        font-size: 8vw; 
        order:3;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .right-section {
        order: 2; 
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: -90px;
        overflow: scroll; 
        padding: 0px;
        margin-top: 0;
    }
    
    .maintenance-gif {
        position: static; 
        transform: none;
        transform-origin: right;
        width: 90%; 
        max-width: 400px;
        height: auto;
        z-index: 5;
        margin-top:-110px;
    }




    

    /* --- FORZAR que la galleta rota esté por encima del nombre lateral --- */

/* Aseguramos que el bloque padre sea referencia y tenga z-index base */
.bloque-miembro {
  position: relative;    /* ya lo tienes, pero por si acaso */
  z-index: 0;            /* base limpia */
}

/* Elevamos el contenedor de cookie cuando esté visible / clickeado */
.cookie-container {
  position: relative;    /* ya lo tienes, reforzado */
  z-index: 1000;         /* host con prioridad sobre el nombre lateral */
  pointer-events: auto;
}

/* La imagen rota debe ir por encima de todo */
.cookie-img.rota {
  z-index: 1100 !important;   /* forzamos prioridad absoluta */
  position: absolute;         /* ya lo tienes, pero por si acaso */
  pointer-events: auto;       /* seguir permitiendo clicks si hace falta */
}

/* Cuando se activa la versión rota (clase clicked), nos aseguramos */
.cookie-container.clicked .cookie-img.rota {
  opacity: 1 !important;
  z-index: 1200 !important;   /* más alto aún mientras esté visible */
  transform: translateZ(0);    /* forzar composición en GPU, evita algunos bugs */
}

/* Nos aseguramos de que el nombre lateral quede por debajo */
.nombre-lateral {
  position: absolute;   /* ya lo tienes */
  z-index: 50;          /* muy por debajo de la galleta rota */
  /* si tienes transform en nombre-lateral, mantenlo; aquí su z-index seguirá siendo menor */
}

/* Si quieres que la galleta rota oculte por completo visualmente el texto (no solo z-index) */
.cookie-container.clicked ~ .nombre-lateral,
.cookie-container.clicked + .nombre-lateral {
  visibility: hidden;   /* lo hace invisible, ocupa espacio pero no se ve */
  /* alternativamente: opacity: 0; pointer-events: none; */
}

/* Contenido que aparece cuando la galleta está rota */
.cookie-container.clicked .cookie-content {
    z-index: 1250;           
   
    display: flex;           /* lo hacemos visible de inmediato */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    opacity: 1 !important;
    transition: none !important;
}

/* Rol-titulo y botón */
.cookie-container.clicked .rol-titulo,
.cookie-container.clicked .btn-portfolio {
    z-index: 1251; 
    display: block;          /* aparece inmediatamente */
}

/* Cuando NO está clickeada, ocultamos completamente */
.cookie-container:not(.clicked) .cookie-content,
.cookie-container:not(.clicked) .rol-titulo,
.cookie-container:not(.clicked) .btn-portfolio {
    display: none !important;   /* desaparece instantáneamente */
}

}