/*
 * Cabecera, menú y pie compartidos de Marconata (WO-133, WO-138, D-157).
 * Lo usan la web (WordPress 8080) y las landings de Django (BE-07), que copian
 * este fichero byte a byte (contrato C-5, ver README y fragmentos.sha256).
 *
 * La experiencia sigue al menú de oakame.com (análisis WO-125 y medidas en
 * vivo de la WO-138): barra flotante y opaca, fija, con filetes de 1 px; el
 * contenido enmarcado dentro de los mismos márgenes; paso de móvil a escritorio
 * en 1024 px. Código y recursos propios.
 *
 * Las reglas de la cabecera y del pie cuelgan de .mc-cabecera o .mc-pie con
 * dos clases de especificidad, para ganar a los estilos globales del host
 * (Elementor usa `.elementor-kit-N a`, de 0,1,1). Fuera de ese patrón quedan
 * los tokens (:root), el margen del body (body:has), html.mc-sin-scroll, el
 * marco (.mc-marco, una clase), el cambio de frase y foto (.mc-panel:has) y
 * los modos que pone el host (.mc-pagina-pedido, .mc-produccion).
 * !important solo en dos sitios: `hidden` sobre las celdas y "reducir
 * movimiento" sobre las transiciones.
 */

/* ---------- Tipografías locales (SIL OFL, licencias en fuentes/) ---------- */

@font-face {
  font-family: "MC Karla";
  src: url("/assets/fuentes/karla-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MC Bodoni Moda";
  src: url("/assets/fuentes/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MC Bodoni Moda";
  src: url("/assets/fuentes/bodoni-moda-latin-italica.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ----------
   Paleta: los únicos colores escritos de la hoja (WO-138; WO-501, D-384 y
   D-385). Para pasar a blanco y negro basta con cambiar estas líneas: el
   fondo y los grises suaves a blanco, la tinta, el acento y sus variantes a
   negro (todo lo demás sale de ellas). */

:root {
  --mc-color-fondo: #faf4ec;
  --mc-color-tinta: #36302b; /* carbón cálido (D-161); antes era el marrón de la marca */
  --mc-color-acento: #b47f67; /* canela (D-384, D-385): los adornos y los estados; 3,11:1 sobre el fondo */
  --mc-color-acento-fuerte: #966350; /* fondos con texto blanco y el texto canela sobre el fondo */
  --mc-color-acento-fuerte-hover: #7e523f;
  --mc-color-acento-suave: #f6ece6; /* el fondo del chip activo */
  --mc-color-sobre-acento: #fff; /* el texto sobre el acento fuerte */
  --mc-color-gris-suave: #ece6df;
  --mc-color-gris-control: #918780; /* bordes de los controles: 3:1 sobre el fondo (WCAG 1.4.11) */
  --mc-color-gris-texto: #6b625a;
  --mc-color-gris-punto: #c9c0b7;
  /* Los botones de llamada a la acción principales («Reservar» del hero,
     «Pide presupuesto», las franjas «Reserva y recoge»), con su propio token
     (WO-501): el carmín rosado (WO-504, D-387). El blanco da 4,63:1 sobre él y
     6,07:1 sobre su hover. «Reservar» de la barra no es uno de ellos (D-387). */
  --mc-color-cta: #c24d62;
  --mc-color-cta-texto: var(--mc-color-sobre-acento);
  --mc-color-cta-hover: #a63f53;
  /* Tinta suave (WO-373, D-312): el texto terciario (la descripción de un
     sabor). Sale de la tinta y el fondo (93, 87, 82 en RGB): 6,5:1 sobre el
     fondo. Nunca sobre el acento: ahí daría 3,6:1. */
  --mc-color-tinta-suave: color-mix(in srgb, var(--mc-color-tinta) 80%, var(--mc-color-fondo));

  --mc-color-velo: color-mix(in srgb, var(--mc-color-tinta) 45%, transparent);
  --mc-borde: 1px solid var(--mc-color-tinta);
  --mc-letra-rotulo: "MC Karla", system-ui, sans-serif;
  --mc-letra-titular: "MC Bodoni Moda", Georgia, serif;
  --mc-mayusculas: uppercase; /* rótulos de la barra y del panel (D-158) */

  /* Márgenes de la barra, los mismos que respeta el contenido (oakame:
     10 / 20 / 25 / 30 px) */
  --mc-margen: 0.625rem;
  /* Móvil y tableta (< 1024 px): la barra se ajusta al logo redondo, que
     mide 60 px (D-163), con 4 px de aire arriba y abajo: 68 px por dentro. */
  --mc-logo-redondo: 3.75rem;
  --mc-ancho-logo-redondo: 5rem; /* la celda del logo redondo: 80 px (D-163) */
  --mc-alto-barra: calc(var(--mc-logo-redondo) + 0.5rem + 2px);
  --mc-letra-celda: 0.75rem; /* 12 px fijos en todos los anchos (D-163) */
  --mc-logo-texto-ancho: 6.25rem; /* 100 px fijos de ancho (D-163, probado por el usuario) */
  --mc-ancho-desplegable: 7.5rem;
  --mc-alto-cabecera: calc(var(--mc-margen) + var(--mc-alto-barra));

  --mc-relleno-celda: 1.25rem;
  --mc-alto-fila-panel: 3rem;
  --mc-cuadradito: 4px;
  --mc-curva: cubic-bezier(0.23, 1, 0.32, 1);
  --mc-duracion-celda: 0.3s;
  --mc-duracion-panel: 0.45s;
  --mc-duracion-marquesina: 30s;
  --mc-ancho-foco: 2px;

  /* Tarjeta de sabor v3 (D-327, D-328; WO-399 de wonka, WO-400). Todo en
     px: con Astra, por debajo de 922 px, 1rem = 14,6 px. Colores: solo
     mezclas de los tres tokens de arriba (WO-138); contraste sobre
     --mc-color-fondo. */

  /* Espaciado: múltiplos de 8 */
  --mc-espacio-1: 8px;
  --mc-espacio-2: 16px;
  --mc-espacio-3: 24px;
  --mc-espacio-4: 32px;
  --mc-espacio-5: 40px;
  --mc-espacio-6: 48px;

  /* Topo: borde de la tarjeta y de los chips. #847e78, 3,67:1 (WCAG
     1.4.11). Es el gris de la pista del interruptor (WO-388, WO-389). */
  --mc-color-topo: color-mix(in srgb, var(--mc-color-tinta) 60%, var(--mc-color-fondo));
  /* Topo suave: el separador del modal. #ddd7cf, 1,31:1, decorativo; más
     claro que las rayas de tamaño (22 %, 1,50:1) y que el topo. */
  --mc-color-topo-suave: color-mix(in srgb, var(--mc-color-tinta) 15%, var(--mc-color-fondo));
  --mc-borde-topo: 1px solid var(--mc-color-topo);
  --mc-borde-topo-suave: 1px solid var(--mc-color-topo-suave);

  /* Letra. Categoría y descripción en --mc-color-tinta-suave (6,51:1);
     nombre y chips en --mc-color-tinta (11,90:1). */
  --mc-letra-categoria: 700 12px / 16px var(--mc-letra-rotulo);
  --mc-tracking-categoria: 0.08em; /* con text-transform: var(--mc-mayusculas) */
  --mc-letra-nombre: 400 24px / 28px var(--mc-letra-titular);
  --mc-letra-nombre-modal: 400 28px / 32px var(--mc-letra-titular);
  --mc-letra-descripcion: 400 14px / 16px var(--mc-letra-rotulo); /* 14/16 (D-331): excepción expresa del usuario a la regla de WO-239 (≥ 1,4 en un texto cortado) */
  --mc-letra-descripcion-modal: 400 16px / 20px var(--mc-letra-rotulo); /* interlineado igual que la Carta (D-330); entera, sin corte: no le toca la regla de WO-239 */
  --mc-letra-chip: 400 13px / 16px var(--mc-letra-rotulo);
  --mc-alto-chip: 24px; /* el del icono; el radio, la mitad */

  /* La cabecera es fija: anclas, "Saltar al contenido" y el foco no quedan
     debajo de ella (H4, WO-137). */
  scroll-padding-top: calc(var(--mc-alto-cabecera) + 0.5rem);
}

/* Por debajo de 400 px, menos relleno en las celdas: así "logo · Menú ·
   Reservar" cabe también a 320 px con la celda del logo de 80 px (D-163). */
@media (max-width: 24.99em) {
  :root {
    --mc-relleno-celda: 0.75rem;
  }
}

@media (min-width: 48em) {
  :root {
    --mc-margen: 1.25rem;
  }
}

@media (min-width: 75em) {
  :root {
    --mc-margen: 1.5625rem;
  }
}

/* Escritorio (≥ 1024 px), en las proporciones de oakame (medidas en vivo,
   WO-143). No todo crece a la vez (H1, WO-144):
   - el desplegable es el 17,5 % del ancho de la barra, con un mínimo de
     15rem (240 px): se queda en 240 px hasta unos 1422 px y desde ahí crece
     (241 px a 1440, 335 a 2000);
   - el margen es de 20 px de 1024 a 1199, de 25 px de 1200 a 1439 y desde
     1440 px el 2,08vw (30 px a 1440, 41,7 a 2000);
   - la letra de las celdas no crece: 0,75rem (12 px) en todos los anchos (D-163);
   - el alto es 3,2vw con un mínimo de 3rem + 2px (50 px): crece desde unos
     1563 px;
   - el logo de texto no crece: 100 px de ancho fijos (D-163).
   Los mínimos van en rem: respetan el tamaño de letra del usuario. */
@media (min-width: 64em) {
  :root {
    --mc-alto-barra: max(calc(3rem + 2px), 3.2vw);
    --mc-ancho-desplegable: max(15rem, calc((100vw - 2 * var(--mc-margen)) * 0.175));
  }
}

@media (min-width: 90em) {
  :root {
    --mc-margen: max(1.875rem, 2.0833vw);
  }
}

/* La cabecera fija y el pie a todo el ancho van de borde a borde de la
   ventana: la página que los incluye no lleva margen propio en el body.
   WO-481 (WO-479): y los márgenes, del color de la cabecera y el pie en
   cualquier anfitrión (en las páginas legales de Django salían en blanco).
   Solo el fondo: la letra, en .mc-marco, para no pisar la de WordPress. */
body:has(> .mc-cabecera, .mc-cabecera) {
  margin: 0;
  background: var(--mc-color-fondo);
}

.mc-cabecera [hidden],
.mc-pie [hidden] {
  display: none !important; /* `hidden` manda siempre sobre las celdas */
}

/* ---------- Marco del contenido ----------
   El host envuelve su contenido en .mc-marco (en WordPress lo hace
   ajustes-8080.css sobre #content): mismos márgenes que la barra, filete de
   1 px y empieza justo debajo de ella, compartiendo el filete.
   WO-481: el fondo, la letra y la tinta de la marca, para el anfitrión que
   no los pone (las páginas legales de Django salían en Times). */

.mc-marco {
  margin: calc(var(--mc-alto-cabecera) - 1px) var(--mc-margen) 0;
  border: var(--mc-borde);
  background: var(--mc-color-fondo);
  font-family: var(--mc-letra-rotulo);
  color: var(--mc-color-tinta);
}

/* ---------- Cabecera ---------- */

.mc-cabecera {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  padding: var(--mc-margen) var(--mc-margen) 0;
  /* Los márgenes no se comen los clics de la página que pasa por debajo. */
  pointer-events: none;
  font-family: var(--mc-letra-rotulo);
  color: var(--mc-color-tinta);
  line-height: 1.2;
}

/* La franja de encima de la barra (D-252, WO-259): crema translúcida con
   desenfoque, para que lo que pasa por debajo se intuya sin poder leerse; sin
   backdrop-filter, crema opaca. Va en un ::before y no en .mc-cabecera: un
   backdrop-filter en la cabecera la haría bloque contenedor del velo (fijo) y
   lo encogería a ella. Mismo nivel que el velo (z-index -1) y antes que él en
   el árbol: con el menú abierto, el velo queda por encima. No cambia ninguna
   medida (va por encima del padding), así que barras_fijas.js no lo nota. */
.mc-cabecera::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: var(--mc-margen);
  background: var(--mc-color-fondo);
  pointer-events: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mc-cabecera::before {
    background: color-mix(in srgb, var(--mc-color-fondo) 70%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

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

.mc-cabecera .mc-barra,
.mc-cabecera .mc-saltar,
.mc-cabecera .mc-velo,
.mc-cabecera .mc-cabecera__nota-cta {
  pointer-events: auto;
}

.mc-cabecera .mc-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mc-cabecera .mc-saltar {
  position: absolute;
  top: var(--mc-margen);
  left: var(--mc-margen);
  z-index: 2;
  padding: 0.875rem 1rem;
  background: var(--mc-color-tinta);
  color: var(--mc-color-fondo);
  font-weight: 700;
  text-decoration: underline;
  /* Sube su alto, más el margen de la barra, más 1 px: con -200 % solo se
     escondía si el enlace era más alto que el margen, y desde unos 2.250 px
     (--mc-margen = 2,0833vw) asomaba arriba como una franja oscura. */
  transform: translateY(calc(-100% - var(--mc-margen) - 1px));
}

.mc-cabecera .mc-saltar:focus {
  transform: none;
}

/* La barra: logo · desplegable · hueco · acciones, con filetes de 1 px */
.mc-cabecera .mc-barra {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(7.5rem, 1fr) auto;
  height: var(--mc-alto-barra);
  margin: 0;
  border: var(--mc-borde);
  background: var(--mc-color-fondo);
}

/* El filete entre la barra y el panel se pinta encima del panel (D-163). Al
   abrir, el panel entra deslizándose desde 0,75rem más arriba (@starting-style)
   y, mientras baja, tapaba el borde inferior de la barra (WO-147, H-1). Esta
   raya va sobre ese borde, de lado a lado, por encima de todo lo que haya
   debajo, en cualquier fotograma de la animación. */
.mc-cabecera .mc-barra::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  height: 1px;
  background: var(--mc-color-tinta);
  pointer-events: none;
}

.mc-cabecera .mc-barra__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mc-ancho-logo-redondo);
  height: 100%;
  padding: 0;
  border-inline-end: var(--mc-borde);
  color: var(--mc-color-tinta);
}

.mc-cabecera .mc-logo {
  display: block;
  fill: currentColor;
}

.mc-cabecera .mc-logo--texto {
  display: none;
  width: var(--mc-logo-texto-ancho);
  height: auto; /* sale de la proporción del SVG: unos 20 px */
  aspect-ratio: 533 / 108;
}

.mc-cabecera .mc-logo--redondo {
  width: var(--mc-logo-redondo);
  height: var(--mc-logo-redondo);
}

.mc-cabecera .mc-barra__menu {
  display: contents;
}

.mc-cabecera .mc-barra__acciones {
  grid-column: 3;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-cabecera .mc-barra__accion {
  position: relative;
  display: flex;
  margin: 0;
  border-inline-start: var(--mc-borde);
}

/* En el móvil, Carta y las campañas bajan al panel (como oakame); Reservar se
   queda siempre en la barra (decisión del usuario, WO-138). Por debajo de
   30em (480 px) no caben también el login y el idioma: bajan a la rejilla. */
.mc-cabecera .mc-barra__accion--texto,
.mc-cabecera .mc-barra__accion--icono {
  display: none;
}

@media (min-width: 30em) {
  .mc-cabecera .mc-barra__accion--icono {
    display: flex;
  }
}

/* Celda: el texto se escribe en minúscula de frase y se ve en mayúsculas */
.mc-cabecera .mc-celda {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 3rem;
  height: 100%;
  margin: 0;
  padding: 0 var(--mc-relleno-celda);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mc-color-tinta);
  font: 700 var(--mc-letra-celda) / 1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--mc-duracion-celda) var(--mc-curva);
}

/* Activo o con el ratón encima: fondo oscuro y texto claro. El fondo sube
   desde abajo. La celda crea su propio contexto de apilamiento y el fondo va
   por debajo de todo su contenido: si no, se pintaba encima del texto suelto
   (Carta, Reservar, campañas), que pasaba a claro pero quedaba tapado (D-162). */
.mc-cabecera .mc-celda {
  isolation: isolate;
}

.mc-cabecera .mc-celda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mc-color-tinta);
  transform: translateY(101%);
  transition: transform var(--mc-duracion-celda) var(--mc-curva);
}

.mc-cabecera .mc-celda:focus-visible::before,
.mc-cabecera .mc-celda[aria-expanded="true"]::before {
  transform: none;
}

.mc-cabecera .mc-celda:focus-visible,
.mc-cabecera .mc-celda[aria-expanded="true"] {
  color: var(--mc-color-fondo);
}

@media (hover: hover) {
  .mc-cabecera .mc-celda:hover::before {
    transform: none;
  }

  .mc-cabecera .mc-celda:hover {
    color: var(--mc-color-fondo);
  }
}

/* La sección actual (WO-373; WO-501, D-385.2 y D-386: navegación activa).
   La celda con aria-current="page" se queda rellena como su hover: tinta, con
   el texto del color del fondo, en negrita (mayúsculas por CSS, D-158.2); sin
   el cuadradito de WO-373. Se distingue del resto por el relleno (13:1 frente
   al fondo), no por un tono (WCAG 1.4.1). aria-current="true" (el idioma) no
   se pinta. */
.mc-cabecera .mc-celda[aria-current="page"]::before {
  transform: none;
}

.mc-cabecera .mc-celda[aria-current="page"] {
  color: var(--mc-color-fondo);
  font-weight: 700;
}

/* "Reservar" tiene el mismo diseño que las demás celdas (D-161; D-387: sin
   el carmín del CTA): sin relleno propio, el hover en tinta y, si es la
   página actual, como el hover (D-386). Conserva .mc-celda--cta, cta-reservar
   y data-ubicacion. */

/* Celdas de campaña (D-227): las pone menu.js detrás de "Reservar" con el
   nombre que manda el backend. Un nombre largo se corta con puntos
   suspensivos y el texto entero sigue en el DOM, así que el lector de
   pantalla lo lee completo (WO-238 §3.4). En la barra, además, la celda no
   pasa de 12rem para no empujar a las demás (D-163). */
.mc-cabecera .mc-barra__accion .mc-celda--campana {
  max-width: 12rem;
}

/* D-285 (sustituye a WO-238 P1): "Reservar" y las campañas forman una lista
   que manda el backend (menu.js pone las celdas en orden y marca la primera).
   Desde 1024 px se ven todas en la barra; por debajo, solo la primera, en la
   celda de la derecha donde estaba "Reservar" (las demás van en el panel).
   Sin campañas, menu.js no marca nada y todo queda como antes. Un nombre
   largo se corta con puntos suspensivos: la celda no pasa del sitio libre. */
.mc-cabecera .mc-barra__accion--campana {
  min-width: 0;
}

@media not all and (min-width: 64em) {
  .mc-cabecera .mc-barra__acciones[data-mc-mezcla] {
    min-width: 0;
  }

  .mc-cabecera .mc-barra__acciones[data-mc-mezcla] [data-mc-entrada]:not([data-mc-primera]) {
    display: none;
  }
}

/* En la rejilla del panel, la columna no crece con el nombre: se corta. */
.mc-cabecera .mc-panel__extra-celda[data-mc-campana] {
  min-width: 0;
}

/* line-height de 1.5 y no el 1 de la celda: con overflow: hidden, una caja
   del alto justo de la letra recortaba la tilde de las mayúsculas ("Ó"). */
.mc-cabecera .mc-celda__texto {
  min-width: 0;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
}

/* "Menú" y su flecha, centrados en la celda (D-161) */
.mc-cabecera .mc-celda--desplegable {
  justify-content: center;
  width: 100%;
}

/* WO-572 (tarjeta Pb9jThy9): sin el texto «Cerrar». Abierto, solo la X, centrada en la celda; «Menú» y la flecha
   se ocultan sin dejar su sitio, así que el ancho no cambia. El nombre accesible lo lleva el aria-label, que
   menu.js pasa de «Menú» a «Cerrar menú» junto con aria-expanded. */
.mc-cabecera .mc-celda__rotulos {
  display: grid;
}

.mc-cabecera .mc-celda__rotulo {
  grid-area: 1 / 1;
}

.mc-cabecera .mc-celda__aspa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.mc-cabecera .mc-celda[aria-expanded="true"] .mc-celda__aspa {
  visibility: visible;
}

/* Solo el botón del menú (el que tiene nombre abierto): la flecha del idioma sigue a la vista y gira al abrirlo (D-161) */
.mc-cabecera .mc-celda[data-mc-nombre-abierto][aria-expanded="true"] .mc-celda__rotulos,
.mc-cabecera .mc-celda[data-mc-nombre-abierto][aria-expanded="true"] .mc-celda__flecha {
  visibility: hidden;
}

.mc-cabecera .mc-celda__flecha {
  flex: none;
  transition: transform var(--mc-duracion-celda) var(--mc-curva);
}

/* La flecha mira hacia arriba con el menú abierto y al pasar el ratón o
   llegar con el teclado, como en oakame (D-161) */
.mc-cabecera .mc-celda[aria-expanded="true"] .mc-celda__flecha,
.mc-cabecera .mc-celda--desplegable:focus-visible .mc-celda__flecha {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .mc-cabecera .mc-celda--desplegable:hover .mc-celda__flecha {
    transform: rotate(180deg);
  }
}

.mc-cabecera .mc-celda--icono {
  width: calc(var(--mc-alto-barra) - 2px);
  padding: 0;
}

.mc-cabecera .mc-celda__icono {
  width: 1.6em;
  height: 1.6em;
}

.mc-cabecera .mc-celda--idioma {
  gap: 0.375rem;
  padding: 0 0.875rem;
}

.mc-cabecera .mc-celda--idioma abbr {
  text-decoration: none;
}

/* Selector de idioma: un segundo desplegable bajo su celda */
.mc-cabecera .mc-idiomas {
  position: absolute;
  top: 100%;
  right: -1px;
  min-width: 10rem;
  margin: 0;
  padding: 0.25rem 0;
  border: var(--mc-borde);
  background: var(--mc-color-fondo);
  list-style: none;
}

.mc-cabecera .mc-idiomas__enlace {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: var(--mc-color-tinta);
  font: 700 0.75rem/1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
}

.mc-cabecera .mc-idiomas__enlace[aria-current="true"] {
  text-decoration: underline;
}

/* Foco visible: anillo del color del texto, que siempre contrasta con su fondo */
.mc-cabecera :focus-visible {
  outline: var(--mc-ancho-foco) solid currentColor;
  outline-offset: -5px;
}

.mc-cabecera .mc-saltar:focus-visible {
  outline-offset: 2px;
  outline-color: var(--mc-color-tinta);
}

/* Hueco para la línea de información junto a "Reservar" (maru, art. 98.3
   TRLGDCU); se muestra quitando `hidden` cuando llegue el texto. */
.mc-cabecera .mc-cabecera__nota-cta {
  margin: 0;
  padding: 0.375rem var(--mc-relleno-celda);
  border: var(--mc-borde);
  border-top: 0;
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
  font-size: 0.75rem;
  text-align: end;
}

/* ---------- Panel desplegable ---------- */

/* El panel cuelga debajo del borde inferior de la barra. top: 100% se mide
   desde la caja de relleno de la barra, que acaba encima de su borde: el panel
   lo tapaba con su fondo y el filete entre la barra y el panel desaparecía
   (D-161.6, WO-144). Durante la animación de entrada lo protege además el
   ::after de .mc-barra. */
.mc-cabecera .mc-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: -1px;
  left: -1px;
  display: grid;
  grid-template-columns: 1fr;
  max-height: calc(100dvh - var(--mc-alto-cabecera) - var(--mc-margen));
  overflow-y: auto;
  border: var(--mc-borde);
  border-top: 0;
  background: var(--mc-color-fondo);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--mc-duracion-panel) var(--mc-curva),
    transform var(--mc-duracion-panel) var(--mc-curva);
}

@starting-style {
  .mc-cabecera .mc-panel {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

/* Fila de título del desplegable (móvil, como "PRODUCTS" en oakame) */
.mc-cabecera .mc-panel__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mc-alto-fila-panel);
  margin: 0;
  border-bottom: var(--mc-borde);
  color: var(--mc-color-tinta);
  font: 700 0.75rem/1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-transform: var(--mc-mayusculas);
}

.mc-cabecera .mc-panel__enlaces {
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
}

.mc-cabecera .mc-panel__enlaces li {
  margin: 0;
}

/* WO-527 (el usuario): el desplegable en cuatro grupos (Elaboración y Obrador;
   Por qué elegirnos y Reconocimientos; Eventos; Quiénes somos, Prensa,
   Contacto y Preguntas frecuentes). El primer enlace de cada grupo, desde el
   segundo, lleva data-mc-grupo y 32 px de aire encima (16 + 16, múltiplos de
   8, R-1 de neo), con una línea de 1 px en medio que no ocupa sitio: un
   ::before en posición absoluta, sin contenido. El lector de pantalla no lo
   anuncia y no se puede enfocar; la lista sigue siendo una sola, con sus
   nueve enlaces en el orden nuevo. Dentro de cada grupo, la separación de
   siempre. */
.mc-cabecera .mc-panel__enlaces li[data-mc-grupo] {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
}

.mc-cabecera .mc-panel__enlaces li[data-mc-grupo]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--mc-color-topo-suave);
}

.mc-cabecera .mc-panel__enlace {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--mc-alto-fila-panel);
  padding: 0 var(--mc-relleno-celda);
  color: var(--mc-color-tinta);
  font: 700 0.875rem/1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
  transition: transform var(--mc-duracion-celda) var(--mc-curva),
    background-color var(--mc-duracion-celda) var(--mc-curva),
    color var(--mc-duracion-celda) var(--mc-curva);
}

/* Cuadradito delante del enlace con el foco o de la sección actual */
.mc-cabecera .mc-panel__enlace::before {
  content: "";
  position: absolute;
  left: calc(var(--mc-relleno-celda) - 0.875rem);
  width: var(--mc-cuadradito);
  height: var(--mc-cuadradito);
  background: var(--mc-color-tinta);
  opacity: 0;
  transition: opacity var(--mc-duracion-celda) var(--mc-curva);
}

.mc-cabecera .mc-panel__enlace:focus-visible {
  transform: translateX(0.5rem);
}

.mc-cabecera .mc-panel__enlace:focus-visible::before {
  opacity: 1;
}

/* Con el ratón encima, la fila se rellena de tinta, sin cuadradito; la de la
   sección actual, igual (WO-501, D-386, más abajo). */
@media (hover: hover) {
  .mc-cabecera .mc-panel__enlace:hover {
    background: var(--mc-color-tinta);
    color: var(--mc-color-fondo);
  }
}

/* WO-501 (D-386): en el panel, el mismo criterio que en la barra: la sección
   actual, rellena como su hover (tinta, el texto del color del fondo), sin el
   cuadradito de WO-373. */
.mc-cabecera .mc-panel__enlace[aria-current="page"] {
  background: var(--mc-color-tinta);
  color: var(--mc-color-fondo);
  transform: none;
}

.mc-cabecera .mc-panel__enlace:focus-visible {
  outline-offset: 2px;
}

/* Rejilla de 2 columnas con lo que no cabe en la barra del móvil */
.mc-cabecera .mc-panel__extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--mc-borde);
}

.mc-cabecera .mc-panel__extra-celda {
  display: flex;
  min-height: calc(var(--mc-alto-fila-panel) + 1px); /* 48 px de toque más el filete */
  margin: 0;
  border-bottom: var(--mc-borde);
}

.mc-cabecera .mc-panel__extra-celda:nth-child(odd) {
  border-inline-end: var(--mc-borde);
}

.mc-cabecera .mc-panel__extra-celda .mc-celda {
  width: 100%;
}

/* Login e idioma en la rejilla solo cuando no caben en la barra (< 30em). Van
   detrás de la regla general de la celda para ganarle por orden, con dos
   clases, y así el interruptor de la v1.0.0 (al final) los sigue ocultando. */
@media (min-width: 30em) {
  .mc-cabecera .mc-panel__extra-celda--icono {
    display: none;
  }
}

.mc-cabecera .mc-panel__marquesina,
.mc-cabecera .mc-panel__imagen {
  display: none;
}

/* ---------- Marquesina: el nombre de la sección ---------- */

.mc-cabecera .mc-panel__marquesina {
  position: relative;
  overflow: hidden;
  border-inline-start: var(--mc-borde);
}

/* Cuadraditos en las esquinas (decorativos) */
.mc-cabecera .mc-panel__marquesina::after,
.mc-cabecera .mc-panel__imagen::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) top left / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) top right / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) bottom left / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) bottom right / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat;
}

.mc-cabecera .mc-marquesinas {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
}

.mc-cabecera .mc-marquesina {
  grid-area: 1 / 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.mc-cabecera .mc-marquesina--defecto {
  opacity: 1;
}

.mc-cabecera .mc-marquesina__pista {
  display: flex;
  width: max-content;
  animation: mc-desplazar var(--mc-duracion-marquesina) linear infinite;
}

.mc-cabecera .mc-marquesina__texto {
  flex: none;
  padding-inline-end: 0.3em;
  color: var(--mc-color-tinta);
  font: 400 clamp(5rem, 11vw, 11rem) / 1 var(--mc-letra-titular);
  letter-spacing: -0.01em;
  text-transform: var(--mc-mayusculas);
  white-space: nowrap;
}

.mc-cabecera .mc-flor {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline: 0.15em;
  vertical-align: 0.15em;
  fill: var(--mc-color-acento);
}

.mc-cabecera .mc-flor__centro {
  fill: var(--mc-color-tinta);
}

@keyframes mc-desplazar {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* WCAG 2.2.2: se para con el ratón encima de la marquesina o con el foco
   dentro del panel */
.mc-cabecera .mc-panel__marquesina:hover .mc-marquesina__pista,
.mc-cabecera .mc-panel:focus-within .mc-marquesina__pista {
  animation-play-state: paused;
}

/* ---------- Imagen: una por opción ---------- */

.mc-cabecera .mc-panel__imagen {
  position: relative;
  overflow: hidden;
  border-inline-start: var(--mc-borde);
}

.mc-cabecera .mc-panel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity 0.25s linear,
    transform 0.6s var(--mc-curva);
}

.mc-cabecera .mc-panel__foto--defecto {
  opacity: 1;
  transform: none;
}

/* WO-494 (D-382, WO-492 de wonka): las fotos nuevas, en 1:1 y con su enfoque.
   La caja cambia de proporción (de 2:3 a casi 1:1 desde 1200 px; hasta 2:1
   de 1024 a 1199): object-position deja el sujeto dentro en todas. */
.mc-cabecera .mc-panel__foto--contacto {
  object-position: 50% 35%;
}

.mc-cabecera .mc-panel__foto--por-que-elegirnos {
  object-position: 40% 50%;
}

.mc-cabecera .mc-panel__foto--reconocimientos {
  object-position: 50% 50%;
}

.mc-cabecera .mc-panel__foto--prensa {
  object-position: 50% 50%;
}

.mc-cabecera .mc-panel__foto--quienes-somos {
  object-position: 50% 50%;
}

/* Al pasar por una opción (o llegar con el teclado) entran su frase y su foto.
   Preguntas frecuentes (D-351.2) no tiene foto propia (data-mc-sin-foto): con
   ella se queda la de por defecto. Contacto sí la tiene desde WO-494 (D-382). */
.mc-panel:has(.mc-panel__enlace:is(:hover, :focus-visible)) .mc-marquesina--defecto,
.mc-panel:has(:not([data-mc-sin-foto]) > .mc-panel__enlace:is(:hover, :focus-visible)) .mc-panel__foto--defecto {
  opacity: 0;
}

.mc-panel:has([data-mc-seccion="elaboracion-artesanal"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--elaboracion-artesanal, .mc-panel__foto--elaboracion-artesanal),
.mc-panel:has([data-mc-seccion="eventos"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--eventos, .mc-panel__foto--eventos),
.mc-panel:has([data-mc-seccion="nuestro-obrador"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--nuestro-obrador, .mc-panel__foto--nuestro-obrador),
.mc-panel:has([data-mc-seccion="por-que-elegirnos"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--por-que-elegirnos, .mc-panel__foto--por-que-elegirnos),
.mc-panel:has([data-mc-seccion="reconocimientos"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--reconocimientos, .mc-panel__foto--reconocimientos),
.mc-panel:has([data-mc-seccion="prensa"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--prensa, .mc-panel__foto--prensa),
.mc-panel:has([data-mc-seccion="quienes-somos"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--quienes-somos, .mc-panel__foto--quienes-somos),
.mc-panel:has([data-mc-seccion="contacto"] .mc-panel__enlace:is(:hover, :focus-visible)) :is(.mc-marquesina--contacto, .mc-panel__foto--contacto),
.mc-panel:has([data-mc-seccion="preguntas-frecuentes"] .mc-panel__enlace:is(:hover, :focus-visible)) .mc-marquesina--preguntas-frecuentes {
  opacity: 1;
  transform: none;
}

/* ---------- Velo ---------- */

.mc-cabecera .mc-velo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--mc-color-velo);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s linear,
    visibility 0s linear 0.3s;
}

.mc-cabecera--abierta .mc-velo {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s linear;
}

html.mc-sin-scroll {
  overflow: hidden;
}

/* ---------- Pie (patrón de oakame, WO-138) ----------
   A todo el ancho, con filetes de 1 px. En el móvil, una columna en el orden
   del HTML (que es el de tabulación): marca, secciones, contacto, legal y la
   palabra grande. Desde 1200 px, tres columnas (14 % · 72 % · 14 %) con las
   laterales a toda la altura y su contenido abajo. */

/* Un solo filete donde el pie se junta con lo de encima (WO-439): el pie
   sube 1 px y su filete de arriba cae sobre el de abajo del marco (en Django,
   .mc-marco; en WordPress, #content, que enmarca ajustes-8080.css), en lugar
   de pintarse debajo y verse doble. Vale para cualquier anfitrión, así que el
   marco conserva su filete de abajo. */
.mc-pie {
  /* El cuerpo del nombre gigante del pie (.mc-pie__nombre): aquí, y no en él, para que el logo de SH (WO-653)
     pueda calcular el alto de su franja */
  --mc-pie-nombre: clamp(3.5rem, 15vw, 18rem);
  display: grid;
  grid-template-columns: 1fr;
  margin-top: -1px;
  border-top: var(--mc-borde);
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
  font: 400 0.875rem/1.5 var(--mc-letra-rotulo);
}

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

.mc-pie p {
  margin: 0 0 0.75rem;
  color: var(--mc-color-tinta);
  font: inherit;
}

/* Cuadraditos en las esquinas de cada bloque, como en el menú */
.mc-pie .mc-pie__marca,
.mc-pie .mc-pie__lateral {
  position: relative;
}

.mc-pie .mc-pie__marca::after,
.mc-pie .mc-pie__lateral::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  pointer-events: none;
  background:
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) top left / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) top right / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) bottom left / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat,
    linear-gradient(var(--mc-color-acento), var(--mc-color-acento)) bottom right / var(--mc-cuadradito) var(--mc-cuadradito) no-repeat;
}

/* Marca: logo, frase y redes, centrados */
.mc-pie .mc-pie__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem var(--mc-relleno-celda) 2rem;
  text-align: center;
}

.mc-pie .mc-pie__logo-enlace {
  display: inline-flex;
  margin-bottom: 1.5rem;
  color: var(--mc-color-tinta);
}

/* D-162: el logo del pie, un 50 % más grande (de 4 a 6rem) */
.mc-pie .mc-pie__logo {
  display: block;
  width: 6rem;
  height: 6rem;
  fill: currentColor;
}

.mc-pie .mc-pie__lema {
  max-width: 28rem;
  margin-bottom: 1.5rem;
  font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem) / 1.2 var(--mc-letra-rotulo);
  text-transform: var(--mc-mayusculas);
}

.mc-pie .mc-pie__redes {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: var(--mc-mayusculas);
}

/* Cuadrícula de secciones (D-351.2): 11 entradas (Carta, Reservar, las 7
   secciones, Contacto y Preguntas frecuentes), o 10 cuando menu.js quita
   «Reservar» (D-348). En el móvil, de 2 en 2, y la última entera solo si
   queda sola; en escritorio, 2 · 2 · 2 · 2 · 3 con 11 y 2 · 2 · 2 · 2 · 2 con 10. */
.mc-pie .mc-pie__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--mc-borde);
}

.mc-pie .mc-pie__rejilla li {
  display: flex;
  margin: 0;
  border-bottom: var(--mc-borde);
}

/* Misma especificidad en todas las reglas de filetes de la rejilla: manda el
   orden (móvil primero, escritorio después). */
.mc-pie .mc-pie__rejilla li:nth-child(odd) {
  border-inline-end: var(--mc-borde);
}

.mc-pie .mc-pie__rejilla li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-inline-end: 0;
}

.mc-pie .mc-pie__celda {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  overflow: hidden;
  color: var(--mc-color-tinta);
  font: 700 0.875rem/1.2 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
  transition: color var(--mc-duracion-celda) var(--mc-curva);
}

/* Activo o con el ratón encima: fondo oscuro y texto claro, como en la barra */
.mc-pie .mc-pie__celda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mc-color-tinta);
  transform: translateY(101%);
  transition: transform var(--mc-duracion-celda) var(--mc-curva);
}

.mc-pie .mc-pie__celda > * {
  position: relative;
}

.mc-pie .mc-pie__celda:focus-visible::before {
  transform: none;
}

.mc-pie .mc-pie__celda:focus-visible {
  color: var(--mc-color-fondo);
}

@media (hover: hover) {
  .mc-pie .mc-pie__celda:hover::before {
    transform: none;
  }

  .mc-pie .mc-pie__celda:hover {
    color: var(--mc-color-fondo);
  }
}

/* El texto de la celda va por encima del fondo que sube */
.mc-pie .mc-pie__celda {
  isolation: isolate;
}

.mc-pie .mc-pie__celda::before {
  z-index: -1;
}

.mc-pie .mc-pie__celda[aria-current="page"] {
  text-decoration: underline;
}

/* Columnas laterales: contacto (izquierda) y legal (derecha) */
.mc-pie .mc-pie__lateral {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem var(--mc-relleno-celda) 1.5rem;
  border-bottom: var(--mc-borde);
}

/* La cita, abajo a la izquierda (donde oakame pone su sello): Bodoni en
   cursiva, discreta. Sin atribución (D-381, WO-483): la frase sola, al pie
   de la columna, sin margen debajo. */
.mc-pie .mc-pie__cita {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: "“" "”";
}

.mc-pie .mc-pie__cita-texto {
  margin: 0;
  color: var(--mc-color-tinta);
  font: italic 400 1.0625rem/1.35 var(--mc-letra-titular);
}

.mc-pie .mc-pie__cita-texto::before {
  content: open-quote;
}

.mc-pie .mc-pie__cita-texto::after {
  content: close-quote;
}

.mc-pie .mc-pie__legales {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.mc-pie .mc-pie__legales li {
  margin: 0;
}

.mc-pie .mc-pie__titular {
  margin: 0;
  padding-top: 1rem;
  border-top: var(--mc-borde);
}

/* Enlaces de texto: subrayados (wonka), con área de toque cómoda. Nunca menos
   de 24 px (WCAG 2.5.8; WO-274): con la raíz fluida del tema, 1.5rem se
   quedaba en 21,9 px en el móvil. */
.mc-pie .mc-pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: max(1.5rem, 24px);
  color: var(--mc-color-tinta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mc-pie .mc-pie__enlace:hover {
  color: var(--mc-color-tinta);
  text-decoration-thickness: 2px;
}

.mc-pie .mc-pie__enlace[aria-current="page"] {
  font-weight: 700;
}

/* «Configurar cookies» (D-275, WO-294): un <button> que abre las preferencias
   del banner único (cookie_consent.js de Django engancha
   [data-mc-configurar-cookies]). Se ve como los enlaces de texto de su lista:
   el tema (Astra) y el kit de Elementor pintan los button con fondo, borde,
   relleno, su color y su letra, y aquí se anulan con más especificidad. */
.mc-pie .mc-pie__boton {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  appearance: none;
  cursor: pointer;
}

.mc-pie .mc-pie__boton:hover,
.mc-pie .mc-pie__boton:focus,
.mc-pie .mc-pie__boton:active {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mc-color-tinta);
}

.mc-pie :focus-visible {
  outline: var(--mc-ancho-foco) solid var(--mc-color-tinta);
  outline-offset: 2px;
}

.mc-pie .mc-pie__celda:focus-visible {
  outline-color: var(--mc-color-fondo);
  outline-offset: -5px;
}

/* La palabra enorme, cortada por abajo (y por los lados si hace falta) */
.mc-pie .mc-pie__nombre {
  /* Se ve casi toda la altura de las mayúsculas y se corta por abajo */
  height: calc(var(--mc-pie-nombre) * 0.74);
  overflow: hidden;
  text-align: center;
}

.mc-pie .mc-pie__nombre-texto {
  display: block;
  margin-inline: -50vw;
  color: var(--mc-color-tinta);
  font: 500 var(--mc-pie-nombre) / 1 var(--mc-letra-titular);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Tableta (≥ 48em, 768 px) ---------- */

@media (min-width: 48em) {
  .mc-pie .mc-pie__lateral {
    padding-inline: 2.5rem;
  }
}

/* ---------- Escritorio (≥ 64em, 1024 px, el corte de oakame) ---------- */

@media (min-width: 64em) {
  :root {
    --mc-alto-fila-panel: 2.25rem;
  }

  .mc-cabecera .mc-barra {
    grid-template-columns: auto var(--mc-ancho-desplegable) 1fr auto;
  }

  .mc-cabecera .mc-barra__logo {
    width: auto;
    padding: 0 1.25rem;
  }

  .mc-cabecera .mc-logo--texto {
    display: block;
  }

  .mc-cabecera .mc-logo--redondo {
    display: none;
  }

  .mc-cabecera .mc-celda--desplegable {
    border-inline-end: var(--mc-borde);
  }

  .mc-cabecera .mc-barra__acciones {
    grid-column: 4;
  }

  .mc-cabecera .mc-barra__accion--texto {
    display: flex;
  }

  /* 1024-1199: como oakame, un tercio de enlaces y dos de foto. El alto sale
     de las filas del desplegable (D-351.2: 9, con Contacto y Preguntas
     frecuentes; el relleno de 1,25rem arriba y abajo de .mc-panel__enlaces),
     sin bajar de los 18rem que tenía con 7. Si cambia el número de entradas,
     cambia aquí. */
  .mc-cabecera .mc-panel {
    --mc-entradas-del-desplegable: 9;
    --mc-separadores-del-desplegable: 3;  /* WO-527: 32 px cada uno (16 + 16; la línea no ocupa sitio) */
    grid-template-columns: 1fr 2fr;
    height: max(18rem, calc(2.5rem + var(--mc-entradas-del-desplegable) * var(--mc-alto-fila-panel)
      + var(--mc-separadores-del-desplegable) * 32px));
    min-height: 16rem;
  }

  .mc-cabecera .mc-panel__titulo,
  .mc-cabecera .mc-panel__extra {
    display: none;
  }

  .mc-cabecera .mc-panel__enlaces {
    padding: 1.25rem 0;
  }

  .mc-cabecera .mc-panel__enlace {
    font-size: 0.75rem;
  }

  .mc-cabecera .mc-panel__imagen {
    display: block;
  }

  .mc-pie .mc-pie__rejilla {
    grid-template-columns: repeat(6, 1fr);
  }

  .mc-pie .mc-pie__rejilla li {
    grid-column: span 3;
  }

  /* Con 11, las tres últimas comparten la fila (como las filas de oakame) */
  .mc-pie .mc-pie__rejilla:has(> li:nth-child(11)) li:nth-child(n + 9) {
    grid-column: span 2;
  }

  .mc-pie .mc-pie__rejilla li:nth-child(n) {
    border-inline-end: var(--mc-borde);
  }

  .mc-pie .mc-pie__rejilla li:nth-child(even) {
    border-inline-end: 0;
  }

  .mc-pie .mc-pie__rejilla:has(> li:nth-child(11)) li:nth-child(10) {
    border-inline-end: var(--mc-borde);
  }
}

/* Desde 1200 px, la marquesina entre los enlaces y la foto (como oakame) */
@media (min-width: 75em) {
  .mc-cabecera .mc-panel {
    grid-template-columns: 7fr 12fr 5fr;
  }

  .mc-pie {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas:
      "contacto marca legal"
      "contacto secciones legal"
      "contacto nombre legal";
    grid-template-rows: auto auto 1fr;
  }

  .mc-pie .mc-pie__marca {
    grid-area: marca;
  }

  .mc-pie .mc-pie__secciones {
    grid-area: secciones;
  }

  .mc-pie .mc-pie__nombre {
    grid-area: nombre;
    align-self: end;
    --mc-pie-nombre: clamp(4.5rem, 11.5vw, 18rem);
  }

  .mc-pie .mc-pie__lateral {
    padding: 2rem 0.75rem 0.75rem;
    border-bottom: 0;
    font-size: 0.75rem;
  }

  .mc-pie .mc-pie__lateral--cita {
    grid-area: contacto;
    border-inline-end: var(--mc-borde);
  }

  .mc-pie .mc-pie__lateral--legal {
    grid-area: legal;
    border-inline-start: var(--mc-borde);
    text-align: end;
  }

  .mc-cabecera .mc-panel__marquesina {
    display: block;
  }
}

/* ---------- Reducir movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .mc-cabecera *,
  .mc-cabecera *::before,
  .mc-cabecera *::after,
  .mc-pie *,
  .mc-pie *::before,
  .mc-pie *::after {
    /* La preferencia del usuario manda sobre las transiciones de cada celda,
       que tienen más especificidad (.mc-cabecera .mc-celda::before): sin
       !important, seguían animándose (WO-144). */
    transition: none !important;
  }

  .mc-cabecera .mc-marquesina__pista {
    animation: none;
  }
}

/* ---------- Landings de pedido: ya se está reservando (wonka) ----------
   Al final del fichero para ganar, con la misma especificidad, a las reglas de
   las celdas y del pie. */

.mc-pagina-pedido .cta-reservar,
.mc-pagina-pedido .mc-barra__accion:has(.cta-reservar),
.mc-pagina-pedido .mc-panel__extra-celda:has(.cta-reservar) {
  display: none;
}

/* ---------- Modo producción (H2, WO-142) ----------
   El bloque firmado no se edita para cambiar de modo: el host pone la clase
   mc-produccion en <body> (como mc-pagina-pedido) y se ocultan login e
   idioma. Las campañas no llevan la marca y se ven igual (D-227.5). Sin la
   clase, es la vista previa. Va al final para
   ganar, con la misma especificidad, a las reglas de las celdas. */
.mc-produccion .mc-cabecera [data-mc-vista-previa] {
  display: none;
}

/* ---------- «Reservar» según la disponibilidad (D-348, D-350 P-4 y P-9; WO-416 §5.1) ----------
   Todo «Reservar» que lleva a la reserva va marcado con data-mc-reservar (la
   barra, el panel, el pie y los botones de la web). menu.js escribe
   data-mc-reserva="si" o "no" en <html> con la respuesta de las campañas.
   - Mientras no llega, está en su sitio pero no se ve: así nunca aparece un
     «Reservar» que después se quita, y nada salta.
   - Con "no", fuera (menu.js además lo quita del documento).
   - Sin JS (@media scripting), se ve: la reserva no funcionaría, pero el
     escaparate lo pinta el servidor y dice lo que toque. */
@media (scripting: enabled) {
  html:not([data-mc-reserva]) [data-mc-reservar] {
    visibility: hidden;
  }
}

html[data-mc-reserva="no"] [data-mc-reservar] {
  display: none;
}

/* Sin «Reservar» ni campañas, el panel del móvil se queda solo con Carta (y,
   en la vista previa, la cuenta y el idioma): Carta ocupa la fila entera en
   lugar de media fila con un hueco al lado. */
.mc-cabecera .mc-panel__extra:not(:has(> [data-mc-reservar], > [data-mc-campana])) > .mc-panel__extra-celda:first-child {
  grid-column: 1 / -1;
  border-inline-end: 0;
}

/* ---------- Botones flotantes comunes (D-300, D-301, D-303, D-304; WO-345b) ----------
   Un solo bloque para la web y para Django, detrás del pie: la rueda de las
   cookies (abajo a la izquierda, 40 px a 20 px del borde) y, abajo a la
   derecha, «volver arriba» e «ir al final», cuadrados de 31,5 px a 30 px del
   borde y con 12,5 px de hueco (la geometría de landings.css), en los colores
   de la paleta (WO-138: ningún color fuera de los tres tokens).
   Capas (WO-345c): encima de la cabecera (1000) y, con ella, del panel del
   menú y de su velo, que no tienen z-index propio y van dentro de la
   cabecera: la rueda se ve y se pulsa también con el menú abierto (D-300,
   D-303); las flechas, mientras tanto, se esconden (menu.js). Encima también
   del aviso de cookies (2000). Debajo solo de los dos diálogos modales de
   cookie_consent.js: el panel de preferencias de cookies (2100) y el visor
   de los documentos legales (2200).
   El bloque entero sube con la mayor de tres alturas: la del carro u otra
   reserva de la página (--mc-flotantes-reserva, la pone la anfitriona), la de
   la franja del logotipo del pie más 8 px (--mc-flotantes-pie, la escribe
   menu.js) y la del aviso de cookies (--mc-flotantes-aviso, la escribe
   cookie_consent.js) más 16 px de separación (WO-508: pegada al aviso, la
   rueda casi lo pisaba; sin aviso, el término vale 0). */
.mc-flotantes {
  position: fixed;
  inset-inline: 0;
  bottom: max(calc(20px + var(--mc-flotantes-reserva, 0px) + env(safe-area-inset-bottom, 0px)), var(--mc-flotantes-pie, 0px), calc(var(--mc-flotantes-aviso, -16px) + 16px));
  z-index: 2050;
  height: 0;
  pointer-events: none;
}

.mc-flotantes .mc-flotante {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--mc-color-fondo);
  cursor: pointer;
  pointer-events: auto;
}

.mc-flotantes .mc-flotante[hidden] {
  display: none;
}

.mc-flotantes .mc-flotante--cookies {
  left: 20px;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mc-color-tinta);
}

.mc-flotantes .mc-flotante--cookies svg {
  width: 26px;
  height: 26px;
}

/* El bloque está a 20 px; los cuadrados, a 30 px, como en las landings */
.mc-flotantes .mc-flotante--arriba,
.mc-flotantes .mc-flotante--abajo {
  right: 30px;
  width: 31.5px;
  height: 31.5px;
  border-radius: 2px;
  background: var(--mc-color-tinta);
}

/* D-315 (WO-373): «volver arriba» (∧) encima e «ir al final» (∨) debajo.
   Sola, cada flecha va en el hueco de abajo: al final de la página solo
   queda «volver arriba», y en el hueco de arriba pisaba la © y los enlaces
   legales del pie en escritorio (D-161, D-303). */
.mc-flotantes .mc-flotante--arriba,
.mc-flotantes .mc-flotante--abajo {
  bottom: 10px;
}

.mc-flotantes .mc-flotante--arriba:has(~ .mc-flotante--abajo:not([hidden])) {
  bottom: calc(10px + 31.5px + 12.5px);
}

.mc-flotantes .mc-flotante--abajo svg {
  transform: rotate(180deg);
}

.mc-flotantes .mc-flotante:hover,
.mc-flotantes .mc-flotante:focus-visible {
  background: color-mix(in srgb, var(--mc-color-tinta) 60%, black);
}

.mc-flotantes .mc-flotante:focus-visible {
  outline: 2px solid var(--mc-color-acento);
  outline-offset: 2px;
}

/* D-161 y D5: las columnas laterales del pie dejan libre la franja de abajo,
   donde están los flotantes. Al final del fichero para ganar a la regla de
   escritorio, con la misma especificidad. */
.mc-pie .mc-pie__lateral {
  padding-bottom: 4.5rem;
}

/* El logo de SH Management (WO-653): en la franja libre de la columna legal, a la izquierda del «↑» (que va a
   30 px del borde y mide 31,5) con 8 px de hueco, y con su centro a la altura del del «↑». El enlace mide 44 de
   alto (área de toque) y la imagen 32, en px como los flotantes, para que cuadren aunque la raíz sea fluida.
   Por debajo de 75em la franja del «MARCONATA» (de alto 0,74 × --mc-pie-nombre) va a todo lo ancho y la columna
   legal acaba encima de ella, con un filete de 1 px. Al final de la página, el bloque de los flotantes queda a la
   mayor de dos alturas: 20 px más el carro de la página de compra y la zona segura, o la franja más 8 (menu.js);
   el «↑», 10 px más arriba. Contado desde el borde de relleno de la columna, max(17px, 29px + carro + zona segura
   − franja): el logo sube con el «↑» cuando sube el carro (landings.css agranda la franja libre lo mismo). El
   foco, el de todo el pie. */
.mc-pie .mc-pie__sh {
  position: absolute;
  right: calc(30px + 31.5px + 8px);
  bottom: calc(max(17px, 29px + var(--mc-flotantes-reserva, 0px) + env(safe-area-inset-bottom, 0px) - var(--mc-pie-nombre) * 0.74) + (31.5px - 44px) / 2);
  display: flex;
  align-items: center;
  min-width: 44px;
  height: 44px;
}

.mc-pie .mc-pie__sh img {
  display: block;
  width: 74px;
  max-width: none;
  height: 32px;
  margin: 0;
  border: 0;
}

/* Desde 75em la franja va en la columna central: el «↑» queda a 30 px del final (20 del bloque, más lo que suba
   el carro de la página de compra y la zona segura, y 10 de dentro), y la columna legal llega hasta el final. */
@media (min-width: 75em) {
  .mc-pie .mc-pie__sh {
    bottom: calc(30px + var(--mc-flotantes-reserva, 0px) + env(safe-area-inset-bottom, 0px) + (31.5px - 44px) / 2);
  }
}

/* ---------- Tarjeta de sabor v3 (D-327, D-328; WO-400) ----------
   La misma tarjeta en la Carta de la web y en el detalle de un sabor de la
   página de compra (D-302: una sola fuente). Solo clases con prefijo: esta
   hoja la carga toda la web. El contrato DOM:
     article.mc-tarjeta-sabor[.mc-tarjeta-sabor--detalle]
       figure.mc-tarjeta-sabor__foto[--relleno] > img | svg > use[href="#mc-flor"]
       div.mc-tarjeta-sabor__cuerpo
         p.mc-tarjeta-sabor__categoria (si hay)
         h3 | h2.mc-tarjeta-sabor__nombre
         div.mc-tarjeta-sabor__descripcion (si hay)
         ul.mc-chips > li.mc-chip (los pinta alergenos.js, chipsDeAlergenos)
     hr.mc-tarjeta-sabor__separador (solo en el detalle)
   Radio 0, sin sombra, borde de 1 px topo (en el detalle, ninguno: el panel
   ya hace de marco, P-3). Huecos de la escala de 8 (--mc-espacio-*). Lo que
   el tema de WordPress pinta por elemento (figure, h2, h3, p, ul, li, img,
   hr) se fija aquí. */
.mc-tarjeta-sabor {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: var(--mc-borde-topo);
  border-radius: 0;
  box-shadow: none;
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
}

.mc-tarjeta-sabor--detalle {
  border: 0;
}

/* La foto, 3:2 y a sangre en todos los anchos; sin foto, la flor de la
   marca (#mc-flor del sprite de la cabecera, D-312) en la misma caja. */
.mc-tarjeta-sabor__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  background: var(--mc-color-fondo);
}

.mc-tarjeta-sabor__foto > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  /* El encuadre que eligió el usuario para las fotos de estudio (3:4, la
     tarrina hacia el 64 % del alto): más cerca y con el helado en el
     centro, en la tarjeta (WO-646) y en el detalle (WO-650, D-454). Una
     ampliación sobre el centro de la caja, no un tamaño mayor de la imagen:
     el resultado es el mismo (medido en Chrome, con la misma nitidez a
     densidad 2 y 3) y la caja de la imagen no cambia el diseño de la
     tarjeta. Lo que sobra lo recorta el overflow de la figura. */
  transform: scale(1.5);
  object-position: center 80%;
}

.mc-tarjeta-sabor__foto--relleno {
  border-bottom: var(--mc-borde-topo);
}

.mc-tarjeta-sabor__foto--relleno > svg {
  width: 40%;
  height: 40%;
  fill: var(--mc-color-acento);
}

.mc-tarjeta-sabor__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--mc-espacio-2);
}

.mc-tarjeta-sabor--detalle .mc-tarjeta-sabor__cuerpo {
  padding: var(--mc-espacio-2) 0 0;
}

/* La categoría: en el DOM, en minúscula de frase; las mayúsculas, aquí
   (D-158.2: si va escrita en mayúsculas, el lector la deletrea). */
.mc-tarjeta-sabor__categoria {
  margin: 0 0 var(--mc-espacio-1);
  padding: 0;
  color: var(--mc-color-tinta-suave);
  font: var(--mc-letra-categoria);
  letter-spacing: var(--mc-tracking-categoria);
  text-transform: var(--mc-mayusculas);
}

.mc-tarjeta-sabor__nombre {
  margin: 0;
  padding: 0;
  color: var(--mc-color-tinta);
  font: var(--mc-letra-nombre);
  letter-spacing: 0;
  text-transform: none;
}

.mc-tarjeta-sabor--detalle .mc-tarjeta-sabor__nombre {
  font: var(--mc-letra-nombre-modal);
}

.mc-tarjeta-sabor__descripcion {
  margin: var(--mc-espacio-2) 0 0;
  padding: 0;
  color: var(--mc-color-tinta-suave);
  font: var(--mc-letra-descripcion);
  overflow-wrap: anywhere;
}

.mc-tarjeta-sabor--detalle .mc-tarjeta-sabor__descripcion {
  font: var(--mc-letra-descripcion-modal);
}

.mc-tarjeta-sabor__descripcion p {
  margin: 0;
}

.mc-tarjeta-sabor .mc-chips {
  margin-top: var(--mc-espacio-2);
}

.mc-tarjeta-sabor__separador {
  height: 0;
  margin: var(--mc-espacio-3) 0 var(--mc-espacio-2);
  padding: 0;
  border: 0;
  border-top: var(--mc-borde-topo-suave);
  background: none;
}

/* Los chips de alérgenos (D-327.2): 24 de alto, el del icono, que va en la
   esquina de la caja de borde (top y left: -1px, sobre el filete), así su
   círculo es el extremo redondeado de la píldora. 8 del icono al texto, 8 a
   la derecha y 8 entre chips. Nunca se truncan: un texto que no cabe pasa a
   dos líneas y el chip crece (min-height). Los especiales, sin icono. */
.mc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-chip {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: var(--mc-alto-chip);
  margin: 0;
  padding: 0 var(--mc-espacio-1) 0 calc(var(--mc-alto-chip) + var(--mc-espacio-1) - 1px);
  border: 1px solid var(--mc-color-gris-control); /* WO-501: los de alérgeno solo cambian de color */
  border-radius: calc(var(--mc-alto-chip) / 2);
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
  font: var(--mc-letra-chip);
  list-style: none;
}

.mc-chip::before,
.mc-chip::marker {
  content: none;
}

.mc-chip__icono {
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--mc-alto-chip);
  height: var(--mc-alto-chip);
  margin: 0;
  border-radius: 50%;
  /* El fondo de la página dentro del círculo del icono: la imagen deja un
     margen transparente (el círculo de los iconos de la API ocupa ~141 de
     146 px) por el que asomaba el borde del chip solo en el lado izquierdo,
     y en un icono de aro pálido (Sésamo) se leía como un halo descentrado
     (revisión del usuario, D-330). Vale para todos los iconos. */
  background: var(--mc-color-fondo);
  object-fit: contain;
}

.mc-chip__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mc-chip--especial,
.mc-chip--sin-icono {
  padding: 0 var(--mc-espacio-1);
}

/* WO-501 (D-384, patrón 4, solo en los chips sin icono): «pendiente», como
   chip activo (fondo acento suave, borde y punto de acento); «Sin alérgenos»,
   neutro (fondo gris suave, punto gris, texto gris). El punto, delante. */
.mc-chip--pendiente {
  border-color: var(--mc-color-acento);
  background: var(--mc-color-acento-suave);
}

.mc-chip--ninguno {
  border-color: var(--mc-color-gris-suave);
  background: var(--mc-color-gris-suave);
  color: var(--mc-color-gris-texto);
}

:is(.mc-chip--pendiente, .mc-chip--ninguno)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
}

.mc-chip--pendiente::before {
  background: var(--mc-color-acento);
}

.mc-chip--ninguno::before {
  background: var(--mc-color-gris-punto);
}