/* ============================================================
   Sistema visual de landings — Gastromaps Landings para Restaurantes
   Móvil primero (390 px). Estilo claro y funcional inspirado en
   Google / Google Maps: fondos claros, verde oscuro, tarjetas
   redondeadas, sombras suaves. (Briefing de julio 2026.)
   ============================================================ */

@font-face {
    font-family: 'Lora';
    src: url('fonts/lora.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Heebo';
    src: url('fonts/heebo.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --verde: #14453a;
    --verde-tinta: #0e332b;
    --verde-suave: #e9f0eb;
    --tinta: #1e2522;
    --texto-2: #5b6560;
    --fondo: #ffffff;
    /* El mismo fondo en componentes sueltos, para poder escribirlo con
       transparencia dentro de un degradado. Sin esto, el velo de la portada se
       fundía a blanco puro y en Nardi —que tiene el fondo crema— dejaba una
       LÍNEA VERTICAL y un corte de color justo donde empieza el vídeo. Lo cazó
       Angel el 05/09/2026 mirando la página en el móvil. */
    --fondo-rgb: 255, 255, 255;
    --fondo-suave: #f6f5ef;
    --borde: #e7e5db;
    --estrella: #fbbc04;
    /* El resalte de la cita del mosaico. Estaba clavado en verde y no cambiaba
       con la piel de cada restaurante (se vio en Nardi el 03/09/2026). */
    --resalte-fondo: #e8f0e9;
    --resalte-tinta: #0d652d;
    --serif: 'Lora', Georgia, serif;
    --sans: 'Heebo', system-ui, -apple-system, sans-serif;
    --radio-tarjeta: 20px;
    --radio-boton: 14px;
    --sombra-tarjeta: 0 8px 28px rgba(20, 69, 58, 0.08);
    --sombra-flotante: 0 10px 30px rgba(14, 51, 43, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Frena el "rebote" (rubber-band) del iPhone al llegar al final: el scroll
       blanco infinito que Eloy veía y que en Android no pasa (14/07). */
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--verde); }

/* ------------------------------------------------------------
   Columna de página. En escritorio la landing se presenta como
   una pieza móvil centrada (la adaptación de escritorio llegará
   después, como marca el briefing).
   ------------------------------------------------------------ */
.l-pagina {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    background: var(--fondo);
    min-height: 100vh;
    /* En iPhone, 100svh usa el alto real con la barra de Safari visible: evita
       el hueco blanco de más al final que provoca 100vh (14/07). */
    min-height: 100svh;
}

@media (min-width: 760px) {
    body { background: var(--fondo-suave); padding: 2rem 0 3rem; }
    .l-pagina {
        border-radius: 32px;
        box-shadow: 0 30px 80px rgba(20, 69, 58, 0.14);
        overflow: clip;
        min-height: 0;
    }
}

/* Enlace "saltar al contenido": invisible salvo al navegar con teclado */
.salto-contenido {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 60;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--verde-tinta);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.salto-contenido:focus { top: 0.75rem; }

/* ------------------------------------------------------------
   Cabecera: solo el logotipo. NO es fija: se va con el scroll
   (decisión de Eloy, 12/07). El acceso a reservar lo cubren el
   hero y el botón flotante.
   ------------------------------------------------------------ */
.l-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    background: var(--fondo);
}
.l-cabecera__logo img { width: 108px; height: auto; }

/* SELECTOR DE IDIOMA: UN DESPLEGABLE, NO TRES BANDERAS EN FILA  (10/09/2026)
   ─────────────────────────────────────────────────────────────────────────
   Petición de Eloy (audio del 09/09) para descongestionar el primer impacto en
   móvil: se ve la bandera del idioma en el que estás y una flecha; el resto
   aparece al tocarla. El razonamiento está en templates/landing.php, junto al
   HTML. Es un <details> nativo: sin JavaScript, con teclado y sin estados que
   se puedan quedar colgados. */
.l-idiomas { position: relative; }
/* La forma antigua —las tres banderas en línea con ES/EN/CA— sigue viva para
   las webs ya publicadas, que no deben cambiar de aspecto porque actualicemos
   el plugin. Se activa con 'idiomas_estilo' => 'fila' en el archivo de datos. */
.l-idiomas--fila { display: flex; align-items: center; gap: 0.55rem; }
.l-idiomas--fila .l-idioma {
    padding: 0; border-radius: 0; background: none;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; gap: 0.34rem;
}
.l-idiomas--fila .l-idioma:hover { background: none; }
.l-idiomas__actual {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.3rem 0.42rem 0.3rem 0.34rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--texto-2);
    cursor: pointer;
    /* Fuera el triangulito del navegador: la flecha la dibujamos nosotros. */
    list-style: none;
}
.l-idiomas__actual::-webkit-details-marker { display: none; }
.l-idiomas__actual svg { display: block; flex: none; }
.l-idiomas__flecha { transition: transform 0.18s ease; opacity: 0.75; }
.l-idiomas[open] .l-idiomas__flecha { transform: rotate(180deg); }

.l-idiomas__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 940;                       /* por encima del marco de marca (900) */
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem;
    min-width: 9.5rem;
    border: 1px solid var(--borde);
    border-radius: 0.85rem;
    background: var(--fondo);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.l-idioma {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--texto-2);
    text-decoration: none;
}
.l-idioma svg { display: block; flex: none; }
.l-idioma:hover { background: var(--fondo-suave); }
.l-idioma--activa { color: var(--verde-tinta); font-weight: 700; background: var(--fondo-suave); }
.l-idioma--proximo { opacity: 0.45; }

/* Sobre el vídeo del hero (variante a pantalla completa) la cabecera es
   transparente, así que el selector se viste de oscuro para seguir leyéndose. */
.hero-cine .l-idiomas__actual {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------
   Hero / primera pantalla
   ------------------------------------------------------------ */
.hero {
    position: relative;
    /* contexto de apilamiento propio: sin él, la foto (z-index -1)
       se pinta detrás del fondo blanco de la página y desaparece */
    isolation: isolate;
    padding: 0.75rem 1.25rem 1.9rem;
    overflow: hidden;
}
.hero__foto {
    position: absolute;
    top: 0; right: 0;
    width: 84%;
    height: min(112vw, 470px);
    z-index: -1;
}
.hero__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 120px;
}
.hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    /* El velo se funde al COLOR DE FONDO DE LA MARCA, no a blanco. Es el mismo
       degradado de siempre; lo único que cambia es que ahora sabe de qué color
       es la página en la que está. */
    background:
        linear-gradient(96deg,
            rgb(var(--fondo-rgb)) 20%,
            rgba(var(--fondo-rgb), 0.92) 38%,
            rgba(var(--fondo-rgb), 0.55) 58%,
            rgba(var(--fondo-rgb), 0.05) 88%),
        linear-gradient(0deg, rgb(var(--fondo-rgb)) 2%, rgba(var(--fondo-rgb), 0) 22%);
}
.hero__cuerpo { max-width: 21rem; }

.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: rgba(233, 240, 235, 0.92);
    color: var(--verde-tinta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.pastilla svg { flex: none; }

.hero h1 {
    margin: 0.9rem 0 0.6rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.85rem, 8.6vw, 2.35rem);
    line-height: 1.14;
    color: var(--tinta);
    letter-spacing: -0.01em;
}
.hero h1 em {
    font-style: normal;
    color: var(--verde);
}
.hero__texto {
    margin: 0 0 1.1rem;
    max-width: 17.5rem;
    color: var(--texto-2);
}

/* Dos sellos (Google + TripAdvisor) con la MISMA estructura, sobre una cápsula
   blanca TRANSLÚCIDA con desenfoque: se leen bien pero dejan entrever la foto
   que pisan en móvil (petición de Eloy, 14/07; antes era una píldora blanca
   opaca que no gustaba). */
.hero__sellos {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin: 0 0 1.2rem;
    flex-wrap: wrap;
    /* Con dos sellos el tope de 20rem valía; con Google + perros + terraza,
       no. Se sube y se permite que salten de línea antes que apretarse. */
    max-width: 32rem;
}
/* Un solo sello (restaurantes sin TripAdvisor verificado, desde el
   01/09/2026): no debe estirarse a lo ancho de la pareja — se ajusta a su
   contenido, o queda una caja medio vacía al lado de la nota. */
.hero__sellos .sello:only-child {
    flex: 0 1 auto;
}
/* ...y TAMPOCO cuando tiene al lado un sello de dato (05/09/2026).
   La regla de arriba solo miraba el caso de un sello suelto, así que en Nardi
   —Google + Gastronomistas— el de Google seguía con flex:1 y se estiraba a 246 px
   para un contenido que ocupa la mitad: "muy estirado con espacio vacío", dijo
   Angel, y medido era exactamente eso. Cada cápsula mide ahora lo que necesita. */
.hero__sellos:has(.sello--dato) .sello--google,
.hero__sellos:has(.sello--dato) .sello--ta {
    flex: 0 1 auto;
}
.sello {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0.55rem 0.7rem;
    border-radius: 13px;
    /* Cápsula translúcida más transparente: deja ver más la foto (Eloy 14/07).
       El desenfoque mantiene el texto legible aun con poca opacidad. */
    background: rgba(255, 255, 255, 0.40);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(20, 69, 58, 0.12);
}
.sello__marca { display: flex; }
.sello__marca svg { display: block; }
/* Búho oficial de TripAdvisor sobre círculo verde de marca (#00d652) */
.sello__ta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #00d652;
    overflow: hidden;
}
/* El PNG del búho trae el fondo y los ojos en blanco; 'multiply' los funde con
   el verde del círculo (blanco × verde = verde) y deja el búho negro nítido:
   círculo verde uniforme, sin nada blanco (Angel 14/07). */
.sello__ta img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* Sellos de característica (02/09/2026) — perros, terraza, sin gluten…
   Ocupan el hueco que deja el sello de TripAdvisor cuando el restaurante no
   tiene una nota que podamos verificar. Son datos, no valoraciones: el icono
   va en círculo y no llevan número, para que nadie los lea como una nota.
   Se ajustan a su contenido en vez de estirarse: si no, dos sellos de dato
   dejaban el de Google apretado contra el borde. */
/* En escritorio esta caja no existe: los sellos se alinean con el de Google */
.hero__sellos-datos { display: contents; }

.sello--dato {
    flex: 0 1 auto;
    justify-content: center;
    gap: 2px;
    padding: 0.5rem 0.7rem;
}
.sello__dato-icono {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-bottom: 1px;
    border-radius: 50%;
    background: rgba(20, 69, 58, 0.10);
    color: var(--verde);
}
.sello__dato-titulo {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.15;
    color: #202124;
    white-space: nowrap;
}
.sello--dato .sello__pie { white-space: nowrap; }

/* Sello con LOGO DE MEDIO (05/09/2026). Misma estructura de tres líneas que el
   de Google —marca arriba, frase en medio, pie abajo—, para que se lean como
   pareja y no como "el sello bueno y un adorno". El logo va tal cual, sin
   círculo gris detrás: el círculo es lo que hacía que "Parada obligatoria"
   pareciera hermano de "Pet friendly" en vez de hermano de Google. */
.sello--conlogo { flex-direction: column; align-items: flex-start; gap: 3px; }
.sello--conlogo .sello__marca {
    display: flex;
    align-items: center;
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    margin: 0 0 1px;
}
.sello__logo-medio {
    height: 20px;
    width: auto;
    display: block;
}
.sello--conlogo .sello__dato-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tinta);
}

/* En móvil los sellos TAMBIÉN se ven (lo pidió Angel el 02/09). Antes se
   ocultaban porque en tres columnas de 390 px cada título se partía en dos.
   La solución no era esconderlos sino ADELGAZARLOS: en el teléfono la cápsula
   se pone en horizontal —icono al lado del título— y se queda sin el pie, que
   es lo que ocupaba y lo que menos aporta. Si aun así no cupieran, saltan de
   línea solos en vez de apretarse. */
@media (max-width: 560px) {
    /* La nota de Google, sola en su línea; los datos, juntos debajo. Sueltos
       quedaban escalonados: "Pet friendly" se estiraba hasta el borde y
       "Terraza" colgaba sola en la línea de abajo.
       EXCEPCIÓN desde el 05/09/2026: cuando el único sello de dato es uno de
       medio (con logo), va AL LADO del de Google y no debajo — lo pidió Angel.
       Son dos cápsulas hermanas y en 390 px caben las dos; apiladas parecían
       una principal y otra de relleno. */
    .hero__sellos {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }
    .hero__sellos:has(.sello--conlogo) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .hero__sellos:has(.sello--conlogo) .sello { flex: 1 1 auto; min-width: 0; }
    /* ...pero NINGUNO DE LOS DOS SE ESTIRA (07/09/2026). El 05/09 ya se corrigió
       esto con `.hero__sellos .sello--google { flex: 0 1 auto }`, y volvió a
       aparecer: la regla de arriba lleva `:has(.sello--conlogo)` y pesa más, así
       que ganaba ella y el sello de Google seguía estirándose con medio palmo de
       hueco al lado de "429 reseñas" (lo cazó Angel otra vez, en su móvil).
       Aquí se repite con el mismo peso y después, para que gane la buena: cada
       cápsula mide lo que necesita y las dos quedan pegadas a la izquierda. */
    .hero__sellos:has(.sello--conlogo) .sello--google,
    .hero__sellos:has(.sello--conlogo) .sello--conlogo { flex: 0 1 auto; }
    .hero__sellos:has(.sello--conlogo) .sello__nota { font-size: 0.95rem; }
    .hero__sellos:has(.sello--conlogo) .sello__pie,
    .hero__sellos:has(.sello--conlogo) .sello--conlogo .sello__dato-titulo { font-size: 0.78rem; }
    .hero__sellos:has(.sello--conlogo) .sello--conlogo .sello__pie { font-size: 0.68rem; }
    .hero__sellos .sello--google { flex: 0 1 auto; }
    .hero__sellos-datos {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }
    .sello--dato {
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.65rem;
    }
    .sello--dato .sello__pie { display: none; }
    /* ...salvo si el sello cita a un medio: ahí el pie ES la atribución y
       quitarlo convierte la cita en una afirmación nuestra. Ese vuelve a
       ponerse en columna, como en escritorio, para que quepan las dos líneas. */
    .sello--fuente,
    .sello--conlogo { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .sello--conlogo .sello__logo-medio { height: 17px; }
    .sello--fuente .sello__pie { display: block; white-space: normal; }
    .sello--fuente .sello__dato-icono { margin-bottom: 0.15rem; }
    .sello__dato-icono {
        width: 25px;
        height: 25px;
        margin-bottom: 0;
    }
    .sello__dato-titulo { font-size: 0.79rem; }
}

.sello__nota {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1px;
    color: #202124;
}
.sello__nota strong { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.sello__pie { font-size: 0.72rem; color: #5f6368; line-height: 1.2; }
.burbujas { display: inline-flex; gap: 1px; }

/* Botones */
.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 54px;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radio-boton);
    border: 1.5px solid transparent;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.boton--principal {
    background: var(--verde);
    color: #fff;
    box-shadow: 0 8px 22px rgba(20, 69, 58, 0.28);
}
.boton--principal:hover { background: var(--verde-tinta); }
.boton--secundario {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--verde);
    color: var(--verde-tinta);
}
.boton--secundario:hover { background: var(--verde-suave); }
/* Los dos botones EN FILA también en móvil (Eloy 17/07 + Sergio): RESERVAR a la
   izquierda, CARTA a la derecha. Mismo ancho total y mismo hueco que la fila de
   sellos de arriba: las dos filas comparten retícula y sus bordes coinciden. */
.hero__botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    max-width: 20rem;
}
.hero__botones .boton { padding-inline: 0.5rem; }
/* La coletilla de cada botón ("… mesa" / "Ver …") solo cuando hay sitio */
.boton__cola { display: none; }

.hero__micro {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.95rem 0 0;
    font-size: 0.8rem;
    color: var(--texto-2);
}
.hero__micro svg { color: var(--verde); flex: none; }

/* ------------------------------------------------------------
   Galería tipo mosaico de Google Maps: foto grande + dos pequeñas
   apiladas + tarjeta de comentario. Se desplaza sola (ver landing.js),
   sin flechas.
   ------------------------------------------------------------ */
.mosaico { margin-top: 0.4rem; }
/* Titular de entrada con gancho (Sergio, 17/07): un H2 que "dé hambre" y
   pueda llevar las palabras clave de la campaña. */
.mosaico__titulo {
    margin: 0.6rem 1.25rem 0.9rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--tinta);
}
.mosaico__titulo em { font-style: normal; color: var(--verde); }
.mosaico__pista {
    display: flex;
    gap: 0.55rem;
    padding: 0.25rem 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* 07/09/2026 · El imantado alineaba la primera foto con el BORDE del
       contenedor, ignorando su padding: bastaba con que la página moviera la
       pista un poco para que la galería quedara pegada al canto de la pantalla
       y la última foto saliera cortada (lo vio Angel en escritorio). Con
       scroll-padding, el imán respeta el mismo margen de cortesía que el
       padding, a izquierda y a derecha. */
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
}
.mosaico__pista::-webkit-scrollbar { display: none; }
.mosaico__col {
    flex: 0 0 auto;
    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    scroll-snap-align: start;
}
/* Columnas algo más estrechas que antes (208/144): así en un móvil de 390 px
   la tercera columna SIEMPRE asoma cortada por el borde derecho y se entiende
   sin explicación que la fila sigue (Eloy, 18/07: "no parece que haya cosas
   a la derecha"). El patrón de Google Maps: enseñar media tarjeta. */
.mosaico__grande { width: 188px; }
.mosaico__par { width: 132px; }
.mosaico__fig {
    margin: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    /* El póster va aquí como fondo; el vídeo entra encima (ver abajo) */
    background-size: cover;
    background-position: center;
}
.mosaico__col img,
.mosaico__col video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vídeo del mosaico: invisible hasta que reproduce de verdad (el JS le pone
   .reproduciendo al evento 'playing'). Mientras carga —o con "reducir
   movimiento"— se ve el póster de fondo, sin el fogonazo de arranque de iOS. */
.mosaico__video { opacity: 0; transition: opacity 0.45s ease; }
.mosaico__video.reproduciendo { opacity: 1; }
.mosaico__cita {
    width: 232px;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.1rem 1.15rem;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 16px;
}
/* Cabecera estilo Google: tema + caritas solapadas + "Más N" */
.mosaico__cita-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.mosaico__cita-tema { font-size: 0.84rem; font-weight: 600; color: #3c4043; }
.mosaico__cita-caras { display: inline-flex; align-items: center; }
.mosaico__cita-caras img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #fff;
    margin-left: -6px;
}
.mosaico__cita-caras img:first-child { margin-left: 0; }
.mosaico__cita-mas { font-size: 0.8rem; font-weight: 500; color: #5f6368; }
.mosaico__cita-texto {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.08rem;
    line-height: 1.4;
    color: #202124;
}
/* Comillas grandes de color, como las reseñas destacadas de Google */
.mosaico__comilla {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 0;
    color: #12a594;
    vertical-align: -0.35em;
}
.mosaico__comilla--fin { vertical-align: -0.55em; margin-left: 0.05rem; }
.mosaico__cita-texto mark {
    background: var(--resalte-fondo);
    color: var(--resalte-tinta);
    padding: 0 2px;
    border-radius: 3px;
}
.mosaico__cita-autor { font-size: 0.82rem; color: #5f6368; }
/* La marca de "traducida", debajo del autor y a media voz: informa sin robarle
   protagonismo a la frase. Mismo gesto que Google con su "Traducido del
   inglés". (08/09/2026) */
.mosaico__cita-nota {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #80868b;
    font-style: italic;
}

/* ------------------------------------------------------------
   Secciones y tarjetas
   ------------------------------------------------------------ */
/* Un pelín más de aire entre bloques que antes (1.9rem): +12 px aprox.
   (sugerencia de Sergio, mediabuyer, 17/07 — "darle un poco más de aire"). */
.seccion { padding: 2.65rem 1.25rem 0; }
.seccion:last-of-type { padding-bottom: 2.2rem; }

.seccion__titulo {
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.42rem;
    line-height: 1.2;
    color: var(--tinta);
}
.seccion__titulo--centrado { text-align: center; }

.tarjeta {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.3rem 1.2rem;
}
.tarjeta--suave {
    background: var(--fondo-suave);
    border-color: transparent;
    box-shadow: none;
}

/* Filas con icono (ubicación, info útil) */
.fila-icono {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.55rem 0;
}
.fila-icono svg { color: var(--verde); flex: none; margin-top: 0.1rem; }
.fila-icono strong { display: block; line-height: 1.35; }
.fila-icono span { display: block; font-size: 0.86rem; color: var(--texto-2); line-height: 1.4; }

/* Ruta visual (landing de cercanía) */
.ruta {
    margin: 0.9rem 0;
    padding: 0.95rem 1rem;
    background: var(--verde-suave);
    border-radius: 14px;
}
.ruta ol { list-style: none; margin: 0; padding: 0; }
.ruta li {
    position: relative;
    padding: 0 0 0 1.6rem;
}
.ruta li::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.42rem;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--verde);
    outline: 3px solid rgba(20, 69, 58, 0.15);
}
.ruta li + li { margin-top: 1.45rem; }
.ruta li + li::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: -1.25rem;
    height: 1.2rem;
    border-left: 2px dashed rgba(20, 69, 58, 0.45);
}
.ruta strong { display: block; font-size: 0.95rem; }
.ruta span { display: block; font-size: 0.8rem; color: var(--texto-2); }

/* Mapa incrustado */
.mapa {
    position: relative;
    margin-top: 1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--verde-suave);
}
/* Mapa como imagen: captura real de Google Maps RECENTRADA en Patsa Lab (su
   ubicación cae en el centro exacto de la imagen), así que object-position
   center mantiene la ubicación visible en cualquier recorte y la chincheta que
   dibujamos encima cae siempre sobre el sitio. */
.mapa img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center center;
}
/* Chincheta roja grande sobre la ubicación (la imagen va recentrada para que el
   restaurante quede en el centro exacto). La punta apunta al sitio. */
.mapa__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    height: 40px;
    transform: translate(-50%, -100%);
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    display: block;
}
/* Latido suave que emana de la punta de la chincheta (efecto "aquí estamos"). */
.mapa__pulso {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: rgba(201, 42, 42, 0.42);
    z-index: 1;
    pointer-events: none;
    animation: mapaPulso 2.6s ease-out infinite;
}
@keyframes mapaPulso {
    0%   { transform: scale(0.5); opacity: 0.65; }
    70%  { opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mapa__pulso { animation: none; opacity: 0.4; transform: scale(1.1); }
}

/* Fachada del mapa: el bloque entero es un botón (borde y tipografía a cero
   para que se vea idéntico a la imagen de antes). Al activarlo, el iframe del
   Google Maps real lo rellena y la chincheta dibujada se retira (el mapa real
   trae la suya). */
.mapa--fachada {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--borde);
    font: inherit;
    cursor: pointer;
    text-align: inherit;
}
.mapa__toca {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #3c4043;
    font-size: 0.76rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
/* "A X km de tu ubicación": chip estilo Google, abajo a la izquierda
   (la pastilla "Toca para explorar" vive abajo a la derecha). */
.mapa__distancia {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    color: #1a73e8;
    font-size: 0.76rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.mapa--activo { cursor: default; }
.mapa--activo img,
.mapa--activo .mapa__pin,
.mapa--activo .mapa__pulso,
.mapa--activo .mapa__distancia,
.mapa--activo .mapa__toca { display: none; }
.mapa--activo iframe {
    display: block;
    width: 100%;
    height: 210px;
    border: 0;
}

.boton--mapa {
    margin-top: 1rem;
    min-height: 48px;
    background: #fff;
    border-color: var(--borde);
    color: var(--tinta);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(14, 51, 43, 0.08);
}
.boton--mapa:hover { background: var(--fondo-suave); }

/* Lista de puntos con check (romántico / especialidad) */
.puntos { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.puntos li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.45rem 0;
}
.puntos svg { color: var(--verde); flex: none; margin-top: 0.15rem; }

.tarjeta__nota {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--verde-suave);
    font-size: 0.85rem;
    color: var(--verde-tinta);
    line-height: 1.5;
}
.tarjeta__nota a { font-weight: 700; color: var(--verde-tinta); }

/* Botón que antepone la reserva dentro del bloque específico (sin gluten) */
.tarjeta__cta { margin-top: 1.2rem; }

/* ------------------------------------------------------------
   Beneficios
   ------------------------------------------------------------ */
/* Flexbox y no rejilla, a propósito (02/09/2026): con un número impar de
   beneficios la rejilla dejaba la última tarjeta sola y con huecos al lado —
   en Casa Pepi, al añadir la terraza, quedaron 4 arriba y 1 abajo. Así la
   última fila se centra sola, tenga la landing 4 beneficios o 7. */
.beneficios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}
.beneficio {
    flex: 1 1 calc(50% - 0.4rem);
    max-width: calc(50% - 0.4rem);
}

/* EN MÓVIL, LA ÚLTIMA CAJITA IMPAR OCUPA LA FILA ENTERA (05/09/2026).
   Con cinco beneficios y dos columnas, la quinta se quedaba sola en medio de
   la última fila — "huérfana", lo llamó Angel, y es exactamente eso: parece un
   descuido, no una decisión. Ocupando todo el ancho remata la rejilla en vez de
   colgar de ella, y se pone en horizontal —icono a la izquierda, texto al
   lado— que es como se lee bien una caja ancha y baja.
   Solo hasta 699 px: de ahí para arriba caben todas en una fila. */
@media (max-width: 699px) {
    /* EL VÍDEO SE VEÍA POR DEBAJO DEL TEXTO (07/09/2026, lo cazó Angel: "una
       línea vertical fina que atraviesa el texto, detecto movimiento"). No era
       una línea dibujada: era el canto de la vitrina del propio vídeo, que se
       transparentaba justo por detrás del titular. En escritorio no pasa porque
       el texto ocupa la mitad izquierda y el vídeo empieza mucho más allá; en
       un móvil de 390 px, el texto llega hasta 356 y el vídeo arranca en 62, así
       que se pisan. El velo se alarga: opaco hasta bien pasado el texto, y el
       vídeo sigue viéndose —y moviéndose— en la franja de la derecha. */
    /* SE VE MÁS VÍDEO      (09/09/2026, lo pidió Iñigo)
       *"El vídeo es una pena, se ve poco… igual si rebajamos el difuminado ese,
       lo suficiente para que el texto sea legible y se vea más el vídeo."*

       Rebajar el velo a secas NO servía, y se midió: abriéndolo se pasaba de un
       36 % a un 39-42 % de vídeo a la vista, pero el contraste del texto caía a
       3,9-4,3:1 en los fotogramas oscuros — por debajo del mínimo legible de
       4,5:1. La primera medición daba 7:1 porque el vídeo estaba pausado en un
       fotograma claro: hay que medir el PEOR fotograma, no uno cualquiera.

       Lo que sí funciona es estrechar el párrafo 40 px: acaba en x=260 en vez de
       x=300, así que el velo puede abrirse antes sin dejar texto a la intemperie.
       Medido en seis momentos del vídeo: **44 % de vídeo visible y 5,3:1 en el
       peor**. El hero crece 25 px, que es lo que cuesta. */
    .hero__texto { max-width: 15rem; }

    .hero__foto::after {
        background:
            linear-gradient(96deg,
                rgb(var(--fondo-rgb)) 44%,
                rgba(var(--fondo-rgb), 0.90) 56%,
                rgba(var(--fondo-rgb), 0.30) 70%,
                rgba(var(--fondo-rgb), 0.03) 84%,
                rgba(var(--fondo-rgb), 0) 92%),
            linear-gradient(0deg, rgb(var(--fondo-rgb)) 2%, rgba(var(--fondo-rgb), 0) 22%);
    }

    .beneficios .beneficio:last-child:nth-child(odd) {
        flex-basis: 100%;
        max-width: 100%;
        grid-template-columns: auto 1fr;
        justify-items: start;
        align-items: center;
        text-align: left;
        gap: 0.9rem;
        padding-top: 1.05rem;
        padding-bottom: 1.05rem;
    }
}
.beneficio {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 1.05rem 0.7rem;
    background: var(--fondo-suave);
    border-radius: 16px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tinta);
}
.beneficio span { max-width: 9.5rem; }
.beneficio__icono {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--verde);
    box-shadow: 0 3px 10px rgba(20, 69, 58, 0.1);
}

/* ------------------------------------------------------------
   "Información para tu visita": guiño al resumen con IA
   que Google Maps enseña en el móvil
   ------------------------------------------------------------ */
.visita {
    background: linear-gradient(150deg, #edf1fc, #f6f3fd);
    border-radius: var(--radio-tarjeta);
    padding: 1.35rem 1.25rem 1.2rem;
}
/* En móvil, el título ("Lo que recomiendan sobre nosotros") va en su propia
   línea y el sello de "¡Nuevo!" + caras debajo: compartiendo fila, el título
   se partía en cuatro líneas apretadas. En escritorio, fila como siempre. */
.visita__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
.visita__titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tinta);
}
/* "¡Nuevo!" + caras de la gente (fusilado de Google Maps) */
.visita__sello {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}
.visita__badge {
    padding: 0.26rem 0.58rem;
    border-radius: 8px;
    background: #d7f0dd;
    color: #0d652d;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
.visita__caras { display: inline-flex; align-items: center; }
.visita__caras img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -8px;
}
.visita__caras img:first-child { margin-left: 0; }
.visita__caras-mas {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    margin-left: -8px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #fff;
    color: #3c4043;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.visita__chispa {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4285f4;
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.16);
    /* Parpadeo "en vivo" (petición de Eloy, 12/07) */
    animation: chispa-latido 1.8s ease-in-out infinite;
}
@keyframes chispa-latido {
    0%, 100% { box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.22); opacity: 1; }
    50%      { box-shadow: 0 0 0 8px rgba(66, 133, 244, 0);    opacity: 0.6; }
}
.visita ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.visita li {
    position: relative;
    padding: 0.34rem 0 0.34rem 1.15rem;
    font-size: 0.92rem;
    line-height: 1.45;
}
.visita li::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.95em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tinta);
}
/* "Opinión de…" bajo cada cita (mediabuyers, 16/07) */
.visita__autor {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5f6368;
}
.visita__nota {
    margin: 0.75rem 0 0;
    font-size: 0.74rem;
    color: var(--texto-2);
    text-align: center;
}

/* ------------------------------------------------------------
   Reels del restaurante: fila de vídeos verticales 9:16 en mudo
   y en bucle, con botón de sonido (estilo synseralabs.com que
   pasó Eloy, 16/07 — solo el reproductor, sin botones de tienda)
   ------------------------------------------------------------ */
.reels__pista {
    display: flex;
    gap: 0.6rem;
    margin: 0 -1.25rem;
    padding: 0.25rem 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.reels__pista::-webkit-scrollbar { display: none; }
.reel {
    position: relative;
    margin: 0;
    /* Ancho pensado para que el siguiente reel asome cortado en móvil
       (misma idea que el mosaico: se entiende que la fila sigue). */
    flex: 0 0 46%;
    max-width: 210px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: #101512;
    scroll-snap-align: start;
}
.reel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reel__sonido {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
}
.reel__sonido:hover { background: rgba(0, 0, 0, 0.75); }
.reel__sonido .reel__alto { display: none; }
.reel__sonido[aria-pressed="true"] .reel__alto { display: block; }
.reel__sonido[aria-pressed="true"] .reel__mudo { display: none; }

/* ------------------------------------------------------------
   Sección de carta
   ------------------------------------------------------------ */
.carta__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
/* Título de la carta con 3-4 px más que el resto y enlace algo mayor, para
   que la sección "contraste" al llegar (sugerencia de Sergio, 17/07). */
.carta__cabecera .seccion__titulo { margin: 0; font-size: 1.62rem; }
.carta__enlace {
    flex: none;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--verde);
    text-decoration: none;
    white-space: nowrap;
}
.carta__enlace:hover { text-decoration: underline; }

.carta__pista {
    display: flex;
    gap: 0.7rem;
    margin: 0 -1.25rem;
    padding: 0.25rem 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.carta__pista::-webkit-scrollbar { display: none; }
.categoria {
    flex: 0 0 38%;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tinta);
    box-shadow: 0 3px 14px rgba(20, 69, 58, 0.06);
}
.categoria img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.categoria figcaption {
    padding: 0.6rem 0.55rem 0.75rem;
    text-align: center;
}
.categoria strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.categoria span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--verde);
}

/* ------------------------------------------------------------
   Reseñas: panel al estilo Google Maps (paleta y trazos de Google:
   grises #202124/#5f6368, bordes #dadce0, azul #1a73e8)
   ------------------------------------------------------------ */
.opiniones { background: var(--fondo-suave); padding-top: 1.9rem; padding-bottom: 1.9rem; margin-top: 1.9rem; }
.estrellas { display: inline-flex; gap: 2px; color: var(--estrella); }

.gpanel {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 16px;
    padding: 1.25rem;
    color: #202124;
}
.gpanel__titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 500;
    color: #202124;
}
.gpanel__masmencionado {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #5f6368;
}
.gpanel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
/* Píldoras de "lo más mencionado". Las que llevan reseñas son BOTONES de
   verdad (Sergio 17/07): borde fino que invita a tocar, azul de Google al
   estar abiertas. Las que no llevan citas quedan como etiqueta quieta. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    background: #f1f3f4;
    font-size: 0.84rem;
    font-weight: 500;
    color: #3c4043;
    white-space: nowrap;
}
.chip b { font-weight: 400; color: #5f6368; }
.chip--boton {
    border: 1px solid #dadce0;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
.chip--boton:hover { background: #f8f9fa; }
.chip--boton.chip--activo {
    background: #e8f0fe;
    border-color: #d2e3fc;
    color: #1967d2;
}
.chip--boton.chip--activo b { color: #1967d2; }

/* Panel de reseñas del tema abierto: tarjetas pequeñas al estilo Google */
.gpanel__tema {
    margin: -0.4rem 0 1.2rem;
    padding: 0.9rem 1rem 0.3rem;
    border: 1px solid #d2e3fc;
    border-radius: 12px;
    background: #f8fafd;
}
.tema-cita {
    margin: 0 0 0.9rem;
}
.tema-cita__texto {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #3c4043;
}
.tema-cita__pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #5f6368;
}
.tema-cita__pie strong { color: #202124; font-weight: 500; }
.gpanel__subtitulo {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 500;
    color: #202124;
}
.gpanel__resumen {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1.6rem;
    margin-bottom: 1.4rem;
}
.gbarra {
    display: grid;
    grid-template-columns: 0.8rem 1fr;
    align-items: center;
    column-gap: 0.65rem;
}
.gbarra + .gbarra { margin-top: 0.45rem; }
.gbarra > span { font-size: 0.82rem; color: #5f6368; text-align: right; }
.gbarra__pista {
    height: 8px;
    border-radius: 999px;
    background: #f1f3f4;
    overflow: hidden;
}
.gbarra__relleno {
    height: 100%;
    border-radius: 999px;
    background: var(--estrella);
}
.gpanel__nota {
    display: grid;
    justify-items: center;
    gap: 3px;
}
.gpanel__cifra {
    font-size: 2.6rem;
    line-height: 1.05;
    color: #202124;
}
.gpanel__total { font-size: 0.8rem; color: #5f6368; }

.opiniones__pista {
    display: flex;
    gap: 0.8rem;
    margin: 0 -1.25rem;
    padding: 0.25rem 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.opiniones__pista::-webkit-scrollbar { display: none; }
.opinion {
    flex: 0 0 84%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    padding: 1.05rem 1.1rem;
}
.opinion blockquote {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #3c4043;
}
/* Texto largo recortado a 4 líneas con "Más" (como Google) */
.opinion__texto.es-largo {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.opinion__texto.expandido {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.opinion__mas {
    align-self: flex-start;
    margin: -0.15rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #1a73e8;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
}
.opinion__mas:hover { text-decoration: underline; }
.opinion__val {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.opinion__fecha { font-size: 0.78rem; color: #5f6368; }
.opinion__visita { margin: 0; font-size: 0.8rem; color: #5f6368; }
/* Cuadrícula de fotos de la reseña (2x2) */
.opinion__fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 0.15rem;
    border-radius: 10px;
    overflow: hidden;
}
/* UNA SOLA FOTO: apaisada, no cuadrada (05/09/2026).
   Con la rejilla de una columna y aspect-ratio 1, la foto suelta se comía TODO
   el ancho de la tarjeta y por tanto otro tanto de alto: en Nardi la tarjeta
   del medio medía el doble que sus vecinas y las dejaba con un palmo de blanco
   debajo, porque en una fila todas miden lo que la más alta. Apaisada ocupa
   más o menos lo mismo que dos cuadradas y la fila vuelve a cuadrar. */
.opinion__fotos[data-n="1"] { grid-template-columns: 1fr; }
.opinion__fotos[data-n="1"] img { aspect-ratio: 16 / 9; }
.opinion__foto {
    position: relative;
    display: block;
    margin: 0;
}
.opinion__foto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.opinion__quien {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.opinion__avatar {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--verde-suave);
    color: var(--verde-tinta);
    font-weight: 700;
    font-size: 0.95rem;
    flex: none;
}
/* Solo el texto de la firma (autor y fecha), NO la letra del avatar */
.opinion__quien div strong { display: block; font-size: 0.9rem; font-weight: 500; color: #202124; line-height: 1.25; }
.opinion__quien div span { display: block; font-size: 0.76rem; color: #5f6368; }

/* ------------------------------------------------------------
   Preguntas frecuentes (acordeón nativo)
   ------------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: 0.6rem; }
.faq__item {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 0 1.1rem;
    box-shadow: var(--sombra-tarjeta);
}
.faq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__mas {
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
}
.faq__mas::before, .faq__mas::after {
    content: '';
    position: absolute;
    background: var(--verde);
    border-radius: 2px;
    transition: transform 0.2s ease;
}
.faq__mas::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__mas::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__item[open] .faq__mas::after { transform: scaleY(0); }
.faq__respuesta {
    padding: 0 0 1.05rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--texto-2);
}
.faq__respuesta a { font-weight: 600; }

/* ------------------------------------------------------------
   "Nuestra Historia": bloque emocional desplegable (mediabuyers
   16/07 + decisión de Eloy: sin vídeo, un trocito y desplegar)
   ------------------------------------------------------------ */
.historia {
    background: var(--fondo-suave);
    border-radius: var(--radio-tarjeta);
    padding: 1.5rem 1.35rem;
}
.historia__resumen {
    cursor: pointer;
    list-style: none;
}
.historia__resumen::-webkit-details-marker { display: none; }
.historia__titulo { margin-bottom: 0.55rem; }
.historia__entrada {
    margin: 0;
    color: var(--texto-2);
    line-height: 1.6;
}
.historia__mas {
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--verde);
}
.historia__mas::after { content: ' ↓'; }
.historia[open] .historia__mas { display: none; }
.historia__texto p {
    margin: 0.9rem 0 0;
    color: var(--tinta);
    line-height: 1.65;
}

/* ------------------------------------------------------------
   Información útil
   ------------------------------------------------------------ */
.info-util .fila-icono { border-bottom: 1px solid var(--borde); }
.info-util .fila-icono:last-child { border-bottom: 0; padding-bottom: 0; }
.info-util a { color: inherit; text-decoration: none; }
.info-util a:hover { color: var(--verde); }

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */
.l-pie {
    margin-top: 2rem;
    /* Franja compacta: el botón flotante queda por debajo del pie al final de la
       página, así que ya no hace falta reservar 74px de hueco aquí (dejaba mucho
       espacio verde vacío en móvil; corrección pedida por Eloy 14/07). */
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--verde-tinta);
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    font-size: 0.82rem;
}
.l-pie img { width: 96px; margin: 0 auto 0.9rem; }
.l-pie a { color: #fff; text-decoration: none; font-weight: 600; }
.l-pie a:hover { text-decoration: underline; }
.l-pie p { margin: 0; }
/* La firma de Gastromaps: presente pero en segundo plano. Un escalón por debajo
   del nombre del restaurante, que es de quien es la web. (10/09/2026) */
.l-pie__firma {
    margin-top: 0.75rem !important;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    /* SIN MAYÚSCULAS (11/09/2026). Lo pidió Eloy: "no lo pongas en may... ponlo
       así como te lo pase". La marca se escribe como la escriben ellos. */
    opacity: 0.5;
}
/* El enlace de la firma sigue la MISMA regla que los demás enlaces del pie
   (11/09/2026): sin subrayado, en negrita, y el subrayado aparece al pasar el
   ratón. No es un capricho: los enlaces legales del pie ya se marcan así, y
   estrenar una forma distinta para la firma la convertiría en el elemento más
   llamativo de una zona que es, a propósito, la más discreta de la página.
   Eloy pidió el enlace, no que destacara. */
.l-pie__firma a,
.pie-interior__firma a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}
.l-pie__firma a:hover,
.pie-interior__firma a:hover { text-decoration: underline; }
/* Datos prácticos del pie (Sergio, 17/07: rellenar el hueco con algo útil).
   Texto plano y teléfono que llama: cero salidas nuevas de la landing. */
.l-pie__datos {
    margin: 0 0 0.55rem !important;
    line-height: 1.6;
}
.l-pie__datos span { opacity: 0.55; padding: 0 0.25rem; }

/* ------------------------------------------------------------
   Botón flotante de reserva (único, siempre visible al hacer scroll)
   ------------------------------------------------------------ */
.cta-flotante {
    position: sticky;
    bottom: 0;
    z-index: 45;
    /* ALTURA CERO A PROPÓSITO (01/09/2026). Este bloque va después del pie, y
       siendo sticky reservaba su alto al final del documento: asomaban ~91 px de
       blanco bajo el pie, y al desplegarse el aviso de reserva crecía otro tanto
       — de ahí la franja que aparecía y desaparecía al ritmo del aviso, que vio
       Angel. Con altura 0 no ocupa flujo ni desborda: el velo y el botón se
       dibujan hacia ARRIBA desde el borde inferior. */
    height: 0;
    padding: 0;
    background: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cta-flotante.visible {
    opacity: 1;
    pointer-events: auto;
}
.cta-flotante.visible .cta-flotante__bloque { transform: none; }

/* Bloque unificado: aviso (blanco) + botón (verde) como una sola pieza,
   con radio y sombra compartidos (briefing de Angel, 14/07). */
/* El velo que difumina el contenido bajo el botón. Antes era el fondo del
   contenedor; ahora que este mide 0, se dibuja hacia arriba desde abajo. */
.cta-flotante::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 11rem;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 55%, rgba(255, 255, 255, 0));
    pointer-events: none;
}
/* El desplazamiento de entrada va en el bloque, no en el contenedor: este mide
   0 de alto y un translateY hacia abajo le hacía desbordar esos 12 px al final
   de la página. El bloque tiene 0.85rem de margen por debajo, así que se mueve
   sin sobresalir. */
.cta-flotante__bloque {
    transform: translateY(12px);
    transition: transform 0.3s ease;
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sombra-flotante);
}
.cta-flotante__bloque .boton { border-radius: 0; box-shadow: none; }

/* "Zumbido": pulso sutil de todo el bloque como reclamo a reservar
   (petición de Eloy, 12/07). Solo cuando está visible. */
.cta-flotante.visible .cta-flotante__bloque {
    animation: flotante-zumbido 5s ease-in-out 1.4s infinite;
}
@keyframes flotante-zumbido {
    0%, 84%, 100% { transform: scale(1); }
    88% { transform: scale(1.045); }
    92% { transform: scale(0.992); }
    96% { transform: scale(1.028); }
}

/* Aviso de reserva reciente: colapsado por defecto; se despliega hacia
   arriba unos segundos sin mover el botón. */
.cta-aviso {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-height: 0;
    opacity: 0;
    padding: 0 0.9rem;
    overflow: hidden;
    color: var(--tinta);
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.cta-aviso.mostrar {
    max-height: 72px;
    opacity: 1;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--borde);
}
.cta-aviso__icono {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--verde-suave);
    color: var(--verde);
    flex: none;
}
.cta-aviso__txt strong { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.2; }
.cta-aviso__detalle { font-size: 0.77rem; color: var(--texto-2); }

/* Sin JavaScript, el botón flotante queda siempre visible */
.no-js .cta-flotante { opacity: 1; transform: none; pointer-events: auto; }

/* ------------------------------------------------------------
   Visor de fotos a pantalla completa (mediabuyers + Eloy + Sergio,
   16-17/07). Vuelve el visor retirado el 12/07, ahora con precarga:
   la foto no se enseña hasta estar completa (ver landing.js).
   ------------------------------------------------------------ */
.es-ampliable { cursor: zoom-in; }
body.con-visor { overflow: hidden; }
.visor {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 16, 14, 0.94);
}
.visor.abierto { display: flex; }
.visor__marco {
    margin: 0;
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    position: relative;
}
.visor__foto {
    max-width: 100%;
    max-height: 86vh;
    border-radius: 10px;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}
/* Mientras se precarga la versión grande: la miniatura, un pelín apagada,
   con un aro girando encima. Nunca una foto a medio pintar. */
.visor__marco.cargando .visor__foto { opacity: 0.55; }
.visor__marco.cargando::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: visor-giro 0.8s linear infinite;
}
@keyframes visor-giro { to { transform: rotate(360deg); } }
.visor__cerrar,
.visor__flecha {
    position: fixed;
    z-index: 92;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.visor__cerrar:hover, .visor__flecha:hover { background: rgba(255, 255, 255, 0.24); }
.visor__cerrar { top: max(0.9rem, env(safe-area-inset-top, 0px)); right: 0.9rem; font-size: 1.1rem; }
.visor__flecha { top: 50%; margin-top: -23px; font-size: 1.9rem; }
.visor__flecha--izq { left: 0.6rem; }
.visor__flecha--der { right: 0.6rem; }
.visor__contador {
    position: fixed;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* ============================================================
   Escritorio (≥1024 px): la landing deja de ser la pieza móvil
   centrada y pasa a página completa. Misma identidad (verde,
   crema, Lora en títulos); los 8 bloques se recolocan en columnas.
   Entre 760 y 1023 px se conserva la tarjeta móvil centrada.
   ============================================================ */

/* En móvil, los envoltorios de columnas son transparentes al diseño */
.tarjeta__cols, .tarjeta__col { display: contents; }

@media (min-width: 1024px) {
    body { padding: 0; background: var(--fondo); }
    .l-pagina {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* --- Cabecera a lo ancho, solo el logotipo --- */
    .l-cabecera { padding: 0.9rem clamp(2rem, 6vw, 5rem); }
    .l-cabecera__logo img { width: 118px; }

    /* --- Hero a dos columnas: texto + foto a sangre derecha --- */
    .hero {
        display: flex;
        align-items: center;
        min-height: min(74vh, 620px);
        padding: 2.5rem clamp(2rem, 6vw, 5rem) 3.2rem;
    }
    /* Foto un poco más ancha y fundido más corto: la imagen se revela antes y
       desaparece la franja "vacía" entre el texto y la foto que veía Sergio
       (mediabuyer, 17/07) y que volvió a señalar Angel con la fachada (19/07):
       el degradado ahora muere más cerca del H1. */
    .hero__foto { width: 70%; height: 100%; }
    .hero__foto img { border-bottom-left-radius: 180px; }
    /* EL VELO SE FUNDE AL COLOR DE LA MARCA, TAMBIÉN EN ESCRITORIO (08/09/2026).
       Aquí estaba clavado en #fff —resto de cuando todas las landings tenían
       fondo blanco— y ese era el origen de LA RAYA que Angel y Eloy veían desde
       el 03/09 ("la raya esa ahí en medio cortante"). Medido sobre la página
       publicada a 1440 px: en x=430 el color era el crema de Nardi (247,244,236)
       y en x=432 saltaba a blanco puro (254,254,254) — justo el 30 % del ancho,
       donde arranca .hero__foto. No era el vídeo, ni el marco, ni el canto de la
       foto: era este degradado pintando un rectángulo blanco sobre el crema.
       En Casa Pepi no se veía porque su fondo SÍ es blanco. */
    .hero__foto::after {
        background:
            linear-gradient(90deg,
                rgb(var(--fondo-rgb)) 0%,
                rgba(var(--fondo-rgb), 0.85) 10%,
                rgba(var(--fondo-rgb), 0.30) 30%,
                rgba(var(--fondo-rgb), 0) 52%),
            linear-gradient(0deg, rgb(var(--fondo-rgb)) 2%, rgba(var(--fondo-rgb), 0) 14%);
    }
    .hero__cuerpo { max-width: 34rem; }
    .hero h1 { font-size: clamp(2.7rem, 3.4vw, 3.4rem); }
    .hero__texto { max-width: 28rem; font-size: 1.06rem; }
    /* En escritorio hay sitio de sobra y el cuerpo va sobre blanco: los sellos
       lucen sin apreturas (Eloy, 14/07). */
    /* 25 → 27rem el 07/09/2026. Con 25 los tres sellos cabían por seis píxeles
       en español y por cinco en inglés; en catalán, donde "Terrassa · En un
       carrer tranquil" es más largo, se pasaban por doce y el sello de la
       terraza caía a una segunda línea. Lo vio Eloy en la versión catalana.
       Se sube CON los botones, no solo aquí: comparten ancho a propósito desde
       el 18/07 para que las verticales de sellos y botones coincidan. */
    .hero__sellos { gap: 0.8rem; max-width: 27rem; }
    .sello { padding: 0.65rem 0.85rem; }
    .sello__nota strong { font-size: 1.3rem; }
    /* Misma retícula que los sellos (dos mitades iguales, mismo hueco y mismo
       ancho total): las verticales de sellos y botones coinciden exactamente
       (petición de Eloy, 18/07 — "que las líneas coincidan"). */
    .hero__botones { grid-template-columns: 1fr 1fr; gap: 0.8rem; max-width: 27rem; }
    /* Letra un punto menor y huecos apretados: "RESERVAR MESA" entero en una
       línea dentro de su mitad de 12 rem (partido en dos líneas parecía un
       botón roto). */
    .hero__botones .boton {
        width: 100%;
        padding-inline: 0.5rem;
        gap: 0.45rem;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    /* Reservar a la DERECHA en escritorio (Sergio, mediabuyer): la acción
       principal cierra la lectura. El orden del HTML no cambia (en móvil manda
       el de Eloy: RESERVAR – CARTA). */
    .hero__botones .boton--principal { order: 2; }
    .boton__cola { display: inline; }

    /* --- Galería mosaico: más padding lateral y algo más de alto --- */
    .mosaico__titulo {
        margin: 1rem clamp(2rem, 6vw, 5rem) 1.1rem;
        font-size: 1.9rem;
    }
    .mosaico__pista {
        padding-inline: clamp(2rem, 6vw, 5rem);
        scroll-padding-inline: clamp(2rem, 6vw, 5rem);
        gap: 0.8rem;
    }
    .mosaico__col { height: 340px; }
    .mosaico__grande { width: 240px; }
    .mosaico__par { width: 168px; }
    .mosaico__cita { width: 280px; }

    /* --- Ancho de lectura común de las secciones --- */
    .seccion {
        max-width: 1240px;
        margin-inline: auto;
        padding: 3.2rem clamp(2rem, 6vw, 5rem) 0;
    }
    .seccion:last-of-type { padding-bottom: 3.4rem; }
    .seccion__titulo { font-size: 1.9rem; margin-bottom: 1.3rem; }
    .tarjeta { padding: 2.2rem 2.4rem; }

    /* --- Bloque específico: contenido a la izquierda, mapa a la derecha ---
       "Alinear el título al mapa para que se quede todo bien cuadrado"
       (Eloy, 15/07). Dos mitades:
       · Arriba: el título vive dentro de la columna izquierda (ver landing.php)
         y el mapa no lleva margen, así los dos bordes superiores coinciden.
       · Abajo: 'stretch' + el mapa elástico hacen que las dos columnas acaben
         a la vez. Antes el mapa colgaba muy por debajo del texto y el bloque
         quedaba descolgado por una esquina. */
    .tarjeta__cols {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        column-gap: 2.8rem;
        align-items: stretch;
    }
    .tarjeta__col { display: block; }
    .tarjeta__col--mapa {
        display: flex;
        flex-direction: column;
    }
    .tarjeta__cta { width: auto; padding-inline: 2.2rem; }
    /* El mapa ocupa el hueco que le deja el botón: crece o mengua hasta que su
       columna mide lo mismo que la del texto, sin bajar de 16rem. */
    .mapa {
        margin-top: 0;
        flex: 1;
        min-height: 16rem;
    }
    .mapa img { height: 100%; }

    /* --- Información para tu visita: puntos en fila --- */
    .visita { padding: 2rem 2.4rem 1.6rem; }
    .visita__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.8rem;
    }
    .visita ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem 2.2rem;
        margin-bottom: 1.4rem;
    }
    .visita__boton {
        width: auto;
        margin-inline: auto;
        padding-inline: 2.4rem;
    }

    /* --- Reels: caben los cinco a la vez, sin scroll --- */
    .reels__pista { margin: 0; padding: 0.25rem 0; }
    .reel { flex: 1 1 0; max-width: 230px; }

    /* --- Beneficios y carta en fila completa --- */
    /* 02/09/2026 (tarde) · Eloy tachó la tarjeta que quedaba sola abajo:
       "este bloque suelto mejor que no se quede así... o convertir lo de arriba
       en carrusel o quitar uno". Centrarla no bastaba. La respuesta no es quitar
       contenido ni montar un carrusel para cinco cosas que se leen de un
       vistazo: es que QUEPAN TODAS EN UNA FILA. Con cinco tarjetas hay sitio de
       sobra en escritorio; el reparto se ajusta a cuántas haya. */
    .beneficios { gap: 1rem; }
    .beneficios .beneficio {
        flex: 1 1 calc(25% - 0.75rem);
        max-width: calc(25% - 0.75rem);
    }
    /* Con cinco, las cinco en fila; con seis, tres y tres */
    .beneficios:has(.beneficio:nth-child(5)):not(:has(.beneficio:nth-child(6))) .beneficio {
        flex-basis: calc(20% - 0.8rem);
        max-width: calc(20% - 0.8rem);
    }
    .beneficios:has(.beneficio:nth-child(6)):not(:has(.beneficio:nth-child(7))) .beneficio {
        flex-basis: calc(33.333% - 0.667rem);
        max-width: calc(33.333% - 0.667rem);
    }
    .beneficio { padding: 1.5rem 1rem; font-size: 0.95rem; }
    .carta__pista {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
        margin: 0;
        padding: 0.25rem 0;
        overflow: visible;
    }

    /* --- Reseñas: panel Google ancho, tres tarjetas lado a lado --- */
    .opiniones { max-width: none; padding: 3rem clamp(2rem, 6vw, 5rem) 3.4rem; }
    .opiniones > * { max-width: 1140px; margin-inline: auto; }
    .gpanel { padding: 1.9rem 2.2rem; }
    .gpanel__resumen {
        grid-template-columns: minmax(0, 460px) auto;
        justify-content: start;
        column-gap: 3.5rem;
    }
    .opiniones__pista {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
        margin: 0;
        padding: 0.25rem 0;
        overflow: visible;
    }
    .opinion blockquote { font-size: 0.98rem; }

    /* --- FAQ e Historia: columna de lectura centrada --- */
    .faq { max-width: 760px; margin-inline: auto; }
    .faq__pregunta { font-size: 1.05rem; }
    .historia { max-width: 760px; margin-inline: auto; padding: 2rem 2.4rem; }

    /* --- Mapa activado: el iframe llena la columna elástica --- */
    .mapa--activo iframe { height: 100%; min-height: 16rem; }

    /* --- Información útil: 2×2 aquí, cuatro columnas desde 1200 px ---
       Eloy quiere la dirección en una sola línea (14/07 y otra vez el 15/07).
       Los huecos van medidos, no a ojo: "Carrer de Casanova, 94" ocupa 171,6 px
       en Heebo 16 bold, y en cuatro columnas hacen falta ~1200 px de ventana
       para que quepa. Entre 1024 y 1199 —un iPad en horizontal mide justo
       1024— no cabe por mucho que se aprieten los huecos, así que ahí van 2×2
       y se lee todo entero, en vez de forzar cuatro y partir la dirección. */
    .info-util {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 1.25rem;
        padding: 1.8rem 1.9rem;
    }
    .info-util .fila-icono {
        border-bottom: 0;
        gap: 0.65rem;
    }
    /* En 2×2 la divisoria solo va entre las dos columnas */
    .info-util .fila-icono:nth-child(2n) {
        border-left: 1px solid var(--borde);
        padding-left: 1.1rem;
    }

    /* --- Pie en franja horizontal: logo a la izquierda, marca + legal a la derecha --- */
    .l-pie {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1.5rem;
        text-align: left;
        padding: 2rem clamp(2rem, 6vw, 5rem);
        margin-top: 3.2rem;
    }
    .l-pie img { margin: 0; }
    .l-pie p { text-align: right; }

    /* --- Botón flotante: el mismo bloque de móvil (aviso + botón como una
           sola pieza), anclado abajo a la derecha y del ancho justo.
           Antes, aquí el bloque era 'display: contents' y el aviso iba oculto:
           en PC no salían las reservas entrando y el zumbido no podía verse
           (un elemento sin caja no se puede animar). Eloy enseña la landing en
           PC compartiendo pantalla en sus llamadas de venta, así que en PC
           tiene que verse lo mismo que en el móvil (15/07). --- */
    .cta-flotante { display: block; }
    .cta-flotante::before { display: none; }
    .cta-flotante__bloque {
        left: auto;
        right: clamp(2rem, 6vw, 5rem);
        bottom: 1.6rem;
        width: auto;
    }
    .cta-flotante .boton {
        width: auto;
        min-width: 15rem;
        padding: 0.85rem 1.7rem;
    }
}

/* Desde 1200 px ya hay sitio para las cuatro columnas con la dirección entera
   en una línea (medido: la columna pasa de 228 a ~240 px y el texto ocupa
   171,6 — antes se partía por 3,6 px). */
@media (min-width: 1200px) {
    /* Las columnas las decide la plantilla según cuántos datos haya
       (info-util--cols-2/3/4), para no dejar la última fila coja. */
    .info-util { gap: 1.1rem 1.25rem; }
    .info-util--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .info-util--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .info-util--cols-2 { grid-template-columns: repeat(2, 1fr); }

    .info-util .fila-icono {
        border-left: 1px solid var(--borde);
        padding-left: 1.1rem;
    }
    /* La divisoria va ENTRE columnas, así que el primero de CADA fila no la
       lleva — no solo el primero de todos. Con seis datos en cuatro columnas,
       "Terraza" abría la segunda fila con una raya a su izquierda que la caja
       de encima no tenía (lo vio Angel el 02/09, y solo se veía en escritorio:
       en móvil la sección es una lista y en tablet va a dos columnas). */
    .info-util--cols-4 .fila-icono:nth-child(4n + 1),
    .info-util--cols-3 .fila-icono:nth-child(3n + 1),
    .info-util--cols-2 .fila-icono:nth-child(2n + 1) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cta-flotante { transition: none; }
    .cta-aviso { transition: none; }
    .visita__chispa,
    .cta-flotante.visible .cta-flotante__bloque { animation: none; }
}

/* ============================================================
   TEMA NOCHE — variante "todo negro" (idea de Eloy, 18/07: como
   el modo claro/oscuro de Google Maps; referencia: webs de
   restaurante elegantes con fondo negro y tipografía clara).
   El HTML es idéntico: la landing nocturna solo añade la clase
   .tema-noche al <body> y esta piel hace el resto. Los grises
   del panel de Google son los del modo oscuro real de Google
   (#202124, #e8eaed, #9aa0a6, #8ab4f8), para que siga oliendo
   a Google Maps también de noche.
   ============================================================ */

body.tema-noche {
    /* Superficies: negro con un poso verde, tarjetas un punto más claras */
    --fondo: #101312;
    --fondo-suave: #1a1f1d;
    --tinta: #f0ede3;
    --texto-2: #a9b2ac;
    --borde: #2a302d;
    --verde-suave: #1c2621;
    --sombra-tarjeta: 0 8px 28px rgba(0, 0, 0, 0.5);
    --sombra-flotante: 0 10px 30px rgba(0, 0, 0, 0.65);
}

/* Acentos: el verde tinta no se lee sobre negro → versión clara del verde */
.tema-noche a { color: #9ccfb8; }
.tema-noche .hero h1 em,
.tema-noche .mosaico__titulo em { color: #9ccfb8; }

/* Botones: el principal, un verde un punto más luminoso para despegar del negro */
.tema-noche .boton--principal {
    background: #1c6a55;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.tema-noche .boton--principal:hover { background: #218066; }
.tema-noche .boton--secundario {
    background: rgba(23, 28, 26, 0.85);
    border-color: #9ccfb8;
    color: #d9e7de;
}
.tema-noche .boton--secundario:hover { background: #1c2621; }

/* Hero: la foto ahora se funde a negro, no a blanco */
.tema-noche .hero__foto::after {
    background:
        linear-gradient(96deg, #101312 20%, rgba(16,19,18,0.92) 38%, rgba(16,19,18,0.55) 58%, rgba(16,19,18,0.05) 88%),
        linear-gradient(0deg, #101312 2%, rgba(16,19,18,0) 22%);
}
.tema-noche .pastilla {
    background: rgba(28, 38, 33, 0.92);
    color: #cfe6d9;
}

/* Sellos del hero: cápsula translúcida oscura, textos en claro */
.tema-noche .sello { background: rgba(16, 19, 18, 0.55); }
.tema-noche .sello__nota { color: #e8eaed; }
.tema-noche .sello__pie { color: #9aa0a6; }

/* Cita del mosaico (tarjeta estilo Google) */
.tema-noche .mosaico__cita { background: #202124; }
.tema-noche .mosaico__cita-texto { color: #e8eaed; }
.tema-noche .mosaico__cita-texto mark { color: #81c995; }
.tema-noche .mosaico__cita-tema { color: #bdc1c6; }
.tema-noche .mosaico__cita-mas,
.tema-noche .mosaico__cita-autor { color: #9aa0a6; }
.tema-noche .mosaico__cita-nota { color: #80868b; }
.tema-noche .mosaico__comilla { color: #56d9c8; }

/* Tarjetas genéricas y mapa */
.tema-noche .tarjeta { background: #171c1a; }
.tema-noche .mapa__toca {
    background: rgba(32, 33, 36, 0.92);
    color: #e8eaed;
}
.tema-noche .mapa__distancia { color: #8ab4f8; }
.tema-noche .boton--mapa { background: #303134; color: #8ab4f8; }

/* Beneficios y bloque de visita */
.tema-noche .beneficio__icono { background: #1c2621; color: #9ccfb8; }
.tema-noche .visita { background: linear-gradient(150deg, #181d27, #1d1826); }
.tema-noche .visita__badge { color: #81c995; }
.tema-noche .visita__autor { color: #9aa0a6; }
.tema-noche .visita__caras-mas {
    border-color: #202124;
    background: #303134;
    color: #bdc1c6;
}

/* Carta */
.tema-noche .categoria { background: #171c1a; }

/* Panel de reseñas: el modo oscuro real de Google */
.tema-noche .gpanel { background: #202124; }
.tema-noche .gpanel__titulo,
.tema-noche .gpanel__subtitulo,
.tema-noche .gpanel__cifra { color: #e8eaed; }
.tema-noche .gpanel__masmencionado,
.tema-noche .gpanel__total,
.tema-noche .gbarra > span { color: #9aa0a6; }
.tema-noche .gbarra__pista { background: #3c4043; }
.tema-noche .chip { color: #bdc1c6; border-color: #3c4043; }
.tema-noche .chip b { color: #9aa0a6; }
.tema-noche .chip--boton { background: #303134; }
.tema-noche .chip--boton:hover { background: #35383c; }
.tema-noche .chip--boton.chip--activo {
    background: rgba(138, 180, 248, 0.12);
    border-color: #8ab4f8;
    color: #8ab4f8;
}
.tema-noche .chip--boton.chip--activo b { color: #8ab4f8; }
.tema-noche .gpanel__tema { background: #292d31; }
.tema-noche .tema-cita__texto { color: #bdc1c6; }
.tema-noche .tema-cita__pie strong { color: #e8eaed; }
.tema-noche .opinion { background: #292d31; }
.tema-noche .opinion blockquote { color: #bdc1c6; }
.tema-noche .opinion__mas { color: #8ab4f8; }
.tema-noche .opinion__fecha,
.tema-noche .opinion__visita,
.tema-noche .opinion__quien div span { color: #9aa0a6; }
.tema-noche .opinion__quien div strong { color: #e8eaed; }
.tema-noche .opinion__avatar { color: #9ccfb8; }
.tema-noche .historia__mas { color: #9ccfb8; }

/* FAQ */
.tema-noche .faq__item { background: #171c1a; }

/* Barra flotante de reserva */
.tema-noche .cta-flotante::before {
    background: linear-gradient(0deg, rgba(10, 12, 11, 0.96) 55%, rgba(10, 12, 11, 0));
}
.tema-noche .cta-flotante__bloque { background: #1d2320; }

@media (min-width: 760px) {
    /* El marco de escritorio, más negro que la propia página */
    body.tema-noche { background: #070908; }
    .tema-noche .hero__foto::after {
        background:
            linear-gradient(90deg, #101312 0%, rgba(16,19,18,0.85) 10%, rgba(16,19,18,0.30) 30%, rgba(16,19,18,0) 52%),
            linear-gradient(0deg, #101312 2%, rgba(16,19,18,0) 14%);
    }
}

/* ============================================================
   PIEL DE MARCA · Casa Pepi (01/09/2026)
   El molde no cambia: solo las variables de color. El archivo de
   datos pone 'tema_marca' => 'casa-pepi' y el <body> recibe la
   clase. Así, montar el siguiente restaurante es repetir este
   bloque con sus colores, no tocar la landing.
   Verde tomado de su propia web (#3A7B23, el del logo y los
   botones). Contraste verificado: 5,2:1 en botón y enlaces, 7,9:1
   el tono oscuro — todo AA.
   ============================================================ */
body.marca-casa-pepi {
    --verde: #3a7b23;
    --verde-tinta: #2c5c1b;
    --verde-suave: #eaf3e5;
    --sombra-tarjeta: 0 8px 28px rgba(58, 123, 35, 0.10);
    --sombra-flotante: 0 10px 30px rgba(44, 92, 27, 0.28);
}

/* ───────────────────────────────────────────────────────────────────────
   PRENSA · "Han hablado de nosotros"     (02/09/2026, tercera vuelta)

   Logo Y titular en cada medio: el logo da la autoridad, el titular dice
   algo. Uno sin el otro se queda a medias.

   El destacado lleva el titular ENTRECOMILLADO, con la comilla de apertura
   grande y colgada fuera del texto, como en una cita de periódico. Es lo
   que hace que se lea como palabras de El Periódico y no nuestras.

   Los logos NO se igualan por altura de caja: cada uno lleva su escala.
   "BCNFG" son cinco letras enormes y el de Gastronomistas mete su texto
   diminuto dentro del dibujo de un plato — a la misma altura, uno grita y
   el otro no se lee.
   ─────────────────────────────────────────────────────────────────────── */
.prensa__entradilla {
    max-width: 46ch;
    margin: -0.4rem auto 1.8rem;
    text-align: center;
    color: var(--texto-2);
    font-size: 1rem;
    line-height: 1.6;
}

/* 26 → 34 px el 07/09/2026: con los siete logos ya puestos, Angel los pidió
   "un poco más grandes". La escala por medio se mantiene, que es lo que iguala
   ópticamente un logotipo alargado con uno redondo. */
.prensa__logo {
    height: calc(34px * var(--escala-logo, 1));
    width: auto;
    border-radius: 4px;
}

.prensa__medio {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde);
}

/* --- El medio grande --- */
.prensa-destacado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 44rem;
    margin: 0 auto 1.5rem;
    padding: 1.6rem 1.4rem;
    border-radius: var(--radio-tarjeta);
    background: var(--verde-suave);
    text-align: center;
}

.prensa-destacado .prensa__logo {
    height: calc(30px * var(--escala-logo, 1));
    flex: none;
}

.prensa-destacado__titular {
    position: relative;
    margin: 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--tinta);
    /* En móvil, centrada bajo el logo: alineada a la izquierda dejaba un hueco
       a la derecha y el bloque se veía descuadrado (Angel, 02/09). */
    text-align: center;
}

/* En móvil las comillas van dentro del texto, que va centrado */
.prensa-destacado__titular::before { content: '“'; color: var(--verde); opacity: 0.55; }
.prensa-destacado__titular::after { content: '”'; color: var(--verde); opacity: 0.55; }

/* --- Los otros medios --- */
.prensa-lista {
    display: grid;
    gap: 0.9rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.prensa-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
}

.prensa-item__logo { display: flex; align-items: center; min-height: 30px; }

.prensa-item__titular {
    position: relative;
    margin: 0;
    padding-left: 0.95rem;
    font-family: var(--serif);
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--tinta);
}
/* Son citas de medios igual que la grande: llevan sus comillas */
.prensa-item__titular::before {
    content: '“';
    position: absolute;
    left: -0.1rem;
    top: -0.3rem;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--verde);
    opacity: 0.5;
}
.prensa-item__titular::after { content: '”'; color: var(--verde); opacity: 0.5; }


/* ── Prensa en carrusel (05/09/2026, lo pidió Angel) ─────────────────────
   La variante para restaurantes con MUCHAS menciones. Nardi tiene siete, y
   siete titulares en fila no los lee nadie: se convierten en un muro. Aquí
   arriba va la cinta de medios —el mensaje de un vistazo— y debajo una sola
   cita cada vez.

   Todo se pinta con las variables de la piel (--verde, --verde-suave...), así
   que el bloque se tiñe solo del color de cada cliente sin tocar una línea. */

/* La cinta pasa sola, de derecha a izquierda (07/09/2026). El marco recorta y
   difumina los extremos para que los logos no aparezcan y desaparezcan de golpe
   contra el borde. */
.prensa-cinta-marco {
    overflow: hidden;
    margin: 0 auto 1.7rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.prensa-cinta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    gap: 0 2.6rem;
    padding: 0.2rem 1.3rem;
    margin: 0;
    list-style: none;
    /* La lista va duplicada, así que recorrer la MITAD deja la copia justo
       donde estaba el original: el bucle no tiene salto. 46 s para siete
       logos es un paso de paseo, que es lo pedido: "lentamente". */
    animation: prensa-desfile 46s linear infinite;
}
@keyframes prensa-desfile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Quien pase el ratón por encima puede pararla para leer un logo con calma. */
.prensa-cinta:hover,
.prensa-cinta:focus-within { animation-play-state: paused; }
/* Y si el sistema pide menos movimiento, no se mueve: vuelve a ser una lista
   centrada de toda la vida y la copia sobrante desaparece. */
@media (prefers-reduced-motion: reduce) {
    .prensa-cinta {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        gap: 0.7rem 1.6rem;
        max-width: 52rem;
    }
    .prensa-cinta__medio[aria-hidden="true"] { display: none; }
}

.prensa-cinta__medio {
    display: flex;
    align-items: center;
    /* Apagados a propósito: la cinta es un coro, no siete solistas. El que
       importa es el del carrusel, que va a todo color justo debajo.
       07/09/2026 · Subido de 0,55 a 0,68 al entrar los logos de verdad: la
       cinta se hizo con todos los medios en TEXTO, y un logotipo gris claro
       —el de Hule y Mantel— se borraba del todo con el apagado anterior.
       Con 0,68 el coro se sigue oyendo y ninguna voz se pierde. */
    opacity: 0.68;
    filter: grayscale(1);
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.prensa-cinta__medio:hover,
.prensa-cinta__medio:focus-within { opacity: 1; filter: grayscale(0); }

.prensa-cinta__medio a {
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
}
.prensa-cinta__medio a:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}
.prensa-cinta .prensa__medio { font-size: 0.72rem; letter-spacing: 0.1em; }
.prensa-cinta .prensa__logo  { height: calc(22px * var(--escala-logo, 1)); }

/* El marco del carrusel. Las citas van APILADAS en la misma casilla de la
   rejilla: así la sección mide lo que mide la más larga y no da un salto cada
   vez que cambia. Es el truco que evita el "baile" de altura. */
.prensa-carrusel { max-width: 46rem; margin: 0 auto; }

.prensa-carrusel__marco {
    display: grid;
    padding: 1.7rem 1.4rem;
    border-radius: var(--radio-tarjeta);
    background: var(--verde-suave);
    text-align: center;
}

.prensa-cita {
    grid-area: 1 / 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    /* Oculta de verdad, no solo transparente: así el lector de pantalla no
       lee las siete seguidas y el tabulador no se pierde dentro. Google sí
       las ve, que para eso son titulares de prensa y no decoración. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
.prensa-cita.es-activa {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}

.prensa-cita__titular {
    position: relative;
    margin: 0;
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--verde-tinta);
    max-width: 34ch;
}
.prensa-cita__titular::before { content: '“'; color: var(--verde); opacity: 0.55; }
.prensa-cita__titular::after  { content: '”'; color: var(--verde); opacity: 0.55; }

.prensa-cita__pie {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.prensa-cita__fecha {
    font-size: 0.78rem;
    color: var(--texto-2);
    letter-spacing: 0.02em;
}
.prensa-cita__pie::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--verde);
    opacity: 0.35;
}

.prensa-carrusel__puntos {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* Sin recuadro azul al tocar: el navegador pinta por su cuenta un rectángulo
   sobre lo que se pulsa, y encima de un punto redondo de 8 px se veía un
   cuadrado. Lo cazó Angel el 05/09/2026. */
.prensa-punto, .carta-punto { -webkit-tap-highlight-color: transparent; }

.prensa-punto {
    /* Botón de verdad: se llega con el tabulador y dice a qué medio va.
       El área que se puede tocar es de 24 px aunque el punto se vea de 8,
       que es lo que pide el dedo en un móvil. */
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.prensa-punto::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--verde);
    opacity: 0.28;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.prensa-punto:hover::before { opacity: 0.55; }
.prensa-punto.es-activo::before { opacity: 1; transform: scale(1.25); }
.prensa-punto:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

@media (min-width: 700px) {
    .prensa-cinta { gap: 0.9rem 2.2rem; }
    .prensa-carrusel__marco { padding: 2.1rem 2.4rem; }
    .prensa-cita__titular { font-size: 1.28rem; max-width: 38ch; }
}

@media (min-width: 700px) {
    .prensa-destacado {
        flex-direction: row;
        gap: 1.7rem;
        padding: 1.7rem 2rem;
    }
    .prensa-destacado__titular {
        padding-left: 1.1rem;
        font-size: 1.35rem;
        text-align: left;
    }
    /* En escritorio sí cabe la comilla colgada fuera del texto */
    .prensa-destacado__titular::before {
        position: absolute;
        left: -0.15rem;
        top: -0.35rem;
        font-size: 2.1rem;
        line-height: 1;
    }
    .prensa-lista { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .prensa-item { height: 100%; }
}
/* ───────────────────────────────────────────────────────────────────────
   PÁGINAS LEGALES · una por restaurante                     (02/09/2026)

   Aviso legal, privacidad y cookies. Se leen, no se venden: columna
   estrecha, buen interlineado y nada que distraiga. Sin botón flotante
   de reservar encima, que aquí no pinta nada.

   Lo pendiente se marca en rojo A PROPÓSITO: si falta el NIF, tiene que
   cantar en la revisión, no colarse discreto hasta producción.
   ─────────────────────────────────────────────────────────────────────── */
.legal-pagina {
    padding: 2rem 1.15rem 4rem;
    background: var(--fondo);
}

.legal-caja {
    max-width: 46rem;
    margin: 0 auto;
}

.legal-volver {
    display: inline-block;
    margin-bottom: 1.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--verde);
    text-decoration: none;
}
.legal-volver:hover { text-decoration: underline; }

.legal-caja h1 {
    margin: 0 0 0.4rem;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    line-height: 1.15;
    color: var(--tinta);
}

.legal-fecha {
    margin: 0 0 2.2rem;
    font-size: 0.85rem;
    color: var(--texto-2);
}

.legal-apartado { margin-bottom: 2.2rem; }

.legal-apartado h2 {
    margin: 0 0 0.7rem;
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--verde);
}

.legal-apartado p,
.legal-lista li {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tinta);
}

.legal-lista { padding-left: 1.2rem; }
.legal-lista li { margin-bottom: 0.6rem; }

/* Los datos del titular, en pares etiqueta/valor */
.legal-datos {
    display: grid;
    gap: 0.55rem 1.2rem;
    margin: 0 0 0.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--fondo-suave);
}
.legal-datos dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-2);
}
.legal-datos dd {
    margin: 0 0 0.4rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--tinta);
}
.legal-datos dd:last-child { margin-bottom: 0; }

@media (min-width: 620px) {
    .legal-datos { grid-template-columns: 12rem 1fr; align-items: baseline; }
    .legal-datos dd { margin-bottom: 0; }
}

/* Lo que falta por confirmar: que se vea */
.legal-pendiente {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 7px;
    background: #fdeaea;
    color: #a3232b;
    font-size: 0.86rem;
    font-weight: 600;
}

.legal-tabla-caja { overflow-x: auto; margin-bottom: 1rem; }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal-tabla th, .legal-tabla td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--borde);
    text-align: left;
}
.legal-tabla th { font-weight: 700; color: var(--verde); }

.legal-otros {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--borde);
}
.legal-otros a {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--verde);
    text-decoration: none;
}
.legal-otros a:hover { text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────────────
   LA CARTA COMPLETA                                         (02/09/2026)

   Sustituye al PDF. El de Casa Pepi mide 32 x 82 cm, repite la carta en
   tres idiomas y va vectorizado: en un móvil hay que hacer zoom y navegar
   a ciegas, y Google no lee ni un plato.

   Acordeón por secciones, con la primera abierta. El texto está siempre en
   el HTML —plegar por CSS no lo esconde de Google—; lo que se pliega es
   solo lo que se ve.

   Cada plato es una fila con el nombre a la izquierda, el precio a la
   derecha y una guía de puntos entre medias: es como se lee una carta de
   toda la vida, y en móvil evita tener que adivinar qué precio va con qué
   plato.
   ─────────────────────────────────────────────────────────────────────── */
.carta-web__entrada {
    max-width: 48ch;
    margin: -0.3rem auto 1.8rem;
    text-align: center;
    color: var(--texto-2);
    line-height: 1.65;
}

.carta-web__secciones {
    display: grid;
    gap: 0.7rem;
    max-width: 46rem;
    margin: 0 auto;
}

/* ── La carta como MOSTRADOR (05/09/2026) ───────────────────────────────
   La segunda manera de enseñar la misma carta, para cuando el acordeón se
   queda corto: cada apartado es una tarjeta con sus platos YA a la vista, y
   se recorren a lo ancho. Se activa con 'estilo' => 'carrusel'.

   El desplazamiento es del navegador, no de JavaScript: funciona con el dedo,
   con la rueda, con la barra y con el teclado aunque el JS falle. El anclaje
   (scroll-snap) hace que al soltar la tarjeta se coloque en su sitio en vez
   de quedarse a medias. */
.carta-pista {
    display: flex;
    gap: 0.9rem;
    /* align-items: stretch para que la fila quede pareja: si cada tarjeta
       midiera lo suyo, "Cuchara" (2 platos) al lado de "Postres" (12) daría
       un escalón feo. Las cortas dejan aire abajo, que es lo de menos. */
    align-items: flex-start;
    max-width: 100%;
    padding: 0.3rem 0.2rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Nunca en html/body: eso provoca el scroll infinito de Safari en iPhone.
       Aquí es un contenedor interior, que es donde sí se puede. */
    overscroll-behavior-x: contain;
    /* Sin barra visible (09/09/2026). Con `thin`, al pasar el ratón por encima
       aparecía y el contenido se reajustaba: un salto raro justo al ir a leer.
       El mosaico ya iba así; ahora los dos carruseles se comportan igual. */
    scrollbar-width: none;
}
.carta-pista::-webkit-scrollbar { display: none; }
/* Ya no hace falta: la pista dejó de ser enfocable el 09/09/2026 (ver landing.php).
   Se queda comentado para que se entienda por qué no está, no por si acaso.
   .carta-pista:focus-visible { outline: 2px solid var(--verde); ... } */

.carta-tarjeta {
    flex: 0 0 min(19rem, 82vw);
    /* ANCLAJE AL INICIO, NO AL CENTRO (05/09/2026).
       Centrando, las primeras tarjetas NO TIENEN una posición de scroll que las
       deje en el centro: para la segunda, la cuenta da un valor negativo, la
       pista se queda en 0 y el punto rebotaba al primero. De ahí que "el segundo
       botón solo funcione a veces" (Angel). Alineando al inicio, cada tarjeta
       tiene su posición y todos los puntos llevan a algún sitio real. */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
    overflow: hidden;
}

.carta-tarjeta__cabecera {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--borde);
    background: var(--verde-suave);
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--verde-tinta);
}
.carta-tarjeta__nombre { flex: 1; }
.carta-tarjeta__cuenta { flex: none; }
.carta-tarjeta__foto {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: cover;
}
.carta-tarjeta .carta-seccion__cuenta { background: var(--fondo); }

/* EN MÓVIL, LA TARJETA CRECE LO QUE HAGA FALTA (05/09/2026).
   Primero se le puso tope de altura y scroll dentro, y en la captura de 390 px
   se vio el fallo: "Vitrina" tiene 9 platos, se veían 7, y los otros dos
   quedaban dentro de un scroll que no se anunciaba. Scroll dentro de scroll,
   con el dedo, es de las peores cosas que se le pueden hacer a alguien en un
   móvil. Como ahí se ve UNA tarjeta cada vez, que cada una mida lo suyo no
   descuadra nada — por eso también se alinean arriba en vez de estirarse. */
.carta-tarjeta__lista { flex: 1; }
.carta-tarjeta .carta-platos { padding: 0.1rem 0.9rem 0.7rem; }
.carta-tarjeta .carta-plato__nombre { font-size: 0.92rem; }

.carta-pista__puntos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.carta-punto {
    /* Igual que los de prensa: botón de verdad, 24 px de zona táctil aunque
       el punto se vea de 8. */
    width: 24px; height: 24px;
    padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; border-radius: 50%;
}
.carta-punto::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--verde);
    opacity: 0.28;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.carta-punto:hover::before { opacity: 0.55; }
.carta-punto.es-activo::before { opacity: 1; transform: scale(1.25); }
.carta-punto:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

@media (min-width: 700px) {
    .carta-tarjeta { flex-basis: 20rem; }
    /* En escritorio SÍ se estiran a la misma altura: ahí se ven tres a la vez y
       tres tarjetas escalonadas quedan desordenadas. La que se pase de larga se
       desplaza por dentro, y para que se note que hay más platos debajo lleva un
       degradado al pie — con la rueda del ratón el scroll anidado no molesta. */
    .carta-pista { align-items: stretch; }
    .carta-tarjeta__lista {
        overflow-y: auto;
        max-height: 24rem;
        /* 07/09/2026 · Aquí decía 'contain', y con el ratón encima de la carta
           la rueda se quedaba ATRAPADA en la tarjeta: al llegar al último plato
           la página ya no bajaba (lo vio Angel en escritorio). 'Contain' tiene
           sentido con el dedo, donde el gesto es del contenedor; con rueda, lo
           natural es que al terminar la lista siga bajando la página. */
        overscroll-behavior-y: auto;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent);
    }
    /* La que cabe entera no necesita el degradado, y llevarlo la haría parecer
       cortada. Se quita cuando el contenido no desborda. */
    /* LA BARRA, SIEMPRE IGUAL      (09/09/2026)
       Antes ponía `:not(:hover) { scrollbar-width: thin; }`: sin el ratón encima
       era fina y al acercarlo pasaba a normal, así que el contenido se movía justo
       cuando ibas a leerlo. Lo vio Angel pasando por encima de "Vitrina". Ahora es
       fina siempre y no se mueve nada.

       Y EL MARCO AZUL QUE SALÍA "A VECES": esta lista tiene scroll propio (24rem de
       alto y a veces más platos), y Chrome hace enfocables solas las regiones con
       scroll y les pinta SU marco, del color de acento del sistema —azul en el
       Windows de Angel—, con esquinas y separación propias.
       No se quita del todo: quien navega con teclado necesita ver dónde está para
       poder bajar por los platos. Se sustituye por uno nuestro, del color de la
       marca y HACIA DENTRO (offset negativo), que ni sobresale ni toca los puntos
       del carrusel. Y solo con teclado: al hacer clic o tocar, no aparece. */
    .carta-tarjeta__lista { scrollbar-width: thin; }
    .carta-tarjeta__lista:focus { outline: none; }
    .carta-tarjeta__lista:focus-visible {
        outline: 2px solid var(--verde);
        outline-offset: -2px;
        border-radius: 6px;
    }
}

.carta-seccion {
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
    overflow: hidden;
}

.carta-seccion[open] { border-color: var(--verde); }

.carta-seccion__cabecera {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
/* Fuera el triángulo del navegador: ponemos el nuestro */
.carta-seccion__cabecera::-webkit-details-marker { display: none; }
.carta-seccion__cabecera::marker { content: ''; }

.carta-seccion__cabecera:hover { background: var(--fondo-suave); }
.carta-seccion__cabecera:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: -2px;
}

.carta-seccion__foto {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
}

.carta-seccion__nombre {
    flex: 1;
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--tinta);
}

.carta-seccion__cuenta {
    flex: none;
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--verde-suave);
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.carta-seccion__chevron {
    display: inline-flex;
    flex: none;
    color: var(--verde);
    transition: transform 0.25s ease;
}
.carta-seccion[open] .carta-seccion__chevron { transform: rotate(90deg); }

.carta-platos {
    list-style: none;
    margin: 0;
    padding: 0.2rem 1rem 0.9rem;
}

.carta-plato {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.52rem 0;
    border-top: 1px solid var(--borde);
}
.carta-plato:first-child { border-top: 0; }

.carta-plato__nombre {
    font-size: 0.97rem;
    line-height: 1.4;
    color: var(--tinta);
}

.carta-plato__marca {
    color: var(--verde);
    font-weight: 700;
    text-decoration: none;
    cursor: help;
}

/* La guía de puntos: se estira para llenar el hueco que quede */
.carta-plato__linea {
    flex: 1;
    min-width: 1.2rem;
    align-self: center;
    height: 1px;
    border-bottom: 1px dotted var(--borde);
}

.carta-plato__precio {
    flex: none;
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--verde);
    white-space: nowrap;
}
.carta-plato__moneda { font-weight: 600; }

.carta-plato__unidad {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--texto-2);
    text-align: right;
}

.carta-seccion__nota {
    margin: 0;
    padding: 0 1rem 1rem;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--texto-2);
}

.carta-web__pie {
    max-width: 46rem;
    margin: 1.5rem auto 0;
}

.carta-web__leyenda,
.carta-web__nota {
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    color: var(--texto-2);
}
.carta-web__leyenda strong { color: var(--verde); }

.carta-web__alergenos {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--verde-suave);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--verde-tinta);
}
.carta-web__alergenos svg { flex: none; margin-top: 0.15rem; color: var(--verde); }

@media (min-width: 700px) {
    .carta-seccion__cabecera { padding: 1rem 1.3rem; }
    .carta-seccion__foto { width: 54px; height: 54px; }
    .carta-seccion__nombre { font-size: 1.28rem; }
    .carta-platos { padding: 0.3rem 1.3rem 1.1rem; }
    .carta-plato__nombre, .carta-plato__precio { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
    .carta-seccion__chevron { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   PERROS Y TERRAZA                      (02/09/2026, tercera versión)

   Las dos anteriores fallaron por lo mismo: piezas de alturas distintas
   dejando huecos. La foto principal, al ser más ancha con la misma
   proporción, es más alta — y debajo de las pequeñas quedaba un vacío.

   Aquí la rejilla manda sobre las proporciones: la principal ocupa dos
   filas y las demás rellenan las cuatro celdas de al lado. Las piezas se
   estiran a la celda que les toca (object-fit: cover), no al revés. Por eso
   no hay huecos: no se los deja haber.

   Las tres frases de servicio ocupan una de esas celdas, en vez de ir
   sueltas arriba (idea de Angel). Dejan de ser una línea perdida y de paso
   tapan el único hueco que quedaba.
   ─────────────────────────────────────────────────────────────────────── */
.perros__caja {
    max-width: 62rem;
    margin: 0 auto;
    padding: 1.5rem 1.3rem;
    border-radius: var(--radio-tarjeta);
    background: var(--verde-suave);
}

.perros__titulo {
    margin: 0 0 0.7rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 5vw, 2.05rem);
    line-height: 1.2;
    color: var(--tinta);
    text-wrap: balance;
}

.perros__parrafos p {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--tinta);
}
.perros__parrafos p:last-child { margin-bottom: 1.3rem; }

/* --- La rejilla ---
   Móvil: la principal a todo el ancho arriba (que se lea el rótulo) y debajo
   tres celdas en fila. */
.perros__rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.perros__pieza {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--fondo);
    aspect-ratio: 1 / 1;
}

.perros__pieza img,
.perros__pieza video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perros__pieza--principal {
    grid-column: 1 / -1;
    /* Casi cuadrada en móvil, no apaisada: la foto es vertical y con un recorte
       ancho se perdía el rótulo de arriba, que es lo que hace reconocible el
       sitio (lo vio Angel el 02/09). */
    aspect-ratio: 4 / 4.3;
}

/* Las frases, dentro de la rejilla */
.perros__datos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--fondo);
    list-style: none;
    grid-column: 1 / -1;
}
.perros__datos li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--verde-tinta);
}
/* El icono en círculo, como en los beneficios: da peso a la celda y evita que
   las tres frases floten en medio de una caja alta */
.perros__datos svg {
    flex: none;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 7px;
    border-radius: 50%;
    background: var(--verde-suave);
    color: var(--verde);
}

/* --- Escritorio: la principal a la izquierda ocupando dos filas, y a su
       derecha cuatro celdas (dos fotos, el vídeo y las frases). Ni un hueco. */
@media (min-width: 760px) {
    .perros__caja { padding: 2rem 2.2rem; }
    /* Los párrafos en dos columnas: a línea completa se cortaban por la mitad
       del ancho y dejaban el lado derecho vacío (Angel, 02/09). */
    .perros__parrafos {
        columns: 2;
        column-gap: 2.2rem;
    }
    .perros__parrafos p { break-inside: avoid; }

    .perros__rejilla {
        grid-template-columns: 1.42fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0.8rem;
    }
    /* AQUÍ ESTABA EL HUECO, y costó tres versiones porque no se veía a simple
       vista: la principal llevaba una proporción fija (4/5), que le daba 465 px
       de alto cuando la columna de al lado sumaba 711 entre sus dos filas.
       Debajo de la foto quedaban 246 px de fondo vacío — medido el 02/09 a cinco
       anchos distintos, idéntico en todos.

       La regla que lo evita para siempre: **la principal NO lleva proporción.**
       La altura de las filas la fijan las celdas pequeñas, que sí son cuadradas,
       y la principal se estira a las dos. Una foto siempre puede recortarse para
       llenar su hueco; un hueco no puede rellenarse solo. */
    .perros__pieza--principal {
        grid-column: 1;
        grid-row: 1 / span 2;
        aspect-ratio: auto;
        height: 100%;
    }
    .perros__pieza:not(.perros__pieza--principal) { aspect-ratio: 1 / 1; }
    .perros__datos { aspect-ratio: 1 / 1; }
    .perros__datos {
        grid-column: 3;
        grid-row: 2;
        padding: 1.1rem 1.2rem;
    }
    .perros__datos { gap: 1rem; }
    .perros__datos li { font-size: 0.92rem; }
}

/* ── Frases que no dejan una palabra huérfana en la última línea ──
   (02/09/2026, lo pidió Angel). El navegador reparte el texto para que las
   líneas queden parejas en vez de cortar donde le cuadre. Donde no hay
   soporte, se ve como antes: no rompe nada. */
.prensa-destacado__titular,
.prensa-item__titular,
.seccion__titulo,
.mosaico__titulo,
.carta-seccion__nombre,
.carta-web__entrada,
.prensa__entradilla,
.beneficio span,
.sello__dato-titulo {
    text-wrap: balance;
}

/* ───────────────────────────────────────────────────────────────────────
   RESERVA Y GRACIAS · una por restaurante              (02/09/2026)

   "Página sin salida" (criterio de Eloy, 12/07): quien llega aquí viene a
   reservar, así que no hay menú ni enlaces de escape — solo el logo, que
   vuelve a la landing.

   El calendario va detrás de una fachada, igual que el mapa de Google en la
   landing: el módulo de CoverManager arrastra 12 dominios de terceros y
   cookies de las pasarelas de pago, y cargarlo de entrada obligaría a un
   banner de consentimiento. Detrás de un botón, la página se queda en cero
   cookies hasta que el visitante lo pide.
   ─────────────────────────────────────────────────────────────────────── */
.reserva {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 1.6rem 1rem 2.4rem;
    overflow: hidden;
}
.reserva__fondo,
.reserva__velo {
    position: absolute;
    inset: 0;
}
.reserva__fondo { background-size: cover; background-position: center; }
.reserva__velo { background: linear-gradient(180deg, rgba(14,51,43,.72), rgba(14,51,43,.88)); }

.reserva__contenido {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.3rem;
    width: 100%;
    max-width: 30rem;
}
.reserva__logo img { display: block; height: auto; }

.reserva__tarjeta {
    width: 100%;
    padding: 1.5rem 1.3rem;
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
    box-shadow: 0 18px 50px rgba(14, 51, 43, .3);
}

.reserva__titulo {
    margin: 0 0 1rem;
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1.25;
    text-align: center;
    color: var(--tinta);
    text-wrap: balance;
}

.reserva__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--borde);
    font-size: 0.86rem;
    color: var(--texto-2);
}
.reserva__nota { display: flex; align-items: center; gap: 0.3rem; color: #202124; }
.reserva__nota strong { font-size: 1.05rem; }

.reserva__fachada {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 1.4rem 1rem;
    border: 1px dashed var(--borde);
    border-radius: 16px;
    background: var(--fondo-suave);
    text-align: center;
}
.reserva__fachada svg { color: var(--verde); }
.reserva__fachada-texto {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--tinta);
}
.reserva__aviso {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--texto-2);
    max-width: 30ch;
}
.reserva__abrir { width: 100%; justify-content: center; }

/* Cuando ya se ha pulsado: el calendario ocupa su sitio */
.reserva__modulo iframe {
    display: block;
    width: 100%;
    min-height: 30rem;
    border: 0;
    border-radius: 12px;
}

.reserva__pie {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    color: var(--texto-2);
}

/* --- Gracias --- */
.gracias {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 2rem 1.1rem 3rem;
    background: var(--verde-suave);
}
.gracias__caja {
    width: 100%;
    max-width: 32rem;
    padding: 2rem 1.5rem;
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
    text-align: center;
    box-shadow: var(--sombra-tarjeta);
}
.gracias__marca {
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--verde-suave);
    color: var(--verde);
}
.gracias__titulo {
    margin: 0 0 0.6rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 6vw, 2rem);
    color: var(--tinta);
}
.gracias__texto {
    margin: 0 0 1.3rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto-2);
}
.gracias__telefono { display: inline-flex; }

.gracias__platos {
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    text-align: left;
}
.gracias__platos h2 {
    margin: 0 0 0.3rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--tinta);
}
.gracias__platos-nota {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--texto-2);
}
.gracias__platos ul { margin: 0; padding: 0; list-style: none; }
.gracias__platos li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--borde);
}
.gracias__platos li:last-child { border-bottom: 0; }
.gracias__plato { font-weight: 600; color: var(--tinta); }
.gracias__veces {
    flex: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--verde);
}
.gracias__volver {
    display: inline-block;
    margin-top: 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--verde);
    text-decoration: none;
}
.gracias__volver:hover { text-decoration: underline; }

/* Pie de las páginas interiores (legal, reserva, gracias)   (02/09/2026)
   Propio y no el del tema: el del tema dice "Patsa Lab", y aparecía en la
   página de gracias de Casa Pepi. */
.pie-interior {
    padding: 1.6rem 1.2rem 2rem;
    background: var(--verde-tinta);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 0.85rem;
}
.pie-interior__marca { margin: 0 0 0.5rem; font-weight: 600; color: #fff; }
.pie-interior__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; justify-content: center; }
.pie-interior__firma {
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    /* Sin mayúsculas, igual que en la landing (Eloy, 11/09/2026) */
    opacity: 0.5;
}
.pie-interior__legal a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.pie-interior__legal a:hover { color: #fff; text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────────────
   AVISO DE COOKIES                                          (02/09/2026)

   Bloquea la página hasta elegir, como pidió Eloy (referencia suya:
   latagliatella.es). Lo que hace que eso sea legal y no un muro de los que
   se sancionan: RECHAZAR está al mismo nivel que aceptar — mismo tamaño,
   mismo sitio, un solo clic. Si la única salida fuera aceptar, sería
   sancionable.

   Solo aparece si la landing tiene algún identificador de medición puesto.
   Sin nada que consentir, no sale: un banner de adorno molesta y baja la
   conversión sin motivo.
   ─────────────────────────────────────────────────────────────────────── */
/* NO SE TOCA EL OVERFLOW DE html NI DE body      (10/09/2026)
   Aquí había `overflow: hidden` en los dos para que la página no se moviera
   detrás del aviso. Es la receta de manual y en Safari de iPhone deja el scroll
   roto al cerrar: la página se queda "infinita" y hay que recargar. Ya nos pasó
   en el hero y está apuntado como norma del proyecto.
   Se consigue lo mismo sin efectos secundarios: el aviso cubre la pantalla
   entera y se queda con los gestos (`touch-action: none`), y el rebote no pasa
   al fondo (`overscroll-behavior: contain`). El resultado para quien mira es
   idéntico —la página no se mueve hasta que decide— y al cerrar no queda nada
   tocado. */
.gmlr-cookies {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    /* CENTRADO, no abajo (10/09/2026, lo pidió Eloy tras ver Casa Pepi:
       "imagino que con CSS se puede colocar en el centro de la pantalla y poner
       una capa de fondo translúcida"). En el centro se lee y se decide antes,
       que es lo que interesa a los dos lados: al visitante, porque se lo quita
       de encima; y a la campaña, porque una decisión tomada mide mejor que un
       aviso ignorado en una esquina. */
    place-items: center;
    padding: 1rem;
    touch-action: none;
    overscroll-behavior: contain;
}

.gmlr-cookies__velo {
    position: absolute;
    inset: 0;
    /* EL VELO SE TIÑE DEL COLOR DE LA MARCA      (10/09/2026)
       Estaba clavado en el verde de fábrica, y sobre una landing azul —Nardi—
       se veía como una mancha apagada que no era de nadie. Cada piel redefine
       `--verde-tinta` (en Nardi es su azul, en Casa Pepi su verde), así que
       basta con pedirle ese color y bajarle la opacidad: el velo pasa a ser
       del restaurante sin tocar nada más. El valor de fábrica queda de
       respaldo para una landing sin piel propia.

       Se usa `opacity` sobre el div del velo, y no un color con transparencia,
       para no tener que declarar una variable rgb en cada marca. El velo es
       una capa aparte de la caja del aviso, así que el texto no se ve afectado.

       Un punto más oscuro que antes (0,55 → 0,62) y algo más de desenfoque:
       centrado y sobre un vídeo en movimiento, hace falta más separación.
       Sigue siendo translúcido, que era la idea de Eloy: la página se ve. */
    background: var(--verde-tinta, #0e332b);
    opacity: 0.62;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.gmlr-cookies__caja {
    position: relative;
    width: 100%;
    max-width: 44rem;
    padding: 1.25rem 1.3rem;
    border-radius: var(--radio-tarjeta);
    background: var(--fondo);
    box-shadow: 0 18px 50px rgba(14, 51, 43, .35);
}

.gmlr-cookies__texto {
    margin: 0 0 1rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--tinta);
}
.gmlr-cookies__texto a { color: var(--verde); }

.gmlr-cookies__botones {
    display: grid;
    gap: 0.6rem;
}

/* LOS DOS BOTONES SON IDÉNTICOS, y no es una decisión estética.
   La Guía de Cookies de la AEPD (actualizada en enero de 2024) dice que
   "las acciones de aceptar o rechazar cookies tienen que presentarse en un
   lugar y formato destacados, y ambas acciones deben estar al mismo nivel,
   sin que sea más complicado rechazarlas que aceptarlas", y prohíbe dar
   preferencia visual al botón de aceptar.

   La primera versión de este aviso (02/09/2026) pintaba "Aceptar" en verde
   relleno y "Seguir sin cookies" con solo el borde. Mismo tamaño y misma
   posición, sí — pero uno destacaba sobre el otro, que es justo lo que la
   guía no permite. Corregido el mismo día.

   Es lo que hace casi todo el mundo, La Tagliatella incluida. Que sea lo
   habitual no lo hace conforme. */
.gmlr-cookies__boton {
    width: 100%;
    padding: 0.85rem 1.2rem;
    border: 1.5px solid var(--verde);
    border-radius: var(--radio-boton);
    background: var(--fondo);
    color: var(--verde-tinta);
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.gmlr-cookies__boton:hover { background: var(--verde-suave); }
.gmlr-cookies__boton:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

@media (min-width: 560px) {
    .gmlr-cookies { place-items: center; }
    .gmlr-cookies__caja { padding: 1.6rem 1.8rem; }
    .gmlr-cookies__botones { grid-template-columns: 1fr 1fr; }
}


/* Red de seguridad del botón de sonido: cuando landing.js detecta que el reel
   no trae pista de audio lo marca con [hidden], y una regla de display previa
   podría ignorarlo. (03/09/2026) */
.reel__sonido[hidden] { display: none !important; }


/* El vídeo de fondo de la portada ocupa exactamente el hueco de la foto que
   sustituye, con el mismo recorte. (03/09/2026) */
.hero__foto .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* La foto llevaba esta esquina redondeada y el vídeo no: al cambiar una por
       otro, la portada dejaba de tener la curva. (05/09/2026) */
    border-bottom-left-radius: 120px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PIEL DE MARCA · NARDI            (03/09/2026)

   Va al final de assets/landing.css del plugin, junto a marca-casa-pepi.
   Los colores salen de los artes finales de su manual (RECURSOS/PALETA_COLOR.svg
   y el fill de sus SVG): azul #0033CC y crema #F7F4EC.

   Las variables se llaman "verde" por historia — son el color principal de
   la landing, no el color verde.
   ═══════════════════════════════════════════════════════════════════════ */
body.marca-nardi {
    --verde:        #0033cc;
    --verde-tinta:  #00218a;
    --verde-suave:  #e7ecfb;
    --fondo:        #f7f4ec;   /* su crema manda en toda la página (Angel, 03/09) */
    --fondo-rgb:    247, 244, 236;
    --fondo-suave:  #efe9db;
    --borde:        #ded6c4;
    --sombra-tarjeta:  0 8px 28px rgba(0, 51, 204, 0.10);
    --sombra-flotante: 0 10px 30px rgba(0, 33, 138, 0.30);
    --resalte-fondo:   #e4eafd;
    --resalte-tinta:   #00218a;
    /* El filete que enmarca la página: 3 → 6 px el 08/09/2026, a petición de
       Eloy. Su marca aguanta el trazo grueso (su manual usa filetes anchos en
       carteles y cartas), y con 6 se lee como decisión y no como un borde por
       defecto del navegador. */
    --marco-grosor: 6px;
}

/* ── El marco de marca ───────────────────────────────────────────────────
   Un filete fijo del color del cliente que enmarca la página entera y se
   queda ahí al hacer scroll. No captura clics (pointer-events:none), así
   que no estorba a ningún botón, y se apoya en las áreas seguras del
   móvil para no meterse bajo la barra del sistema.
   NO se toca el overflow de html/body: eso provoca el scroll infinito de
   Safari en iPhone. */
.marco-marca {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* ALTURA ESTABLE (08/09/2026). Antes era `inset: 0`, que ata el marco al
       viewport: en el móvil real, al hacer scroll, la barra del navegador se
       contrae y se expande, el viewport cambia de alto y el borde de abajo
       daba saltos — "a veces se sube, otras desaparece y vuelve", lo vio Angel
       en su teléfono. `svh` es la altura del viewport CON la barra desplegada:
       es la medida que NO cambia al hacer scroll, así que el marco se queda
       quieto. El `100%` de antes queda como respaldo para navegadores viejos. */
    height: 100%;
    height: 100svh;
    z-index: 900;
    pointer-events: none;
    /* El grosor sale de --marco-grosor, que fija cada landing en su piel de
       marca (por defecto 3 px). Nardi lo sube a 6 el 08/09/2026 a petición de
       Eloy: "la raya que bordea toda la web, que sea un poco más gorda". */
    border: var(--marco-grosor, 3px) solid var(--verde);
    /* EL BORDE DE ARRIBA YA NO SUMA EL ÁREA SEGURA      (10/09/2026)
       Aquí estaba el "se queda como ensanchada" que vio Eloy el 09/09 en su
       iPhone. `env(safe-area-inset-top)` vale 0 mientras la barra del navegador
       está desplegada y pasa a valer 40-60 px en cuanto se contrae al bajar:
       el filete de arriba engordaba de golpe hasta diez veces mientras los
       otros tres seguían igual. No era un fallo de su móvil ni una impresión
       suya: era una cuenta que cambiaba sola a mitad de scroll.
       Los cuatro lados miden ahora lo mismo y no dependen de nada que se mueva.
       El área segura no hace falta: el marco no lleva contenido dentro, así
       que aunque el filete quedara bajo la barra del sistema no taparía nada. */
}
@media print { .marco-marca { display: none; } }

/* EN PC, EL MOSAICO DE NARDI SE QUEDA SIN SUS TRES ÚLTIMAS COLUMNAS
   ─────────────────────────────────────────────────────────────────────
   Decisión de Angel (09/09/2026) PARA NARDI: en escritorio quiere ver
   exactamente esto, de izquierda a derecha — celda grande · dos pequeñas ·
   CITA · celda grande · dos pequeñas · celda grande · CITA. Son siete
   columnas, y Nardi tiene diez: las tres últimas se ocultan. Su pista era tan
   larga (2.387 px con 1.440 visibles) que se quedaban fuera tanto la segunda
   cita como media fila de fotos.

   ⚠ ACOTADA A NARDI EL 10/09/2026, y esto es lo que hay que no repetir.
   La regla se escribió sin apellido —"las tres últimas columnas"— y se aplicó
   a TODAS las landings, que no tienen el mismo número de columnas. Resultado,
   medido el 10/09: Casa Pepi escondía 4 de sus 10 piezas y Patsa Lab, en sus
   dos versiones, 4 de 11. Nadie las echó en falta hasta que **lo cazó Eloy**
   mirando la galería de Patsa Lab en versión noche.

   La lección: un recorte que nace de UNA landing lleva el nombre de esa
   landing. "Ocultar las tres últimas" no es una regla de diseño, es una cuenta
   que solo cuadra donde se hizo.

   En móvil no se recorta nada, aquí ni en ningún sitio: la pista se recorre
   con el dedo y es lo normal. */
@media (min-width: 1024px) {
    body.marca-nardi .mosaico__pista > .mosaico__col:nth-last-child(-n+3) { display: none; }
}

/* LAS SIETE COLUMNAS TIENEN QUE CABER EN LA PANTALLA      (09/09/2026)
   ─────────────────────────────────────────────────────────────────────
   Con los anchos de escritorio (240 · 168 · 280) las siete columnas que pidió
   Angel suman 1.773 px, y una pantalla de 1.440 enseña 1.440: la última cita
   quedaba fuera otra vez, que es justo lo que había que arreglar.
   Aquí se reducen un 23 % entre 1024 y 1799 px, que es donde el problema
   existe. Suman 1.325 px y entran enteras. A partir de 1800 px vuelven a su
   tamaño grande, porque ahí ya caben sin apretar. */
@media (min-width: 1024px) and (max-width: 1799px) {
    /* También con apellido, por lo mismo (10/09/2026): esta reducción se
       calculó para que las SIETE columnas de Nardi cupieran en 1.440 px. En una
       landing con otro número de columnas solo consigue empequeñecer sus fotos
       sin motivo. */
    body.marca-nardi .mosaico__grande { width: 180px; }
    body.marca-nardi .mosaico__par    { width: 127px; }
    body.marca-nardi .mosaico__cita   { width: 220px; }
}

/* QUE LA CITA NO SE SALGA DE SU CAJA EN MÓVIL      (09/09/2026)
   ─────────────────────────────────────────────────────────────────────
   La celda del mosaico mide 300 px de alto y el contenido de la cita medía 322:
   como está centrada, se salía por arriba (el tema, "marisco fresco") y por abajo
   (la nota en cursiva) a la vez, 12 px por cada lado. Lo vio Angel en su móvil.
   Aquí el texto baja un punto y respira menos entre líneas: el bloque pasa de
   218 px a unos 185 y entra con margen, también si mañana entra una cita más
   larga. En escritorio no se toca, que ahí sobra sitio. */
@media (max-width: 759px) {
    .mosaico__cita          { gap: 0.4rem; padding: 0.95rem 1rem; }
    .mosaico__cita-texto    { font-size: 0.98rem; line-height: 1.34; }
    .mosaico__cita-nota     { font-size: 0.68rem; line-height: 1.3; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PRIMER IMPACTO EN MÓVIL, REHECHO            (10/09/2026)
   ══════════════════════════════════════════════════════════════════════════
   De dónde sale: audio de Eloy del 09/09 mirando la landing de Nardi en su
   iPhone 13, y los mensajes de Iñigo esa misma tarde.

     Eloy: "en el móvil el primer impacto está demasiado petado, está muy muy
     petado de todo... el título de abajo, el que pone 'tapas, marisco y pescado
     de la lonja', ese aparece también en el primer impacto... el vídeo de fondo
     se sigue viendo solo la mitad y queda como un poco raro; lo suyo es que se
     vea todo el vídeo completo en el móvil."

     Iñigo: "el vídeo es una pena, se ve poco... ¿y el texto en blanco y que se
     vea un poco más aún el vídeo? Es que los vídeos en el primer contenedor son
     muy atractivos."

   Lo que pasaba, medido: el vídeo NO era el fondo del primer impacto. Era una
   caja del 84 % del ancho pegada arriba a la derecha, de 470 px de alto como
   mucho, y encima llevaba un velo que fundía a color de marca el 38 % de la
   izquierda. Entre el recorte y el velo se veía, efectivamente, media imagen.
   Y como el hero no reservaba una pantalla entera, el titular de la sección
   siguiente asomaba por abajo en cuanto el móvil era un poco alto.

   Hay dos maneras de arreglarlo y NO dan el mismo resultado, porque el vídeo de
   Nardi es horizontal (960×540) y un móvil es vertical:

     · 'cine'  — el vídeo llena la pantalla. Es lo más llamativo, pero de un
                 16:9 en una pantalla 9:19 solo cabe la franja central: se ve
                 más grande y menos encuadre.
     · 'banda' — el vídeo va arriba, a todo el ancho y con su forma intacta.
                 Se ve el fotograma COMPLETO, y el texto queda debajo sobre
                 fondo liso, que se lee mejor que sobre imagen en movimiento.

   Las dos se escriben aquí y cada landing elige con 'hero_movil'. Lo común a
   las dos: una pantalla entera para el primer impacto y nada de la sección
   siguiente asomando.
   ────────────────────────────────────────────────────────────────────────── */

/* El logotipo claro solo sale cuando la cabecera se apoya en el vídeo. */
.l-cabecera__logo-claro { display: none; }

/* La segunda frase del subtítulo: fuera en móvil, dentro en escritorio.
   Sigue en el HTML, así que Google la lee igual. */
@media (max-width: 899px) {
    .hero__texto-extra { display: none; }
}

@media (max-width: 899px) {

    /* ── VARIANTE 'CINE': el vídeo llena la primera pantalla ─────────────── */

    /* La cabecera deja de ocupar altura propia y se apoya sobre el vídeo: son
       unos 60 px que le devolvemos al primer impacto. */
    .hero-cine .l-cabecera {
        position: absolute;
        top: 0; left: 0; right: 0;
        z-index: 20;
        background: transparent;
        padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
    }
    /* El de color se va y entra el claro. El :not() hace falta porque los dos
       son <img> dentro del mismo <span>: sin él, la regla que oculta uno
       ocultaba también el otro y la cabecera se quedaba sin logotipo. */
    .hero-cine .l-cabecera__logo img:not(.l-cabecera__logo-claro) { display: none; }
    .hero-cine img.l-cabecera__logo-claro { display: block; }

    .hero-cine .hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* Una pantalla, ni más ni menos: así no asoma el titular de la sección
           siguiente. `svh` es la altura con la barra del navegador desplegada,
           que es la medida que no cambia al hacer scroll. */
        min-height: 100svh;
        padding: 5.5rem 1.25rem 2rem;
    }
    .hero-cine .hero__foto {
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .hero-cine .hero__foto img,
    .hero-cine .hero__foto .hero__video {
        width: 100%; height: 100%;
        object-fit: cover;
        border-bottom-left-radius: 0;
    }
    /* El velo pasa de fundir a color de marca por la izquierda a oscurecer de
       abajo arriba: es lo que sostiene el texto blanco. Los valores están
       medidos para que el texto quede por encima de 4,5:1 con el vídeo en
       movimiento, no solo con el vídeo pausado. */
    .hero-cine .hero__foto::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.52) 0%,
            rgba(0, 0, 0, 0.20) 26%,
            rgba(0, 0, 0, 0.46) 58%,
            rgba(0, 0, 0, 0.80) 100%);
    }
    .hero-cine .hero__cuerpo { max-width: none; }
    .hero-cine .hero h1,
    .hero-cine .hero h1 em { color: #fff; }
    .hero-cine .hero__texto {
        color: rgba(255, 255, 255, 0.92);
        max-width: 20rem;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    }
    .hero-cine .hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
    .hero-cine .hero__micro { color: rgba(255, 255, 255, 0.9); }
    .hero-cine .hero__micro svg { color: #fff; }
    .hero-cine .pastilla {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    /* LOS SELLOS SOBRE EL VÍDEO. La cápsula blanca al 40 % se pensó para
       apoyarse en una foto clara; sobre un vídeo oscuro se vuelve gris sucia y
       el pie ("430 reseñas", "Gastronomistas · 2026") baja de 3:1, por debajo
       del mínimo legible. Aquí la cápsula se vuelve oscura y el texto blanco:
       misma idea —translúcida, con desenfoque, dejando ver el vídeo— pero al
       revés, que es lo que pide el fondo. */
    .hero-cine .sello {
        background: rgba(12, 16, 28, 0.46);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        color: #fff;
    }
    .hero-cine .sello__nota,
    .hero-cine .sello__nota strong,
    .hero-cine .sello__dato-titulo { color: #fff; }
    .hero-cine .sello__pie { color: rgba(255, 255, 255, 0.82); }
    .hero-cine .sello__dato-icono {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    /* ── VARIANTE 'BANDA': el vídeo entero, arriba y sin recortar ────────── */

    .hero-banda .hero {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        padding: 0 0 2rem;
    }
    /* Sale del posicionamiento absoluto y pasa a ocupar su sitio en la fila:
       ancho completo y la forma real del vídeo (16:9), así que no se recorta
       ni un fotograma. */
    .hero-banda .hero__foto {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        z-index: 0;
        margin-bottom: 1.4rem;
    }
    .hero-banda .hero__foto img,
    .hero-banda .hero__foto .hero__video {
        width: 100%; height: 100%;
        object-fit: cover;              /* con la misma proporción, no recorta */
        border-bottom-left-radius: 0;
    }
    /* Sin velo de color: taparía justo lo que se quiere enseñar. Queda un
       degradado mínimo abajo para que el vídeo se funda con la página en vez
       de cortarse en seco. */
    .hero-banda .hero__foto::after {
        background: linear-gradient(0deg,
            rgb(var(--fondo-rgb)) 0%,
            rgba(var(--fondo-rgb), 0) 18%);
    }
    .hero-banda .hero__cuerpo {
        max-width: none;
        padding: 0 1.25rem;
        /* Se queda con todo el alto que sobra bajo el vídeo y centra su
           contenido: así el hueco no se acumula al final de la pantalla, que
           es lo que deja esa sensación de página a medio cargar. */
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Sin foto que esquivar, el subtítulo puede usar el ancho entero en vez de
       partirse en tres líneas cortas con medio móvil vacío al lado. */
    .hero-banda .hero__texto { max-width: none; }
}

/* PALABRAS QUE NO SE SEPARAN      (10/09/2026)
   <span class="junto">…</span> ata dos o tres palabras para que caigan juntas
   a la línea siguiente en vez de dejar la última sola. Se usa en los titulares
   traducidos, donde el mismo texto ocupa distinto y lo que en español partía
   bien deja en inglés una palabra huérfana. Lo pidió Eloy el 09/09. */
.junto { white-space: nowrap; }

/* EL BOTÓN DE "COOKIE SETTINGS" SE PISABA CON EL DE RESERVAR   (10/09/2026)
   ─────────────────────────────────────────────────────────────────────────
   Lo vio Angel en Casa Pepi: *"molesta un montón y está pisándose con el botón
   de reservar"*. Medido en la web publicada, y era literal:

     · En PC     el botón de cookies ocupaba x 1241-1368 y el de reservar
                 1119-1360. Se comían 119 px el uno al otro.
     · En móvil  el de reservar va de lado a lado (20-370) y el de cookies
                 caía justo encima, a la derecha.

   No es un detalle estético: **el botón de reservar es la conversión**. En una
   landing que se paga con publicidad, un botón azul de un plugin tapando la
   esquina del botón que da dinero es lo peor que puede pasar en esa pantalla.

   El de cookies no se puede quitar —tiene que haber forma de cambiar el
   consentimiento— así que se aparta:
     · en escritorio, a la esquina de la IZQUIERDA, que está libre;
     · en móvil, POR ENCIMA del botón de reservar, que ahí ocupa todo el ancho
       y no hay hueco a los lados.

   Va con !important porque el plugin lo pinta con z-index 999999999 y estilos
   propios. Y vive en este archivo, de nombre neutro, y no en uno que se llame
   "cookies": los bloqueadores de publicidad tumban por nombre, y ya nos dejó
   una vez el panel de preferencias desparramado por la página. */
#gdpr-cookie-consent-show-again {
    left: 1rem !important;
    right: auto !important;
}
@media (max-width: 899px) {
    /* 11/09/2026 · Nardi. En Casa Pepi bastaba con subirlo 5,2 rem; aquí la
       barra flotante es más alta y el botón de cookies caía JUSTO encima del de
       reservar, partiendo la palabra por la mitad. Una medida fija no vale para
       dos landings distintas, así que landing.js publica el alto real de la
       barra en --gmlr-alto-flotante y el botón se coloca por encima de ella.
       Cuando la barra no se ve, la variable vale 0 y el botón baja solo. */
    #gdpr-cookie-consent-show-again {
        bottom: calc(var(--gmlr-alto-flotante, 5.2rem) + 0.9rem) !important;
        transition: bottom 0.25s ease;
    }
}

/* LO QUE YA TRAÍA PUESTO LA WEB DEL CLIENTE      (11/09/2026)
   ─────────────────────────────────────────────────────────────────────────
   Al publicar Nardi en su propio dominio apareció lo que la demo no podía
   enseñar: **sus plugins siguen pintando encima de nuestra landing**. En una
   captura de móvil se veían DOS barras de RESERVAR/CARTA, una sobre otra, y
   las banderas de su traductor encima de nuestro selector de idiomas.

   Ninguno de los dos se desactiva: son plugins suyos y pueden estar en uso en
   otras webs de la cuenta. Se esconden SOLO dentro de nuestras landings, que
   es donde estorban, y basta con quitar estas reglas para que vuelvan.

   · `.bfr-boton-container` es el botón flotante de GastroAds. Duplica nuestra
     barra fija —y encima apunta a /reservas y /carta, las direcciones viejas—,
     así que el visitante ve dos parejas de botones que hacen lo mismo.
   · `.gtranslate_wrapper` es el traductor automático. Nuestra landing ya está
     escrita en tres idiomas, con textos reales y no traducidos a máquina: dejar
     las dos cosas es ofrecer al visitante una traducción peor de una página que
     ya existe bien hecha.

   Van con !important porque los dos se pintan con estilos propios y z-index
   altísimos. */
/* El ancla es `single-gmlr_landing`, la clase que WordPress pone solo en las
   páginas de nuestro tipo de contenido: está en la landing Y en sus páginas
   interiores (reservar, gracias, legales), que es justo donde hace falta. */
.single-gmlr_landing .bfr-boton-container,
.single-gmlr_landing .gtranslate_wrapper,
.single-gmlr_landing [id^="gt-wrapper-"] {
    display: none !important;
}

/* EL AVISO DE COOKIES, DEL COLOR DEL RESTAURANTE          (11/09/2026)
   ─────────────────────────────────────────────────────────────────────────
   Lo pidió Eloy viendo Casa Pepi: *"¿esto de las cookies se puede establecer
   que se adapte siempre al estilo de la web del restaurante? o sea, si es
   verde - verde, y si es negra - negra"*. Tenía razón: el plugin pinta todo
   con su azul de fábrica (#074fa8) y en una web verde canta.

   No se resuelve configurando cada web a mano —serían 50 veces y se olvidaría
   una—, sino aquí: cada landing ya declara su color en `--verde` (que se llama
   así por historia, pero es "el color principal de esta marca"). Casa Pepi lo
   tiene en su verde y Nardi en su azul, así que el aviso hereda el que toque
   sin tocar nada en cada instalación.

   Va con !important porque el plugin pinta con estilos en línea, que ganan a
   cualquier hoja de estilo. Y solo dentro de nuestras landings. */

/* El botón flotante que reabre el aviso: es el que se ve siempre */
.single-gmlr_landing #gdpr-cookie-consent-show-again {
    background-color: var(--verde) !important;
    color: #fff !important;
}

/* Los botones del aviso y del panel.
   OJO: son etiquetas <a>, no <button>. Al pintar "los enlaces" del aviso se
   quedaron con el texto verde sobre fondo verde, o sea invisibles — se vio en
   la prueba, antes de subir nada. Por eso aquí va también el color del texto, y
   más abajo los enlaces se seleccionan excluyendo los botones. */
.single-gmlr_landing .gdpr_action_button,
.single-gmlr_landing #cookie_action_accept,
.single-gmlr_landing #cookie_action_accept_all,
.single-gmlr_landing #cookie_action_reject {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: #fff !important;
}
/* El de "Preferencias" va en hueco, como el botón secundario del resto de la
   landing: el relleno se reserva para la acción principal */
.single-gmlr_landing .gdpr_action_button[data-gdpr_action="settings"],
.single-gmlr_landing #cookie_action_settings {
    background-color: transparent !important;
    color: var(--verde) !important;
}

/* Enlaces de texto, títulos y la etiqueta "Siempre activo" del panel.
   `#cookie_action_link` es el "Más información", que lleva su color en línea.
   Se excluyen los botones a propósito: ellos ya tienen el suyo arriba. */
.single-gmlr_landing .gdprmodal a:not(.gdpr_action_button),
.single-gmlr_landing #cookie_action_link,
.single-gmlr_landing .always-active,
.single-gmlr_landing .gdprmodal-header p {
    color: var(--verde) !important;
}

/* Los interruptores de cada categoría, cuando están encendidos */
.single-gmlr_landing input:checked + .gdpr-switch-slider,
.single-gmlr_landing input:checked + .slider {
    background-color: var(--verde) !important;
}

/* Y la barra de desplazamiento del panel, que el plugin colorea aparte */
.single-gmlr_landing .gdprmodal-body {
    scrollbar-color: var(--verde) transparent !important;
}

/* EL BOTÓN DE COOKIES TAPABA LA FIRMA DEL PIE, EN ESCRITORIO   (11/09/2026)
   ─────────────────────────────────────────────────────────────────────────
   Lo vio Angel en la captura que mandó Eloy: abajo a la izquierda, el botón
   azul de "Cookies" caía justo encima de "Diseño por Gastromaps". En móvil no
   pasa, porque ahí ese botón ya sube por encima de la barra de reservar.

   El botón es fijo: en el borde inferior de la pantalla siempre va a tapar lo
   que haya. Así que lo que se cambia no es el botón, es el pie: se le da aire
   por debajo en escritorio, y su contenido deja de caer en esa franja. Da
   igual dónde acabe la página o cuánto mida el pie.

   Va en el pie y no en el botón a propósito: el botón tiene que quedarse donde
   el visitante espera encontrarlo. */
@media (min-width: 900px) {
    .l-pie,
    .pie-interior {
        /* 6,5rem y no 4,5: con 4,5 la firma subía pero seguía rozando el botón
           por seis píxeles. Medido en la web publicada, no calculado a ojo: el
           botón ocupa de 852 a 890 px de pantalla, y con esto la firma termina
           en 820 y sobran treinta de aire. */
        padding-bottom: 6.5rem;
    }
}