/* Estilos generales */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
    overflow-x: hidden;
    background-color: #f5f5f5;
    scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- KEYFRAMES --- */
@keyframes drop-and-blink {
    0% { transform: translateY(-250px); opacity: 0; }
    70% { transform: translateY(0); opacity: 0.8; }
    80% { opacity: 0.6; }
    90% { opacity: 0.8; }
    95% { opacity: 0.6; }
    100% { transform: translateY(0); opacity: 0.8; }
}

/* SLIDER PRINCIPAL */
.slider-container { position: relative; z-index: 1; width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-image 1.5s ease-in-out; }

/* Selector de idiomas (Antiguo, no usado, pero lo mantengo por si acaso) */
.language-selector {
    position: absolute;
    top: 25px;
    right: 30px;
    z-index: 10;
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 15px; 
}
.language-selector a {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    transition: color 0.3s ease;
}
.language-selector a:hover {
    color: #FFD13F;
}
.language-selector img {
    width: 24px;
    height: auto;
    margin-right: 8px;
    border-radius: 3px;
}

/* Contenido Principal */
.main-content-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: rgba(0, 0, 0, 0.4); padding: 20px; padding-bottom: 5vh; }
.main-logo { max-width: 250px; margin-bottom: 20px; }
.tagline { font-size: 1.5rem; margin-bottom: 30px; text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7); transition: opacity 0.5s ease-in-out; font-weight: bold; }
.buttons-container { margin-bottom: 30px; display: flex; gap: 15px; }
.btn { display: inline-block; padding: 12px 25px; border: 1px solid #fff; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; font-weight: bold; }
.btn:hover { background-color: #1226aa; color: #FFD13F; border-color: #FFD13F; }
.contact-info { font-size: 1rem; line-height: 1.5; margin-bottom: 30px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); }
.contact-info a { text-decoration: none; color: white; transition: color 0.3s ease;}
.contact-info a:hover { color: #1226aa; }
.social-icons a { color: #fff; font-size: 1.8rem; margin: 0 10px; text-decoration: none; transition: color 0.3s ease; }
.social-icons a:hover { color: #1226aa; }

/* Botón para subir arriba */
.scroll-to-top { position: fixed; bottom: 50px; right: 50px; background-color: #1226aa; color: #FFD13F; width: 45px; height: 45px; border-radius: 3px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; z-index: 99; box-shadow: 0 2px 10px rgba(0,0,0,0.2); opacity: 0.8; }
.scroll-to-top.show { opacity: 0.8; visibility: visible; }
.scroll-to-top:hover { background-color: #0d1e8c; opacity: 1; }

/* Contenedores de secciones */
.section-container {
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

/* Sección Mini Slider */
.mini-slider-section {
    background-color: #f5f5f5;
    position: relative;
    z-index: 2; 
    margin-top: -100px;
    padding: 30px 0;
}
.mini-slider-container { width: 100%; overflow: hidden; }
.mini-slider-group { display: flex; }
.mini-slider-item { height: 320px; background-size: cover; background-position: center; flex-shrink: 0; margin-right: 30px; width: calc(33.333% - 20px); }

/* Sección Sobre Nosotros */
.about-us-section { 
    padding: 40px 20px;
    background-color: #f5f5f5; 
    text-align: center; 
}
.golfo-color-logo { max-width: 200px; margin-bottom: 30px; }
.about-us-text { max-width: 800px; margin: 0 auto; font-size: 20px; color: #000000; font-weight: 400; line-height: 1.4; }

/* Sección Taberna */
.taberna-section { 
    padding: 40px 20px;
    background-color: #f5f5f5; 
}
.taberna-section .section-container {
    flex-direction: row;
    justify-content: center; /* Centra el bloque de contenido (texto + slider) */
}
.taberna-slider-container { flex: 1; min-width: 300px; max-width: 750px; height: 520px; overflow: hidden; position: relative; }
.taberna-slider-image-group { display: flex; height: 100%; }
.taberna-slider-item { 
    height: 100%; 
    background-size: contain; /* CAMBIO 1: para mostrar la imagen completa */
    background-position: center; 
    background-repeat: no-repeat; /* ADICIÓN 1: para evitar la repetición */
    flex-shrink: 0; 
    width: calc(50% - 15px); 
    margin-right: 30px; 
}
.taberna-slider-item:last-child { margin-right: 0; }
.taberna-content { flex: 1; min-width: 300px; max-width: 500px; text-align: left; }
.taberna-content h2 { color: #1226aa; font-size: 44px; margin-bottom: 20px; }
.taberna-content p { margin-bottom: 20px; font-size: 20px; color: #000000; font-weight: 400; line-height: 1.4; max-width: 380px; }
.taberna-content h3 { color: #1226aa; font-size: 44px; margin-top: 30px; margin-bottom: 10px; }

/* Sección Barra de Pintxos y Bodega */
.pintxos-bodega-section {
    padding: 0 20px 40px;
    background-color: #f5f5f5;
}
.pintxos-bodega-section .section-container {
    flex-direction: row-reverse;
    justify-content: center; /* Centra el bloque de contenido (texto + imagen) */
}
.pintxos-bodega-slider-container {
    flex: 1;
    min-width: 300px;
    max-width: 750px;
    height: 520px;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 1.2s ease-in-out;
}
.pintxos-bodega-content {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    text-align: left;
}
.pintxos-bodega-content h2 { color: #1226aa; font-size: 44px; margin-bottom: 20px; }
.pintxos-bodega-content p { 
    margin-bottom: 20px;
    font-size: 20px;
    color: #000000;
    font-weight: 400;
    line-height: 1.4;
    max-width: 100%;
    text-align: left;
}
.bodega-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.bodega-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
    transition: color 0.3s ease;
}
.bodega-link-item:hover {
    color: #1226aa;
}
.bodega-link-item img {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}
.bodega-link-item:hover img {
    transform: scale(1.05);
}
.pintxos-bodega-content .note { 
    font-size: 0.75rem;
    color: #555;
    margin-top: 10px;
    line-height: 1.3;
    text-align: center;
}

/* Sección de Banner */
.banner-section {
    background-image: url('img/banner.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    text-align: center;
    padding: 200px 20px;
    margin-top: 40px;
}
.banner-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}
.banner-section h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.banner-section p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}
.euskadi-logo {
    max-width: 180px;
    height: auto;
    margin-top: 20px;
}

/* Sección del Footer */
.slider-footer-section {
    background-color: #f5f5f5;
    padding: 40px 0;
}
.slider-footer-container {
    width: 100%;
    overflow: hidden;
}
.slider-footer-group {
    display: flex;
}
.slider-footer-item {
    height: 400px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    width: calc(33.333% - 20px);
    margin-right: 30px;
}
.slider-footer-item:last-child {
    margin-right: 0;
}

/* Footer */
.main-footer {
    background-color: #1226aa;
    color: #ffffff;
    text-align: center;
    padding: 60px 20px;
    margin-top: 40px;
}
.group-logo {
    max-width: 200px;
    margin-bottom: 20px;
}
.footer-links-main {
    font-size: 1.1rem;
    margin-bottom: 30px;
    letter-spacing: 1px;
    font-weight: bold;
}
.footer-links-legal {
    font-size: 0.8rem;
    opacity: 0.8;
}
.footer-links-main a, .footer-links-legal a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}
.footer-links-main a:hover, .footer-links-legal a:hover {
    color: #e0e0e0;
}

/* Media queries */
@media (max-width: 1300px) {
    .taberna-section, .pintxos-bodega-section {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* * CAMBIOS SOLICITADOS PARA MÓVIL/TABLET (<= 1000px):
 * 1. Reordenar: Imagen debajo del Contenido en la sección Taberna.
 * 2. Centrar el texto en el párrafo de la sección Taberna.
 * 3. FIX: Asegurar centrado y ancho completo para 769px-1000px.
 */
@media (max-width: 1000px) {
    /* El selector de idioma ya tiene sus estilos para este breakpoint en el header */
    
    .section-container {
        flex-direction: column !important; /* Apila todos los elementos en columna */
    }
    
    /* Reordena la sección de Taberna: pone el slider (taberna-slider-container) debajo del contenido (taberna-content) */
    .taberna-section .section-container {
        flex-direction: column-reverse !important; 
    }

    /* FIX: Centra el texto y asegura el ancho completo para los bloques de contenido (Taberna y Pintxos/Bodega) cuando están apilados */
    .taberna-content, .pintxos-bodega-content {
        text-align: center;
        width: 100%; /* <<-- FIX CLAVE: FUERZA EL ANCHO COMPLETO */
        max-width: none; /* <<-- FIX CLAVE: IGNORA EL MAX-WIDTH DE ESCRITORIO */
    }
    
    /* Centra el párrafo y su contenido dentro del bloque de Taberna */
    .taberna-content p {
        text-align: center; 
        margin-left: auto; /* Centra el bloque de párrafo si tiene un max-width */
        margin-right: auto;
        max-width: 100%; /* Asegura que la regla de centrado de bloque funcione */
    }

    /* --- ESTILOS DE SLIDER PARA DISPOSITIVOS PEQUEÑOS --- */
    /* 1. Anulamos la altura fija del contenedor principal para que se adapte al contenido. */
    .taberna-slider-container {
        height: auto;
        width: 100%;
        max-width: none;
    }

    /* 2. Anulamos la altura del 100% del grupo de imágenes. */
    .taberna-slider-image-group {
        height: auto;
    }

    /* 3. Definimos la proporción de la imagen. La altura será automática en función del ancho. */
    .taberna-slider-item {
        width: 100%;
        margin-right: 0;
        height: 575px; /* Proporción 4:3. Puedes cambiarla a 16/9, 3/2, etc., según tus imágenes. */
        background-size: contain; 
        background-repeat: no-repeat; 
        background-position: center; 
    }
    /* --- FIN DE ESTILOS DE SLIDER --- */
    
    /* El resto de estilos para 900px que aplican a 1000px */
    .language-selector {
        flex-direction: row; 
        justify-content: center;
        width: 100%;
        top: 15px;
        right: 0;
        gap: 10px;
    }
    .banner-section h1 { font-size: 2.5rem; }
    .banner-section p { font-size: 1rem; }
    .slider-footer-item { width: calc(50% - 15px); }
}

@media (max-width: 768px) {
    .language-selector {
        top: 10px;
        right: 10px;
        gap: 5px; 
    }
    .language-selector a {
        font-size: 0.75rem; 
    }
    .language-selector img {
        width: 18px; 
    }
    .mini-slider-section { margin-top: -80px; }
    .mini-slider-item { width: calc(50% - 15px);  }
    .about-us-section, .taberna-section, .pintxos-bodega-section { padding: 30px 20px; }
    
    /* Ajustes específicos de altura y ancho para sliders en este breakpoint */
    .taberna-slider-container, .pintxos-bodega-slider-container { height: 350px; width: 100%; max-width: none; }
    
    .taberna-content, .pintxos-bodega-content { text-align: center; width: 100%; max-width: none; } /* Redundante, pero no hace daño. */
    
    .taberna-content h2, .taberna-content h3, .pintxos-bodega-content h2 { font-size: 36px; }
    .social-icons a { font-size: 1.4rem; }
    .fixed-buttons-wrapper { animation: none; opacity: 1; right: 5px; transform: scale(0.7); transform-origin: bottom right; bottom: 85px; }
    .scroll-to-top { bottom: 25px; right: 25px; }
    .bodega-links { flex-direction: column; gap: 20px; }
    .banner-section h1 { font-size: 2rem; }
    .banner-section p { font-size: 0.9rem; }
    .slider-footer-item { width: 100%; margin-right: 0; }
    .footer-links-main, .footer-links-legal { line-height: 1.5; }
}
@media (max-width: 480px) {
    .mini-slider-section { margin-top: -60px; }
    .mini-slider-item { width: 100%; margin-right: 0; }
    .fixed-buttons-wrapper { right: -10px; transform: scale(0.65); bottom: 65px; }
    .scroll-to-top { transform: scale(0.9); transform-origin: bottom right; bottom: 15px; right: 15px; }
    .banner-section h1 { font-size: 1.5rem; }
    .banner-section p { font-size: 0.8rem; }
}

/* --- NUEVO SELECTOR DE IDIOMAS --- */
.language-selector-dropdown {
    /* Mantener en static para el flujo de escritorio */
    position: static; 
}
.dropdown-toggle {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dropdown-toggle:hover, .dropdown-toggle.active {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: #FFD13F;
}

.dropdown-toggle img {
    width: 24px;
    height: auto;
    border-radius: 3px;
}

.dropdown-toggle .fa-angle-down {
    transition: transform 0.3s ease;
}

.dropdown-toggle.active .fa-angle-down {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    min-width: 150px;
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.dropdown-menu.visible {
    display: flex;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    transition: color 0.3s ease;
}

.dropdown-menu a:hover, .dropdown-menu a.active {
    color: #FFD13F;
}

/* --- ENCABEZADO FIJO (STICKY HEADER) --- */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1226aa;
    padding: 15px 50px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Por defecto para escritorio */
}

/* Esconder el logo de escritorio por defecto */
.logo-desktop {
    display: none;
}

.sticky-header .logo img {
    height: 55px; 
}

.header-phone, .header-button {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.header-phone:hover {
    color: #FFD13F;
}

/* Estilos específicos para los botones */
.header-button {
    padding: 8px 15px;
    border: 2px solid #fff; 
    border-radius: 5px; 
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.header-button:hover {
    background-color: #FFD13F;
    border-color: #FFD13F;
    color: #1226aa;
}

.menu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Ajuste para el contenido del cuerpo para que no quede oculto */
body {
    padding-top: 85px; 
}

/* Ocultar el contenedor de escritorio por defecto */
.header-right-content-desktop {
    display: none;
}

/* --- CAMBIOS PARA EL ENCABEZADO FIJO (STICKY HEADER) PARA MÓVIL (<= 1000px) --- */
@media (max-width: 1000px) {
    /* Muestra las filas y oculta el contenedor de escritorio */
    .header-top-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .header-bottom-row {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 15px;
    }
    
    .sticky-header {
        flex-direction: column;
        align-items: center;
        padding: 15px 20px;
        justify-content: center;
    }

    .sticky-header .logo img {
        height: 45px;
    }

    .logo-desktop {
        display: none;
    }
    
    .header-right-content-desktop {
        display: none;
    }
}

/* --- CAMBIOS PARA EL ENCABEZADO FIJO (STICKY HEADER) PARA ESCRITORIO (> 1000px) --- */
@media (min-width: 1001px) {
    /* Alinea el logo a la izquierda y el contenido a la derecha */
    .sticky-header {
        flex-direction: row; 
        justify-content: space-between; /* Separa el logo del contenido de la derecha */
        padding: 15px 50px; 
    }
    
    /* Muestra el logo de escritorio */
    .logo-desktop {
        display: block;
    }

    /* Oculta los contenedores móviles */
    .header-top-row, .header-bottom-row {
        display: none;
    }

    /* Muestra y configura el contenedor principal para los elementos del escritorio */
    .header-right-content-desktop {
        display: flex;
        align-items: center;
        gap: 30px; /* Espacio entre el Teléfono, el Grupo de Botones, el Selector de Idioma y el Menú de Hamburguesa */
    }

    /* Agrupador para los botones de RESERVA y CARTA */
    .header-buttons-group {
        display: flex;
        gap: 15px; /* Espacio entre los botones */
    }

    /* El botón del menú de hamburguesa (.menu-toggle) se mantiene visible porque no tiene 'display: none;' */
}

/* --- ESTILOS DEL MENÚ DE HAMBURGUESA (OVERLAY) --- */
.full-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1226aa; /* Color de fondo del menú */
    z-index: 999; /* Asegura que esté por encima de todo, pero por debajo del sticky header (z-index: 1000) */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Estado inicial: oculto fuera de la pantalla */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s 0.4s;
    overflow-y: auto; /* Para que sea scrollable si hay muchos elementos */
    padding-top: 85px; /* Para que el contenido no quede bajo el header */
}

.full-menu-overlay.open {
    /* Estado visible */
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s 0s;
}

.menu-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 30px;
}

.menu-item {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.menu-item:hover {
    color: #FFD13F;
}

/* Opcional: Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {
    .menu-item {
        font-size: 1.4rem;
    }
}

/* --- ESTILOS DEL MENÚ OVERLAY: ENLACES SOCIALES E ICONOS --- */

/* Contenedor principal de los enlaces sociales y de ubicación en el menú */
.menu-social-links {
    margin-top: 40px; /* Espacio superior para separarlo de los enlaces de navegación */
    display: flex;
    justify-content: center;
}

/* Contenedor de los iconos de Ubicación, Facebook e Instagram */
.social-icons-row {
    display: flex;
    gap: 30px; /* Espacio horizontal consistente entre todos los iconos */
}

/* Estilo para todos los iconos dentro de la fila */
.social-icons-row a {
    color: #ffffff; /* Color de texto blanco */
    text-decoration: none;
    transition: color 0.3s ease;
    /* Reset de estilos para asegurar que solo se aplique el tamaño del icono */
    display: block; 
    line-height: 1; /* Para que el tamaño del icono sea el dominante */
}

/* Estilo para los elementos <i> (los iconos reales) */
.social-icons-row a i {
    font-size: 2.5rem; /* Tamaño consistente para los 3 iconos */
}

.social-icons-row a:hover {
    color: #f0c340; /* Color de acento al pasar el ratón */
}