/* ========================================================= BERRIA BY SAGARDI — hoja de estilos Réplica estática de https://berriasagardi.com.ar/ Medidas tomadas del original con el navegador a 1920 px. 0. Variables y base 1. Tipografías 2. Cabecera y menú 3. Hero 4. Franja "Descubre la experiencia vasca" 5. Gastronomía 6. Sabores con nombre y origen 7. El espacio 8. Cocineros vascos 9. Pie 10. Pop-up de eventos corporativos 11. Parallax y animaciones 12. Responsive ========================================================= */ /* ========================================================= 0. VARIABLES Y BASE ========================================================= */ :root { --verde: #012b32; /* rgb(1,43,50) — verde petróleo de marca */ --crema: #eef5e9; /* rgb(238,245,233) — crema verdoso */ --negro: #131511; /* rgb(19,21,17) — fondo del hero */ --blanco: #ffffff; --cabecera-h: 90px; } * { box-sizing: border-box; } /* overflow-x tambien en html: el grupo derecho de la cabecera arranca desplazado fuera de pantalla (translateX 120%) y, al ser la cabecera position: fixed, sin esto asoma barra de scroll horizontal. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--blanco); color: var(--verde); font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 16px; line-height: 24px; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h2, h3, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } ::selection { background: var(--verde); color: var(--crema); } ::-moz-selection{ background: var(--verde); color: var(--crema); } /* ========================================================= 1. TIPOGRAFÍAS - "Coke" es el nombre con el que el original declara la familia Cako (titulares de ficha y botones). Los .woff2 son del propio dominio, así que están en ./fuentes/. - "cardea-lining" es un kit de Adobe Fonts: se enlaza desde el (use.typekit.net/gnu6xjv.css). No se puede alojar. ========================================================= */ @font-face { font-family: 'Coke'; src: url('./fuentes/Cako-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Coke'; src: url('./fuentes/Cako-Black.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Coke'; src: url('./fuentes/Cako-Black.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================= 2. CABECERA Y MENÚ Sobre el hero la barra es transparente y solo se ve la hamburguesa; al bajar aparece la barra verde completa. ========================================================= */ .cabecera { position: fixed; top: 0; left: 0; width: 100%; height: var(--cabecera-h); display: flex; align-items: center; padding: 0 30px; background: transparent; transition: background-color .35s ease; z-index: 100; } .cabecera.fija { background: var(--verde); } .hamburguesa { background: var(--verde); border: none; color: var(--crema); width: 36px; height: 36px; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .35s ease; } .cabecera.fija .hamburguesa { background: transparent; } /* El logotipo no aparece con un fundido: crece desde ancho cero, que es lo que hace el original (max-width 0 -> 100%, transición de 1 s). */ .cabecera-logo { position: absolute; left: 50%; /* Ancho fijo: si el contenedor no lo tiene, el max-width: 100% del logotipo se resuelve contra un ancho indefinido y se queda en 0. */ width: 180px; height: 56px; transform: translateX(-50%); } .cabecera-logo img { width: 180px; max-width: 0; transition: max-width 1s ease; } .cabecera.fija .cabecera-logo img { max-width: 100%; } /* Y el grupo de la derecha (teléfono, idioma y botón) entra deslizándose desde fuera de la pantalla: translateX(120%) -> 0, también 1 s. */ .cabecera-derecha { margin-left: auto; display: flex; align-items: center; gap: 26px; transform: translateX(120%); transition: transform 1s ease; } .cabecera.fija .cabecera-derecha { transform: translateX(0); } .cabecera-tel { color: var(--blanco); font-family: 'Coke', Georgia, serif; font-size: 16px; font-style: italic; font-weight: 600; letter-spacing: .3px; } /* --- Selector de idioma --- */ .selector-idioma { position: relative; } .desplegable { position: relative; cursor: pointer; user-select: none; } .idioma-actual { display: flex; align-items: center; gap: 2px; color: var(--blanco); font-family: 'Coke', Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: .5px; } .idioma-opciones { position: absolute; top: 26px; left: -8px; min-width: 62px; background: var(--verde); border: 1px solid rgba(238, 245, 233, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; z-index: 5; } .idioma-opciones.abierto { opacity: 1; visibility: visible; transform: translateY(0); } .idioma-opciones li { padding: 7px 12px; color: var(--blanco); font-family: 'Coke', Georgia, serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease; } .idioma-opciones li:hover, .idioma-opciones li.activo { background: rgba(238, 245, 233, .15); } /* --- Botón RESERVA de la cabecera --- */ .btn-reserva-cabecera { display: inline-block; padding: 15px 30px; background: var(--crema); border: 1px solid var(--crema); border-radius: 100px; color: var(--verde); font-family: 'Coke', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 18px; text-transform: uppercase; transition: opacity .25s ease; } .btn-reserva-cabecera:hover { opacity: .85; } /* --- Menú a pantalla completa --- */ .menu-completo { position: fixed; inset: 0; background: var(--verde); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; z-index: 150; } .menu-completo.abierto { opacity: 1; visibility: visible; } .menu-cerrar { position: absolute; top: 20px; left: 30px; width: 40px; height: 40px; background: none; border: none; color: var(--blanco); font-size: 32px; line-height: 1; cursor: pointer; } .menu-interior { text-align: center; } .menu-logo { width: 260px; margin: 0 auto 34px; } .menu-lista li a { display: block; padding: 20px 0; color: var(--blanco); font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 25px; line-height: 20px; font-weight: 400; text-transform: uppercase; transition: opacity .25s ease; } .menu-lista li a:hover { opacity: .7; } .menu-idiomas { display: flex; justify-content: center; gap: 24px; margin-top: 22px; } .menu-idiomas li { color: var(--blanco); font-family: 'Coke', Georgia, serif; font-size: 15px; font-style: italic; font-weight: 600; cursor: pointer; transition: opacity .25s ease; } .menu-idiomas li:hover { opacity: .7; } .menu-redes { display: flex; justify-content: center; gap: 14px; margin-top: 28px; } .menu-redes a { width: 46px; height: 46px; border-radius: 50%; background: var(--crema); color: var(--verde); display: flex; align-items: center; justify-content: center; font-size: 21px; transition: opacity .25s ease; } .menu-redes a:hover { opacity: .8; } /* ========================================================= 3. HERO ========================================================= */ .hero { position: relative; height: 100vh; min-height: 620px; background: var(--negro); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Respaldo: si el mp4 no llega a cargar, el fondo sigue siendo oscuro y el logotipo blanco se ve igual. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--negro); } .hero-contenido { position: relative; z-index: 2; text-align: center; } /* El hero lleva solo el logotipo: el botón de reserva vive únicamente en la cabecera. */ .hero-logo { width: 460px; margin: 0 auto 46px; } /* Botón RESERVA del hero: mismo pastilla crema que el de la cabecera */ .btn-crema { display: inline-block; padding: 15px 30px; background: var(--crema); border: 1px solid var(--crema); border-radius: 100px; color: var(--verde); font-family: 'Coke', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 18px; text-transform: uppercase; transition: opacity .25s ease; } .btn-crema:hover { opacity: .85; } /* ========================================================= 4. FRANJA "DESCUBRE LA EXPERIENCIA VASCA" Caja verde de 1518 px con marco blanco interior de 2 px. ========================================================= */ /* La caja monta sobre el hero: la mitad superior queda sobre el vídeo y la inferior sobre el blanco, igual que en el original. */ .franja-experiencia { position: relative; z-index: 5; margin-top: -120px; padding: 20px 0; } .franja-caja { max-width: 1518px; margin: 0 auto; padding: 15px; background: var(--verde); } .franja-interior { border: 2px solid var(--blanco); padding: 40px 0; text-align: center; } .franja-interior h2 { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 40px; line-height: 53px; font-weight: 400; font-style: italic; color: var(--blanco); } .franja-interior h2.negrita { font-weight: 700; } /* ========================================================= 5. GASTRONOMÍA Fondo de montaña al 60 % por la izquierda, columna de texto sobre él y carrusel de fotos ocupando la mitad derecha. ========================================================= */ .gastronomia { position: relative; height: 1105px; background: var(--blanco); } /* La fotografía es vertical (993x1845): niebla en la mitad de arriba, la ladera en diagonal en el centro y matorral oscuro en el borde de abajo. El original la encuadraba con un desplazamiento en PÍXELES (background-position: 0 -659px), que a 1905 px de ventana deja a la vista la franja del 31 % al 83 % de la foto: niebla y ladera, sin el matorral. El problema es que un valor en píxeles no se adapta: al estrechar la ventana el encuadre se va y se queda solo la niebla. Ese mismo 659 px expresado en porcentaje del recorte es un 65 %, y así el encuadre se mantiene a cualquier ancho. */ .gastro-fondo { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background-image: url('./img/gastronomia/fondo-montana.webp'); background-size: cover; background-position: 50% 65%; background-repeat: no-repeat; } .gastro-texto { position: absolute; top: 130px; left: 6%; width: 39%; text-align: center; z-index: 2; } .gastro-texto h2 { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 40px; line-height: 40px; font-weight: 400; font-style: italic; color: var(--verde); margin-bottom: 24px; } /* "para emocionar," va en negrita dentro del titular */ .gastro-texto h2 b { font-weight: 700; } .gastro-texto p { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 22px; line-height: 33px; font-style: italic; color: var(--verde); } .gastro-botones { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 20px; } /* Botón con las dos rayitas a los lados, como en el original */ .btn-linea { position: relative; display: inline-block; padding: 15px 35px; background: var(--verde); border-radius: 100px; color: var(--blanco); font-family: 'Coke', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 30px; text-transform: uppercase; transition: opacity .25s ease; } .btn-linea:hover { opacity: .88; } .btn-linea::before, .btn-linea::after { content: ''; position: absolute; top: 50%; width: 34px; height: 2px; background: var(--verde); } .btn-linea::before { right: 100%; margin-right: 6px; } .btn-linea::after { left: 100%; margin-left: 6px; } .gastro-carrusel { position: absolute; top: 0; right: 0; width: 50%; height: 888px; z-index: 3; } /* --- Carruseles en fundido --- */ .fade-carrusel { overflow: hidden; } .fade-imagen, .fade-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .fade-imagen.activa, .fade-fondo.activa { opacity: 1; } .fade-fondo { background-size: cover; background-position: 50% 100%; } /* Decorativo del caserío en trazo oscuro */ .decorativo-caserio { position: relative; width: 50%; margin-left: 47.5%; margin-top: -70px; } .decorativo-caserio img { width: 100%; } /* ========================================================= 6. SABORES CON NOMBRE Y ORIGEN Doble marco crema: exterior 3 px + 5 px de aire, interior 5 px sobre fondo blanco y 50 px de relleno. ========================================================= */ .sabores { padding: 40px 0 60px; background: var(--blanco); } .sabores-marco { position: relative; max-width: 1140px; margin: 0 auto; padding: 5px; border: 3px solid var(--crema); } .sabores-caja { background: var(--blanco); border: 5px solid var(--crema); padding: 50px; } .sabores-titulo { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 40px; line-height: 40px; font-weight: 400; font-style: italic; color: var(--verde); text-align: center; } .sabores-regla { height: 0; margin: 26px auto 0; max-width: 830px; border: none; border-top: 1px solid rgba(1, 43, 50, .25); } /* Carrusel deslizante, como el JetSlider del original: las fichas van en fila y la pista se desplaza en horizontal 500 ms. No es un fundido (sliderFadeMode: false en el original). */ .sabores-viewport { position: relative; height: 400px; margin-top: 30px; overflow: hidden; } .sabores-pista { display: flex; height: 100%; will-change: transform; } .sabores-ficha { position: relative; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; } /* La ilustración va detrás del texto, centrada */ .sabores-ficha img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1014px; height: 400px; object-fit: contain; } .sabores-texto { position: relative; z-index: 2; text-align: center; } .sabores-texto h2 { font-family: 'Coke', Georgia, serif; font-size: 40px; line-height: 48px; font-weight: 600; text-transform: uppercase; color: var(--verde); margin: 10px 0; } .sabores-texto p { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 22px; line-height: 33px; font-style: italic; color: var(--verde); margin-top: 10px; } .sabores-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: none; border: none; color: var(--verde); font-size: 34px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s ease; z-index: 4; } .sabores-flecha:hover { opacity: .6; } .sabores-flecha.izq { left: 60px; } .sabores-flecha.der { right: 60px; } /* ========================================================= 7. EL ESPACIO Banda de árboles en repeat-x de fondo, caja crema a la izquierda y carrusel a la derecha (66 % del ancho). ========================================================= */ .espacio { position: relative; min-height: 900px; padding: 60px 0; background-image: url('./img/decorativos/banda-arboles.png'); background-repeat: repeat-x; background-position: 0 0; } /* El carrusel arranca al 33 % y mide el 66 %: en el original no queda pegado al borde derecho, sino que deja ~19 px de aire. */ .espacio-carrusel { position: absolute; top: 0; left: 33%; width: 66%; height: 836px; } .espacio-caja { position: relative; z-index: 3; width: 609px; max-width: 92%; margin-left: 30px; margin-top: 110px; padding: 10px; background: var(--crema); } .espacio-interior { border: 3px solid var(--blanco); padding: 50px; text-align: center; } .espacio-interior h2 { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 40px; line-height: 40px; font-weight: 600; font-style: italic; color: var(--verde); } .espacio-interior p { margin-top: 22px; font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 22px; line-height: 33px; font-style: italic; color: var(--verde); } .espacio-regla { height: 0; margin: 28px 0; border: none; border-top: 1px solid rgba(1, 43, 50, .3); } .espacio-direccion { font-family: 'Coke', Georgia, serif; font-size: 18px; line-height: 26px; font-style: normal; color: var(--verde); } .enlace-maps { display: inline-block; padding: 12px 24px; font-family: 'Coke', Georgia, serif; font-size: 18px; line-height: 18px; text-transform: uppercase; color: var(--verde); transition: opacity .25s ease; } .enlace-maps:hover { opacity: .7; } .btn-contorno { display: inline-block; margin-top: 18px; padding: 12px 24px; border: 1px solid var(--verde); border-radius: 3px; color: var(--verde); font-family: 'Coke', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 18px; text-transform: uppercase; transition: background-color .25s ease, color .25s ease; } .btn-contorno:hover { background: var(--verde); color: var(--crema); } /* ========================================================= 8. COCINEROS VASCOS ========================================================= */ .cocineros { position: relative; min-height: 1160px; background: var(--blanco); } /* Orden de capas de la sección: banda de montaña (0) < caserío (1) < foto de Iñaki y Mikel (2) < caja (3) */ .cocineros-foto { position: absolute; z-index: 2; top: 0; left: 0; width: 66%; height: 900px; background-image: url('./img/cocineros/foto-cocineros.webp'); background-size: cover; background-position: 50% 0; } .cocineros-caja { position: relative; z-index: 3; width: 629px; max-width: 92%; margin-left: 66%; margin-right: 0; /* Más arriba que antes (era 400 px): así queda más solapada con la fotografía de los hermanos, que ocupa los primeros 900 px. */ top: 280px; padding: 10px; background: var(--verde); } .cocineros-interior { border: 3px solid var(--blanco); padding: 80px; text-align: center; } .cocineros-interior h2 { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 40px; line-height: 40px; font-weight: 600; font-style: italic; color: var(--crema); } .cocineros-interior p { margin-top: 22px; font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 22px; line-height: 33px; font-style: italic; color: var(--crema); } .cocineros-interior p.negrita { margin-top: 0; font-weight: 700; } /* El sello viaja con la caja: es hijo suyo, así que hereda su transform. Va arriba y a la derecha de donde estaba, para quedar más dentro del bloque de "Un sueño forjado en el fuego". */ .caja-sello { position: absolute; top: -85px; left: -75px; width: 251px; pointer-events: none; } /* Paisaje en trazo, al pie de la sección. El dibujo mide 933x360, así que el contenedor tiene que ser al menos así de alto o se le corta la parte de arriba. Se deja a tamaño natural, pegado abajo a la izquierda, igual que en el original. */ .cocineros-banda { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: 380px; background-image: url('./img/decorativos/banda-montana.png'); background-repeat: no-repeat; background-position: 0 100%; background-size: auto 360px; } /* Fotografía del caserío: va al fondo del todo, por detrás de la foto de Iñaki y Mikel. */ /* Anclada por arriba, no por abajo: así no depende del alto de la sección y la composición no se descuadra si cambia el texto. */ .cocineros-caserio { position: absolute; z-index: 1; left: 52%; top: 250px; width: 500px; max-width: 34%; } .caserio-foto { width: 100%; } /* ========================================================= 9. PIE ========================================================= */ .pie { background: var(--verde); color: var(--blanco); padding: 55px 60px 70px; text-align: center; } .pie-superior { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; gap: 30px; } .pie-col { flex: 1 1 0; } .pie-logo { text-align: left; } .pie-logo img { width: 200px; } .pie-contacto h2, .pie-redes h2 { font-family: 'cardea-lining', 'Times New Roman', serif; font-size: 32px; line-height: 32px; font-weight: 600; text-transform: uppercase; color: var(--blanco); margin-bottom: 14px; } .pie-contacto a { display: block; font-family: 'Coke', Georgia, serif; font-size: 15px; line-height: 22px; text-transform: uppercase; color: var(--blanco); transition: opacity .25s ease; } .pie-contacto a:hover { opacity: .75; } .pie-iconos { display: flex; justify-content: center; gap: 12px; } .pie-iconos a { width: 38px; height: 38px; border-radius: 50%; background: var(--blanco); color: var(--verde); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: opacity .25s ease; } .pie-iconos a:hover { opacity: .8; } .pie-enlaces, .pie-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; font-family: 'cardea-lining', 'Times New Roman', serif; text-transform: uppercase; color: var(--blanco); } .pie-enlaces { margin-top: 60px; font-size: 21px; } .pie-legal { margin-top: 40px; font-size: 15px; } .pie-enlaces a:hover, .pie-legal a:hover { text-decoration: underline; } /* ========================================================= 10. POP-UP DE EVENTOS CORPORATIVOS Medidas reales del pop-up de LePopup: caja de 720 px, banda de imagen de 180 px, fondo #efe3d3 y tipografías serif del propio plugin (Garamond / Georgia), no la tipografía de marca. ========================================================= */ .modal-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 200; padding: 20px; } .modal-fondo.visible { opacity: 1; visibility: visible; } .modal-caja { position: relative; width: 720px; max-width: 100%; background: #efe3d3; } .modal-cerrar { position: absolute; top: 15px; right: 20px; width: 40px; height: 40px; background: none; border: none; color: var(--blanco); font-family: arial, sans-serif; font-size: 40px; line-height: 40px; cursor: pointer; z-index: 2; } .modal-imagen { height: 180px; background-image: url('./img/modal/pop-up.png'); background-size: cover; background-position: 50% 50%; } .modal-cuerpo { padding: 20px 50px 40px; } .modal-cuerpo h3 { font-family: Garamond, "Times New Roman", serif; font-size: 42px; font-weight: 600; line-height: 58.8px; color: #444; } .modal-sub { margin-top: 10px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 28px; color: #444; } .modal-btn { display: inline-block; width: 205px; margin-top: 32px; padding: 12px 0; background: #a6957a; border-radius: 5px; color: var(--blanco); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 21px; text-align: center; transition: opacity .25s ease; } .modal-btn:hover { opacity: .88; } .modal-regla { height: 0; margin: 19px 0 0; border: none; border-top: 1px solid rgba(68, 68, 68, .22); } .modal-nota { margin-top: 26px; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-style: italic; line-height: 22.4px; color: #8c8c8c; } /* ========================================================= 11. PARALLAX Y ANIMACIONES El original no usa background-attachment: fixed, sino los "motion effects" de Elementor: desplazamiento por JS con una velocidad distinta por elemento. Las velocidades leídas del data-settings están en los atributos data-parallax-y / -x del HTML y las aplica script.js. ========================================================= */ [data-parallax-y], [data-parallax-x] { will-change: transform; } .anim { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; } .anim.visto { opacity: 1; transform: none; } /* ========================================================= 12. RESPONSIVE ========================================================= */ /* Ojo: aquí NO se tocan los tamaños de letra. Los titulares van a 40 px y los cuerpos a 22 px en todo el escritorio y la tableta, como en el original; solo se recortan los rellenos de las cajas. */ @media (max-width: 1280px) { .espacio-interior { padding: 40px; } .cocineros-interior { padding: 50px; } } @media (max-width: 1024px) { /* El logotipo sale del centrado absoluto y lo coloca el flex: por debajo de ~1000 px se montaba encima del teléfono y del botón. */ .cabecera-logo { position: static; width: auto; height: 44px; margin: 0 auto; transform: none; } .cabecera-logo img { width: 150px; } .gastronomia { height: auto; padding-bottom: 40px; } /* En móvil el fondo de montaña cubre SOLO el bloque de texto, no toda la sección: así la fotografía que va debajo de CARTA y BODEGA queda fuera de ese bloque, sobre el blanco de la página. */ .gastro-fondo { display: none; } .gastro-texto { position: relative; top: auto; left: auto; width: 100%; padding: 90px 24px 40px; background-image: url('./img/gastronomia/fondo-montana.webp'); background-size: cover; background-position: 50% 0; background-repeat: no-repeat; } .gastro-carrusel { position: relative; width: 100%; height: 420px; flex: 0 0 auto; } /* En móvil la fotografía de gastronomía no se desplaza (eso lo apaga el data-parallax-desktop del HTML): se queda fija debajo de los botones de CARTA y BODEGA. El fundido entre las cuatro fotos SÍ sigue funcionando. Va enmarcada en blanco. */ .gastro-carrusel { width: auto; margin: 26px 14px 0; border: 5px solid var(--blanco); } .decorativo-caserio { width: 70%; margin-left: 30%; margin-top: 0; } .sabores-flecha.izq { left: 6px; } .sabores-flecha.der { right: 6px; } .sabores-caja { padding: 34px 22px; } .sabores-viewport { height: 460px; } .espacio { min-height: 0; padding: 0 0 50px; } /* Ojo: al pasar a position:relative, el "left: 33%" de escritorio seguiría desplazando el bloque y sacaría scroll horizontal. */ .espacio-carrusel { position: relative; left: auto; width: 100%; height: 420px; flex: 0 0 auto; } .espacio-caja { margin: -60px auto 0; } .cocineros { min-height: 0; padding-bottom: 320px; } .cocineros-foto { position: relative; width: 100%; height: 420px; flex: 0 0 auto; } .cocineros-caja { top: 0; margin: -60px auto 0; } .caja-sello { width: 150px; top: -40px; left: 10px; } .cocineros-caserio { left: auto; right: 4%; bottom: 60px; width: auto; max-width: 46%; } .pie { padding: 45px 24px 55px; } .pie-superior { flex-wrap: wrap; } .pie-col { flex: 1 1 100%; text-align: center; } .pie-logo { text-align: center; } .pie-logo img { margin: 0 auto; } } @media (max-width: 768px) { :root { --cabecera-h: 72px; } .cabecera { padding: 0 16px; } .cabecera-tel { display: none; } /* En móvil el logo sale del posicionamiento absoluto y lo coloca el flex: centrado en absolute se montaba encima del botón RESERVA. */ .cabecera-logo { position: static; width: auto; height: 38px; margin: 0 auto; transform: none; } .cabecera-logo img { width: 120px; } .btn-reserva-cabecera { padding: 10px 16px; font-size: 13px; line-height: 13px; } .cabecera-derecha { gap: 12px; flex: 0 0 auto; } /* Hero más bajo en móvil para que la caja de "Descubre la experiencia vasca" entre entera en la primera pantalla. */ .hero { height: 83vh; min-height: 440px; } .hero-logo { width: 74%; margin-bottom: 34px; } .menu-logo { width: 200px; } .menu-lista li a { padding: 14px 0; font-size: 20px; } /* El margen negativo es la mitad del alto de la caja (163 px con la tipografía ya cargada) más los 14 px de padding: así se ve medio metida en el hero y medio fuera, como en escritorio. */ .franja-experiencia { margin-top: -95px; padding: 14px 0; } .franja-caja { margin: 0 16px; padding: 12px; } .franja-interior { padding: 30px 14px; } /* 22/25 son los valores exactos del original a partir de 767 px: texto pequeño y con las líneas muy juntas. */ .franja-interior h2 { font-size: 22px; line-height: 25px; } .gastro-texto { padding: 70px 20px 30px; } .gastro-texto h2 { font-size: 28px; line-height: 32px; } .gastro-texto p { font-size: 17px; line-height: 27px; } .btn-linea { font-size: 22px; padding: 11px 26px; } .btn-linea::before, .btn-linea::after { width: 22px; } .gastro-carrusel { height: 300px; } .decorativo-caserio { width: 86%; margin-left: 14%; } /* Carrusel más compacto en móvil: menos alto, menos relleno y la ilustración de fondo más pequeña. */ .sabores { padding: 20px 0 32px; } .sabores-marco { margin: 0 12px; padding: 4px; border-width: 2px; } .sabores-caja { padding: 20px 10px; border-width: 3px; } .sabores-titulo { font-size: 22px; line-height: 28px; } .sabores-regla { margin-top: 16px; } .sabores-viewport { height: 360px; margin-top: 18px; } .sabores-ficha img { height: 300px; } .sabores-texto h2 { font-size: 22px; line-height: 28px; margin: 6px 0; } .sabores-texto p { font-size: 15px; line-height: 23px; margin-top: 6px; } .sabores-flecha { font-size: 24px; width: 26px; height: 26px; } .sabores-flecha.izq { left: 2px; } .sabores-flecha.der { right: 2px; } .espacio-carrusel { height: 300px; } .espacio-caja { width: 94%; margin-top: -50px; } .espacio-interior { padding: 26px 18px; } .espacio-interior h2 { font-size: 26px; line-height: 32px; } .espacio-interior p { font-size: 17px; line-height: 27px; } .espacio-direccion { font-size: 16px; line-height: 24px; } .cocineros { padding-bottom: 200px; } .cocineros-foto { height: 300px; } .cocineros-caja { width: 94%; } .cocineros-interior { padding: 30px 20px; } .cocineros-interior h2 { font-size: 26px; line-height: 32px; } .cocineros-interior p { font-size: 17px; line-height: 27px; } .cocineros-banda { height: 200px; background-size: 200% auto; } /* En móvil el caserío no cabe sin apelotonar la sección: se oculta */ .cocineros-caserio { display: none; } .caja-sello { width: 110px; top: -46px; left: 8px; } .pie-contacto h2, .pie-redes h2 { font-size: 25px; line-height: 30px; } .pie-enlaces { margin-top: 40px; font-size: 16px; gap: 10px; } .pie-legal { margin-top: 26px; font-size: 13px; gap: 8px; } .modal-imagen { height: 140px; } .modal-cuerpo { padding: 18px 24px 28px; } .modal-cuerpo h3 { font-size: 28px; line-height: 38px; } .modal-sub { font-size: 17px; line-height: 24px; } .modal-btn { width: 100%; margin-top: 24px; } .modal-nota { font-size: 14px; line-height: 20px; margin-top: 20px; } }