/*
Theme Name:       Bocados Bouquet
Theme URI:        https://bocadosbouquet.com
Author:           Bruno Aguilar - SLUPU
Author URI:       https://slupu.com
Description:      Tema FSE diseñado y desarrollado por SLUPU para Bocados Bouquet. Quinta gama premium · «Con mucho gusto». Acompañado por el plugin Bocados Core (paneles de administración, bloques, formularios y catálogo descargable).
Requires at least: 6.5
Tested up to:     7.0
Requires PHP:     8.0
Version:          1.0.0
License:          GPL-2.0-or-later
License URI:      https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:      bocados-bouquet
Domain Path:      /languages
Tags:             block-theme, full-site-editing, restaurant, food, custom-colors, custom-logo, custom-menu, editor-style, block-patterns
*/


/* ============================================================ */
/*  Estilos portados desde bocados-bouquet-referencia.html         */
/*  El bloque <style> inline se ha movido aquí sin cambios.         */
/* ============================================================ */

  /* Migas (Yoast breadcrumbs) */
  .bocados-breadcrumb {
    padding-top: 24px;
    padding-bottom: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
  }
  .bocados-breadcrumb a {
    color: var(--terracotta);
    text-decoration: none;
  }
  .bocados-breadcrumb a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
  .bocados-breadcrumb-inner > * + *::before {
    /* Yoast injects separators inline — we let those keep their default style. */
  }

  /* Visually-hidden helper (WAI-ARIA-friendly): mantiene el texto
     en el flujo accesible (lectores de pantalla + SEO landmarks)
     mientras lo oculta visualmente. Convención WP estándar. */
  .screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
  }
  .screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: var(--ink);
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }

  :root {
    --cream: #EFEAE4;
    --cream-soft: #E5DFD6;
    --ink: #1A1410;
    --ink-soft: #3D332B;
    --terracotta: #FF551A;
    --olive: #3D4A2C;
    --line: rgba(26, 20, 16, 0.12);
    --grain: rgba(26, 20, 16, 0.03);
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.5;
    font-size: 16px;
    overflow-x: clip; /* clip en vez de hidden para no romper position:sticky en los hijos */
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  }

  .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }

  /* ============ NAV ============ */
  /* Fixed sobre el viewport para que el slide-out no deje hueco en el contenido.
     La animación usa transform + opacity (GPU) — sin cambios de layout. */
  header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* z-index alto para que quede por encima del overlay del menú móvil */
    z-index: 1000;
    transition:
      transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
      opacity   0.32s cubic-bezier(0.4, 0, 0.2, 1);
    /* ⚠️ will-change: transform crea un containing block para position:fixed
       y atraparía el overlay dentro del header. Sin él el transition sigue
       funcionando; el GPU lo activa automáticamente durante la animación. */
  }
  /* WordPress admin bar: desplaza el header para no quedar tapado.
     WP añade margin-top: 32px al <html> cuando el admin bar está activo. */
  .admin-bar header.wp-block-template-part { top: 32px; }
  @media screen and (max-width: 782px) {
    .admin-bar header.wp-block-template-part { top: 46px; }
  }
  header.wp-block-template-part.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    header.wp-block-template-part { transition: none; }
  }
  nav {
    background: rgba(239, 234, 228, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
  }
  .logo-mark {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo-mark svg { width: 100%; height: 100%; }
  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
    align-items: center;
  }
  .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    background: var(--ink);
    color: var(--cream) !important;
    padding: 10px 20px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.25s !important;
  }
  .nav-cta:hover { background: var(--terracotta); color: var(--cream) !important; }
  .nav-cta-secondary {
    background: var(--terracotta);
    color: var(--cream) !important;
    padding: 10px 20px;
    border-radius: 100px;
    transition: background 0.25s !important;
  }
  .nav-cta-secondary:hover { background: var(--ink); color: var(--cream) !important; }

  /* ============================================================ */
  /*  MOBILE NAV — Hamburger + circular expansion menu             */
  /* ============================================================ */

  /* Mobile bar (oculto en desktop) */
  .nav-mobile-bar { display: none; }
  .nav-mobile-menu { display: none; }
  .nav-hamburger { display: none; }

  @media (max-width: 720px) {
    /* Ocultar nav desktop completo */
    .nav-links { display: none; }

    /* Logo: una sola línea en móvil (sin wrap). Tamaño reducido + sin
       flex-shrink para que conviva con el CTA "Solicitar catálogo" y la
       hamburguesa en una barra de ~360px sin desbordar ni partirse. */
    .logo {
      transition: color 0.35s ease;
      flex-shrink: 0;
      white-space: nowrap;
      font-size: 16px;
      gap: 6px;
    }
    .logo-mark { width: 19px; height: 19px; }

    /* nav-inner por encima del overlay para que la hamburguesa sea clickable.
       Padding lateral reducido (32→16) para liberar ancho en la barra móvil. */
    .nav-inner { position: relative; z-index: 2; padding-left: 16px; padding-right: 16px; }

    /* ====== Mobile bar siempre visible ====== */
    .nav-mobile-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .nav-mobile-cta-visible {
      padding: 7px 12px;
      font-size: 12px;
      border-radius: 100px;
      white-space: nowrap;
      transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s !important;
    }
    body.nav-mobile-open .nav-mobile-cta-visible {
      opacity: 0;
      transform: scale(0.92);
      pointer-events: none;
    }

    /* ====== Hamburguesa ====== */
    .nav-hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 38px;
      height: 38px;
      border: 0;
      background: transparent;
      cursor: pointer;
      padding: 0;
      position: relative;
      z-index: 3;
    }
    .nav-hamburger-line {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transform-origin: center;
      transition:
        transform 0.45s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.25s ease,
        background-color 0.35s ease;
    }
    .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }
    .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    /* La hamburguesa del header (abre) mantiene barras oscuras sobre el header
       crema. La hamburguesa de cierre del overlay va siempre crema sobre el ink.
       La FORMA (X/barras) la dan las reglas [aria-expanded] de arriba en ambas. */
    .nav-mobile-topbar .nav-hamburger-line {
      background: var(--cream);
    }

    /* ====== Overlay del menú con expansión circular ====== */
    /* El menú se porta a document.body via JS para escapar del containing
       block que crearía cualquier transform/will-change en el header.
       Las variables --clip-x / --clip-y las sobreescribe el JS con la
       posición real de la hamburguesa (getBoundingClientRect). Los valores
       CSS son el fallback si JS no ha corrido todavía. */
    .nav-mobile-menu {
      display: block;
      position: fixed;
      inset: 0;
      background: var(--ink);
      overflow: hidden;
      pointer-events: none;
      /* Por ENCIMA del header (z-index 1000): el círculo cubre y revela TODO de
         forma uniforme (header incluido). Así el header NUNCA cambia de color
         (sin parpadeo al cerrar): se descubre solo cuando el círculo se contrae.
         La hamburguesa que morphea vive en el overlay (.nav-mobile-close — la
         MISMA .nav-hamburger, mismo tamaño/morph) sincronizada con la del header. */
      z-index: 1100;
      /* Fallback CSS — JS sobreescribe con px exactos desde getBoundingClientRect */
      --clip-x: calc(100% - 39px);
      --clip-y: 36px;
      clip-path: circle(0px at var(--clip-x) var(--clip-y));
      transition: clip-path 0.62s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .nav-mobile-menu.is-open {
      clip-path: circle(180vmax at var(--clip-x) var(--clip-y));
      pointer-events: auto;
    }

    /* Barra superior del overlay (logo + hamburguesa de cierre) sobre el círculo,
       alineada con el header para un relevo visual limpio. El header NO cambia de
       color: el círculo (z-index mayor) lo cubre y lo revela; estos controles
       viven en el overlay y se descubren/ocultan con el clip del círculo. */
    .nav-mobile-topbar {
      position: absolute;
      top: 18px;          /* = padding vertical del nav */
      left: 16px;         /* = padding lateral de .nav-inner en móvil */
      right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1;
    }
    .admin-bar .nav-mobile-topbar { top: 64px; } /* barra admin móvil (46) + 18 */
    .nav-mobile-brand { color: var(--cream); }

    /* ====== Contenido del menú ====== */
    .nav-mobile-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 36px;
      padding: 120px 32px 48px;
    }
    .nav-mobile-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      counter-reset: nav-counter;
    }
    .nav-mobile-list li { counter-increment: nav-counter; }
    .nav-mobile-link {
      display: inline-flex;
      align-items: baseline;
      gap: 18px;
      font-family: var(--bocados-font-heading, 'Fraunces', serif);
      font-weight: 350;
      font-size: clamp(34px, 9.5vw, 52px);
      line-height: 1;
      letter-spacing: -0.025em;
      color: var(--cream);
      text-decoration: none;
      padding: 6px 0;
      position: relative;
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s ease;
    }
    .nav-mobile-link::before {
      content: counter(nav-counter, decimal-leading-zero);
      font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      color: var(--terracotta);
      flex-shrink: 0;
      transform: translateY(-0.55em);
    }
    .nav-mobile-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 1.5px;
      background: var(--terracotta);
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .nav-mobile-link:hover,
    .nav-mobile-link:focus { color: var(--terracotta-light); }
    .nav-mobile-link:hover::after,
    .nav-mobile-link:focus::after { transform: scaleX(1); }

    /* "Solicitar catálogo" dentro del menú desplegado — pill crema */
    .nav-mobile-cta-primary {
      display: inline-flex;
      align-items: center;
      background: var(--cream);
      color: var(--ink);
      padding: 14px 28px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      align-self: flex-start;
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease,
        color 0.3s ease;
    }
    .nav-mobile-cta-primary:hover {
      background: var(--cream-soft);
      color: var(--ink);
    }

    /* "Contacto" dentro del menú desplegado — pill terracota */
    .nav-mobile-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--terracotta);
      color: var(--cream);
      padding: 14px 28px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      align-self: flex-start;
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease;
    }
    .nav-mobile-cta-btn:hover {
      background: var(--terracotta-light);
      color: var(--cream);
    }

    /* Stagger reveal: los items aparecen escalonados tras el círculo */
    .nav-mobile-menu.is-open .nav-mobile-link,
    .nav-mobile-menu.is-open .nav-mobile-cta-primary,
    .nav-mobile-menu.is-open .nav-mobile-cta-btn {
      opacity: 1;
      transform: translateY(0);
    }
    .nav-mobile-menu.is-open .nav-mobile-list li:nth-child(1) .nav-mobile-link { transition-delay: 0.32s; }
    .nav-mobile-menu.is-open .nav-mobile-list li:nth-child(2) .nav-mobile-link { transition-delay: 0.38s; }
    .nav-mobile-menu.is-open .nav-mobile-list li:nth-child(3) .nav-mobile-link { transition-delay: 0.44s; }
    .nav-mobile-menu.is-open .nav-mobile-list li:nth-child(4) .nav-mobile-link { transition-delay: 0.50s; }
    .nav-mobile-menu.is-open .nav-mobile-list li:nth-child(5) .nav-mobile-link { transition-delay: 0.56s; }
    .nav-mobile-menu.is-open .nav-mobile-cta-primary { transition-delay: 0.54s; }
    .nav-mobile-menu.is-open .nav-mobile-cta-btn     { transition-delay: 0.64s; }
  }

  /* Body scroll lock cuando el menú móvil está abierto */
  body.nav-mobile-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Smooth scroll global + offset para que las anclas no queden tapadas por el header fijo */
  html { scroll-behavior: smooth; }
  section[id], div[id] { scroll-margin-top: 100px; }

  /* Respeta prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nav-mobile-menu,
    .nav-mobile-link,
    .nav-mobile-cta-primary,
    .nav-mobile-cta-btn,
    .nav-hamburger-line,
    .nav-mobile-cta-visible {
      transition: none !important;
    }
  }

  /* ============ HERO ============ */
  .hero {
    padding: 100px 0 80px;
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracotta);
    font-weight: 500;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--terracotta);
  }
  .hero h1 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 350;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin-bottom: 32px;
    font-variation-settings: "opsz" 144, "SOFT" 30;
  }
  .hero h1 em {
    font-style: italic;
    font-weight: 350;
    color: var(--terracotta);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 480px;
    margin-bottom: 44px;
  }
  .hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn-primary {
    background: var(--ink);
    color: var(--cream);
    padding: 18px 32px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
  }
  .btn-primary:hover {
    background: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -8px rgba(255, 85, 26, 0.4);
  }
  .btn-primary svg { transition: transform 0.3s; }
  .btn-primary:hover svg { transform: translateX(4px); }
  .btn-ghost {
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
    transition: all 0.3s;
  }
  .btn-ghost:hover {
    color: var(--terracotta);
    border-color: var(--terracotta);
  }

  .hero-visual {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--cream-soft);
    border-radius: 4px;
    overflow: hidden;
  }
  .hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-visual #heroImg,
  .hero-visual #heroImgNext {
    position: absolute;
    inset: 0;
    transition: opacity 0.7s ease;
  }
  .hero-visual #heroImgNext {
    opacity: 0;
  }
  .hero-visual.fading #heroImg { opacity: 0; }
  .hero-visual.fading #heroImgNext { opacity: 1; }
  .hero-visual-tag {
    transition: opacity 0.4s ease;
  }
  .hero-visual.fading .hero-visual-tag,
  .hero-visual.fading .hero-visual-number { opacity: 0.15; }
  .hero-visual-number {
    transition: opacity 0.4s ease;
  }
  .hero-carousel-nav {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    gap: 8px;
    z-index: 3;
  }
  .hero-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 234, 228, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
  }
  .hero-nav-btn:hover {
    background: var(--cream);
    transform: scale(1.05);
  }
  .hero-visual-tag {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--cream);
    padding: 16px 20px;
    font-size: 12px;
    letter-spacing: 0.05em;
    border: 1px solid var(--line);
    max-width: 75%;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.08);
  }
  .hero-visual-tag-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .hero-visual-tag-title {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 17px;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .hero-visual-tag-desc {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
  }
  .hero-visual-number {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 56px;
    font-weight: 300;
    color: var(--cream);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    mix-blend-mode: difference;
  }

  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    /* El header es position:fixed (~75px). El padding-top debe superarlo para
       que el eyebrow "Quinta gama premium..." no quede tapado en móvil/tablet. */
    .hero { padding: 112px 0 40px; }
  }

  /* ============ TRUST STRIP ============ */
  .trust {
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream-soft);
  }
  /* Flex + space-between: la tira se reparte de borde a borde sea cual sea
     el número de items (3, 4...), sin dejar una columna vacía a la derecha. */
  .trust-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 48px;
    align-items: center;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .trust-number {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 36px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variation-settings: "opsz" 100;
  }
  .trust-label {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  @media (max-width: 720px) {
    .trust-grid { gap: 28px 20px; justify-content: flex-start; }
    .trust-item { flex: 0 0 calc(50% - 10px); }
  }

  /* ============ FILOSOFÍA ============ */
  .philosophy {
    padding: 140px 0;
    position: relative;
  }
  .philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 100px;
    align-items: start;
  }
  .section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .philosophy h2 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 350;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    margin-top: 18px;
  }
  .philosophy h2 em {
    font-style: italic;
    color: var(--olive);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .philosophy-text {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .philosophy-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 8px;
  }
  .pillar {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
  }
  .pillar:last-child { border-bottom: none; padding-bottom: 0; }
  .pillar h3 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .pillar p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  @media (max-width: 900px) {
    .philosophy-grid { grid-template-columns: 1fr; gap: 48px; }
    .philosophy { padding: 80px 0; }
  }

  /* ============ CATÁLOGO ============ */
  .catalog {
    padding: 100px 0 120px;
    background: var(--cream-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 64px;
    gap: 40px;
    flex-wrap: wrap;
  }
  .catalog-header-text { max-width: 560px; }
  .catalog-header h2 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 350;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-top: 14px;
    font-variation-settings: "opsz" 144, "SOFT" 50;
  }
  .catalog-header h2 em {
    font-style: italic;
    color: var(--terracotta);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .catalog-meta {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-align: right;
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }
  .catalog-meta strong {
    display: block;
    font-size: 48px;
    font-weight: 350;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
    font-variation-settings: "opsz" 144;
  }

  .category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
  }
  .tab {
    background: none;
    border: none;
    padding: 12px 0;
    margin-right: 28px;
    font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    letter-spacing: 0.01em;
  }
  .tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
  }
  .tab.active { color: var(--ink); font-weight: 500; }
  .tab.active::after { transform: scaleX(1); }
  .tab-count {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-style: italic;
    color: var(--terracotta);
    margin-left: 4px;
    font-size: 12px;
  }
  /* Flechas de scroll de las tabs: solo se usan en móvil (ver media query) */
  .category-tabs-arrow { display: none; }

  /* ── Tabs: scroll horizontal en mobile ──────────────────────────────────────
   * En lugar de envolver en dos filas, las tabs hacen scroll horizontal.
   * El wrapper .category-tabs-track usa márgenes negativos para que el área
   * de scroll llegue al borde del viewport. El ::after del track actúa como
   * indicador visual dinámico: se desvanece cuando el usuario llega al final
   * (la clase .is-end la añade el JS en view.js al escuchar el scroll).
   * ────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 760px) {
    /* Tabs sticky dentro de la sección de catálogo. `top` = altura del header
       (var --header-h fijada por site-header/view.js). Cuando el header se
       oculta al bajar (body.header-hidden), las tabs suben al borde superior;
       cuando reaparece al subir, vuelven a respetar su espacio. position:sticky
       se desengancha solo al salir de la sección (su contenedor .container). */
    .category-tabs-track {
      position: sticky;
      top: var(--header-h, 75px);
      z-index: 50;
      margin-left: -32px;
      margin-right: -32px;
      background: var(--cream-soft);
      transition: top 0.38s cubic-bezier(0.4, 0, 0.2, 1); /* en sync con el header */
    }
    body.header-hidden .category-tabs-track { top: 0; }
    @media (prefers-reduced-motion: reduce) {
      .category-tabs-track { transition: none; }
    }
    /* Flechas de scroll: botones REALES y tappables (antes era un ::after no
       interactivo). Reproducen el gradiente + chevron del indicador anterior.
       view.js las muestra/oculta vía .has-prev / .is-end y hace el scroll. */
    .category-tabs-arrow {
      display: block;
      position: absolute;
      top: 0;
      height: calc(100% - 1px); /* no tapar el border-bottom de las tabs */
      width: 72px;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      z-index: 2;
      background-color: transparent;
      background-repeat: no-repeat;
      transition: opacity 0.25s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .category-tabs-arrow--next {
      right: 0;
      opacity: 1;
      pointer-events: auto;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' stroke='%233D332B' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(to right, transparent, var(--cream-soft) 55%);
      background-position: right 12px center, center;
      background-size: 7px 12px, auto;
    }
    .category-tabs-arrow--prev {
      left: 0;
      opacity: 0;            /* oculta en el inicio; view.js la activa al desplazar */
      pointer-events: none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M6 1l-5 5 5 5' stroke='%233D332B' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(to left, transparent, var(--cream-soft) 55%);
      background-position: left 12px center, center;
      background-size: 7px 12px, auto;
    }
    /* En cada extremo, la flecha correspondiente se desvanece y deja de capturar taps */
    .category-tabs-track.is-end .category-tabs-arrow--next { opacity: 0; pointer-events: none; }
    .category-tabs-track.has-prev .category-tabs-arrow--prev { opacity: 1; pointer-events: auto; }

    .category-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;             /* sin scroll vertical dentro de la barra */
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      touch-action: pan-x;            /* el gesto solo desplaza en horizontal */
      overscroll-behavior-x: contain; /* no encadenar el scroll a la página/navegación */
      scroll-snap-type: x proximity;  /* cada parada cae limpia sobre un tab */
      scroll-padding-left: 32px;      /* el snap se alinea con el inicio del contenido */
      padding-left: 32px;
      padding-right: 32px;
      margin-bottom: 32px;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
    .tab { flex-shrink: 0; scroll-snap-align: start; }
    /* La línea del tab activo a bottom:0 (no -1px) para que el overflow:hidden
       del contenedor no la recorte en móvil. */
    .tab.active::after { bottom: 0; }
  }

  .dish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 36px;
  }
  @media (max-width: 980px) { .dish-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .dish-grid { grid-template-columns: 1fr; gap: 40px; } }

  .dish {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* .dish-content estira hasta el fondo de la tarjeta para que .dish-stepper
     (con `margin-top: auto`) quede alineado en todas las cards del grid
     independientemente del largo de la descripción o de los meta-tags. */
  .dish-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .dish:hover { transform: translateY(-4px); }
  .dish:hover .dish-image img { transform: scale(1.03); }
  .dish-image {
    aspect-ratio: 4/5;
    background: var(--cream);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .dish-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dish-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--cream);
    color: var(--ink);
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    font-weight: 500;
    z-index: 2;
  }
  .dish-number {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    background: var(--cream);
    padding: 4px 10px;
    border: 1px solid var(--line);
    z-index: 2;
  }
  .dish-category-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--terracotta);
    margin-bottom: 8px;
    font-weight: 500;
  }
  .dish h3 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 450;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .dish-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 16px;
  }
  .dish-meta {
    display: flex;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-wrap: wrap;
  }
  .dish-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dish-meta-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ============ B2B SECTION ============ */
  /* Default-zero block gap above the section; Gutenberg margin controls
     (set via the editor sidebar) emit inline styles that override this. */
  .wp-block-bocados-b2b-features { margin-top: 0; }
  .b2b {
    padding: 140px 0;
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
  }
  .b2b::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.06;
    pointer-events: none;
  }
  .b2b-inner {
    position: relative;
    z-index: 2;
  }
  .b2b-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
  }
  .b2b h2 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 350;
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 18px;
    font-variation-settings: "opsz" 144, "SOFT" 30;
  }
  .b2b h2 em {
    font-style: italic;
    color: #FF8C5A;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .b2b .section-label { color: rgba(239, 234, 228, 0.6); }
  .b2b-text {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(239, 234, 228, 0.75);
    margin-bottom: 40px;
  }
  .b2b-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .feature {
    padding: 28px 0;
    border-top: 1px solid rgba(239, 234, 228, 0.15);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
  }
  .feature:last-child { border-bottom: 1px solid rgba(239, 234, 228, 0.15); }
  .feature h4 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 450;
    font-size: 20px;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  .feature p {
    font-size: 14px;
    color: rgba(239, 234, 228, 0.65);
    line-height: 1.55;
  }
  .feature-icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(239, 234, 228, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  @media (max-width: 900px) {
    .b2b-grid { grid-template-columns: 1fr; gap: 56px; }
    .b2b { padding: 80px 0; }
    /* Stack feature so the text uses the full mobile width;
       icon sits above the heading, end-aligned. */
    .feature { grid-template-columns: 1fr; gap: 12px; }
    .feature-icon { order: -1; justify-self: end; }
  }

  /* ============ CTA FINAL ============ */
  .cta-final {
    padding: 140px 0;
    position: relative;
  }
  .cta-card {
    background: var(--cream-soft);
    border: 1px solid var(--line);
    padding: 80px 64px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
  }
  .cta-card-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .cta-card h2 {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 350;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-top: 14px;
    font-variation-settings: "opsz" 144, "SOFT" 40;
  }
  .cta-card h2 em {
    font-style: italic;
    color: var(--terracotta);
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .cta-card-text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 32px;
  }
  .cta-bullets {
    list-style: none;
    margin-bottom: 32px;
  }
  .cta-bullets li {
    padding: 10px 0;
    font-size: 14px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cta-bullets li::before {
    content: '';
    width: 16px;
    height: 1px;
    background: var(--terracotta);
    flex-shrink: 0;
  }

  .form {
    background: var(--cream);
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .form-title {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 20px;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .form-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 24px;
  }
  .field {
    margin-bottom: 16px;
  }
  .field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }
  .field input, .field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--cream-soft);
    font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    color: var(--ink);
    border-radius: 3px;
    transition: border-color 0.2s, background 0.2s;
  }
  .field input:focus, .field select:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--cream);
  }
  .form-button {
    width: 100%;
    background: var(--ink);
    color: var(--cream);
    padding: 16px;
    border: none;
    font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 100px;
    margin-top: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .form-button:hover {
    background: var(--terracotta);
    transform: translateY(-1px);
  }
  .form-disclaimer {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 14px;
    line-height: 1.5;
    text-align: center;
  }
  @media (max-width: 900px) {
    .cta-card { padding: 48px 28px; }
    .cta-card-inner { grid-template-columns: 1fr; gap: 40px; }
    .cta-final { padding: 80px 0; }
  }

  /* — Aviso de admin embebido en el bloque CTA cuando falta el PDF —
     Sólo visible para usuarios con manage_options (render.php lo gestiona).
     Estilo discreto pero claro. */
  .cta-admin-notice {
    background: rgba(255, 85, 26, 0.08);
    border-left: 3px solid var(--terracotta);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    border-radius: 2px;
  }
  .cta-admin-notice strong { color: var(--terracotta); margin-right: 4px; }
  .cta-admin-notice a { color: var(--terracotta); font-weight: 500; }

  /* — Tarjeta de descarga post-submit —
     Oculta por defecto vía `hidden`; view.js la revela al recibir
     wpcf7mailsent y oculta el formulario y el mensaje de éxito de CF7. */
  .cta-download-card {
    background: var(--cream-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 36px 28px;
    text-align: center;
    animation: cta-download-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .cta-download-card[hidden] { display: none !important; }
  @keyframes cta-download-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cta-download-check {
    color: var(--terracotta);
    margin-bottom: 16px;
  }
  .cta-download-title {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 450;
    font-size: clamp(22px, 2.4vw, 28px);
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 8px;
  }
  .cta-download-text {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  /* Botón principal — mismo patrón que la CTA del panel:
     terracotta por defecto, ink en hover para mantener el contraste. */
  .cta-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--terracotta);
    color: var(--cream);
    text-decoration: none;
    font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 999px;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: 0 6px 18px rgba(255, 85, 26, 0.22);
  }
  .cta-download-button:hover,
  .cta-download-button:focus-visible {
    background: var(--ink);
    color: var(--cream);
    box-shadow: 0 10px 24px rgba(26, 20, 16, 0.28);
    transform: translateY(-1px);
  }
  .cta-download-button svg { flex-shrink: 0; }
  .cta-download-pending {
    background: rgba(255, 85, 26, 0.08);
    padding: 14px 18px;
    border-left: 3px solid var(--terracotta);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    border-radius: 2px;
    margin: 4px 0;
  }
  .cta-download-also {
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
  }

  /* ============ FOOTER ============ */
  /* Importante: scopeamos al bloque concreto (.wp-block-bocados-site-footer)
     en vez de al tag <footer>. La plantilla envuelve el bloque con un
     wp:template-part {"tagName":"footer"}, generando un <footer> exterior +
     <footer> interior; un selector genérico aplicaría background, padding y
     border-top al wrapper exterior duplicando el zócalo y dejando un bloque
     vacío encima de las columnas. */
  .wp-block-bocados-site-footer {
    background: var(--ink);
    color: rgba(239, 234, 228, 0.7);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(239, 234, 228, 0.1);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(239, 234, 228, 0.1);
  }
  .footer-brand .logo {
    color: var(--cream);
    margin-bottom: 16px;
  }
  .footer-tagline {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-style: italic;
    font-size: 17px;
    color: var(--cream);
    margin-bottom: 20px;
    font-weight: 350;
  }
  .footer-text {
    font-size: 13px;
    line-height: 1.6;
    max-width: 300px;
  }
  .footer-col h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cream);
    margin-bottom: 18px;
    font-weight: 500;
  }
  .footer-col ul {
    list-style: none;
  }
  .footer-col li {
    margin-bottom: 10px;
  }
  .footer-col a {
    color: rgba(239, 234, 228, 0.65);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--cream); }
  /* Redes sociales en el footer — solo aparece si Ajustes → Social tiene entradas. */
  .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  .footer-social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(239, 234, 228, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 234, 228, 0.75);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .footer-social-link:hover,
  .footer-social-link:focus-visible {
    background: var(--terracotta);
    color: var(--cream);
    border-color: var(--terracotta);
    transform: translateY(-1px);
  }
  .footer-social-link svg { width: 16px; height: 16px; }

  /* Variante de logo cuando es imagen (Ajustes → brand_logo cargado). */
  .logo--image { gap: 0; }
  .logo-img {
    max-height: 40px;
    width: auto;
    display: block;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    font-size: 12px;
    color: rgba(239, 234, 228, 0.7); /* sube de 0.5 a 0.7 para texto base legible */
    flex-wrap: wrap;
    gap: 16px;
  }
  /* Enlaces del copyright (ej. SLUPU) y enlaces legales con contraste alto
     sobre fondo ink. El default de WP es var(--terracotta) por la regla
     global de .footer-col a — aquí lo subimos a cream para que se note como
     enlace clicable contra el footer oscuro. */
  .footer-bottom-copy a,
  .footer-bottom-legal a {
    color: var(--cream);
    text-decoration: none;
    border-bottom: 1px solid rgba(239, 234, 228, 0.25);
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .footer-bottom-copy a:hover,
  .footer-bottom-legal a:hover,
  .footer-bottom-copy a:focus-visible,
  .footer-bottom-legal a:focus-visible {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
  }
  .footer-bottom-legal { color: rgba(239, 234, 228, 0.85); }
  @media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  }

  /* ============ MODAL ============ */
  .dish { cursor: pointer; }
  .dish-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 20, 16, 0);
    transition: background 0.3s;
    pointer-events: none;
    z-index: 1;
  }
  .dish:hover .dish-image::after { background: rgba(26, 20, 16, 0.04); }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 20, 16, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .modal {
    background: var(--cream);
    width: 100%;
    max-width: 1120px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    border-radius: 4px;
    transform: translateY(16px);
    transition: transform 0.3s ease;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.35);
  }
  .modal-backdrop.open .modal { transform: translateY(0); }
  .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--cream);
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
  }
  .modal-close:hover {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .modal-body {
    display: grid;
    /* Columna izquierda algo menor (0.85fr) para dejar más respiro al
       contenido (descripción + alérgenos + AÑADIR + formatos stacked).
       Con el modal más ancho (1120px) la imagen mantiene presencia
       sin dominar. */
    grid-template-columns: 0.85fr 1fr;
    gap: 0;
    /* Sin `align-items: start` — ahora las columnas se estiran (default
       stretch), la imagen llena el alto de la derecha como fondo cover.
       Esto evita la franja vacía debajo de la foto que aparecía cuando
       el plato tiene 2 formatos (la columna derecha es más alta). */
  }
  .modal-media {
    background: var(--cream-soft);
    overflow: hidden;
    position: relative;
    /* Mínimo para platos single-format (columna derecha más corta) —
       evita que la imagen quede squat / aplastada. */
    min-height: 540px;
  }
  .modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .modal-media-number {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 56px;
    font-weight: 300;
    color: var(--cream);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    mix-blend-mode: difference;
  }
  .modal-content {
    padding: 56px 48px;
    min-width: 0;
  }
  .modal-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracotta);
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .modal-cat::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--terracotta);
  }
  .modal-title {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    color: var(--ink);
    font-variation-settings: "opsz" 144, "SOFT" 40;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .modal-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 22px;
  }
  .modal-allergens {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
  }
  .modal-allergens strong {
    color: var(--ink);
    font-weight: 500;
    margin-right: 10px;
  }
  .modal-formats-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 16px;
  }
  /* Apilado vertical siempre: una columna por tarjeta de formato.
     Cuando había dos formatos en dos columnas (1fr 1fr) el texto se
     comprimía y la elección visual perdía claridad. Full-width es la
     misma regla que ya usa móvil — ahora unificada para todos los anchos. */
  .formats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .format-card {
    border: 1px solid var(--line);
    background: var(--cream-soft);
    padding: 14px;
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  }
  .format-card:hover {
    border-color: var(--ink-soft);
    background: var(--cream);
  }
  .format-card.selected {
    border-color: var(--terracotta);
    background: var(--cream);
    box-shadow: inset 0 0 0 1px var(--terracotta);
  }
  .format-card.selected .format-info-title {
    color: var(--terracotta);
  }

  /* Stepper del modal en estado «falta elegir formato» */
  .modal-stepper.needs-format .modal-stepper-plus,
  .modal-stepper.needs-format .modal-stepper-minus {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  .modal-stepper-hint {
    display: none;
    color: var(--terracotta);
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
  }
  .modal-stepper-hint.visible { display: inline; }
  .modal-stepper-label > .hidden { display: none; }

  /* Tarjeta del catálogo: multi-formato no expone el botón minus
     (el usuario gestiona por formato dentro del modal). */
  .dish-stepper--multi-format .dish-stepper-minus,
  .dish-stepper--multi-format .dish-stepper-qty { display: none !important; }
  .format-mock {
    width: 72px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
  }
  .format-mock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .format-info { min-width: 0; flex: 1; }
  .format-info-title {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .format-info-gram {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
  }
  .format-info-use {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.45;
  }
  @media (max-width: 760px) {
    .modal-backdrop { padding: 12px; }
    .modal { max-height: calc(100vh - 24px); }
    .modal-body { grid-template-columns: 1fr; }
    .modal-content { padding: 36px 28px; }
    /* En móvil volvemos a aspect-ratio 4/5 (no hay columna derecha que igualar)
       y quitamos el min-height para que la imagen no domine el viewport. */
    .modal-media { aspect-ratio: 4/5; min-height: 0; }
  }

  /* Bloqueo de scroll del body sin saltos horizontales */
  body.modal-open {
    overflow: hidden;
  }

  /* ============ CTA SECUNDARIO: CONTACTO DIRECTO ============ */
  .contact-alt {
    margin-top: 72px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .contact-alt-divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
  }
  .contact-alt-divider::before,
  .contact-alt-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .contact-alt-divider span {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
  }
  .contact-alt-intro {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 144, "SOFT" 40;
  }
  .contact-alt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .contact-alt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    border: 1px solid var(--line);
    background: var(--cream);
    text-decoration: none;
    color: var(--ink);
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .contact-alt-card:hover {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
    transform: translateY(-2px);
  }
  .contact-alt-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--terracotta);
    transition: background 0.3s, color 0.3s;
  }
  .contact-alt-card:hover .contact-alt-icon {
    background: var(--terracotta);
    color: var(--cream);
  }
  .contact-alt-label {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
    transition: color 0.3s;
  }
  .contact-alt-card:hover .contact-alt-label {
    color: rgba(239, 234, 228, 0.7);
  }
  .contact-alt-value {
    font-family: var(--bocados-font-heading, 'Fraunces', serif);
    font-size: 16px;
    letter-spacing: -0.005em;
  }
  @media (max-width: 720px) {
    .contact-alt { margin-top: 48px; }
    .contact-alt-grid { grid-template-columns: 1fr; }
    .contact-alt-intro { font-size: 19px; }
  }

  /* ============ VALIDACIÓN DEL FORMULARIO ============ */
  .req {
    color: var(--terracotta);
    font-weight: 500;
    margin-left: 2px;
  }
  .field.invalid input,
  .field.invalid select {
    border-color: var(--terracotta);
    background: var(--cream);
  }
  .field-error {
    display: none;
    font-size: 11px;
    color: var(--terracotta);
    margin-top: 6px;
    letter-spacing: 0.02em;
  }
  .field.invalid .field-error { display: block; }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .reveal {
    opacity: 0;
    animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .reveal-1 { animation-delay: 0.05s; }
  .reveal-2 { animation-delay: 0.15s; }
  .reveal-3 { animation-delay: 0.25s; }
  .reveal-4 { animation-delay: 0.35s; }
  .reveal-5 { animation-delay: 0.45s; }

/* ============================================================ */
/*  Ajustes específicos de la implementación WordPress           */
/* ============================================================ */

/* contact-cards block — envuelve .contact-alt en su propio container */
.contact-alt-section {
  padding: 0 0 80px;
}

/* Bloqueo de scroll cuando el modal está abierto */
body.modal-open { overflow: hidden; }

/* Estados de visibilidad para Interactivity API */
.dish.is-hidden { display: none !important; }
.modal-backdrop[data-open="true"], .modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.hero-visual.fading #heroImg, .hero-visual.fading [data-wp-bind--src] { /* no-op, ya cubierto por la regla original */ }

/* Ocultar el "is-fading" extra que añade el InteractivityAPI */
.hero-visual[data-fading="true"] img[data-wp-bind--src="state.currentImg"] { opacity: 0; }
.hero-visual[data-fading="true"] img[data-wp-bind--src="state.nextImg"]    { opacity: 1; }

/* ============================================================ */
/*  Compatibilidad de Contact Form 7 con los estilos del .form   */
/*  La referencia usa .field input/select y .form-button.        */
/*  CF7 envuelve los inputs en <span class="wpcf7-form-control-wrap">. */
/*  Aquí «aplanamos» ese wrapper y hacemos que el input quede a  */
/*  ancho completo dentro de su .field.                          */
/* ============================================================ */

.form .wpcf7-form > p { margin: 0; }
.form .wpcf7-form .field { margin-bottom: 16px; }
.form .wpcf7-form .field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.form .wpcf7-form-control-wrap { display: block; width: 100%; }
.form .wpcf7-form input[type="text"],
.form .wpcf7-form input[type="email"],
.form .wpcf7-form input[type="tel"],
.form .wpcf7-form input[type="url"],
.form .wpcf7-form input[type="number"],
.form .wpcf7-form select,
.form .wpcf7-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--cream-soft);
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 14px;
  color: var(--ink);
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.form .wpcf7-form input:focus,
.form .wpcf7-form select:focus,
.form .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--cream);
}
.form .wpcf7-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231A1410' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}
.form .wpcf7-form .form-button,
.form .wpcf7-form input[type="submit"] {
  width: 100%;
  background: var(--ink);
  color: var(--cream);
  padding: 16px;
  border: none;
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 100px;
  margin-top: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.form .wpcf7-form .form-button:hover,
.form .wpcf7-form input[type="submit"]:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}
.form .wpcf7-form .form-disclaimer {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
  text-align: center;
}
.form .wpcf7-form .req { color: var(--terracotta); margin-left: 2px; }

/* Mensajes de respuesta de CF7 dentro del estilo. */
.form .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 3px;
  font-size: 13px;
  border: 1px solid var(--line);
}
.form .wpcf7-form.invalid .wpcf7-response-output,
.form .wpcf7-form.failed .wpcf7-response-output {
  border-color: var(--terracotta);
  background: rgba(255, 85, 26, 0.06);
  color: var(--terracotta);
}
.form .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--olive);
  background: rgba(61, 74, 44, 0.06);
  color: var(--olive);
}
.form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--terracotta);
}
.form .wpcf7-form input.wpcf7-not-valid,
.form .wpcf7-form select.wpcf7-not-valid {
  border-color: var(--terracotta);
  background: rgba(255, 85, 26, 0.04);
}

/* CF7 envuelve cada etiqueta+input en <p>. Neutralizamos su margen. */
.form .wpcf7-form .field > p { margin: 0; }
.form .wpcf7-form .field br { display: none; }
.form .wpcf7-form > p:has(input[type="submit"]) { margin: 0; }
.form .wpcf7-form .form-disclaimer > p { margin: 0; }

/* ============================================================ */
/*  Filtrado del catálogo — animación de dos fases              */
/*  Fase 1 (exit):  fade-out rápido de las tarjetas visibles   */
/*  Fase 2 (enter): fade-in escalonado de las nuevas visibles   */
/*                                                               */
/*  La View Transitions API con view-transition-name en 14      */
/*  elementos individuales forzaba al navegador a capturar      */
/*  screenshots de cada tarjeta — origen del lag de 2-3s.      */
/*  Esta implementación JS+CSS tarda ~400 ms en total.          */
/* ============================================================ */

/* Tarjetas fuera del filtro activo: fuera del flujo */
.dish.is-hidden { display: none !important; }

/* Hover suave en las tarjetas (sin opacity para no interferir con filtrado) */
.dish {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Fase exit: las tarjetas visibles se desvanecen rápido ---- */
.dish-grid.catalog--exit .dish:not(.is-hidden) {
  animation: dish-exit 110ms ease forwards;
}
@keyframes dish-exit {
  to { opacity: 0; transform: translateY(6px) scale(0.97); }
}

/* ---- Fase enter: las nuevas tarjetas aparecen escalonadas ---- */
/* --dish-i se inyecta por JS en cada tarjeta visible */
.dish-grid.catalog--enter .dish:not(.is-hidden) {
  animation: dish-enter 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--dish-i, 0) * 35ms);
}
@keyframes dish-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Accesibilidad: sin animación para usuarios sensibles al movimiento */
@media (prefers-reduced-motion: reduce) {
  .dish-grid.catalog--exit .dish,
  .dish-grid.catalog--enter .dish {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================ */
/*  Hero slider · animación sincronizada y suave                 */
/*  Mantén estos ms en sync con FADE_MS de blocks/hero/view.js  */
/* ============================================================ */

:root {
  --hero-fade-ms: 320ms;
  --hero-easing:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* Imagen visible: transición de opacidad + leve zoom durante el fade. */
.hero-visual .hero-visual-img {
  transition: opacity var(--hero-fade-ms) var(--hero-easing),
              transform calc( var(--hero-fade-ms) * 2 ) var(--hero-easing);
  will-change: opacity, transform;
  transform: scale(1.005);
}
.hero-visual.fading .hero-visual-img {
  opacity: 0;
  transform: scale(1.025);
}

/* Imagen de precarga (oculta visualmente, sólo descarga la siguiente). */
.hero-visual .hero-visual-preload {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Número grande + tarjeta de etiqueta: se atenúan + desplazan juntos. */
.hero-visual-number,
.hero-visual-tag {
  transition: opacity var(--hero-fade-ms) var(--hero-easing),
              transform var(--hero-fade-ms) var(--hero-easing);
  will-change: opacity, transform;
}
.hero-visual.fading .hero-visual-number {
  opacity: 0;
  transform: translateY(-6px);
}
.hero-visual.fading .hero-visual-tag {
  opacity: 0;
  transform: translateY(8px);
}

/* Anulamos las antiguas reglas .fading con opacidad 0.15 que dejaban
   el número/etiqueta semitransparentes durante todo el ciclo. */
.hero-visual.fading .hero-visual-tag,
.hero-visual.fading .hero-visual-number {
  /* opacity ya viene de las reglas individuales de arriba, esto sólo
     fuerza la cascada por si una regla anterior gana especificidad. */
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .hero-visual-img,
  .hero-visual-number,
  .hero-visual-tag {
    transition-duration: 0.001ms !important;
  }
}

/* El header es sticky puro via CSS — sin clases de scroll por el momento. */

/* ============================================================ */
/*                  SOLICITAR PRESUPUESTO                       */
/* ============================================================ */

/* — Selected state on the dish card —
   Outline (no layout impact) with outline-offset for breathing room
   so the orange frame doesn't crowd the title/description/meta. */
.dish.selected {
  outline: 1.5px solid var(--terracotta);
  outline-offset: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.dish.selected:hover {
  outline-color: var(--terracotta);
  box-shadow: 0 8px 24px rgba(255, 85, 26, 0.08);
}

/* — × N badge top-left over the dish image — */
.dish-qty-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(255, 85, 26, 0.25);
}
.dish-qty-badge.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* — Per-card stepper inside .dish-content —
   `margin-top: auto` lo ancla al fondo de .dish-content (que ahora estira
   hasta el fondo de la tarjeta), de forma que los botones quedan alineados
   horizontalmente entre todas las cards del grid. */
.dish-stepper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  /* Sin border-top: hacía que el hueco entre meta y botón (que varía
     según largo de descripción) se notara como desfase horizontal entre
     cards. Sin la línea las cards leen como un grid limpio. */
}
.dish-stepper-minus,
.dish-stepper-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 34px;
  padding: 0 12px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dish-stepper-minus:hover,
.dish-stepper-plus:hover {
  background: var(--cream-soft);
  border-color: var(--ink-soft);
}
.dish-stepper-plus {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}
/* Hover: invertir a ink (oscuro) en lugar de terracotta-light (claro)
   para mantener el contraste con el texto cream. */
.dish-stepper-plus:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.dish-stepper-plus-label {
  font-weight: 500;
}
.dish-stepper-qty {
  min-width: 24px;
  text-align: center;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

/* Collapsed state when nothing is selected: only the "+ Añadir" pill. */
.dish-stepper:not(.selected) .dish-stepper-minus,
.dish-stepper:not(.selected) .dish-stepper-qty {
  display: none;
}
.dish-stepper.selected .dish-stepper-plus-label {
  display: none;
}
.dish-stepper.selected .dish-stepper-plus {
  min-width: 34px;
  padding: 0 10px;
}

/* — Modal stepper (primary, larger) — */
.modal-stepper {
  margin: 8px 0 24px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.modal-stepper-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.modal-stepper-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-stepper-minus,
.modal-stepper-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  background: var(--cream-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.modal-stepper-plus {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}
.modal-stepper-plus:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.modal-stepper-minus:hover {
  background: var(--cream);
  border-color: var(--ink-soft);
}
.modal-stepper-qty {
  min-width: 28px;
  text-align: center;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.modal-stepper:not(.selected) .modal-stepper-minus,
.modal-stepper:not(.selected) .modal-stepper-qty {
  display: none;
}
.modal-stepper.selected .modal-stepper-plus-label {
  display: none;
}

/* — Floating action button (FAB) —
   `.quote-cart` no debe crear stacking context propio: la cabecera fija
   tiene `z-index: 1000` y, si el contenedor del carrito lo confina,
   `.quote-panel-backdrop` (z-index 1000 interno) acaba por debajo del header.
   El FAB ya está `position: fixed` con su propio z-index, así que el wrapper
   puede quedarse sin posicionar. */
.quote-cart {
  position: static;
}
.quote-fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--terracotta);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 85, 26, 0.32);
  opacity: 0;
  transform: translateY(80px);
  pointer-events: none;
  transition:
    opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease;
}
.quote-fab.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.quote-fab:hover {
  background: var(--ink);
  box-shadow: 0 14px 34px rgba(26, 20, 16, 0.32);
}
.quote-fab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-left: 4px;
  background: var(--cream);
  color: var(--terracotta);
  border-radius: 999px;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}

/* — Backdrop + slide-in panel —
   z-index por encima del header (1000) para que el panel aparezca
   sobre la barra de navegación fija. */
.quote-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(26, 20, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  justify-content: flex-end;
}
.quote-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.quote-panel {
  width: min(440px, 100%);
  height: 100%;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transform: translateX(40px);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -24px 0 60px rgba(26, 20, 16, 0.18);
}
.quote-panel-backdrop.open .quote-panel {
  transform: translateX(0);
}
.quote-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.quote-panel-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 6px;
}
.quote-panel-header h3 {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 450;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
.quote-panel-close {
  width: 36px;
  height: 36px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.quote-panel-close:hover {
  background: var(--cream-soft);
  border-color: var(--ink-soft);
}

.quote-panel-empty {
  flex: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 36px;
  color: var(--ink-soft);
}
.quote-panel-empty.visible { display: flex; }
.quote-panel-empty p { margin-bottom: 10px; font-size: 15px; }
.quote-panel-empty-hint { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.quote-lines {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
.quote-lines.hidden { display: none; }
.quote-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
}
.quote-line-thumb {
  width: 56px;
  height: 70px;
  flex-shrink: 0;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.quote-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quote-line-body {
  flex: 1;
  min-width: 0;
}
.quote-line-num {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.quote-line-title {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote-line-formato {
  display: none;
  font-size: 11.5px;
  color: var(--terracotta);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.quote-line-formato.visible { display: block; }

.quote-line-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quote-line-minus,
.quote-line-plus {
  width: 26px;
  height: 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.quote-line-minus:hover,
.quote-line-plus:hover {
  background: var(--cream-soft);
}
.quote-line-qty {
  min-width: 24px;
  text-align: center;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.quote-line-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.quote-line-remove:hover {
  background: var(--cream-soft);
  color: var(--terracotta);
  border-color: var(--line);
}

.quote-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.quote-panel-summary.hidden { display: none; }
.quote-panel-summary-count strong {
  color: var(--ink);
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  font-size: 15px;
}
.quote-panel-clear {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.quote-panel-clear:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.quote-panel-footer {
  padding: 20px 28px 28px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
}
.quote-panel-footer.hidden { display: none; }
.quote-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  background: var(--terracotta);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--bocados-font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* Hover por defecto (CTA email/arrow): mantenemos contraste pasando a ink. */
.quote-panel-cta:hover {
  background: var(--ink);
  box-shadow: 0 8px 24px rgba(26, 20, 16, 0.28);
}
.quote-panel-cta.disabled {
  background: var(--ink-soft);
  pointer-events: none;
  opacity: 0.6;
}

/* — WhatsApp branding —
   #25D366 es el verde oficial de WhatsApp; el hover oscurece a #128C7E
   (el verde de marca para estados activos, mantiene contraste con cream). */
.quote-panel-cta.whatsapp {
  background: #25D366;
  color: #ffffff;
}
.quote-panel-cta.whatsapp:hover {
  background: #128C7E;
  box-shadow: 0 8px 24px rgba(18, 140, 126, 0.32);
}
/* Iconos del CTA: ahora son <span> envoltorio (la directiva no puede ir en
   <svg>). inline-flex + align-items centra el SVG igual que cuando era hijo
   flex directo del <a>. Lógica de visibilidad idéntica a la anterior. */
.quote-cta-icon-wa,
.quote-cta-icon-arrow { flex-shrink: 0; align-items: center; }
.quote-cta-icon-arrow { display: inline-flex; }          /* visible por defecto */
.quote-cta-icon-arrow.hidden { display: none; }          /* oculto si WhatsApp */
.quote-cta-icon-wa { display: none; }                    /* oculto por defecto */
.quote-cta-icon-wa.visible { display: inline-flex; }     /* visible si WhatsApp */
.quote-panel-admin-note {
  display: none;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}
.quote-panel-admin-note.visible { display: block; }
.quote-panel-admin-note a { color: var(--terracotta); text-decoration: underline; }

/* Bloqueo de scroll cuando el panel está abierto. */
body.quote-panel-open { overflow: hidden; }

/* Mobile: el panel se convierte en bottom-sheet. */
@media (max-width: 760px) {
  .quote-panel-backdrop { align-items: flex-end; justify-content: stretch; }
  .quote-panel {
    width: 100%;
    height: auto;
    max-height: 88vh;
    transform: translateY(40px);
  }
  .quote-panel-backdrop.open .quote-panel {
    transform: translateY(0);
  }
  .quote-fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    padding: 12px 18px 12px 14px;
    font-size: 12px;
  }
  .quote-fab-label { display: none; }
  .quote-fab-count { margin-left: 0; }

  /* Stepper de tarjeta en columna en móviles muy estrechos */
  .dish-stepper {
    justify-content: flex-end;
  }

  /* Modal stepper apila etiqueta + controles */
  .modal-stepper {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .modal-stepper-controls {
    justify-content: space-between;
  }
  .modal-stepper-plus {
    flex: 1;
    justify-content: center;
  }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .quote-fab,
  .quote-panel,
  .quote-panel-backdrop,
  .dish-qty-badge {
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================ */
/*  PÁGINAS ESTÁTICAS · plantilla page.html                       */
/*                                                                */
/*  La plantilla solo provee: breadcrumb + post-content.          */
/*  El hero (.page-hero) se inserta como pattern de Gutenberg     */
/*  «Cabecera de página» (bocados/page-header), por lo que el     */
/*  contenido de cada página comienza típicamente con esa         */
/*  sección, seguida del texto editorial.                         */
/* ============================================================ */

.page-template {
  background: var(--cream);
}

/* ---------- Migas: separan visualmente el header fijo del      */
/* contenido y del bloque hero del pattern ---------- */
.page-template > .bocados-breadcrumb {
  padding-top: 108px;
  padding-bottom: 56px;
}
@media (max-width: 720px) {
  .page-template > .bocados-breadcrumb {
    padding-top: 84px;
    padding-bottom: 36px;
  }
}

/* ---------- Hero (pattern bocados/page-header) ---------- */
.page-hero {
  padding: 0 0 56px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .page-hero { padding: 0 0 40px; }
}

.page-hero-inner {
  max-width: 880px;
}

.page-hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  font-weight: 500;
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
}
.page-hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--terracotta);
  flex-shrink: 0;
}

.page-hero-title,
.page-hero .wp-block-post-title {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 350;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  margin: 0;
}
.page-hero-title em,
.page-hero .wp-block-post-title em {
  font-style: italic;
  color: var(--terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.page-hero-title::after,
.page-hero .wp-block-post-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--terracotta);
  margin-top: 28px;
  border-radius: 2px;
}

/* ---------- Cuerpo de contenido ----------                      */
/* wp:post-content emite .entry-content.wp-block-post-content.    */
/* Sus hijos sueltos (h2/p/ul/ol) viven al mismo nivel que el     */
/* .page-hero insertado por el pattern. Restringimos el ancho     */
/* de lectura SOLO a los hijos que no son el hero ni full-wide.   */

/* Cinta legible para los hijos directos del post-content */
.page-template .entry-content > p,
.page-template .entry-content > h2,
.page-template .entry-content > h3,
.page-template .entry-content > h4,
.page-template .entry-content > ul,
.page-template .entry-content > ol,
.page-template .entry-content > blockquote,
.page-template .entry-content > hr,
.page-template .entry-content > table,
.page-template .entry-content > figure,
.page-template .wp-block-post-content > p,
.page-template .wp-block-post-content > h2,
.page-template .wp-block-post-content > h3,
.page-template .wp-block-post-content > h4,
.page-template .wp-block-post-content > ul,
.page-template .wp-block-post-content > ol,
.page-template .wp-block-post-content > blockquote,
.page-template .wp-block-post-content > hr,
.page-template .wp-block-post-content > table,
.page-template .wp-block-post-content > figure {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* Aire entre el hero y el primer bloque editorial */
.page-template .entry-content > .page-hero + *,
.page-template .wp-block-post-content > .page-hero + * {
  margin-top: 72px;
}
@media (max-width: 720px) {
  .page-template .entry-content > .page-hero + *,
  .page-template .wp-block-post-content > .page-hero + * { margin-top: 48px; }
}

/* Espacio inferior global del documento */
.page-template .entry-content,
.page-template .wp-block-post-content {
  padding-bottom: 120px;
}
@media (max-width: 720px) {
  .page-template .entry-content,
  .page-template .wp-block-post-content { padding-bottom: 72px; }
}

/* Callout: el párrafo inmediatamente después del hero (típicamente
   «Última actualización: …») se realza como una tarjeta cremosa */
.page-template .entry-content > .page-hero + p,
.page-template .wp-block-post-content > .page-hero + p {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--cream-soft);
  border-left: 2px solid var(--terracotta);
  padding: 14px 18px;
  margin-bottom: 56px;
  box-sizing: border-box;
}
.page-template .entry-content > .page-hero + p em,
.page-template .wp-block-post-content > .page-hero + p em {
  font-style: italic;
}

/* Encabezados de sección */
.page-template .entry-content > h2,
.page-template .wp-block-post-content > h2 {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 3em;
  margin-bottom: 0.7em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.page-template .entry-content > h3,
.page-template .wp-block-post-content > h3 {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

/* Cuerpo de texto */
.page-template .entry-content > p,
.page-template .wp-block-post-content > p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: 0;
  margin-bottom: 1.25em;
}
@media (max-width: 720px) {
  .page-template .entry-content > p,
  .page-template .wp-block-post-content > p { font-size: 16px; line-height: 1.7; }
}

/* Listas con bullets de marca (raya terracota) */
.page-template .entry-content > ul,
.page-template .wp-block-post-content > ul {
  list-style: none;
  padding-left: 32px; /* mantiene la cinta de 760px */
  margin-top: 0;
  margin-bottom: 1.5em;
}
.page-template .entry-content > ul li,
.page-template .wp-block-post-content > ul li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.7em;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-template .entry-content > ul li::before,
.page-template .wp-block-post-content > ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 16px;
  height: 1px;
  background: var(--terracotta);
}
@media (max-width: 720px) {
  .page-template .entry-content > ul li,
  .page-template .wp-block-post-content > ul li { font-size: 16px; }
  .page-template .entry-content > ul li::before,
  .page-template .wp-block-post-content > ul li::before { top: 0.72em; }
}

/* Listas ordenadas con numeración serif */
.page-template .entry-content > ol,
.page-template .wp-block-post-content > ol {
  counter-reset: page-counter;
  list-style: none;
  padding-left: 32px;
  margin-top: 0;
  margin-bottom: 1.5em;
}
.page-template .entry-content > ol li,
.page-template .wp-block-post-content > ol li {
  counter-increment: page-counter;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 0.7em;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-template .entry-content > ol li::before,
.page-template .wp-block-post-content > ol li::before {
  content: counter(page-counter) ".";
  position: absolute;
  left: 0;
  top: -0.04em;
  color: var(--terracotta);
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  font-size: 18px;
}

/* Inline */
.page-template .entry-content strong,
.page-template .wp-block-post-content strong {
  font-weight: 600;
  color: var(--ink);
}
.page-template .entry-content em,
.page-template .wp-block-post-content em {
  font-style: italic;
}
.page-template .entry-content a,
.page-template .wp-block-post-content a {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.page-template .entry-content a:hover,
.page-template .wp-block-post-content a:hover {
  color: var(--ink);
}

/* Separadores y citas */
.page-template .entry-content > hr,
.page-template .wp-block-post-content > hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3em auto;
  width: 56px;
}
.page-template .entry-content > blockquote,
.page-template .wp-block-post-content > blockquote {
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--terracotta);
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

/* Tablas (poco frecuentes pero por si las hay) */
.page-template .entry-content > table,
.page-template .wp-block-post-content > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.page-template .entry-content > table th,
.page-template .wp-block-post-content > table th,
.page-template .entry-content > table td,
.page-template .wp-block-post-content > table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.page-template .entry-content > table th,
.page-template .wp-block-post-content > table th {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================ */
/*  FICHA INDIVIDUAL DEL PLATO · bocados/plato-single             */
/*  Layout e-commerce: imagen a la izquierda, datos + CTA a la    */
/*  derecha, y debajo grid de platos sugeridos de la misma        */
/*  categoría. Reutiliza .format-card del modal.                  */
/* ============================================================ */

.plato-single-template > .bocados-breadcrumb {
  padding-bottom: 32px;
}

.plato-single {
  background: var(--cream);
}

/* ---------- HERO a dos columnas ---------- */
.plato-single-detail {
  padding-bottom: 96px;
}
@media (max-width: 720px) {
  .plato-single-detail { padding-bottom: 56px; }
}

.plato-single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
@media (max-width: 980px) {
  .plato-single-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Columna izquierda · imagen ---------- */
.plato-single-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: 4px;
}
.plato-single-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plato-single-num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  mix-blend-mode: difference;
  font-variation-settings: "opsz" 144;
}
@media (max-width: 720px) {
  .plato-single-num { font-size: 48px; top: 14px; right: 18px; }
}

/* ---------- Columna derecha · contenido ---------- */
.plato-single-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.plato-single-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
}
.plato-single-cat::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--terracotta);
  flex-shrink: 0;
}

.plato-single-title {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 350;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  margin: 0 0 24px;
}

.plato-single-desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 52ch;
}

/* Etiquetas meta (formato, % carne, etc.) */
.plato-single-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.plato-single-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plato-single-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* Alérgenos */
.plato-single-allergens {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
.plato-single-allergens-label {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.plato-single-allergens-value {
  font-style: italic;
}

/* Formatos */
.plato-single-formats {
  margin-bottom: 32px;
}
.plato-single-formats-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 14px;
}
.plato-single-formats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* La .format-card hereda estilos del modal — solo añadimos overrides para
   que en single-plato sea ligeramente más alta y respire mejor. */
.plato-single-format-card {
  padding: 16px;
  border-radius: 4px;
}

/* CTA principal */
.plato-single-cta-row {
  margin-top: 4px;
}
.plato-single-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 100px;
  padding: 18px 32px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 240px;
}
.plato-single-cta:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(255, 85, 26, 0.4);
}
.plato-single-cta:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.plato-single-cta svg {
  transition: transform 0.3s;
  flex-shrink: 0;
}
.plato-single-cta:hover svg {
  transform: rotate(90deg);
}

.plato-single-cta-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 360px;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .plato-single-cta { width: 100%; min-width: 0; }
  .plato-single-cta-hint { max-width: none; }
}

/* ---------- Sección de platos relacionados ---------- */
.plato-related {
  padding: 96px 0 120px;
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .plato-related { padding: 64px 0 80px; }
}

.plato-related-header {
  margin-bottom: 48px;
  max-width: 720px;
}
.plato-related-header .section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
}
.plato-related-header .section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ink-soft);
}
.plato-related-title {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 350;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  margin: 16px 0 0;
}
.plato-related-title em {
  font-style: italic;
  color: var(--terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.plato-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
@media (max-width: 980px) { .plato-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plato-related-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Tarjeta individual — variante <a> de .dish. */
.plato-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.plato-related-card:hover {
  transform: translateY(-4px);
}
.plato-related-card:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 6px;
}
.plato-related-image {
  aspect-ratio: 4 / 5;
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.plato-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.plato-related-card:hover .plato-related-image img {
  transform: scale(1.03);
}
.plato-related-num {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  background: var(--cream);
  padding: 4px 10px;
  border: 1px solid var(--line);
}
.plato-related-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plato-related-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 8px;
  font-weight: 500;
}
.plato-related-name {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 450;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.plato-related-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
  flex: 1;
}
.plato-related-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  transition: color 0.2s ease, gap 0.2s ease;
}
.plato-related-card:hover .plato-related-link {
  color: var(--terracotta);
  gap: 12px;
}
.plato-related-link svg {
  transition: transform 0.2s ease;
}

/* ============================================================ */
/*  ARCHIVE DE PLATOS · bocados/plato-archive                    */
/*  Página /platos/. Diseñada para SEO: cada card es <a>,        */
/*  filtro client-side, sin modal. Reutiliza la cinta del hero   */
/*  de page-template y la paleta de cards.                       */
/* ============================================================ */

/* Lede del hero (introducción descriptiva debajo del título) */
.platos-archive-template .page-hero-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 28px 0 0;
  max-width: 54ch;
}
@media (max-width: 720px) {
  .platos-archive-template .page-hero-lede { font-size: 15px; margin-top: 20px; }
}

/* Sección principal */
.plato-archive {
  padding: 56px 0 120px;
  background: var(--cream);
}
@media (max-width: 720px) {
  .plato-archive { padding: 36px 0 72px; }
}

/* ---------- Pestañas de filtro ---------- */
.plato-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
@media (max-width: 720px) {
  .plato-archive-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 36px;
    padding: 0 4px;
  }
  .plato-archive-filters::-webkit-scrollbar { display: none; }
}

.plato-archive-filter {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 18px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.plato-archive-filter:hover {
  color: var(--ink);
}
.plato-archive-filter.is-active {
  color: var(--ink);
  border-bottom-color: var(--terracotta);
}
.plato-archive-filter:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}
.plato-archive-filter-count {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--cream-soft);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0;
  font-weight: 400;
}
.plato-archive-filter.is-active .plato-archive-filter-count {
  background: var(--terracotta);
  color: var(--cream);
}

/* ---------- Grid ---------- */
.plato-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
@media (max-width: 980px) { .plato-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plato-archive-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Card ---------- */
.plato-archive-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.plato-archive-card[hidden] {
  display: none;
}
.plato-archive-card:hover {
  transform: translateY(-4px);
}
.plato-archive-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.plato-archive-card-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 6px;
}

.plato-archive-card-image {
  aspect-ratio: 4 / 5;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.plato-archive-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.plato-archive-card:hover .plato-archive-card-image img {
  transform: scale(1.03);
}
.plato-archive-card-num {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  background: var(--cream);
  padding: 4px 10px;
  border: 1px solid var(--line);
}

.plato-archive-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.plato-archive-card-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 8px;
  font-weight: 500;
}
.plato-archive-card-title {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-weight: 450;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.plato-archive-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
  flex: 1;
}
.plato-archive-card-meta {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.plato-archive-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plato-archive-card-meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Acciones (stepper de añadir) — fuera del <a> para mantener HTML válido */
.plato-archive-card-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plato-archive-add {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.plato-archive-add:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}
.plato-archive-add:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.plato-archive-add svg {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.plato-archive-add:hover svg {
  transform: rotate(90deg);
}
.plato-archive-card-actions-hint {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ---------- Estado vacío ---------- */
.plato-archive-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
  border: 1px dashed var(--line);
  background: var(--cream-soft);
}
.plato-archive-empty p {
  font-family: var(--bocados-font-heading, 'Fraunces', serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 350;
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.plato-archive-empty-reset {
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 100px;
  padding: 12px 24px;
  font-family: var(--bocados-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease;
}
.plato-archive-empty-reset:hover {
  background: var(--terracotta);
}