/*
Theme Name: Sentío Jerez
Theme URI: 
Author: Sentío
Description: Theme a medida para Sentío, gastrotabanco en Jerez de la Frontera. Replica el diseño de la web de referencia (hero tipo etiqueta, carta con pestañas Comida/Jerez/Vinos, reseñas, filosofía, nosotros y visítanos).
Version: 1.0.265
Text Domain: sentio
*/

  :root {
    --cream: #F7F4EF;
    --white: #FFFFFF;
    --dark-red: #5A1814;
    --red: #84201A;
    --sand: #BEAC96;
    --sand-light: #D9CFC0;

    /* Anchos de contenido estandarizados — fluidos, proporcionales al lienzo Figma de 1920px, con suelo a partir de 375px */
    --w-narrow: max(140.62px, 37.5cqw);
    --w-medium: max(187.5px, 50cqw);
    --w-wide: max(283.2px, 75.5208cqw);
  }

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

  html { scroll-behavior: smooth; overflow-x: clip; background: var(--cream); }

  body {
    background: var(--cream);
    color: var(--dark-red);
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: max(0.956rem, 0.9375cqw);
    overflow-x: clip;
    width: 100%;
  }

  /* Contenedor real del sitio (todo salvo la admin bar de WordPress y widgets de plugins en wp_footer) —
     a partir de 1920px de viewport deja de crecer: se queda a 1920, centrado, y el resto de la pantalla
     se rellena con el color de fondo. Sin transform: rompía el position:fixed de nav y del lightbox,
     que quedaban anclados al alto total de la página en vez de a la pantalla real (bug confirmado). */
  .site-shell {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    container-type: inline-size;
  }
  body.lightbox-open { overflow: hidden; width: 100%; }

  /* ── LANGUAGE TOGGLE (integrado en el nav) — sustituido por el selector de
     bandera .lang-flag-toggle; se deja el CSS por si se necesita reactivar. ── */
  .lang-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
  }
  .lang-toggle a {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: max(0.63rem, 0.5833cqw);
    letter-spacing: 0.15em;
    color: rgba(247,244,239,0.6);
    text-decoration: none;
    transition: color 0.3s;
    padding: 0.1rem 0.3rem;
  }
  .lang-toggle a.active {
    color: var(--cream);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .lang-toggle a:hover { color: var(--cream); }
  .lang-sep { color: rgba(247,244,239,0.4); font-size: max(0.63rem, 0.5833cqw); line-height: 1.8; }

  /* ── SELECTOR DE IDIOMA EN BANDERA (desktop y móvil) ── */
  .lang-flag-toggle { display: block; position: relative; }
  .lang-flag-current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--dark-red);
    border-radius: 4px;
    background: var(--cream);
    cursor: pointer;
    overflow: hidden;
  }
  .lang-flag-current svg { width: 100%; height: 100%; display: block; }
  .lang-flag-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    background: #2A1512;
    border-radius: 10px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 96px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 20;
  }
  .lang-flag-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .lang-flag-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--cream);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    transition: background 0.2s;
  }
  .lang-flag-menu a:hover { background: rgba(247,244,239,0.08); }
  .lang-flag-menu a svg { width: 24px; height: 16px; border-radius: 2px; flex-shrink: 0; display: block; }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 999;
    padding: 1.1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dark-red);
    transition: box-shadow 0.4s;
  }
  nav.scrolled {
    box-shadow: 0 2px 12px rgba(90,24,20,0.25);
  }
  .nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: max(1.152rem, 1.3333cqw);
    font-style: italic;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: 0.05em;
    text-decoration: none;
  }
  .nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .nav-links a {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.2em;
    color: rgba(247,244,239,0.75);
    text-decoration: none;
    transition: color 0.3s;
  }
  @media (max-width: 768px) {
    .nav-links a { font-size: clamp(8.89px, 2.7778vw, 16.67px); }
  }
  .nav-logo img,
  footer .footer-logo-img {
    display: block;
  }

  /* ── NAV: botón de hamburguesa (solo móvil, ver @media 768px) ── */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 26px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--cream);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── HERO — ETIQUETA, PANTALLA COMPLETA ── */
  .hero {
    position: relative;
    overflow: visible;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--cream);
    /* Textura papel muy sutil */
    background-image:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(90,24,20,0.04) 0%, transparent 70%);
    padding-top: 7.5rem;
  }
  @media (max-width: 1600px) {
    .hero { height: 900px; min-height: 900px; }
    /* Sube todo el bloque (logo, frases, botón Reservar) 100px, para separarlo más
       de la parte inferior de la sección (ilustración/ola). */
    .label-body { transform: translateY(-50px); }
  }

  /* Banda superior — corre de borde a borde */
  .label-band-top {
    background: var(--dark-red);
    padding: 0.9rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    animation: fadeDown 0.9s 0.1s forwards;
  }
  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .label-band-top-text {
    font-family: 'Cinzel', serif;
    font-size: max(0.522rem, 0.4833cqw);
    letter-spacing: 0.5em;
    color: rgba(247,244,239,0.65);
  }
  .label-band-top-dot {
    width: 4px; height: 4px;
    background: rgba(247,244,239,0.3);
    transform: rotate(45deg);
  }

  /* Cuerpo central de la etiqueta */
  .label-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    gap: 0;
  }

  .label-region {
    font-family: 'Cinzel', serif;
    font-size: max(0.68rem, 0.65cqw);
    letter-spacing: 0.4em;
    color: var(--dark-red);
    opacity: 0;
    margin: 1.4rem 0 0.8rem;
    animation: fadeUp 0.8s 0.55s forwards;
  }

  /* Línea fina bajo la frase manuscrita, sobre la línea de apoyo */
  /* Envuelve las dos líneas + GASTROTABANCO... para que cada línea siempre mida
     exactamente lo mismo que el texto (de la G a la S), en vez de un ancho fijo
     aparte: el wrapper se encoge a su contenido (fit-content = ancho del texto,
     que es el hijo más ancho) y align-items:stretch hace que las líneas, que no
     tienen ancho propio, rellenen ese mismo ancho. */
  .label-vintage-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }
  .label-hairline {
    width: auto;
    height: 1px;
    background: rgba(90,24,20,0.25);
    margin: 0.9rem 0 0.7rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s forwards;
  }

  /* Logo imagen en la etiqueta */
  .label-name-img {
    width: max(97.66px, 26.0417cqw);
    height: auto;
    display: block;
    margin: 1rem auto 0.5rem;
    opacity: 0;
    animation: fadeUp 1.1s 0.4s forwards;
  }

  .label-type {
    font-family: 'Cinzel', serif;
    font-size: max(0.7rem, 0.6833cqw);
    letter-spacing: 0.45em;
    color: var(--red);
    opacity: 0;
    animation: fadeUp 0.8s 0.75s forwards;
    margin-bottom: 0.3rem;
  }

  .label-tagline {
    display: block;
    width: fit-content;
    max-width: 100%;
    color: #5A1814;
    margin: 0.8rem auto 0.6rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.85s forwards;
    letter-spacing: 0;
    line-height: 1.15;
    padding: 0.5em 1.2em;
  }

  .label-vintage {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    font-family: 'Lora', serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #000000;
    opacity: 0;
    animation: fadeUp 0.8s 1s forwards;
    white-space: nowrap;
    padding: 0.5em 1.2em;
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.7rem;
    min-width: max(130px, 8.8542cqw);
    height: max(35.94px, 2.4479cqw);
    padding: 0 1.6rem;
    border: 1px solid var(--red);
    line-height: 1.21;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    opacity: 0;
    animation: fadeUp 0.8s 1.1s forwards;
    transition: background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
  }
  .hero-cta:hover {
    background: transparent;
    color: var(--red);
  }

  /* Ilustración de fondo — skyline de Jerez, anclada al pie del hero — ancho completo del
     contenedor (.site-shell, tope 1920px vía cqw), no del viewport real: en monitores más
     anchos que 1920px ya no se sale del contenedor. A partir de aquí (≥1600px) va a tope;
     por debajo se contrae más (ver media query un poco más abajo). .hero-wave, que va
     encima, sí usa vw a propósito (ancho completo real) — es una diferencia intencional,
     no hace falta que coincidan.
     Nota: el centrado va por margin, no por transform — la animación fadeUp también anima
     `transform` (translateY), y pisaría un translateX(-50%) puesto en la misma propiedad. */
  .hero-illustration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100cqw;
    margin-left: calc(50% - 50cqw);
    height: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
  }
  /* Por debajo de 1600px (hasta el límite de escritorio/tablet, no aplica en móvil ≤600px)
     ya no va de borde a borde: se contrae al 70% del ancho de pantalla, centrada, dejando
     "padding" visible a los lados. */
  @media (max-width: 1600px) and (min-width: 601px) {
    .hero-illustration {
      width: 70%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
    }
    /* Menos separación entre el logo y "La nueva forma de vivir los tabancos..." para
       que la frase suba. El hueco no era solo el margin: el fondo difuminado de
       .label-tagline tiene su propio padding-top (0.5em, mucho a estos tamaños de
       fuente), así que también hay que recortarlo. */
    .label-name-img { margin-bottom: 0.2rem; }
    .label-tagline { margin-top: 0; padding-top: 0.15em; }
  }

  /* Onda de transición al bloque blanco de la carta — ancho completo real del viewport (no el de .hero, que va encajonado a 1920px vía .site-shell) */
  .hero-wave {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
  }
  .hero-wave-desktop,
  .hero-wave-mobile {
    display: block;
    width: 100%;
    height: 60px;
  }
  .hero-wave-mobile { display: none; }

  /* Velo crema tras el texto, para que no choque con el trazo de la ilustración */
  .hero-illustration-fade {
    position: absolute;
    z-index: 1;
    top: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: max(160.16px, 42.7083cqw);
    height: 58%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--cream) 0%, var(--cream) 38%, rgba(247,244,239,0.75) 58%, rgba(247,244,239,0) 80%);
    pointer-events: none;
  }

  @media (max-width: 600px) {
    .label-body { padding: 0; }
    .label-region  { letter-spacing: 0.3em; }
    .label-type    { letter-spacing: 0.3em; }
  }

  /* Tipografía de botón "Botón" — compartida por .btn y .hero-cta. El tamaño/forma de la
     caja (padding, ancho, aspect-ratio) se queda en cada clase porque .hero-cta es una
     etiqueta de proporción fija y .btn se ajusta al texto. */
  .btn, .hero-cta {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  /* Altura y padding horizontal calculados a partir de las medidas reales de Figma a
     20px/1920: "VER EN GOOGLE MAPS" (372×54) y "LLAMAR AHORA" (277×54) dan el mismo
     padding (43.5px) despejando ancho = 2·padding + n_caracteres·ancho_caracter — así
     el botón sigue creciendo o encogiendo según el texto que lleve, en la misma
     proporción que en Figma. El font-size de .btn va por tramos fijos (ver más abajo:
     16/19/20px), no fluido — el padding y la altura van con esos mismos tramos
     (proporcionales a cada font-size) para no desajustarse del texto entre tramos. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 43.5px;
    text-decoration: none;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    transition: all 0.35s;
  }
  @media (max-width: 600px) {
    .btn, .hero-cta { font-size: max(12.44px, 3.8889cqw); }
    .btn {
      display: inline-block;
      height: auto;
      padding: 0.85rem 1.4rem;
    }
  }
  .btn-primary {
    border: 1px solid var(--red);
  }
  .btn-primary:hover {
    background: var(--dark-red);
    border-color: var(--dark-red);
  }
  .btn-outline-red {
    border: 1px solid var(--dark-red);
  }
  .btn-outline-red:hover {
    background: var(--dark-red);
    color: var(--cream);
  }
  /* Contorno claro para botones sobre fondos oscuros/fotos (p. ej. banda de reservas) */
  .btn-outline-cream {
    border: 1px solid rgba(247,244,239,0.6);
  }
  .btn-outline-cream:hover {
    background: rgba(247,244,239,0.12);
    border-color: var(--cream);
  }

  /* Colores compartidos de botones: fondo + texto. El borde, el hover y la tipografía
     se quedan en la clase de cada componente porque varían intencionalmente. */
  .btn-color-red { background: var(--red); color: var(--cream); }
  .btn-color-dark { background: rgba(0,0,0,0.25); color: var(--cream); }
  .btn-color-beige { background: transparent; color: var(--dark-red); }
  .btn-color-white { background: var(--white); color: var(--dark-red); }

  /* ── DIVIDER ── */
  .divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto 4rem;
    max-width: 400px;
  }
  .divider-line { flex: 1; height: 1px; background: var(--sand-light); }
  .divider-text {
    font-family: 'Cinzel', serif;
    font-size: max(0.54rem, 0.5cqw);
    letter-spacing: 0.3em;
    color: var(--sand);
  }

  /* ── SECTIONS ── */
  section { padding: 7rem 2rem; }

  .section-label {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.4em;
    color: var(--sand);
    text-align: center;
    margin-bottom: 1rem;
    display: block;
  }
  .visit-section .section-label,
  .reviews-section .section-label,
  .about-page .section-label {
    color: var(--red);
  }
  /* Titular en Caveat (script) — estilo "Encabezado 1", compartido por .section-title,
     .about-intro h3, .reserve-cta-tagline, .philosophy-quote y .label-tagline (hero de Home).
     Antes cada uno repetía la misma declaración de fuente por separado; agrupado aquí para
     no duplicar la regla y para que sean exactamente el mismo tamaño en todas partes. */
  .section-title,
  .about-intro h3,
  .reserve-cta-tagline,
  .philosophy-quote,
  .label-tagline {
    font-family: 'Caveat', cursive;
    font-size: 46px;
    font-weight: 400;
    font-style: normal;
  }
  .section-title {
    text-align: center;
    color: var(--dark-red);
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  @media (max-width: 600px) {
    .section-title, .label-tagline, .about-intro h3, .reserve-cta-tagline, .philosophy-quote { font-size: clamp(23.11px, 7.2222vw, 43.33px); }
  }
  .section-intro {
    text-align: center;
    max-width: var(--w-narrow);
    margin: 0 auto 5rem;
    font-size: max(0.892rem, 0.875cqw);
    line-height: 1.95;
    color: var(--red);
    opacity: 0.9;
  }

  /* ── ABOUT ── */
  .about { background: var(--cream); }

  /* Hero photo — full-width cinematic strip */
  .about-hero-photo {
    width: 100%;
    max-width: var(--w-wide);
    margin: 0 auto 6rem;
    height: 520px;
    position: relative;
    overflow: hidden;
  }
  .photo-slot {
    width: 100%; height: 100%;
    background: var(--sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.8rem;
    border: 1px dashed var(--sand);
  }
  .photo-slot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .photo-slot-label {
    font-family: 'Cinzel', serif;
    font-size: max(0.495rem, 0.4583cqw);
    letter-spacing: 0.3em;
    color: var(--sand);
  }
  .photo-slot-icon {
    width: 2rem; height: 2rem;
    opacity: 0.3;
    color: var(--sand);
  }
  .photo-caption {
    position: absolute;
    bottom: 2rem; right: 2.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: max(0.765rem, 0.7083cqw);
    font-style: italic;
    color: var(--cream);
    background: rgba(90,24,20,0.55);
    padding: 0.4rem 0.9rem;
    backdrop-filter: blur(4px);
    letter-spacing: 0.05em;
  }

  /* Icono decorativo sobre la etiqueta (gráfico de barriles) */
  .about-hero-icon {
    width: max(65.99px, 17.6042cqw);
    margin: 0 auto 1.5rem;
  }
  .about-hero-icon img { width: 100%; height: auto; display: block; }
  .about-hero-icon .photo-slot-label { font-size: max(0.4rem, 0.375cqw); text-align: center; }

  .about-intro .about-hero-subtitle {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.25em;
    color: #000000;
    display: block;
    max-width: 100%;
    width: fit-content;
    /* Antes nowrap: el texto ("GASTROTABANCO ESTABLECIDO EN JEREZ · VINOS Y
       PRODUCTOS LOCALES") no cabía sin partirse por debajo de ~1400-1600px de
       viewport y se desbordaba fuera de .about-intro (contenedor fluido en
       cqw) — el mismo patrón del bug del chef. .label-vintage, el elemento
       gemelo del hero de Inicio, ya se corrigió con white-space:normal en el
       tramo tablet; a este le faltaba. */
    white-space: normal;
    margin: 0 auto 1.4rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--sand-light);
    border-bottom: 1px solid var(--sand-light);
  }
  @media (max-width: 600px) {
    .about-intro .about-hero-subtitle { font-size: clamp(8.89px, 2.7778vw, 16.67px); }
  }

  .about-hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
  }

  /* Intro text block */
  .about-intro {
    max-width: var(--w-medium);
    margin: 0 auto 6rem;
    text-align: center;
  }
  .about-intro h3 {
    color: var(--dark-red);
    margin-bottom: 1.8rem;
    line-height: 1.25;
  }
  .about-intro p {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 2;
    color: #000000;
    margin-bottom: 1rem;
  }

  /* Photo + text alternating rows */
  .about-row {
    max-width: var(--w-medium);
    margin: 0 auto 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: max(70.7px, 18.8542cqw);
    text-decoration: none;
    color: inherit;
  }
  .about-row.reverse { direction: rtl; }
  .about-row.reverse > * { direction: ltr; }

  /* Fila del chef — antes foto y texto forzados a cuadrado (aspect-ratio:1/1 en
     los dos). Con la biografía del chef (2 párrafos largos) el texto no cabía
     en ese cuadro y desbordaba tapando la foto; quitarle el aspect-ratio solo al
     texto tampoco bastaba, porque la foto (que seguía queriendo ser cuadrada)
     se ensanchaba al estirarse a la altura mayor de la fila e invadía el texto
     igualmente. Se quita el aspect-ratio también de la foto: ahora se comporta
     como el resto de .about-row del sitio (blog, prensa...), donde nunca ha
     dado este problema — la foto simplemente rellena su columna hasta la altura
     que marque el texto (via align-items:stretch, heredado de .about-row), sin
     forzar ninguna proporción cuadrada. */
  .chef-section .about-row {
    max-width: max(262.7px, 70.1042cqw);
    grid-template-columns: 1fr 1fr;
  }
  .chef-section .about-row-text { background: #E8DEC8; }
  .chef-section .chef-bio { margin-bottom: 1em; }
  .chef-section .chef-bio:last-child { margin-bottom: 0; }

  .about-row-photo {
    position: relative;
    overflow: hidden;
    min-height: max(70.7px, 18.8542cqw);
    min-width: 0;
  }
  .about-row-photo .photo-slot {
    height: 100%;
    min-height: max(70.7px, 18.8542cqw);
  }
  .about-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .about-row-text {
    padding: 4rem 4.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--sand-light);
    min-width: 0;
  }
  .about-row-photo-grayscale img { filter: grayscale(100%); }
  .about-row-text .tag {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--sand);
    margin-bottom: 1.2rem;
    display: block;
  }
  @media (max-width: 600px) {
    .about-row-text .tag { font-size: clamp(8.89px, 2.7778vw, 16.67px); }
  }
  .about-row-text h4 {
    font-family: 'Lora', serif;
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    color: var(--dark-red);
    margin-bottom: 1.2rem;
    line-height: 1.25;
  }
  @media (max-width: 600px) {
    .about-row-text h4 { font-size: clamp(14.22px, 4.4444vw, 26.67px); }
  }
  .about-row-text p {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--red);
    opacity: 0.9;
  }
  .about-row-text .chef-bio {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.6;
  }
  @media (max-width: 600px) {
    .about-row-text p, .about-row-text .chef-bio, .about-intro p, .pillar p {
      font-size: clamp(10.67px, 3.3333vw, 20px);
    }
  }

  /* Gallery strip — 3 photos */
  .about-gallery {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0.15rem;
    height: 320px;
  }
  .about-gallery .photo-slot { min-height: unset; height: 100%; }

  /* Carrusel de fotos (3 visibles + flechas) */
  .about-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--w-wide);
    margin: 0 auto 3.5rem;
  }
  .about-carousel-track {
    display: flex;
    gap: 0.15rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: max(61.07px, 16.3021cqw);
  }
  .about-carousel-track::-webkit-scrollbar { display: none; }
  .about-carousel-item {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 2 * 0.15rem) / 3);
    height: 100%;
  }
  .about-carousel-item .photo-slot { min-height: unset; height: 100%; }
  .about-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  @media (max-width: 900px) {
    .about-carousel-item { flex: 0 0 calc((100% - 0.15rem) / 2); }
  }
  @media (max-width: 600px) {
    .about-carousel-item { flex: 0 0 100%; }
  }

  /* Banda "qué dicen de nosotros" (foto de fondo pendiente) */
  .press-band { background-color: var(--dark-red); }
  .press-cta-btn { font-size: max(3.91px, 1.0417cqw); }

  @media (max-width: 768px) {
    .about-hero-photo { height: 260px; }
    .about-row, .about-row.reverse { grid-template-columns: 1fr; direction: ltr; }
    /* En una sola columna, "reverse" ya no puede voltear con RTL — se ordena con order */
    .about-row.reverse .about-row-text { order: 1; }
    .about-row.reverse .about-row-photo { order: 2; }
    .about-row-text { padding: 2.5rem 1.8rem; text-align: left; }
    .about-gallery { grid-template-columns: 1fr; height: auto; }
    .about-gallery .photo-slot { height: 200px; }
    .about-hero-icon { width: clamp(174.2px, 54.4444vw, 326.7px); }
    .chef-section .about-row { grid-template-columns: 1fr; max-width: var(--w-medium); }
  }

  /* ── MENU ── */
  .menu-section {
    background: var(--white);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  /* En escritorio, la mitad del padding vertical genérico de <section> (7rem → 3.5rem).
     Va en min-width para no pisar el padding de 5rem que aplica <section> en ≤768px. */
  @media (min-width: 769px) {
    .menu-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  }
  .menu-section .section-label { font-family: 'Lora', serif; font-weight: 400; color: var(--red); }
  .menu-section .section-title {
    margin-left: auto;
    margin-right: auto;
  }
  .menu-tabs-sentinel { height: 1px; }
  .menu-tabs-bar {
    position: sticky;
    top: 70.375px;
    z-index: 50;
    background: var(--white);
    width: 100cqw;
    margin-left: calc(50% - 50cqw);
    margin-right: calc(50% - 50cqw);
    padding: 0.5rem 0;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    box-shadow: 0 6px 12px -6px rgba(90,24,20,0);
    transition: box-shadow 0.2s;
  }
  .menu-tabs-bar.is-stuck {
    box-shadow: 0 6px 12px -6px rgba(90,24,20,0.15);
  }
  .menu-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border: 1px solid #DFD8D8;
    width: fit-content;
  }
  .menu-tab {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: max(0.85rem, 0.8333cqw);
    line-height: 1;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 2.2rem;
    border: none;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    transition: all 0.3s;
    border-right: 1px solid #DFD8D8;
  }
  .menu-tab:last-child { border-right: none; }
  .menu-tab.active {
    background: var(--red);
    color: var(--cream);
  }
  .menu-tab:not(.active):hover { background: rgba(90,24,20,0.05); color: var(--dark-red); }

  .menu-panel { display: none; max-width: var(--w-wide); margin: 0 auto; }
  .menu-panel.active { display: block; }

  /* Dos columnas de platos por categoría (como en la maqueta) */
  .menu-category {
    margin-bottom: 3.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
  }
  .menu-category-title {
    grid-column: 1 / -1;
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.35em;
    color: var(--dark-red);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  @media (max-width: 600px) {
    .menu-category-title { font-size: clamp(10.67px, 3.3333vw, 20px); }
  }
  .menu-category-title::before, .menu-category-title::after {
    content: ''; flex: 1; height: 1.5px; background: var(--dark-red);
  }

  /* Selector acotado a .menu-category: "menu-item" es también la clase que
     WordPress pone a cada <li> de un menú de navegación (wp_nav_menu), y sin
     acotar aquí ese borde punteado se colaba también en los enlaces del nav. */
  .menu-category .menu-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px dotted rgba(190,172,150,0.5);
    gap: 1.1rem;
  }
  .menu-category .menu-item:last-child { border-bottom: none; }

  .menu-item-thumb {
    width: max(60px, 5.2083cqw);
    height: max(60px, 5.2083cqw);
    flex-shrink: 0;
    border: none;
    background: var(--sand-light);
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.25s;
  }
  .menu-item-thumb:hover { opacity: 0.75; }
  .menu-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .menu-item-thumb svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--sand);
    opacity: 0.6;
  }

  /* ── Lightbox de miniaturas de la Carta ── */
  .lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .lightbox-overlay.open { display: flex; }
  .lightbox-box {
    background: var(--white);
    max-width: 560px;
    width: 100%;
    position: relative;
  }
  .lightbox-content { padding: 1.5rem 1.8rem 1.8rem; }
  .lightbox-photo-wrap { position: relative; }
  .lightbox-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sand-light);
    border: 1px dashed var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lightbox-photo svg { width: 2.2rem; height: 2.2rem; color: var(--sand); opacity: 0.5; }

  .lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(247,244,239,0.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dark-red);
    transition: background 0.2s;
  }
  .lightbox-arrow:hover { background: var(--cream); }
  .lightbox-arrow svg { width: 1.2rem; height: 1.2rem; }
  .lightbox-arrow-prev { left: 0.6rem; }
  .lightbox-arrow-next { right: 0.6rem; }

  .lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: none;
    border: none;
    color: var(--cream);
    font-family: 'Cinzel', serif;
    font-size: max(0.675rem, 0.625cqw);
    letter-spacing: 0.2em;
    cursor: pointer;
    padding: 0.5rem;
  }

  .menu-item-body { flex: 1; min-width: 0; }
  .menu-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .menu-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .menu-item-name {
    font-family: 'Lora', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
    transition: opacity 0.25s;
    /* Resets para cuando es un <button> (home, abre el popup) en vez de un <a>
       (carta completa, enlaza a la ficha individual) — sin efecto en el <a>. */
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }
  @media (max-width: 600px) {
    .menu-item-name { font-size: clamp(10.67px, 3.3333vw, 20px); }
  }
  .menu-item-name:hover { opacity: 0.65; }
  .menu-item-name em {
    font-style: italic;
    font-size: 14px;
    color: var(--red);
    opacity: 0.85;
    display: block;
    margin-top: 0.15rem;
  }
  .menu-item-price {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    white-space: nowrap;
    text-align: right;
  }
  .menu-item-price-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.6rem;
  }
  .menu-item-price-variant {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
  }
  .menu-item-price-sep {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: #000000;
  }
  .menu-item-price-value {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
  }

  .menu-item-excerpt {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
  }

  .menu-item-allergens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .menu-item-allergen {
    width: auto;
    height: auto;
    border-radius: 3px;
    background: #FFFCE2;
    border: 1px solid var(--red);
    padding: 0.25rem 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .menu-item-allergen img {
    display: none;
  }
  .menu-item-allergen-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--red);
    white-space: nowrap;
  }
  @media (max-width: 600px) {
    .menu-item-allergen-name { font-size: 8px; }
  }

  .menu-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    text-align: center;
    margin-top: 3.5rem;
  }

  /* ── RESERVAS Y CONTACTO ── */
  .reserve-cta {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: max(5rem, 6.6667cqw) 2rem;
    text-align: center;
    overflow: hidden;
  }
  .reserve-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
  }
  .reserve-cta-content {
    position: relative;
    z-index: 2;
    max-width: var(--w-medium);
    margin: 0 auto;
  }
  .reserve-cta-label {
    color: var(--sand-light);
    margin-bottom: 1.4rem;
  }
  .reserve-cta-tagline {
    line-height: 1.25;
    color: var(--cream);
  }
  .reserve-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.6rem;
  }
  /* En escritorio los 3 botones deben ir en una sola línea: .reserve-cta-buttons hereda
     el max-width (var(--w-medium)) de .reserve-cta-content, pensado para el ancho del
     texto, no para 3 botones juntos — se rompe a ancho completo para poder exceder ese
     ancho sin verse forzado a envolver. Desde 1440px (igual que el resto de "modo
     escritorio" del sitio): por debajo, con el texto de los botones a tamaño completo,
     forzar una sola línea desbordaría el ancho de tablet. */
  @media (min-width: 1440px) {
    .reserve-cta-buttons {
      flex-wrap: nowrap;
      max-width: none;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }
  .reserve-cta-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 2.4rem;
  }
  .reserve-cta-social-icon {
    display: inline-flex;
    align-items: center;
    color: var(--white);
    opacity: 1;
    transition: opacity 0.25s, transform 0.25s;
  }
  .reserve-cta-social-icon:hover {
    opacity: 0.85;
    transform: translateY(-2px);
  }
  /* Los iconos vienen de archivos con su propio ancho/alto (algunos no son
     cuadrados, ej. TripAdvisor o Facebook) — se fija solo el alto y el ancho
     se ajusta solo para no deformarlos. */
  .reserve-cta-social-icon svg { height: 22px; width: auto; }

  @media (max-width: 600px) {
    .reserve-cta-buttons { flex-direction: column; }
    .reserve-cta-buttons .btn { width: 100%; max-width: 280px; }
  }

  /* ── BLOG (HOME) ── */
  .blog-alt-section {
    background: var(--dark-red);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: max(5rem, 6.6667cqw) 2rem;
    text-align: center;
  }
  .blog-alt-eyebrow {
    color: var(--sand);
    margin-bottom: 1.4rem;
  }
  .blog-alt-heading {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: max(2rem, 2.5833cqw);
    line-height: 1.25;
    color: var(--cream);
    max-width: var(--w-medium);
    margin: 0 auto 5rem;
  }
  .blog-alt-list {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .blog-alt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    text-decoration: none;
    align-items: stretch;
  }
  .blog-alt-row.reverse { direction: rtl; }
  .blog-alt-row.reverse > * { direction: ltr; }

  .blog-alt-photo {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    min-width: 0;
    background: var(--sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .blog-alt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .blog-alt-photo svg { width: 2.5rem; height: 2.5rem; color: var(--sand); opacity: 0.6; }

  .blog-alt-text {
    background: var(--cream);
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-width: 0;
  }
  .blog-alt-category {
    display: block;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.25em;
    color: var(--red);
    margin-bottom: 1rem;
  }
  .blog-alt-item-title {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    color: var(--red);
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  .blog-alt-excerpt {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.85;
    color: #000000;
  }
  .blog-alt-cta { margin-top: 4rem; }
  .blog-alt-btn {
    background: var(--cream);
    color: var(--dark-red);
    border: 1px solid var(--cream);
  }
  .blog-alt-btn:hover {
    background: transparent;
    color: var(--cream);
  }

  @media (max-width: 768px) {
    .blog-alt-row, .blog-alt-row.reverse { grid-template-columns: 1fr; direction: ltr; }
    .blog-alt-text { padding: 2.5rem 1.8rem; text-align: center; }
  }

  /* ── EXPERIENCIAS (home) — misma sección blog-alt-*, cabecera propia (etiqueta +
     título + línea + botón en una fila) y tarjetas con esquinas redondeadas y
     separación entre foto y texto en vez de ir a tope. ── */
  .experiencias-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: var(--w-wide);
    margin: 0 auto 3rem;
  }
  .experiencias-header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.6rem;
  }
  .experiencias-header-label {
    font-family: 'Lora', serif;
    font-size: 13px;
    letter-spacing: 0.35em;
    color: var(--sand);
    white-space: nowrap;
  }
  .experiencias-header-title {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: max(1.8rem, 2.2cqw);
    line-height: 1.15;
    color: var(--cream);
    white-space: nowrap;
  }
  .experiencias-header-line {
    flex: 1;
    height: 1px;
    background: rgba(247,244,239,0.3);
  }
  .experiencias-header .blog-alt-btn {
    flex-shrink: 0;
    background: #E9DEC8;
    border-color: #E9DEC8;
  }

  /* Archivo de Experiencias: mismo componente que en Home pero sin la banda vino de
     fondo — el loop de tarjetas queda sobre el mismo crema que la cabecera de arriba.
     El título y la línea, pensados para leerse en cream sobre fondo vino, pasan a la
     paleta oscura habitual sobre fondo claro; el botón solo necesita corregir su hover
     (crema sobre transparente, invisible en una página blanca). */
  .post-type-archive-experiencias .blog-alt-section { background: none; }
  .post-type-archive-experiencias .experiencias-header-label { color: var(--red); }
  .post-type-archive-experiencias .experiencias-header-title { color: var(--dark-red); }
  .post-type-archive-experiencias .experiencias-header-line { background: rgba(90,24,20,0.2); }
  .post-type-archive-experiencias .experiencias-header .blog-alt-btn:hover {
    background: transparent;
    color: var(--dark-red);
    border-color: var(--dark-red);
  }

  .experiencias-list { gap: 1.5rem; }
  .experiencias-row { gap: 0; }
  .experiencias-row .blog-alt-text { background: #E9DEC8; }
  /* Loop de Blog en Home (solo visible para administradores): mismo fondo de tarjeta
     que el resto de loops de entradas del sitio (página de Blog, relacionadas en
     single.php) — con el fondo base var(--cream) quedaba en blanco liso. */
  #blog .blog-alt-text { background: #E8DEC8; }

  @media (max-width: 768px) {
    .experiencias-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1rem;
    }
    .experiencias-header-text { align-items: center; }
    .experiencias-header-title { white-space: normal; }
    .experiencias-header-line { display: none; }

    /* En móvil el botón "Ver más" va después del loop de tarjetas, no en la cabecera
       (en escritorio se queda donde está). .experiencias-header pasa a "contents" para
       que sus hijos (texto de cabecera y botón) entren directamente en el flex column
       de #experiencias junto con la lista, y así poder reordenar el botón al final con
       "order" — no se puede reordenar algo que sigue dentro de otro contenedor. */
    #experiencias {
      display: flex;
      flex-direction: column;
    }
    #experiencias .experiencias-header {
      display: contents;
    }
    #experiencias .experiencias-header-text {
      margin-bottom: 3rem;
    }
    #experiencias .blog-alt-list {
      width: 100%;
    }
    #experiencias .experiencias-header .blog-alt-btn {
      order: 1;
      align-self: center;
      margin-top: 3rem;
    }
  }

  /* ── PHILOSOPHY ── */
  .philosophy {
    background: var(--dark-red);
    color: var(--cream);
    text-align: center;
    padding: 8rem 2rem;
  }
  .philosophy .section-label { color: rgba(247,244,239,0.45); }
  .philosophy .section-title { color: var(--cream); }
  .philosophy-quote {
    color: var(--cream);
    max-width: var(--w-medium);
    margin: 0 auto 2rem;
    line-height: 1.4;
  }
  .philosophy-attr {
    font-family: 'Cinzel', serif;
    font-size: max(2.34px, 0.625cqw);
    letter-spacing: 0.4em;
    color: var(--sand);
  }
  .philosophy-pillars {
    max-width: var(--w-medium);
    margin: 5rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
  .pillar {
    border-top: 1px solid rgba(190,172,150,0.3);
    padding-top: 2rem;
  }
  .pillar-num {
    font-family: 'Lora', serif;
    font-size: 50px;
    font-weight: 400;
    font-style: italic;
    color: rgba(190,172,150,0.3);
    display: block;
    margin-bottom: 0.5rem;
  }
  .pillar-title {
    font-family: 'Lora', serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--sand);
    display: block;
    margin-bottom: 1rem;
  }
  .pillar p {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.85;
    color: rgba(247,244,239,0.85);
  }
  @media (max-width: 600px) {
    /* Repetido aquí (además del bloque compartido con .about-row-text p) porque
       esta regla desktop está más abajo en el archivo: si no, el override móvil
       de arriba pierde el empate de cascada y .pillar p se queda en ~3px. */
    .pillar p { font-size: clamp(10.67px, 3.3333vw, 20px); }
  }

  /* ── VISIT ── */
  .visit-section {
    background: #F7F5F2;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Menos espacio arriba que el genérico de <section> (7rem/5rem): esta sección
       va justo debajo de .reviews-section y el hueco entre ambas era excesivo. */
    padding-top: 3rem;
  }
  /* container-type: los 4 botones deben caber siempre en una sola línea, así que en
     vez de envolver (flex-wrap) o depender de los tramos fijos de tamaño de fuente de
     .btn (pensados para texto suelto, no para que 4 botones quepan juntos), aquí la
     tipografía y el padding de los botones escalan en cqw respecto al ancho de este
     mismo contenedor — la misma proporción que a 1920px, así que siempre caben,
     sea cual sea el ancho. */
  .visit-cta-buttons {
    container-type: inline-size;
    max-width: var(--w-wide);
    margin: 0 auto 4rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.1034cqw;
  }
  .visit-cta-buttons .btn {
    font-size: 1.3793cqw;
    height: 3.7241cqw;
    padding: 0 3cqw;
  }
  /* En móvil se queda con el diseño de siempre (envuelve/apila), la proporción
     continua de arriba no da texto legible a esos anchos. */
  @media (max-width: 600px) {
    .visit-cta-buttons { flex-wrap: wrap; gap: 1rem; }
    .visit-cta-buttons .btn {
      font-size: max(12.44px, 3.8889cqw);
      height: auto;
      padding: 0.85rem 1.4rem;
    }
  }
  .visit-map-grid {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.3fr;
    gap: 1.5rem;
    align-items: stretch;
  }
  .visit-map-embed {
    min-height: 340px;
    overflow: hidden;
  }
  .visit-map-embed iframe { width: 100%; height: 100%; min-height: 340px; display: block; border: 0; }
  .visit-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .visit-info-card {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--sand-light);
    padding: 1.8rem 2rem;
    text-align: left;
  }
  .visit-info-card h4 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 26px;
    color: var(--dark-red);
    margin-bottom: 0.9rem;
  }
  .visit-info-card h4 svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--red); }
  .visit-info-card address,
  .visit-info-card p {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    font-style: normal;
  }
  .visit-info-card a { color: inherit; text-decoration: none; }
  .visit-info-card a:hover { opacity: 0.7; }
  .visit-info-hours-label {
    font-family: 'Cinzel', serif;
    font-size: max(0.585rem, 0.5417cqw);
    letter-spacing: 0.2em;
    color: var(--dark-red);
    opacity: 1;
    margin-top: 0.9rem;
    margin-bottom: 0.4rem;
  }
  .visit-info-hours-list {
    list-style: none;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 14.4px;
    line-height: 1.7;
    color: #000000;
  }
  .visit-info-hours-list strong { font-weight: 700; }

  @media (max-width: 900px) {
    .visit-map-grid { grid-template-columns: 1fr; }
    .visit-map-embed { min-height: 280px; }
    .visit-map-embed iframe { min-height: 280px; }
  }

  @media (max-width: 600px) {
    .visit-info-card h4 { font-size: clamp(19.56px, 6.1111vw, 36.67px); }
    .visit-info-card address,
    .visit-info-card p { font-size: clamp(10.67px, 3.3333vw, 20px); }
  }

  /* ── GOOGLE REVIEWS ── */
  .reviews-section {
    background: var(--white);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 7rem 2rem 3rem;
    text-align: center;
  }
  .reviews-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--w-wide);
    margin: 0 auto;
  }
  .reviews-track {
    display: flex;
    gap: 1.8rem;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 0.3rem 0.1rem;
  }
  .review-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 2 * 1.8rem) / 3);
    background: var(--cream);
    border: 1px solid var(--sand-light);
    border-radius: 2px;
    padding: 2rem 1.8rem;
    text-align: left;
    position: relative;
  }
  .reviews-arrow {
    flex-shrink: 0;
    width: max(32px, 1.875cqw);
    height: max(32px, 1.875cqw);
    border-radius: 50%;
    border: 1px solid var(--sand-light);
    background: var(--cream);
    color: var(--dark-red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
  }
  .reviews-arrow svg { width: 1.1rem; height: 1.1rem; }
  .reviews-arrow:hover { background: var(--sand-light); border-color: var(--sand); }
  .reviews-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  .reviews-arrow:disabled:hover { background: var(--cream); border-color: var(--sand-light); }
  .reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.6rem 0 3.5rem;
  }
  .reviews-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: var(--sand-light);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
  }
  .reviews-dot.active { background: var(--red); transform: scale(1.3); }
  .review-stars {
    color: #F4B400;
    font-size: max(0.85rem, 0.8333cqw);
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
  }
  .review-text {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark-red);
    margin-bottom: 1.2rem;
  }
  .review-author {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    letter-spacing: 0.25em;
    color: var(--sand);
  }
  .google-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .google-badge svg { width: 20px; height: 20px; }
  .google-rating-summary {
    font-family: 'Cinzel', serif;
    font-size: max(0.585rem, 0.5417cqw);
    letter-spacing: 0.25em;
    color: var(--sand);
    margin-bottom: 3rem;
  }
  .google-rating-summary strong {
    font-size: max(1.44rem, 1.6667cqw);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--dark-red);
    letter-spacing: 0;
    font-weight: 400;
    vertical-align: middle;
    margin-right: 0.3rem;
  }
  .btn-google-maps {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cinzel', serif;
    font-size: max(0.648rem, 0.6cqw);
    letter-spacing: 0.22em;
    border: none;
    padding: 0.9rem 2.2rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    transition: background 0.3s, opacity 0.3s;
  }
  .btn-google-maps:hover { background: var(--dark-red); }
  .btn-google-maps svg { width: 16px; height: 16px; flex-shrink: 0; }

  .reviews-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
  }

  /* Listado completo de reseñas (/reseñas-de-sentio-de-jerez/): contenedor centrado
     como el resto del sitio, en vez de las tarjetas yendo de borde a borde sin
     espacio entre ellas. */
  .reviews-grid-full {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
  }
  .reviews-page .reviews-cta { margin-top: 3.5rem; }
  @media (max-width: 900px) {
    .reviews-grid-full { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .reviews-grid-full { grid-template-columns: 1fr; gap: 1.2rem; }
  }
  .link-arrow {
    font-family: 'Cinzel', serif;
    font-size: max(0.648rem, 0.6cqw);
    letter-spacing: 0.2em;
    color: var(--dark-red);
    text-decoration: none;
    border-bottom: 1px solid var(--sand);
    padding-bottom: 0.2rem;
    transition: opacity 0.3s;
  }
  .link-arrow:hover { opacity: 0.65; }

  @media (max-width: 900px) {
    .review-card { flex: 0 0 calc((100% - 1.8rem) / 2); }
  }

  @media (max-width: 600px) {
    .reviews-section { padding: 5rem 1.2rem 2rem; }
    .reviews-carousel { gap: 0.5rem; }
    .review-card { flex: 0 0 100%; padding: 1.6rem 1.4rem; }
  }

  .footer-instagram {
    margin: 1.2rem auto 0;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
  }
  .footer-instagram a {
    color: rgba(247,244,239,0.6);
    display: flex;
    align-items: center;
    transition: color 0.3s;
  }
  .footer-instagram a:hover { color: var(--cream); }
  .footer-instagram svg { width: 1.4rem; height: 1.4rem; }

  /* ── FOOTER ── */
  footer {
    background: var(--dark-red);
    color: var(--cream);
    text-align: center;
    padding: 4rem 2rem 3rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .footer-logo-img {
    height: max(48px, 2.5cqw);
    width: auto;
    margin: 0 auto 2.6rem;
  }
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin-bottom: 2.2rem;
    flex-wrap: wrap;
  }
  .footer-links a {
    font-family: 'Cinzel', serif;
    font-size: max(0.72rem, 0.6667cqw);
    letter-spacing: 0.2em;
    color: var(--cream);
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .footer-links a:hover { opacity: 0.7; }
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
  }
  .footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(247,244,239,0.4);
    border-radius: 50%;
    color: var(--cream);
    transition: opacity 0.25s, border-color 0.25s;
  }
  .footer-social-icon:hover { opacity: 0.75; border-color: var(--cream); }
  .footer-social-icon svg { height: 20px; width: auto; }
  .footer-email {
    display: inline-block;
    font-size: 14px;
    color: var(--cream);
    text-decoration: underline;
    margin-bottom: 2rem;
    transition: opacity 0.3s;
  }
  .footer-email:hover { opacity: 0.75; }
  .footer-copy {
    font-size: 12.5px;
    color: rgba(247,244,239,0.5);
    line-height: 1.8;
  }

  /* ── WAVE TRANSITION ── */
  .wave-transition {
    position: relative;
    height: 0;
    overflow: visible;
    z-index: 10;
    pointer-events: none;
  }
  .wave-transition svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .fade-in.visible { opacity: 1; transform: none; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    nav { padding: 1rem 1.5rem; flex-wrap: wrap; }
    .nav-toggle { display: flex; }
    .nav-links {
      display: flex;
      position: static;
      left: auto;
      transform: none;
      flex-basis: 100%;
      order: 10;
      flex-direction: column;
      align-items: center;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
    }
    .nav-links.is-open {
      max-height: 400px;
      opacity: 1;
      margin-top: 1rem;
    }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a { display: block; padding: 0.75rem 0; }
    .about-grid, .visit-grid { grid-template-columns: 1fr; gap: 3rem; }
    .philosophy-pillars { grid-template-columns: 1fr; gap: 2rem; }
    .menu-category { grid-template-columns: 1fr; }
    section { padding: 5rem 1.5rem; }
    section, footer, nav { max-width: 100%; box-sizing: border-box; }
    img, svg { max-width: 100%; height: auto; }
    .about-intro, .visit-grid, .philosophy-pillars { text-align: center; }
    .visit-contact-links { align-items: center; }
    address { font-style: normal; }
  }

  /* ── MARIDAJE (icono copa + "Maridaje perfecto: [vino]", bajo cualquier plato o
     vino que tenga uno emparejado) ── */
  .menu-item-pairing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
  }
  .menu-item-pairing img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .menu-item-pairing-label {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 16px;
    color: #000000;
  }
  .menu-pairing-link {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.25s;
  }
  .menu-pairing-link:hover { opacity: 0.65; }
  /* Con dos o más maridajes, separarlos por coma (",") en vez de solo el hueco del
     gap entre botones. */
  .menu-pairing-link:not(:last-child)::after { content: ','; }

  /* ── ENLACES "VER MÁS" (Filosofía / Nosotros, home) ── */
  .philosophy-cta, .about-cta {
    text-align: center;
    margin-top: 3.5rem;
  }
  .link-arrow-light {
    color: var(--cream);
    border-bottom-color: rgba(247,244,239,0.5);
  }

  /* ── BLOG (listado, filas foto+texto reutilizando .about-row) ── */
  .blog-section { background: var(--cream); }
  /* Experiencias: la cabecera (icono+título+intro) y el loop de tarjetas van en dos
     <section> separadas para poder darle al loop su propio fondo vino — el margin-bottom
     de .about-intro (6rem) más el padding inferior de esta sección (7rem, regla genérica
     de "section") y el padding superior del loop se suman y dejan un hueco enorme entre
     el párrafo y la banda vino. Se recorta aquí a solo lo que aporta el loop. */
  #experiencias-intro { padding-bottom: 1rem; }
  #experiencias-intro .about-intro { margin-bottom: 0; }
  .blog-featured { max-width: var(--w-wide); margin: 0 auto 3rem; }
  .blog-featured .about-row { max-width: none; margin-bottom: 0; }
  .blog-rows { max-width: var(--w-medium); margin: 0 auto; }
  .blog-view-more { text-align: center; margin-top: 1rem; }
  .blog-page .about-intro p:not(.about-hero-subtitle),
  .about-page .about-intro p:not(.about-hero-subtitle) { text-align: left; }
  .blog-page .about-row-text { background: #E8DEC8; }
  .blog-page .about-row-text .tag,
  .blog-page .about-row-text h4 { color: #84201A; }
  .blog-page .about-row-text p { color: #000000; opacity: 1; }

  /* ── RESEÑAS DE FAMOSOS (Quiénes Somos, CCT resena_de_famoso) — mismo estilo de
     loop que Experiencias (.blog-alt-row), pero sobre fondo claro propio (#f7f4f0,
     prácticamente var(--cream)) y con un enlace "ver más" aparte en vez de que toda
     la fila sea un <a>, porque aquí enlaza a un sitio externo (Facebook) en pestaña
     nueva y no a una ficha interna. */
  .famous-reviews-alt { background: #f7f4f0; }
  .famous-reviews-alt .section-label { color: var(--red); margin-bottom: 3rem; }
  .famous-reviews-list { gap: 1.5rem; }
  .famous-reviews-list .blog-alt-text { background: #E9DEC8; }
  .famous-review-link {
    align-self: flex-start;
    margin-top: 1.4rem;
    border-bottom: none;
    padding-bottom: 0;
  }
  .famous-review-row-extra { display: none; }
  .famous-reviews-list.is-expanded .famous-review-row-extra { display: grid; }
  .famous-reviews-more { text-align: center; margin-top: 3rem; }
  /* Reseñas de famosos + publicaciones en prensa van una detrás de otra con el mismo
     fondo — se recorta un poco el padding que las separa (siguen siendo dos loops
     distintos, solo algo más juntos). */
  .famous-reviews-alt:has(+ .famous-reviews-alt) { padding-bottom: 3rem; }
  .famous-reviews-alt + .famous-reviews-alt { padding-top: 3rem; }

  /* Loop de prensa (Quiénes Somos, sección #que-dicen): mismo fondo de tarjeta que el
     resto de loops de entradas del sitio (Blog, relacionadas en single.php). */
  .about-press .about-row-text { background: #E8DEC8; }
  .about-press .about-row-text .tag,
  .about-press .about-row-text h4 { color: #84201A; }
  .about-press .about-row-text p { color: #000000; opacity: 1; }

  /* Loop de entradas de la sección principal de Quiénes Somos (id="nosotros", las 2
     últimas entradas que no sean de prensa) — con la base var(--sand-light) quedaba en
     #D9CFC0 en vez del tostado #E9DEC8 del diseño. */
  .about-page .about-row-text { background: #E9DEC8; }
  .about-page .about-row-text .tag,
  .about-page .about-row-text h4 { color: #84201A; }
  .about-page .about-row-text p { color: #000000; opacity: 1; }

  /* Sección del chef: etiqueta y nombre en rojo, biografía en negro. */
  .chef-section .about-row-text .tag,
  .chef-section .about-row-text .chef-name { color: #84201A; }
  .chef-section .about-row-text .chef-bio { color: #000000; opacity: 1; }

  /* ── PÁGINAS COMPLETAS (Carta / Filosofía / Nosotros / Blog) ── */
  .menu-page .section-title,
  .philosophy-page .section-title,
  .about-page .section-title,
  .blog-page .section-title {
    max-width: var(--w-medium);
    margin-left: auto;
    margin-right: auto;
  }
  .philosophy-extra, .about-extra {
    max-width: var(--w-narrow);
    margin: 4rem auto 0;
    line-height: 1.9;
  }
  .philosophy-extra { color: var(--cream); opacity: 0.9; text-align: center; }

  /* ── QUIÉNES SOMOS — franja tablet/portátil pequeño (769-1024px) ──
     --w-medium/--w-wide son un % fijo del viewport (50cqw / 75.52cqw) en TODO
     el sitio: a partir de ~1200px da una columna de lectura elegante, pero en
     este rango deja demasiado margen vacío a los lados (a 780px, --w-medium
     son solo 390px de contenido). Se ensancha aquí, solo en esta página (vía
     la clase de plantilla que añade WordPress al body), sin tocar los tokens
     compartidos por el resto del sitio. */
  @media (min-width: 769px) and (max-width: 1024px) {
    .page-template-page-quienes-somos-php .about-intro,
    .page-template-page-quienes-somos-php .about-row,
    .page-template-page-quienes-somos-php .philosophy-quote,
    .page-template-page-quienes-somos-php .philosophy-pillars,
    .page-template-page-quienes-somos-php .reserve-cta-content {
      max-width: 78cqw;
    }
    .page-template-page-quienes-somos-php .chef-section .about-row {
      max-width: 88cqw;
    }
    .page-template-page-quienes-somos-php .about-carousel,
    .page-template-page-quienes-somos-php .blog-alt-list,
    .page-template-page-quienes-somos-php .reviews-carousel,
    .page-template-page-quienes-somos-php .visit-map-grid {
      max-width: 92cqw;
    }
  }
  .about-extra { color: var(--red); }

  /* ── MAPA DEL SITIO ── */
  .sitemap-groups {
    max-width: var(--w-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
  .sitemap-group-title {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.25em;
    color: var(--red);
    margin-bottom: 1.2rem;
  }
  .sitemap-list { display: flex; flex-direction: column; gap: 0.9rem; }
  .sitemap-list a {
    font-family: 'Lora', serif;
    font-size: 17px;
    color: var(--dark-red);
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .sitemap-list a:hover { opacity: 0.65; text-decoration: underline; }
  @media (max-width: 900px) {
    .sitemap-groups { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .sitemap-groups { grid-template-columns: 1fr; gap: 2.2rem; text-align: center; }
  }

  /* Índice completo de la carta (todos los tipos + todos los elementos) — mucha más
     densidad de enlaces que .sitemap-groups, así que va en columnas tipo periódico
     en vez de un grid de anchos iguales. */
  .sitemap-menu {
    max-width: var(--w-wide);
    margin: 4rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid var(--sand-light);
  }
  .sitemap-menu .sitemap-group-title { text-align: center; margin-bottom: 2rem; }
  .sitemap-menu-categories {
    column-count: 3;
    column-gap: 3rem;
  }
  .sitemap-menu-category {
    break-inside: avoid;
    margin-bottom: 2.2rem;
  }
  .sitemap-menu-category-title {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 15px;
    color: var(--dark-red);
    margin-bottom: 0.7rem;
  }
  .sitemap-menu-category-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .sitemap-menu-category-title a:hover { opacity: 0.65; text-decoration: underline; }
  .sitemap-list-compact { gap: 0.5rem; }
  .sitemap-list-compact a { font-size: 14px; opacity: 0.85; }
  @media (max-width: 900px) {
    .sitemap-menu-categories { column-count: 2; }
  }
  @media (max-width: 600px) {
    .sitemap-menu-categories { column-count: 1; text-align: center; }
  }

  /* ── ELEMENTO DE CARTA (single) ── */
  .single-item { max-width: var(--w-wide); margin: 0 auto; padding: 9rem 2rem 6rem; }
  .single-item-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
    font-family: 'Cinzel', serif;
    font-size: max(0.612rem, 0.5667cqw);
    letter-spacing: 0.15em;
  }
  .single-item-breadcrumb a {
    color: var(--dark-red);
    text-decoration: none;
    border-bottom: 1px solid var(--sand);
    padding-bottom: 0.15rem;
    transition: opacity 0.25s;
  }
  .single-item-breadcrumb a:hover { opacity: 0.65; }
  .single-item-cats { color: var(--sand); text-transform: uppercase; }

  .single-item-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .single-item-photo {
    aspect-ratio: 4 / 3;
    background: var(--sand-light);
    border: 1px dashed var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .single-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .single-item-photo svg { width: 2.5rem; height: 2.5rem; color: var(--sand); opacity: 0.6; }

  .single-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: max(2rem, 2.1667cqw);
    font-style: italic;
    font-weight: 400;
    color: var(--dark-red);
    margin-bottom: 1.2rem;
    line-height: 1.15;
  }
  .single-item-excerpt {
    font-size: max(0.85rem, 0.8333cqw);
    line-height: 1.8;
    color: var(--red);
    opacity: 0.9;
    margin-bottom: 2rem;
  }
  .single-item-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: max(1.19rem, 1.1667cqw);
    font-weight: 500;
    color: var(--dark-red);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed var(--sand-light);
  }
  .single-item-price-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.5rem;
    font-size: max(0.935rem, 0.9167cqw);
    padding: 0.2rem 0;
  }
  .single-item-price-variant {
    font-family: 'Cinzel', serif;
    font-size: max(0.585rem, 0.5417cqw);
    letter-spacing: 0.1em;
    color: var(--sand);
  }
  .single-item-block-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: max(0.585rem, 0.5417cqw);
    letter-spacing: 0.2em;
    color: var(--sand);
    margin-bottom: 0.8rem;
  }
  .single-item-allergens, .single-item-pairing { margin-bottom: 2rem; }
  .single-item-allergens-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .single-item-allergen {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: max(0.765rem, 0.7083cqw);
    color: var(--dark-red);
  }
  .single-item-pairing-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
  }

  @media (max-width: 768px) {
    .single-item { padding: 7rem 1.2rem 4rem; }
    .single-item-layout { grid-template-columns: 1fr; gap: 2rem; }
  }

  /* ── OTROS ELEMENTOS DEL MISMO TIPO (single) ── */
  .related-items {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px dashed var(--sand-light);
  }
  .related-items-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: max(1.5rem, 1.5833cqw);
    font-style: italic;
    font-weight: 400;
    color: var(--dark-red);
    margin-bottom: 1.8rem;
  }
  .related-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
  }
  .related-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: opacity 0.25s;
  }
  .related-item:hover { opacity: 0.75; }
  .related-item-photo {
    aspect-ratio: 1 / 1;
    background: var(--sand-light);
    border: 1px dashed var(--sand);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.7rem;
  }
  .related-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .related-item-photo svg { width: 1.6rem; height: 1.6rem; color: var(--sand); opacity: 0.6; }
  .related-item-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: max(0.892rem, 0.875cqw);
    color: var(--dark-red);
    line-height: 1.3;
  }
  .related-item-price {
    font-family: 'Cinzel', serif;
    font-size: max(0.63rem, 0.5833cqw);
    letter-spacing: 0.05em;
    color: var(--sand);
    margin-top: 0.2rem;
  }

  /* ── ENTRADA DE BLOG (single) ── */
  /* Nombre distinto de ".single-post": WordPress añade "single-post" como clase
     automática de <body> en toda entrada de blog, y una clase con ese mismo nombre
     aquí terminaba aplicando este ancho/padding al <body> entero (bug real, encogía
     .site-shell por debajo de 1920px). */
  .single-post-page { max-width: 1920px; margin: 0 auto; padding: 7rem 2rem 6rem; }
  /* A todo el ancho de .single-post-page (1856px a 1920 de viewport) la foto queda casi
     el doble de grande que la columna de texto de abajo (70ch, ~730px) — desproporcionado.
     Se limita al mismo ancho "de ruptura" que ya usa el carrusel de relacionadas
     (var(--w-wide)), así toda la página comparte un único ancho máximo de contenido. */
  .single-post-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: var(--w-wide);
    margin: 0 auto 3rem;
  }
  .single-post-photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .single-post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .single-post-photo svg { width: 2.5rem; height: 2.5rem; color: var(--sand); opacity: 0.6; }
  .single-post-info { text-align: center; }
  .single-post-label { margin-bottom: 0.8rem; }
  .single-post-title { margin-bottom: 1rem; }
  .single-post-meta {
    font-family: 'Lora', serif;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
  }
  /* Ancho de lectura: a todo el ancho de .single-post-page una línea supera los 180
     caracteres en pantallas grandes, incómodo de leer. "ch" pone un límite absoluto de
     caracteres por línea en vez de una fracción del viewport (como var(--w-medium), que
     en un desktop ya estrecho -ej. 1024px- dejaría el texto Y el carrusel de abajo
     demasiado apretados, el mismo problema que el ancho fluido intenta evitar). */
  .single-post-content { max-width: 70ch; margin: 0 auto 3rem; }
  .single-post-content p {
    font-family: 'Lora', serif;
    line-height: 1.85;
    color: #000000;
    margin-bottom: 1.3em;
  }
  .single-post-content h2,
  .single-post-content h3,
  .single-post-content h4,
  .single-post-content h5,
  .single-post-content h6 {
    font-family: 'Lora', serif;
    font-weight: 600;
    color: var(--dark-red);
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
  }
  .single-post-content h2,
  .single-post-content h3,
  .single-post-content h4 {
    margin-top: 2.8em;
    margin-bottom: 1.2em;
  }
  /* Primer elemento del artículo: sin hueco extra por encima */
  .single-post-content > h2:first-child,
  .single-post-content > h3:first-child,
  .single-post-content > h4:first-child,
  .single-post-content > h5:first-child,
  .single-post-content > h6:first-child {
    margin-top: 0;
  }
  /* Imágenes del cuerpo del artículo: el reset global (margin:0 en *) también
     vacía el margen de <img>/<figure>, así que el texto de debajo queda pegado
     sin este espaciado explícito. */
  .single-post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5em;
  }
  .single-post-content figure {
    margin: 0 0 1.5em;
  }
  .single-post-content figure img {
    margin-bottom: 0.6em;
  }
  .single-post-content figcaption {
    font-family: 'Lora', serif;
    font-size: 0.85em;
    font-style: italic;
    color: var(--sand);
    text-align: center;
  }
  /* A partir de 1920px .single-post-page ya no crece (tope del .site-shell): las
     imágenes del cuerpo rompen el padding lateral (2rem) para ocupar el ancho
     completo del contenedor de 1920px en vez de quedar encajonadas al texto. */
  @media (min-width: 1920px) {
    .single-post-content img,
    .single-post-content figure {
      width: calc(100% + 4rem);
      max-width: calc(100% + 4rem);
      margin-left: -2rem;
      margin-right: -2rem;
    }
  }
  .single-post-back { text-align: center; margin-bottom: 4rem; }

  /* Tamaños fijos (no fluidos) a partir de 601px: en esta plantilla el texto no debe
     encoger según el viewport entre el tramo móvil y 1920px, solo cambia de tamaño
     en el tramo móvil (≤600px, ver @media al final del archivo). */
  @media (min-width: 601px) {
    .single-post-label { font-size: 16px; }
    .single-post-title { font-size: 46px; }
    .single-post-meta { font-size: 16px; }
    .single-post-content p { font-size: 16px; }
    .single-post-content h2 { font-size: 26px; }
    .single-post-content h3 { font-size: 22px; }
    .single-post-content h4 { font-size: 19px; }
    .single-post-content h5 { font-size: 17px; }
    .single-post-content h6 { font-size: 16px; }
  }

  /* .single-post-content ahora es una columna de lectura angosta (70ch) — igualar el
     carrusel a ese mismo ancho deja las tarjetas apretadísimas (3 en ~650px). Como en
     cualquier maquetación editorial con columna de texto estrecha, los elementos que no
     son texto corrido (galerías, tarjetas) "rompen" a un ancho mayor: var(--w-wide),
     el mismo que ya usa el carrusel de Reseñas para el que se pensó este componente. */
  .single-post-related { max-width: var(--w-wide); margin: 0 auto 1.5rem; }
  .related-posts-track {
    display: flex;
    gap: 1.8rem;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 0.3rem 0.1rem;
  }
  .related-post-card {
    flex: 0 0 calc((100% - 2 * 1.8rem) / 3);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .related-post-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .related-post-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .related-post-photo svg { width: 1.8rem; height: 1.8rem; color: var(--sand); opacity: 0.6; }
  .related-post-card .about-row-text { padding: 1.6rem 1.5rem; background: #E8DEC8; flex: 1; }
  .related-post-card .about-row-text .tag,
  .related-post-card .about-row-text h4 { color: #84201A; }
  .related-post-card .about-row-text p { color: #000000; opacity: 1; }

  @media (max-width: 900px) {
    .related-post-card { flex: 0 0 calc((100% - 1.8rem) / 2); }
  }

  /* ── TIPOGRAFÍA POR TRAMOS: tamaños fijos (no fluidos) en vez de encogido continuo.
     Los 3 tramos (este de 1440-1919, el de tablet 601-1439 justo debajo, y el móvil
     ≤600 al final del archivo) son rangos excluyentes entre sí — no compiten por orden
     de cascada, cada uno solo aplica dentro de su propio ancho. Sí deben ir después de
     TODAS las reglas base de cada selector para poder sobreescribirlas. ── */
  @media (max-width: 1919px) and (min-width: 1440px) {
    .section-title, .about-intro h3, .reserve-cta-tagline, .philosophy-quote, .label-tagline { font-size: 42px; }
    .section-title { font-size: 36px; }
    .btn, .hero-cta { font-size: 19px; }
    .btn { height: 51.3px; padding: 0 41.33px; }
    .section-label { font-size: 15px; }
    .menu-category-title { font-size: 17px; }
    .about-row-text h4 { font-size: 22.5px; }
    .about-row-text .tag { font-size: 11.5px; }
    .about-intro .about-hero-subtitle { font-size: 11.5px; }
    .label-vintage { font-size: 11.5px; }
    .about-intro p,
    .about-row-text p,
    .about-row-text .chef-bio,
    .pillar p,
    .menu-item-excerpt { font-size: 15px; }
    .menu-item-name { font-size: 18.5px; }
    .menu-item-name em { font-size: 14px; }
    .menu-item-pairing-label,
    .menu-pairing-link { font-size: 15px; }
    .menu-item-price,
    .menu-item-price-variant,
    .menu-item-price-sep,
    .menu-item-price-value { font-size: 13px; }
    .menu-item-allergen-name { font-size: 11px; }
    .nav-links a { font-size: 15px; }
    .review-text { font-size: 15px; }
    .review-author { font-size: 15px; }
    .blog-alt-category { font-size: 11.5px; }
    .blog-alt-item-title { font-size: 22.5px; }
    .blog-alt-excerpt { font-size: 15px; }
    .visit-info-card h4 { font-size: 25px; }
    .visit-info-card address,
    .visit-info-card p { font-size: 15px; }
    .visit-info-hours-list { font-size: 14.1px; }
    .footer-copy { font-size: 12.3px; }
  }

  @media (max-width: 1439px) and (min-width: 601px) {
    .section-title, .about-intro h3, .reserve-cta-tagline, .philosophy-quote, .label-tagline { font-size: 32px; }
    .btn, .hero-cta { font-size: 16px; }
    .btn { height: 43.2px; padding: 0 34.8px; }
    .section-label { font-size: 13px; }
    .menu-category-title { font-size: 14px; }
    .about-row-text h4 { font-size: 18.5px; }
    .about-row-text .tag { font-size: 10.5px; }
    .about-intro .about-hero-subtitle { font-size: 10.5px; }
    .label-vintage { font-size: 10.5px; white-space: normal; max-width: max(121.09px, 32.2917cqw); }
    .about-intro p,
    .about-row-text p,
    .about-row-text .chef-bio,
    .pillar p,
    .menu-item-excerpt { font-size: 13px; }
    .menu-item-name { font-size: 14.5px; }
    .menu-item-name em { font-size: 13.7px; }
    .menu-item-pairing-label,
    .menu-pairing-link { font-size: 13px; }
    .menu-item-pairing img { width: 16px; height: 16px; }
    .menu-item-price,
    .menu-item-price-variant,
    .menu-item-price-sep,
    .menu-item-price-value { font-size: 11px; }
    .menu-item-allergen-name { font-size: 9px; }
    .nav-links a { font-size: 12px; }
    .review-text { font-size: 12px; }
    .review-author { font-size: 12px; }
    .blog-alt-category { font-size: 10.5px; }
    .blog-alt-item-title { font-size: 18.5px; }
    .blog-alt-excerpt { font-size: 13px; }
    .visit-info-card h4 { font-size: 23px; }
    .visit-info-card address,
    .visit-info-card p { font-size: 13px; }
    .visit-info-hours-list { font-size: 13.3px; }
    .footer-copy { font-size: 11.6px; }
  }

  /* ── HOME MÓVIL — al final del archivo a propósito: con especificidad igual, CSS
     resuelve empates por orden de aparición, así que este bloque debe ir después de
     TODAS las reglas base (incluidas las de @media max-width:768px) para poder
     sobreescribirlas de forma fiable. No añadir overrides móviles en otro punto del
     archivo salvo que su regla base esté garantizada más arriba. ── */
  @media (max-width: 600px) {
    .label-tagline { margin: 0.5rem 0 0.4rem; }
    .label-name-img { width: max(191.11px, 59.7222cqw); margin: 0.6rem auto 0.4rem; }
    .label-vintage { font-size: clamp(8px, 2.5vw, 15px); line-height: 1.3; max-width: max(231.11px, 72.2222cqw); white-space: normal; }
    .hero-cta { min-width: max(111.11px, 34.7222cqw); }

    /* Sección 1 (hero): a 900px queda un hueco vacío enorme entre el botón "Reserva" y
       la ilustración inferior. Se reduce a la altura que necesita el contenido (logo +
       frases + botón) más el espacio justo para que la ilustración se vea sin ese hueco. */
    .hero { height: 690px; min-height: 690px; }

    /* En móvil, curva simple en vez de la onda con varios lomos del escritorio */
    .hero-wave-desktop { display: none; }
    .hero-wave-mobile { display: block; }

    /* Tamaño de texto de botones estandarizado (14px a 360px) */
    .btn-google-maps {
      font-size: max(12.44px, 3.8889cqw);
    }
    /* Tipografía unificada de las etiquetas "- ... -" (Gastronomía, Reservas y contacto, Nuestro blog, Reseñas, Visítanos) */
    .section-label {
      font-family: 'Lora', serif;
      font-weight: 400;
      font-size: max(10.67px, 3.3333cqw);
      line-height: 1;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    /* Ancho máximo de contenido: 322px a 360px de viewport (19px de padding lateral) */
    section,
    .blog-alt-section,
    .reserve-cta,
    .reviews-section {
      padding-left: max(16.89px, 5.2778cqw);
      padding-right: max(16.89px, 5.2778cqw);
    }

    /* Pestañas de la carta: respetan el mismo ancho máximo de contenido, ya no van borde a borde */
    .menu-tabs {
      width: 100%;
      max-width: max(286.22px, 89.4444cqw);
    }
    .menu-tab {
      flex: 1;
      padding: 1rem 0.5rem;
    }

    /* Panel de la carta (categoría + platos): mismo ancho que las pestañas */
    .menu-panel {
      max-width: max(286.22px, 89.4444cqw);
    }

    /* Elemento de carta: línea 1 = foto + (nombre/descripción), línea 2 = alérgenos + precio */
    /* Selector con la misma especificidad que la regla base (.menu-category .menu-item,
       ver línea 933): con "display: grid" en un selector de una sola clase, la regla base
       de "display: flex" gana por especificidad pese a ir antes en el archivo, y con
       .menu-item-body/.menu-item-top en "display: contents" eso aplana todo en una fila
       (foto + texto + precio + alérgenos superpuestos). */
    .menu-category .menu-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: start;
      column-gap: 1rem;
      row-gap: 0.6rem;
    }
    .menu-item-body,
    .menu-item-top { display: contents; }
    .menu-item-thumb { grid-column: 1; grid-row: 1; }
    .menu-item-text { grid-column: 2 / 4; grid-row: 1; }
    .menu-item-allergens { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }
    .menu-item-price { grid-column: 3; grid-row: 2; }
    .menu-item-pairing { grid-column: 1 / -1; grid-row: 3; }
    .menu-item-price,
    .menu-item-price-variant,
    .menu-item-price-sep,
    .menu-item-price-value { font-size: clamp(8.89px, 2.7778vw, 16.67px); }
    .menu-tabs-bar { top: 67.1875px; }


    /* Reservas y contacto: mismo ancho máximo de contenido, sin iconos de redes sociales */
    .reserve-cta-content { max-width: max(286.22px, 89.4444cqw); }
    .reserve-cta-social { display: none; }

    /* Botones: Reserva + Llamar ahora en la misma fila, Abrir en Google Maps ocupa toda
       la fila de debajo. Columna de Reserva a su ancho justo (auto) en vez de 1fr: con
       las dos columnas iguales, a 320px no queda sitio para que "Llamar ahora" quepa en
       una sola línea — se reduce el padding horizontal de Reserva para dejarle a Llamar
       ahora el ancho que necesita. También se reduce el padding vertical de ambos
       botones (no el de Google Maps) para que queden más bajos. */
    .reserve-cta-buttons {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: stretch;
      gap: 0.75rem;
    }
    .reserve-cta-buttons .btn {
      width: 100%;
      max-width: none;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .reserve-cta-buttons .btn:nth-child(1) { padding: 0.55rem 0.5rem; white-space: nowrap; }
    .reserve-cta-buttons .btn:nth-child(2) { padding: 0.55rem 1.4rem; white-space: nowrap; }
    .reserve-cta-buttons .btn:nth-child(3) { grid-column: 1 / -1; }

    /* Nuestro blog: mismo ancho máximo de contenido; tarjetas con la información primero y la foto debajo */
    .blog-alt-heading,
    .blog-alt-list {
      max-width: max(286.22px, 89.4444cqw);
    }

    /* .about-intro/.about-row/.philosophy-pillars/.about-carousel/.visit-map-grid usan
       var(--w-medium) o var(--w-wide) — la mitad o tres cuartos del ancho estándar de
       contenido (188px o 283px en vez de 335px a 375px de viewport). A esos anchos el
       texto se envuelve palabra a palabra con muchísimo margen vacío a los lados (mismo
       síntoma que ya se corrigió antes aquí para .blog-alt-list/.reserve-cta-content/
       .menu-tabs, y más abajo para .reviews-carousel). Se igualan al mismo ancho máximo
       que usa el resto de la página en móvil. Antes esto solo se aplicaba a .about-intro
       dentro de .post-type-archive-experiencias; se generaliza porque el mismo problema
       afecta a Inicio, Blog, Quiénes somos, Nuestra filosofía... */
    .about-intro,
    .about-row,
    .philosophy-pillars,
    .about-carousel,
    .visit-map-grid {
      max-width: max(286.22px, 89.4444cqw);
    }
    /* .chef-section .about-row (2 clases) tiene más especificidad que el .about-row de
       arriba (1 clase) y su propio override a max-width:var(--w-medium) a ≤768px (línea
       ~848) — sin este, se quedaría con el mismo margen excesivo pese a la regla de
       arriba. */
    .chef-section .about-row {
      max-width: max(286.22px, 89.4444cqw);
    }
    .blog-alt-text { order: 1; text-align: left; }
    .blog-alt-photo { order: 2; }
    .blog-alt-category { font-size: clamp(8.89px, 2.7778vw, 16.67px); }
    .blog-alt-item-title { font-size: clamp(14.22px, 4.4444vw, 26.67px); }
    .blog-alt-excerpt { font-size: clamp(10.67px, 3.3333vw, 20px); }

    /* Testimonios: la caja ocupa el ancho máximo de contenido, las flechas sobresalen por los lados */
    .reviews-carousel {
      position: relative;
      max-width: max(286.22px, 89.4444cqw);
      gap: 0;
    }
    .reviews-track { width: 100%; gap: 0; }
    .reviews-track .review-card { flex: 0 0 100%; }
    .reviews-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
    .reviews-arrow-prev { left: -16px; }
    .reviews-arrow-next { right: -16px; }

    /* Tarjeta de testimonio del carrusel (Inicio / Quiénes somos): fondo beige, texto en
       negro, nombre más grande y en negrita — acotado a .reviews-track para no afectar
       al listado completo de /resenas-de-sentio-de-jerez/ (.reviews-grid-full), que
       comparte la clase .review-card pero debe mantener los mismos colores que en
       escritorio. */
    .reviews-track .review-card { background: var(--sand-light); }
    .reviews-track .review-text { color: #000000; font-size: 10px; }
    .reviews-track .review-author { font-size: 10px; font-weight: 700; color: var(--red); }

    /* Entrada de blog (single): apilada, y el carrusel de relacionados a una tarjeta
       (comparte .reviews-carousel/.reviews-arrow-prev/-next, ya cubiertos arriba) */
    .single-post-page { padding: 7rem 1.2rem 4rem; }
    .single-post-hero { grid-template-columns: 1fr; gap: 1.5rem; }
    .single-post-meta { font-size: 12px; }
    .single-post-content p { font-size: clamp(10.67px, 3.3333vw, 20px); }
    .single-post-content h2 { font-size: clamp(17.33px, 5.4167vw, 32.5px); }
    .single-post-content h3 { font-size: clamp(14.67px, 4.5833vw, 27.5px); }
    .single-post-content h4 { font-size: clamp(12.67px, 3.9583vw, 23.75px); }
    .single-post-content h5 { font-size: clamp(11.33px, 3.5417vw, 21.25px); }
    .single-post-content h6 { font-size: clamp(10.67px, 3.3333vw, 20px); }
    .related-posts-track { width: 100%; gap: 0; }
    .related-post-card { flex: 0 0 100%; }
  }