/* ============================================================
   SAGARDI COCINEROS VASCOS  —  sagardi.com
   Paleta:  crema #f8f2e7 · marrón #31281e · blanco azulado #e4ecf8
   Tipografía: Swift (Light 300 / Bold 900), la de las demás webs
   ============================================================ */

@font-face {
    font-family: 'Swift';
    src: url('./fuentes/Swift-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Swift';
    src: url('./fuentes/Swift-Bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --crema: #f8f2e7;
    --marron: #31281e;
    --claro: #e4ecf8;
    --blanco: #ffffff;
    --oro: #8a6d3b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Swift', 'Times New Roman', serif;
    font-weight: 300;
    background-color: var(--crema);
    color: var(--marron);
    overflow-x: hidden;
}

::selection { background-color: var(--marron); color: var(--crema); }
::-moz-selection { background-color: var(--marron); color: var(--crema); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===================== CABECERA ===================== */
/* Barra fija medida sobre sagardi.co.uk: alto 81px, padding 15px 76px,
   fondo transparente, logo centrado con los botones al lado y la
   hamburguesa (50x50, borde 2px, radio 5px) a la derecha.
   Aquí el selector de idioma ocupa el hueco izquierdo. */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 81px;
    padding: 15px 40px;
    pointer-events: none;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* Velo oscuro muy suave detrás de la barra mientras es transparente.
   Sin él, sobre fotos claras como la niebla del hero, el blanco de los
   botones y del idioma se perdía. Desaparece al pasar a crema. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 100%);
    transition: opacity .3s ease;
}

/* al bajar, la barra toma el crema del menú desplegable */
.site-header.compacta {
    background: var(--crema);
    box-shadow: 0 1px 12px rgba(49, 40, 30, .14);
    pointer-events: auto;
}

.site-header.compacta::before { opacity: 0; }

.site-header > * { pointer-events: auto; }

.header-lado {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-lado-derecha { justify-content: flex-end; }

.header-centro {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 25px;
}

/* el logo, más grande que el de Londres a petición del cliente */
.header-logo {
    width: 200px;
    height: auto;
    display: block;
    transition: filter .3s ease;
}

/* botones como los de Londres: 16px en negrita, borde de 2px,
   radio 5px y padding 8px 16px */
.header-btn {
    border: 2px solid var(--marron);
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .5px;
    color: var(--marron);
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .3s ease;
}

.header-btn:hover {
    background: var(--marron);
    color: var(--crema);
}

/* sobre las fotos, todo en blanco y con sombra para que se lea.
   Con la barra ya en crema (.compacta) manda siempre el marrón. */
.site-header.sobre-foto:not(.compacta) .header-logo { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .75)); }

.site-header.sobre-foto:not(.compacta) .header-btn {
    border-color: var(--blanco);
    color: var(--blanco);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.site-header.sobre-foto:not(.compacta) .header-btn:hover {
    background: var(--blanco);
    color: var(--marron);
    text-shadow: none;
}

/* --------- selector de idioma dentro de la barra --------- */
.selector-idioma { position: relative; }

/* Con solo el texto "ES" en blanco, sobre la niebla clara del hero
   desaparecía. Ahora es una pastilla con borde, igual que RESERVA y
   CARTA, así siempre se ve y se entiende que se puede pulsar. */
.idioma-actual {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 2px solid var(--marron);
    border-radius: 5px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .5px;
    color: var(--marron);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .3s ease;
}

.idioma-actual i { font-size: 15px; line-height: 1; }

.idioma-actual:hover {
    background: var(--marron);
    color: var(--crema);
}

.site-header.sobre-foto:not(.compacta) .idioma-actual {
    border-color: var(--blanco);
    color: var(--blanco);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.site-header.sobre-foto:not(.compacta) .idioma-actual:hover {
    background: var(--blanco);
    color: var(--marron);
    text-shadow: none;
}

/* el desplegable cuelga hacia la izquierda: está pegado al borde derecho */
.idioma-lista {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--crema);
    min-width: 74px;
    display: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.selector-idioma.abierto .idioma-lista { display: block; }

.idioma-lista button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--marron);
    text-align: left;
    cursor: pointer;
}

.idioma-lista button:hover,
.idioma-lista button.activo { background: rgba(49, 40, 30, .1); }

.hamburger {
    width: 42px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--marron);
    transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}

/* sobre foto clara, las barras blancas también se perdían */
.hamburger.sobre-foto span {
    background: var(--blanco);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* con la barra en crema, la hamburguesa vuelve a marrón */
.site-header.compacta .hamburger span { background: var(--marron); }

.hamburger.abierto span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.abierto span:nth-child(2) { opacity: 0; }
.hamburger.abierto span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ===================== MENÚ: PANEL LATERAL DERECHO =====================
   Como en el original: NO ocupa toda la pantalla. Es un panel fijo del
   25 % del ancho pegado a la derecha, y el resto se oscurece.
   ====================================================================== */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(0, 0, 0, .55);
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

.menu-overlay.abierto { opacity: 1; visibility: visible; }

.menu-inner {
    position: fixed;
    top: 0;
    right: 0;
    width: 25%;
    min-width: 320px;
    height: 100%;
    background: var(--crema);
    padding: 128px 34px 40px;
    overflow-y: auto;
    text-align: left;
    transform: translateX(100%);
    transition: transform .35s ease;
}

.menu-overlay.abierto .menu-inner { transform: translateX(0); }

.menu-nav { list-style: none; margin: 0 0 8px; padding: 0; }

.menu-nav li { margin: 0; }

.menu-nav a {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.86px;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #34343c;
    transition: opacity .2s ease;
}

.menu-nav a:hover { opacity: .55; }

.menu-idiomas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 16px;
    line-height: 22.86px;
    letter-spacing: normal;
    text-transform: none;
}

.menu-idiomas button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--marron);
    cursor: pointer;
    padding: 2px 4px;
    opacity: .5;
    transition: opacity .2s ease;
}

.menu-idiomas button:hover,
.menu-idiomas button.activo { opacity: 1; border-bottom: 1px solid var(--marron); }

/* ===================== SECCIONES A PANTALLA COMPLETA ===================== */
.pantalla {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.pantalla::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%);
}

/* el original NO centra el contenido: arranca a 30 px del borde izquierdo */
.pantalla-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 30px;
}

.bloque-texto { max-width: 870px; }

.titulo-seccion {
    font-size: clamp(40px, 4.7vw, 98px);
    font-weight: 900;
    line-height: 1;
    color: var(--claro);
    margin: 0 0 18px;
}

.titulo-seccion .fina { display: block; }

.texto-seccion {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px;
    color: var(--blanco);
    margin: 0 0 26px;
    max-width: 620px;
}

.ver-mas {
    display: inline-block;
    font-size: 22px;
    font-weight: 900;
    color: var(--blanco);
    transition: opacity .2s ease;
}

.ver-mas:hover { opacity: .7; }

/* ===================== HERO ===================== */
.hero { align-items: flex-end; }

.hero::before {
    background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%);
}

.hero-niebla {
    position: absolute;
    top: 0; right: 0;
    width: 46%;
    max-width: 768px;
    z-index: 1;
    pointer-events: none;
    opacity: .9;
}

.hero .pantalla-contenido { padding-bottom: 20vh; }

.hero-social {
    display: flex;
    gap: 16px;
    font-size: 17px;
    color: var(--blanco);
    margin-bottom: 14px;
}

.hero-social a { transition: opacity .2s ease; }
.hero-social a:hover { opacity: .65; }

.hero-titulo {
    font-size: clamp(46px, 5.2vw, 108px);
    font-weight: 900;
    line-height: .98;
    color: var(--claro);
    margin: 0;
}

.flecha-abajo {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--blanco);
    font-size: 26px;
    animation: rebote 2.2s infinite;
}

@keyframes rebote {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

/* ===================== SECCIÓN PARTIDA (raíces) ===================== */
.pantalla-partida { display: flex; flex-wrap: wrap; min-height: 100vh; }

.mitad {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.mitad-texto {
    display: flex;
    align-items: center;
}

.mitad-texto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 100%);
}

.mitad-texto .pantalla-contenido { padding: 60px 40px; }

.mitad-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* ===================== ICONOS DE CARTA ===================== */
.iconos-carta {
    display: flex;
    gap: 42px;
    margin: 6px 0 30px;
    flex-wrap: wrap;
}

.icono-carta {
    width: 92px;
    text-align: center;
    color: var(--blanco);
    transition: opacity .2s ease;
}

.icono-carta:hover { opacity: .65; }

.icono-carta img {
    height: 62px;
    width: auto;
    margin: 0 auto 8px;
}

.icono-carta span {
    display: block;
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    text-transform: uppercase;
}

.aviso-carta {
    font-size: 11px;
    line-height: 15.4px;
    color: var(--blanco);
    max-width: 520px;
    margin: 0 0 22px;
    opacity: .85;
}

/* ===================== PIE ===================== */
.pie {
    background: var(--crema);
    color: var(--marron);
    padding: 40px 26px 24px;
}

.pie-grid {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Proporciones medidas en el original: la columna del logo ocupa poco
   más de un tercio y el resto es el bloque de la derecha, donde
   Contacto y Redes van en fila y la cinta de ciudades cuelga debajo,
   alineada con Contacto (no a todo lo ancho del pie). */
.pie-col-logo { flex: 0 0 34%; max-width: 34%; }

/* base 0: si no, el ancho del contenido (la cinta mide 869 px) hace
   que el bloque no quepa al lado del logo y se caiga a otra fila */
.pie-derecha { flex: 1 1 0; min-width: 0; }

.pie-fila { display: flex; gap: 30px; }

.pie-col-contacto { flex: 0 0 42%; max-width: 42%; }
.pie-col-social   { flex: 1 1 auto; }

.pie-logo { width: 200px; margin-bottom: 14px; }
.pie-manos { width: 300px; max-width: 80%; }

.pie h3 {
    font-size: 30px;
    font-weight: 900;
    line-height: 38px;
    margin: 0 0 6px;
}

.pie p {
    font-size: 17px;
    line-height: 25px;
    margin: 0 0 6px;
}

.pie-marcas {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
}

.pie-marcas img.grupo { width: 230px; }
.pie-marcas img.euskadi { width: 104px; }

.pie-social {
    display: flex;
    gap: 20px;
    font-size: 19px;
    margin-top: 4px;
}

.pie-social a { transition: opacity .2s ease; }
.pie-social a:hover { opacity: .55; }

/* --- cinta de ciudades --- */
.cinta-ciudades {
    margin-top: 28px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Carrusel de ciudades. Copiado de la configuración Owl del original:
   items: 7 · margin: 30 · autoplayTimeout: 1000 · smartSpeed: 450
   loop: true · autoplayHoverPause: true
   Es decir: avanza un icono cada segundo con transición de 450 ms. */
/* Medida en el original: 869 px de ancho, arrancando en el borde
   izquierdo del bloque de Contacto (no centrada ni a todo lo ancho). */
.cinta-ciudades {
    overflow: hidden;
    width: min(869px, 100%);
    margin: 28px 0 0;
}

.cinta-pista {
    display: flex;
    align-items: flex-end;
    width: 100%;
    will-change: transform;
}

/* 7 visibles con 30 px de separación: cada paso mide exactamente 100/7 % */
.cinta-pista > a {
    flex: 0 0 calc((100% - 210px) / 7);
    margin-right: 30px;
    display: block;
}

.cinta-pista img {
    height: 120px;
    width: 100%;
    object-fit: contain;
    object-position: bottom;
    opacity: .9;
    transition: opacity .2s ease;
    -webkit-user-drag: none;
    user-select: none;
}

.cinta-pista > a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .cinta-pista { transition: none !important; }
}

.pie-legal {
    max-width: 1500px;
    margin: 22px auto 0;
    font-size: 11px;
    line-height: 15.4px;
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .75;
}

.pie-legal a:hover { text-decoration: underline; }

.pie-credito {
    font-size: 11px;
    margin-top: 6px;
    text-transform: none;
    letter-spacing: 0;
}

/* ============ BLOQUE DE CHEFS: foto + panel crema ============ */
.mitad-crema {
    background: var(--crema);
    display: flex;
    align-items: center;
}

.crema-inner { padding: 60px 50px; width: 100%; }

.nombre-chef {
    font-size: 15px;
    font-weight: 900;
    margin: 0 0 10px;
}

.texto-chef {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    margin: 0;
}

/* franja de foto a todo el ancho */
.franja-foto {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ============ TXAPELDUN: pantalla negra, todo centrado ============ */
.pantalla-negra {
    position: relative;
    min-height: 100vh;
    background: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 30px 80px;
    overflow: hidden;
}

/* el vídeo de YouTube va de fondo, tapando toda la sección y detrás
   del texto: se escala a 16:9 y se recorta por los lados o por arriba */
.video-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.video-fondo iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;          /* 16:9 */
    min-height: 100vh;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* velo para que el texto se lea sobre el vídeo */
.pantalla-negra::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

.centrado {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

/* variante de "Únete al equipo": el contenido va a la izquierda y en
   bloque, no centrado, y los vídeos ocupan una fila entera */
.negra-izquierda {
    display: block;
    padding: 130px 0 90px;
}

/* aquí el velo tapa menos: el vídeo de fondo se ve más */
.negra-izquierda::after { background: rgba(0, 0, 0, .55); }

.negra-izquierda .pantalla-contenido { position: relative; z-index: 2; }

.negra-izquierda .titulo-seccion { margin-bottom: 14px; }

.negra-izquierda .texto-seccion { margin-bottom: 26px; }

.fila-videos {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 5px;
    padding: 0 30px;
    margin-bottom: 30px;
}

.video-fila-item {
    flex: 1 1 0;
    position: relative;
    padding-top: 18.75%;      /* 16:9 sobre un tercio del ancho */
}

.video-fila-item iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.titulo-negra {
    font-size: clamp(44px, 4.7vw, 98px);
    font-weight: 900;
    line-height: 1;
    color: var(--claro);
    margin: 0 0 70px;
}

.texto-negra {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--blanco);
    margin: 0 0 16px;
}

/* ============ CONTACTO ============
   Medido sobre el original: sección 100vh con home_def-1.jpg (cover,
   center top) + velo negro al 43 %; título 98px/900 en #E4ECF8 pegado
   arriba a la izquierda; panel de media anchura, centrado, negro al
   57 %, padding 62px 15px, con tres columnas iguales.
   Las ciudades son informativas: NO llevan a ningún sitio. */
.pagina-contacto {
    position: relative;
    min-height: 100vh;
    padding: 0 15px 90px;
    background-color: #6f6f6f;
    background-image: url('./img/hero/home-fondo.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
}

.pagina-contacto::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .43);
}

.titulo-contacto {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-left: 15px;
    font-size: clamp(44px, 5.2vw, 98px);
    font-weight: 900;
    line-height: 1;
    color: #E4ECF8;
}

.panel-ciudades {
    position: relative;
    z-index: 2;
    width: 50%;
    margin: 103px auto 0;
    background: rgba(0, 0, 0, .57);
    display: flex;
    padding: 62px 15px;
}

.ciudad {
    flex: 1 1 33.3333%;
    text-align: center;
    color: var(--blanco);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: opacity .2s ease;
}

.ciudad:hover,
.ciudad.activa { opacity: .7; }

/* los PNG vienen en oscuro: se fuerzan a blanco, como en el original */
.ciudad img {
    width: 100px;
    height: 122px;
    object-fit: contain;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

.ciudad span {
    display: block;
    font-weight: 300;
    font-size: 22px;
    line-height: 31px;
}

/* --- acordeón de locales (aparece al elegir ciudad) --- */
.acordeon-locales {
    position: relative;
    z-index: 2;
    width: 66.6667%;
    margin: 105px auto 0;
}

/* hasta que no se elige ciudad no hay ningún local a la vista */
.local { display: none; }
.local.visible { display: block; }

.local-cabecera {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    background: var(--blanco);
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 21px;
    padding: 15px 50px 15px 15px;
    transition: background-color .2s ease, color .2s ease;
}

.local-cabecera::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.local.abierto .local-cabecera {
    background: rgba(0, 0, 0, .87);
    color: var(--blanco);
}

.local.abierto .local-cabecera::after { content: '\2013'; }

.local-cuerpo {
    display: none;
    background: rgba(0, 0, 0, .87);
    color: var(--blanco);
    padding: 15px;
}

.local.abierto .local-cuerpo { display: block; }

.local-cuerpo p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    margin: 0 0 10px;
}

.local-cuerpo a {
    font-weight: 400;
    color: var(--blanco);
}

.local-cuerpo a:hover { text-decoration: underline; }

/* los GIF son 900x600: reservamos el hueco para que al desplegar no
   pegue un salto mientras se cargan */
.local-cuerpo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
}

/* ============ RESERVAS ESPECIALES: texto + formulario ============ */
.contenedor-eventos {
    max-width: 920px;
    margin: 0 auto;
}

.texto-eventos {
    font-size: 17px;
    font-weight: 300;
    line-height: 26px;
    text-align: center;
    margin: 0 0 34px;
}

.texto-eventos strong { font-weight: 900; }

.centro-booklet { text-align: center; margin: 0 0 60px; }

/* campos con solo línea inferior, como en el original */
.form-eventos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 30px;
}

.campo-ancho { grid-column: 1 / -1; }

.form-eventos input,
.form-eventos select,
.form-eventos textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(49, 40, 30, .45);
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    color: var(--marron);
    padding: 8px 2px;
    border-radius: 0;
}

.form-eventos textarea { resize: none; height: 36px; overflow: hidden; }

.form-eventos input::placeholder,
.form-eventos textarea::placeholder { color: rgba(49, 40, 30, .65); }

.form-eventos input:focus,
.form-eventos select:focus,
.form-eventos textarea:focus {
    outline: none;
    border-bottom-color: var(--marron);
}

.campo-envio { grid-column: 1 / -1; }

.form-eventos .boton { background: transparent; cursor: pointer; }
.form-eventos .boton:disabled { opacity: .5; cursor: wait; }

/* mensaje de validación bajo cada campo */
.error-campo {
    display: block;
    margin-top: 6px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 300;
}

/* avisos de envío correcto / con error */
.aviso-form {
    position: relative;
    padding: 16px 40px 16px 18px;
    border: 1px solid rgba(49, 40, 30, .25);
    text-align: left;
}

.aviso-form[hidden] { display: none; }

.aviso-form strong { display: block; margin-bottom: 4px; font-size: 16px; }
.aviso-form p { margin: 0; font-size: 15px; font-weight: 300; line-height: 22px; }

.aviso-error { border-color: #c0392b; }
.aviso-error strong { color: #c0392b; }

.aviso-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--marron);
    font-size: 22px;
    line-height: 1;
    opacity: .4;
    cursor: pointer;
}

.aviso-cerrar:hover { opacity: .8; }

/* dos fotos a todo el ancho, mitad y mitad */
.franja-doble { display: flex; flex-wrap: wrap; }

.franja-doble img {
    flex: 0 0 50%;
    width: 50%;
    height: 700px;
    object-fit: cover;
}

/* ===================== GALERÍA ===================== */
.seccion-galeria {
    background: var(--crema);
    padding: 70px 30px;
}

.antetitulo-galeria {
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    margin: 0 0 10px;
}

.titulo-galeria {
    font-size: clamp(38px, 4.6vw, 88px);
    font-weight: 900;
    line-height: .8;
    margin: 0 0 26px;
}

/* ===================== PÁGINAS INTERIORES ===================== */
.cabecera-interior {
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.cabecera-interior::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.05) 60%);
}

.cabecera-interior .pantalla-contenido { padding-bottom: 54px; }

.seccion-crema {
    background: var(--crema);
    padding: 84px 26px;
}

.seccion-crema .contenedor {
    max-width: 1100px;
    margin: 0 auto;
}

.titulo-crema {
    font-size: clamp(34px, 3.6vw, 74px);
    font-weight: 900;
    line-height: 1.05;
    color: var(--marron);
    margin: 0 0 22px;
}

.texto-crema {
    font-size: 17px;
    font-weight: 300;
    line-height: 26px;
    color: var(--marron);
    margin: 0 0 20px;
}

.texto-crema strong { font-weight: 900; }

/* dos columnas de texto */
.dos-columnas {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.dos-columnas > div { flex: 1 1 380px; }

/* tarjetas de valores (respeto, fuego, tradición...) */
.rejilla-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 30px;
}

.valor h3 {
    font-size: 30px;
    font-weight: 900;
    margin: 0 0 10px;
}

.valor p {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

/* galería: carrusel de 3 en 3, como el Owl del original
   (items 3 · margin 30 · timeout 1500 · smartSpeed 750 · nav) */
.galeria-carrusel {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.galeria-pista {
    display: flex;
    width: 100%;
    will-change: transform;
}

/* el ancho es el que calcula Owl: (ancho - margin*(items-1)) / items */
.galeria-pista > figure {
    flex: 0 0 calc((100% - 60px) / 3);
    margin: 0 30px 0 0;
}

.galeria-pista img {
    width: 100%;
    height: 403px;
    object-fit: cover;
    display: block;
}

.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px;
    height: 46px;
    border: none;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.galeria-flecha:hover { background: rgba(0, 0, 0, .75); }

.galeria-flecha.izq { left: 14px; }
.galeria-flecha.der { right: 14px; }

/* responsive de Owl: 992+ → 3 · 768-991 → 2 · 0-767 → 1 */
@media (max-width: 991px) {
    .galeria-pista > figure { flex-basis: calc((100% - 30px) / 2); }
}

@media (max-width: 767px) {
    .galeria-pista > figure { flex-basis: 100%; }
}

/* vídeos de YouTube */
.rejilla-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.video-marco {
    position: relative;
    padding-top: 56.25%;
}

.video-marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* botón */
.boton {
    display: inline-block;
    padding: 13px 30px;
    border: 1px solid var(--marron);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color .25s ease, color .25s ease;
}

.boton:hover { background: var(--marron); color: var(--crema); }

.boton-claro { border-color: var(--blanco); color: var(--blanco); }
.boton-claro:hover { background: var(--blanco); color: var(--marron); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .site-header { padding: 14px 22px; gap: 12px; }
    .header-logo { width: 155px; }
    .header-centro { gap: 14px; }
    .header-btn { font-size: 14px; padding: 7px 12px; }
    .pie-grid { gap: 22px; }
    .cinta-pista img { height: 92px; }
    .cinta-pista > a { margin-right: 18px; }
    .cinta-pista > a { flex-basis: calc((100% - 126px) / 7); }
}

@media (max-width: 768px) {
    /* En móvil entra todo en una fila: logo, RESERVA, CARTA, idioma y
       menú. Va justo, así que las piezas se aprietan. */
    .site-header { padding: 10px 10px; gap: 6px; min-height: 0; }
    .header-lado { flex: 0 0 auto; gap: 6px; }
    .header-lado:not(.header-lado-derecha) { display: none; }
    .header-centro { flex: 1 1 auto; justify-content: flex-start; gap: 6px; }
    .header-logo { width: 96px; }

    .header-btn,
    .idioma-actual {
        font-size: 10px;
        line-height: 14px;
        padding: 6px 7px;
        border-width: 1px;
        border-radius: 4px;
        letter-spacing: .3px;
    }

    .idioma-actual { gap: 2px; }
    .idioma-actual i { font-size: 12px; }
    .idioma-lista { min-width: 62px; }
    .idioma-lista button { padding: 6px 10px; font-size: 12px; }
    .hamburger { width: 34px; height: 24px; gap: 6px; }
    .hamburger.abierto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.abierto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .pantalla { min-height: 88vh; }
    .pantalla-contenido { padding: 0 18px; }
    .hero .pantalla-contenido { padding-bottom: 14vh; }
    .hero-niebla { width: 70%; }

    .texto-seccion { font-size: 15px; line-height: 21px; }
    .ver-mas { font-size: 18px; }

    /* la sección partida pasa a apilarse: flex-basis debe soltar el alto */
    .pantalla-partida { min-height: 0; }
    .mitad { flex: 0 0 auto; width: 100%; min-height: 46vh; }
    .mitad-crema { min-height: 0; }
    .crema-inner { padding: 40px 20px; }
    .franja-foto { height: 60vh; }

    /* Los dos parrilleros: cocineros.jpeg es 1920x1080 y a pantalla
       completa se recortaba por los lados, dejando fuera a uno. En móvil
       la foto ocupa el ancho entero arriba, con su proporción real
       (56.25vw de alto), y el texto pasa a ir debajo sobre el marrón. */
    .pantalla-cocineros {
        background-size: 100% auto;
        background-position: center top;
        background-color: var(--marron);
        align-items: flex-start;
        padding-top: calc(56.25vw + 34px);
        padding-bottom: 46px;
        min-height: 0;
    }

    .pantalla-cocineros::before { background: none; }

    /* Mikel e Iñaki: también son primeros planos y se recortaban.
       Cada uno toma la proporción real de su archivo.
       mikel.jpg 1920x1080 (16:9) · inaki.jpg 1200x800 (3:2) */
    .bloque-chefs .mitad:not(.mitad-crema) {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .franja-foto {
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .seccion-galeria { padding: 50px 18px; }

    .pantalla-negra { padding: 100px 20px 60px; min-height: 80vh; }
    .titulo-negra { margin-bottom: 40px; }

    /* en móvil los tres vídeos se apilan */
    .negra-izquierda { padding: 100px 0 60px; }
    .fila-videos { flex-direction: column; gap: 12px; padding: 0 18px; }
    .video-fila-item { padding-top: 56.25%; }
    .contenido-arriba { padding-top: 80px; }

    /* contacto: el panel pasa a ancho completo y las ciudades se apilan */
    .titulo-contacto { padding-top: 90px; }
    .panel-ciudades { width: 100%; flex-direction: column; padding: 40px 20px; gap: 30px; margin-top: 40px; }
    .ciudad img { width: 82px; height: 100px; }
    .ciudad span { font-size: 19px; }
    .acordeon-locales { width: 100%; margin-top: 50px; }

    .iconos-carta { gap: 24px; }
    .icono-carta { width: 78px; }
    .icono-carta img { height: 48px; }
    .icono-carta span { font-size: 13px; line-height: 18px; }

    .seccion-crema { padding: 56px 18px; }
    .dos-columnas { gap: 26px; }
    .valor h3 { font-size: 25px; }

    .galeria-pista img { height: 240px; }
    .galeria-flecha { width: 36px; height: 36px; font-size: 20px; }

    .form-eventos { grid-template-columns: 1fr; gap: 20px; }
    .texto-eventos { font-size: 15px; line-height: 23px; }
    .centro-booklet { margin-bottom: 40px; }
    .franja-doble img { flex: 0 0 100%; width: 100%; height: 320px; }

    .pie { padding: 34px 18px 24px; }
    .pie-grid { flex-direction: column; gap: 30px; }

    /* En columna, el flex-basis de las columnas (300px, 320px) pasaba a
       ser el ALTO y dejaba huecos enormes entre bloques: la de redes
       medía 300px de alto para un titular y cuatro iconos. Con esto
       cada bloque vuelve a ocupar solo lo que necesita. */
    .pie-grid > * { flex: 0 0 auto; width: 100%; max-width: none; }

    /* Contacto y Redes también se apilan */
    .pie-fila { flex-direction: column; gap: 30px; }
    .pie-fila > * { flex: 0 0 auto; width: 100%; max-width: none; }

    .pie h3 { font-size: 25px; line-height: 32px; margin-bottom: 4px; }
    .pie-logo { width: 168px; margin-bottom: 16px; }
    .pie-manos { width: 170px; }
    .pie-marcas { gap: 16px; margin-top: 14px; }
    .pie-marcas img.grupo { width: 150px; }
    .pie-marcas img.euskadi { width: 74px; }
    .pie-social { gap: 22px; font-size: 22px; margin-top: 8px; }

    /* el degradado de los bordes es del 8 %: en 900px se nota poco, pero
       en 340px se comía casi un icono entero por cada lado */
    .cinta-ciudades {
        margin-top: 14px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }

    .pie-legal { margin-top: 20px; text-align: center; }
    .cinta-pista img { height: 60px; }
    .cinta-pista > a { margin-right: 10px; }
    .cinta-pista > a { flex-basis: calc((100% - 70px) / 7); }

    .menu-nav a { font-size: 17px; }
    .menu-inner { padding: 90px 18px 50px; }
}