/* La identidad sale de marca/tokens.css. Ningún color de interfaz vive aquí. */
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/Anton-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/IBMPlexSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('assets/fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Homemade Apple';
  src: url('assets/fonts/HomemadeApple-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: var(--color-verde-hierba);
  --paper: var(--color-blanco-cascaron);
  --accent: var(--color-verde-fresco);
  --soft: var(--color-amarillo-mantequilla);
  --content: 76rem;
  --radius: 1.5rem;
  --touch: 3rem;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fuente-interfaz), system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .025em;
}
body::selection { background: var(--soft); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 {
  font-family: var(--fuente-encabezado), var(--fuente-interfaz), sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .95;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.4rem, 9vw, 7.8rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: 1.25rem; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.eyebrow { font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--soft); }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: .5rem;
  z-index: 20;
  display: grid;
  width: min(94.6rem, calc(100% - 3.4rem));
  height: 3.6rem;
  grid-template-columns: 16rem minmax(0, 1fr) 16rem;
  align-items: center;
  min-height: 3.6rem;
  margin: .7rem auto .65rem;
  padding: 0 .65rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 1rem;
}
.brand { display: inline-flex; align-items: center; }
.site-header .brand { width: 100%; min-height: 2.75rem; justify-content: center; }
.brand-logo {
  display: block;
  aspect-ratio: 1080 / 709;
  background: var(--accent);
  -webkit-mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat;
  mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat;
}
.brand-logo { width: 7.5rem; min-width: 7rem; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(.45rem, 1vw, .8rem); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav a, .header-actions a { display: inline-flex; min-height: var(--touch); align-items: center; }
.desktop-nav a[aria-current='page'] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45rem; }
.nav-separator { color: var(--accent); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; font-size: .9rem; }
.header-saludo { margin: 0 .5rem 0 0; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.header-icon-link { position: relative; width: 2.75rem; justify-content: center; border-radius: 999px; }
.header-icon-link svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.icon-link[aria-current='page'] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45rem; }
.count { position: absolute; right: .08rem; top: .18rem; display: grid; width: 1rem; height: 1rem; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: .58rem; font-weight: 700; }
.more-menu { position: relative; display: none; justify-self: end; }
.more-menu summary { display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border-radius: 50%; background: var(--ink); color: var(--soft); cursor: pointer; list-style: none; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu-icon { position: relative; display: block; width: 1.1rem; height: 1.1rem; transition: transform 180ms var(--ease-out); }
.more-menu-icon::before, .more-menu-icon::after { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; content: ''; transform: translate(-50%, -50%); }
.more-menu-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.more-menu[open] .more-menu-icon { transform: rotate(45deg); }
.more-menu-panel { position: absolute; right: 0; top: calc(100% + .6rem); isolation: isolate; display: grid; width: min(20rem, calc(100vw - 2rem)); max-height: calc(100svh - 8rem); padding: .65rem; overflow: auto; border-radius: 1.25rem; background: transparent; box-shadow: 0 .75rem 2rem -.8rem var(--ink); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.more-menu-panel::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--paper); content: ''; opacity: .92; }
.more-menu-panel a, .more-menu-social { display: flex; min-height: 2.9rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .65rem .75rem; border-radius: .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.more-menu-panel a:hover { background: var(--soft); }
.more-menu-social { margin-top: .25rem; background: var(--ink); color: var(--paper); }
.more-menu-social small { font-size: .62rem; font-weight: 600; letter-spacing: .08em; opacity: .78; }

.menu-hero, .how-section, .information-section {
  width: min(var(--content), calc(100% - 2rem));
  margin-inline: auto;
  scroll-margin-top: 7rem;
}
.page-head {
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 34rem);
  gap: 3rem;
  align-items: end;
  padding: clamp(4rem, 9vw, 7rem) 0 2rem;
  background-image: radial-gradient(circle, var(--accent) 1.5px, transparent 1.6px);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 8px 4px;
}
.page-head h1 { max-width: 7ch; margin-bottom: 0; }
.page-head > p { max-width: 30rem; margin-bottom: .6rem; font-size: 1.15rem; }
.order-status { padding: 2.5rem 0 1.25rem; }
.menu-view:has(.recipe-step:not([hidden])) .order-status { display: none; }
.order-status h2 { max-width: 18ch; margin: 0; font-family: inherit; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 600; text-transform: none; }
#progreso { scroll-margin-top: 8rem; }
.order-status .eyebrow { margin-bottom: .7rem; }
.save-error { padding: 1rem; border: 2px dashed var(--accent); border-radius: 1rem; font-weight: 600; }
.order-step { min-height: 24rem; margin-bottom: clamp(5rem, 10vw, 8rem); }

.opciones { display: flex; flex-wrap: wrap; gap: .75rem; }
button {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: .85rem 1rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
button .etiqueta { font-weight: 600; }
button .nota { font-size: .75rem; }
button[aria-pressed='true'] { border-width: 4px; font-weight: 700; }
button[aria-pressed='true'] .etiqueta { text-decoration: underline; text-decoration-thickness: 2px; }
button[disabled] { border-style: dashed; opacity: .55; }
button:active { transform: scale(.985); }
.principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding-inline: 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.menu-page-head { display: block; margin-top: 1.25rem; padding: 1.65rem 2rem; overflow: hidden; border-radius: calc(var(--radius) * 1.15); background: var(--soft); background-image: none; box-shadow: 0 .8rem 1.8rem -1.35rem var(--ink); }
.menu-page-head h1 { max-width: 9ch; font-size: clamp(3rem, 6vw, 5rem); }
.menu-page-title { min-height: 9rem; }
.menu-page-title::after { display: table; clear: both; content: ''; }
.menu-page-icon { float: right; width: clamp(9rem, 18vw, 14rem); height: auto; margin: -1.5rem -1.5rem .5rem 1rem; object-fit: contain; shape-outside: circle(46% at 50% 50%); }
.menu-intro-copy { max-width: 34rem; margin: .75rem 0 1rem; }
.menu-how { display: flex; flex-direction: column; clear: both; align-items: stretch; gap: .25rem; margin: 0; padding: .75rem 0 0; border-top: 1px solid var(--ink); list-style: none; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.menu-how li { display: block; }
/* Ana, 7-OCT-2026: cada paso se abre al tocarlo y explica qué puede pedir el cliente; el 1 sale abierto. */
.menu-how summary { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--touch); cursor: pointer; list-style: none; }
.menu-how summary::-webkit-details-marker { display: none; }
.menu-how summary::after { margin-left: .2rem; content: '+'; font-weight: 700; }
.menu-how details[open] summary::after { content: '−'; }
.menu-how details p { max-width: 36rem; margin: .15rem 0 .5rem 1.8rem; font-size: .82rem; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.menu-how strong { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--soft); font-size: .68rem; }
.carousel-dots { display: none; }
.recipe-step { width: auto; margin-left: 0; }
.recipe-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  padding: .5rem 0 2rem;
}
.recipe-grid > .menu-page-head { display: block; height: 100%; min-height: 0; margin: 0; padding: 1.5rem; }
.recipe-grid > .menu-page-head .menu-page-title { min-height: 0; padding: 0; }
.recipe-grid > .menu-page-head .menu-page-icon { width: 11rem; margin: -1rem -1rem .5rem .5rem; }
.recipe-grid > .menu-page-head h1 { max-width: 7ch; font-size: clamp(3.4rem, 5vw, 4.6rem); }
.recipe-grid > .menu-page-head > p { margin: 1.25rem 0 1rem; font-size: 1rem; }
.menu-product-card {
  position: relative;
  display: grid;
  /* La franja verde mide al menos 11rem y crece con «Contenido nutrimental» abierto: con alto
     fijo, el panel se cortaba abajo (Ana, 16-OCT-2026). */
  grid-template-rows: auto minmax(11rem, auto);
  height: auto;
  aspect-ratio: auto;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.15);
  background: var(--ink);
  box-shadow: 0 .8rem 1.8rem -1.35rem var(--ink);
  isolation: isolate;
}
.menu-product-card > img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 500ms var(--ease-out); }
.menu-card-glass { position: relative; z-index: 1; display: grid; height: 100%; min-height: 0; align-content: center; gap: .45rem; padding: 1rem; background: var(--ink); color: var(--paper); }
.menu-card-title { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; min-width: 0; }
.menu-card-glass strong { min-width: 0; font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(1.35rem, 2.2vw, 2.3rem); font-weight: 400; letter-spacing: .01em; line-height: .92; white-space: nowrap; text-transform: uppercase; }
.menu-card-product-icon { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; object-fit: contain; filter: brightness(0) invert(1); }
.menu-card-nutri { display: grid; gap: .35rem; min-width: 0; }
.menu-card-nutri-toggle { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--touch); padding: 0; border: 0; background: none; color: var(--soft); font: inherit; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; justify-self: start; }
.menu-card-nutri-toggle::after { content: '+'; font-size: 1rem; line-height: 1; }
.menu-card-nutri-toggle[aria-expanded="true"]::after { content: '−'; }
.menu-card-nutri-panel { display: grid; gap: .35rem; }
.menu-card-nutri-porcion, .menu-card-nutri-nota { font-size: .72rem; line-height: 1.3; }
.menu-card-nutri-nota { opacity: .82; }
.menu-card-nutri-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.menu-card-nutri-celda { display: grid; justify-items: center; padding: .3rem .1rem; border: 1px solid var(--accent); border-radius: .5rem; text-align: center; }
.menu-card-nutri-celda b { font-weight: 500; font-size: .95rem; line-height: 1.1; color: var(--soft); }
.menu-card-nutri-celda small { font-size: .62rem; line-height: 1.2; }

.compact-step, .form-step, .summary-step, .success-step { max-width: 52rem; }
.pill-options button, .number-options button, .time-options button { flex: 1 1 10rem; border-radius: 999px; text-align: center; }
.number-options button { flex-basis: 5rem; font-size: 1.25rem; }
.complement-step { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(2.5rem, 6vw, 5rem) max(1rem, calc((100% - var(--content)) / 2)); background: var(--ink); color: var(--paper); }
.complement-menu { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2rem 0; border-top: 1px solid var(--soft); }
.complement-menu button { min-width: 0; justify-content: flex-start; padding: 1.25rem 0; border-width: 0 0 1px; border-color: var(--soft); background: transparent; color: var(--paper); text-align: left; }
.complement-menu button:nth-child(odd) { padding-right: 2rem; }
.complement-menu button:nth-child(even) { padding-left: 2rem; border-left-width: 1px; }
.complement-menu button[aria-pressed='true'] { border-bottom-width: 5px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field-full { grid-column: 1 / -1; }
.field-label { margin: 0; font-weight: 600; }
/* Recoger o a domicilio y pedir ahora o programar (Pablo, 16-OCT-2026): dos tarjetas por fila, sin
   pregunta. «Que las tarjetas sean más pequeñas y rectangulares, el nombre está junto al ícono»: el
   ícono (enmascarado en `currentColor`, del juego de la marca en kokoDrive) a la izquierda y el
   nombre a su lado; el detalle, chico, debajo del nombre. «Mejor que nada tenga ese fondo amarillo»:
   «quítale el fondo blanco a las opciones, y que sólo tenga un borde delgado»: las no elegidas sin
   fondo y con filete de 1 px; la elegida, verde lleno y ✓ — no sólo el tono (S67). */
.modo-entrega { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.modo-entrega-opcion {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; column-gap: .55rem; row-gap: .1rem;
  min-height: 3.75rem; padding: .55rem .6rem; border: 1px solid var(--ink); border-radius: 1rem;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.modo-entrega-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.modo-entrega-icono {
  grid-row: 1 / span 2; align-self: center; width: 2rem; height: 2rem; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.carrito-entrega-modo-mostrador { --icono: url('assets/entrega/caja.png'); }
.carrito-entrega-modo-reparto { --icono: url('assets/entrega/moto.png'); }
.modo-entrega-texto { align-self: end; padding-right: 1.1rem; font-weight: 700; font-size: .92rem; line-height: 1.15; }
.modo-entrega-detalle { align-self: start; overflow: hidden; font-weight: 400; font-size: .7rem; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.modo-entrega-opcion:hover { border-width: 2px; padding: calc(.55rem - 1px) calc(.6rem - 1px); }
.modo-entrega-opcion:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.modo-entrega-opcion[data-elegido='si'], .modo-entrega-opcion:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.modo-entrega-opcion[data-elegido='si']::after, .modo-entrega-opcion:has(input:checked)::after {
  content: '✓'; position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--paper); color: var(--ink); font-family: system-ui, sans-serif; font-weight: 800; font-size: .7rem;
}
@media (min-width: 48rem) { .modo-entrega-opcion { min-height: 4.25rem; } .modo-entrega-icono { width: 2.75rem; height: 2.75rem; } .modo-entrega-texto { font-size: 1rem; } }
.carrito-entrega-cuando-ahora { --icono: url('assets/entrega/ahora.png'); }
.carrito-entrega-cuando-programar { --icono: url('assets/entrega/programar.png'); }
.modo-entrega-opcion:has(input:disabled) { border-style: dashed; cursor: not-allowed; }
.modo-entrega-opcion:has(input:disabled) .modo-entrega-texto { text-decoration: line-through; }
/* Pablo, 16-OCT-2026: «ponle una pequeña línea de separación entre ambas secciones». */
.cuando-entrega { gap: .75rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--accent); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* «Pedir ahora» con la bandera apagada: el letrero, verde hierba (Pablo, 16-OCT-2026: «que nada tenga ese fondo amarillo»). */
.letrero-entrega {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem;
  padding: .9rem 1rem; border: 0; border-radius: 1.25rem; background: var(--ink); color: var(--paper); font-weight: 600;
}
.letrero-entrega p { margin: 0; }
.letrero-entrega-cerrar {
  display: grid; place-items: center; width: var(--touch); height: var(--touch); min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.letrero-entrega-cerrar:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .letrero-entrega { animation: letrero-entra .28s var(--ease-out) both; } }
@keyframes letrero-entra { from { opacity: 0; transform: translateY(.5rem); } }

/* La rueda «tipo iPhone» de «Programar» (`rueda-fecha.js`): cinco renglones a la vista, el del
   centro es el elegido (banda con filo), las columnas se deslizan con `scroll-snap`. */
/* Sin bordes (Pablo, 16-OCT-2026: «quita los bordes de la sección, del listo y de la selección»). */
.rueda { --renglon: 2.75rem; display: grid; gap: .75rem; background: var(--paper); }
.rueda-columnas { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .25rem; }
.rueda-columnas::before {
  content: ''; position: absolute; inset-inline: 0; top: calc(var(--renglon) * 2); height: var(--renglon);
  border-radius: .6rem; background: transparent; pointer-events: none;
}
.rueda-columna {
  position: relative; height: calc(var(--renglon) * 5); padding-block: calc(var(--renglon) * 2); overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; border-radius: .6rem;
  -webkit-mask-image: linear-gradient(transparent, currentColor 35%, currentColor 65%, transparent);
  mask-image: linear-gradient(transparent, currentColor 35%, currentColor 65%, transparent);
}
.rueda-columna::-webkit-scrollbar { display: none; }
.rueda-columna:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rueda-opcion {
  display: grid; place-items: center; height: var(--renglon); scroll-snap-align: center; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; user-select: none;
}
.rueda-opcion[aria-selected='true'] { font-weight: 800; }
.rueda-opcion-sin-lugar { text-decoration: line-through; opacity: .45; cursor: not-allowed; }
.rueda-listo { justify-self: stretch; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .rueda-columna { scroll-behavior: smooth; } }
@media (min-width: 48rem) { .rueda-columnas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
.hora-entrega { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.hora-entrega .field-label, .hora-entrega p { flex-basis: 100%; }
.hora-entrega select { flex: 1 1 8rem; min-height: var(--touch); }
.carrito-privacidad { margin: .75rem 0 0; text-align: center; font-size: .82rem; }
/* «Tus datos» y la tarjeta al pie del carrito (Pablo, 16-OCT-2026: «iniciar sesión para no tener que poner los
   datos o pedir sin sesión»). Mismo lenguaje que las tarjetas de entrega: sin fondo, filete de 1 px, ícono a la
   izquierda del nombre. Las dos son ACCIONES, no una elección que se quede marcada: al tocarlas, o se va a entrar
   o aparecen los campos, así que no tienen estado que pintar. */
.carrito-datos { display: grid; gap: .85rem; margin-top: 1.5rem; }
.carrito-datos-titulo { margin: 0; font-size: 1.15rem; }
.carrito-datos-nota { margin: 0; font-size: .88rem; }
.carrito-datos-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.carrito-datos-opcion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
  column-gap: .55rem; row-gap: .1rem; min-height: 3.75rem; padding: .55rem .6rem; border: 1px solid var(--ink);
  border-radius: 1rem; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.carrito-datos-opcion:hover { border-width: 2px; padding: calc(.55rem - 1px) calc(.6rem - 1px); }
.carrito-datos-opcion:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.carrito-datos-opcion-icono {
  grid-row: 1 / span 2; align-self: center; width: 2rem; height: 2rem; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.carrito-datos-opcion-cuenta { --icono: url('assets/cuenta/perfil.svg'); }
.carrito-datos-opcion-invitado { --icono: url('assets/cuenta/datos.svg'); }
.carrito-datos-opcion-titulo { align-self: end; font-weight: 700; font-size: .92rem; line-height: 1.15; }
.carrito-datos-opcion-texto { align-self: start; font-size: .75rem; line-height: 1.25; }
.carrito-datos-cambiar { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
#carrito-pie { display: grid; gap: 1rem; margin-top: 1.5rem; }
#carrito-pie .pago-tarjeta { background: transparent; }
#carrito-pie .carrito-privacidad { margin-top: -.25rem; }
.pago-ranura:empty { display: none; }
@media (min-width: 48rem) { .carrito-datos-opcion { min-height: 4.25rem; } .carrito-datos-opcion-icono { width: 2.75rem; height: 2.75rem; } }
.field-error { margin: 0; color: var(--accent); font-size: .82rem; }
label { font-weight: 600; }
input { width: 100%; min-height: var(--touch); padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: .8rem; background: var(--paper); color: var(--ink); }
.privacy-note { margin: 1rem 0; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; }

.summary-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.renglon { display: flex; align-items: center; gap: 1rem; min-height: var(--touch); padding: .75rem 0; border-bottom: 1px solid var(--ink); }
.renglon .nombre { flex: 1; }
.renglon button { min-height: 2.5rem; border: 0; border-bottom: 1px solid currentColor; }
.total { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.35rem; font-weight: 700; }
.traspaso { padding: 1.25rem; white-space: pre-wrap; border: 1px solid var(--ink); border-radius: 1rem; background: var(--soft); font-family: ui-monospace, monospace; }
.success-step { padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: var(--soft); text-align: center; }

.bloqueado { margin: 1.25rem 0; padding: 1rem; border: 2px dashed var(--accent); border-radius: 1rem; }
.bloqueado:empty { display: none; }
.bloqueado .sp { margin-bottom: .25rem; font-weight: 700; }
.bloqueado .que { overflow-wrap: anywhere; font-size: .9rem; }
.bloqueado .fuente { margin-bottom: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: .72rem; }

.how-section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; padding-bottom: 1.25rem; background-image: radial-gradient(circle, var(--accent) 1.5px, transparent 1.6px); background-repeat: repeat-x; background-position: left bottom; background-size: 8px 4px; }
.section-intro h2 { margin-bottom: 0; }
.section-intro > p { max-width: 24rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); }
.steps article { min-height: 17rem; padding: 2rem; background: var(--paper); }
.steps strong { display: block; margin-bottom: 2rem; font-size: 2rem; }
.information-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; padding-block: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--ink); }
.information-section h2 { max-width: 10ch; }
#detalle-bloqueos summary { min-height: var(--touch); padding: 1rem 0; cursor: pointer; font-weight: 600; }

.mobile-nav { display: none; }

/* El landing conserva la composición editorial del checkout aprobado. */
.section { width: min(var(--content), calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(3.5rem, 8vw, 7rem); }
.lede { max-width: 38rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.button, .button-secondary, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: .8rem 1.25rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.button-secondary, .text-button { background: transparent; color: var(--ink); }
.text-button { min-height: var(--touch); padding-inline: 0; border-width: 0 0 1px; border-radius: 0; }
.hero { width: min(92rem, calc(100% - 2rem)); height: min(48rem, calc(100svh - 7rem)); min-height: 36rem; margin: 1rem auto 0; display: grid; grid-template-columns: .8fr 1.2fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; border-radius: calc(var(--radius) * 1.4); background: var(--ink); color: var(--paper); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: clamp(2rem, 3.5vw, 4rem); }
.hero-copy h1 { max-width: 7ch; margin: 1rem 0 1.25rem; font-size: clamp(3.4rem, 7vw, 6.2rem); }
.hero-copy .button { align-self: flex-start; border-color: var(--soft); background: var(--soft); color: var(--ink); }
.hero-isotipo { width: clamp(4.5rem, 9vw, 7rem); margin-bottom: .5rem; filter: brightness(0) invert(1); }.hand { font-family: var(--fuente-anotacion), cursive; }
.hand { max-width: 12rem; margin: .5rem 0 0 auto; font-size: 1.05rem; transform: rotate(-5deg); }
.hero-media { position: relative; min-height: 34rem; background: var(--accent); }.hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-ticket { position: absolute; right: 1.25rem; bottom: 1.25rem; width: min(17rem, calc(100% - 2.5rem)); padding: 1.1rem 1.25rem; border: 1px solid var(--ink); border-radius: 1rem; background: var(--soft); color: var(--ink); }.hero-ticket span, .hero-ticket strong { display: block; }.hero-ticket span { font-size: .78rem; }.hero-ticket strong { margin-block: .18rem; font-family: var(--fuente-encabezado), sans-serif; font-size: 1.75rem; font-weight: 400; line-height: 1; text-transform: uppercase; }
.marquee { display: block; overflow: hidden; margin-top: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--fuente-encabezado), sans-serif; font-size: 1.4rem; text-transform: uppercase; white-space: nowrap; }.marquee span { display: inline-block; padding-right: 2rem; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.product-card { display: flex; min-width: 0; min-height: 31rem; flex-direction: column; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.product-photo { position: relative; min-height: 18rem; overflow: hidden; background: var(--soft); }
.product-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.recipe-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.recipe-code { font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(6rem, 11vw, 9rem); line-height: 1; letter-spacing: -.03em; transition: transform 180ms var(--ease-out); }
.recipe-art-name { position: absolute; right: 1.4rem; bottom: 1.25rem; left: 1.4rem; z-index: 1; font-family: var(--fuente-anotacion), cursive; font-size: .9rem; text-align: right; transform: rotate(-4deg); }
.badge { position: absolute; top: 1rem; left: 1rem; padding: .35rem .65rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.product-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 1.2rem; }
.product-copy .eyebrow { margin-bottom: .55rem; }
.product-copy h3 { min-width: 0; margin-bottom: .65rem; font-size: 1.5rem; overflow-wrap: anywhere; }
.ingredients { align-self: start; margin-bottom: 1rem; opacity: .76; }
.macro-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-block: .8rem; border-block: 1px solid var(--ink); }
.macro-strip div { min-width: 0; padding-inline: .55rem; border-left: 1px solid var(--ink); }.macro-strip div:first-child { padding-left: 0; border-left: 0; }
.macro-strip dt { font-size: .62rem; line-height: 1.15; opacity: .72; }.macro-strip dd { margin: .2rem 0 0; font-size: 1rem; font-weight: 600; }
.macro-note { margin: .4rem 0 0; font-size: .68rem; opacity: .65; }
.product-meta { display: flex; min-width: 0; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; align-items: end; }
.price-pending { max-width: 14rem; font-size: .82rem; }
.round-button { display: grid; width: 3rem; min-width: 3rem; height: 3rem; min-height: 3rem; flex: 0 0 3rem; padding: 0; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1.5rem; }
.story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; }.story-panel { position: relative; min-height: 27rem; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: var(--soft); overflow: hidden; }.story-panel-dark { background: var(--ink); color: var(--paper); }.story-panel h2 { max-width: 13ch; }.story-number { font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(5rem, 12vw, 10rem); line-height: .8; }.brand-isotipo-corner { position: absolute; right: 1rem; bottom: 1rem; width: 8rem; opacity: .28; }.brand-icon-large { width: 5rem; margin-bottom: 2rem; }.brand-signoff { width: 9rem; margin-top: 2rem; }.step .brand-icon { width: 3.5rem; margin-bottom: 1.5rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .75rem; padding: 2rem 0; }.filter-row button, .filter-row .button-secondary { min-height: 2.75rem; padding: .55rem 1rem; border-radius: 999px; }.filter-row button[aria-pressed='true'] { border-width: 4px; font-weight: 700; text-decoration: underline; }

.route-view { width: min(var(--content), calc(100% - 2rem)); min-height: 62vh; margin-inline: auto; }
/* Rutas públicas: cada familia conserva su propia composición, sin tarjetas genéricas. */
.route-head { max-width: 52rem; padding: clamp(3.5rem, 9vw, 7rem) 0 2.5rem; border-bottom: 1px solid var(--ink); }
.route-head h1 { max-width: 10ch; margin-bottom: 1rem; }.route-head .lede { margin-bottom: 0; }
.product-detail { position: relative; min-height: min(48rem, calc(100svh - 6rem)); margin-block: .75rem 2.5rem; overflow: hidden; border-radius: calc(var(--radius) * 1.2); background: var(--ink); color: var(--paper); box-shadow: 0 1rem 2.5rem -1.6rem var(--ink); isolation: isolate; }
.product-detail::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--ink), transparent 72%); content: ''; opacity: .66; pointer-events: none; }
.product-detail > img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.detail-copy { position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); z-index: 1; display: flex; width: min(32rem, calc(100% - 2rem)); flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(1.4rem, 4vw, 2.4rem); overflow: hidden; border-radius: 1.35rem; -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); }
.detail-copy::before { position: absolute; inset: 0; z-index: -1; background: var(--ink); content: ''; opacity: .72; }
.detail-copy h1 { max-width: 8ch; margin: .25rem 0 1rem; font-size: clamp(3.6rem, 8vw, 6.8rem); }
.detail-copy .lede { margin-bottom: 1rem; }
.detail-copy .button { border-color: var(--soft); background: var(--soft); color: var(--ink); }
.pending-note { max-width: 30rem; padding-top: 1rem; border-top: 1px solid var(--paper); font-size: .78rem; opacity: .82; }
.checkout-importe { margin-bottom: 1.25rem; font-size: 1.35rem; font-weight: 700; }
.product-detail-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; display: grid; width: 3rem; height: 3rem; padding: 0; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 1.8rem; line-height: 1; }

/* La hoja de platillo (hoja-platillo-26-sep.md, punto 3): mismo `.product-detail`
   oscuro y el mismo cristal (`.menu-detail-glass`) que el detalle de producto, pero
   como panel que se puede leer completo y hacer scroll — no como cintillo anclado
   abajo — porque aquí van varios grupos, no una sola frase. Cero color nuevo: todo
   sale de los mismos cuatro tokens que ya usa `.product-detail`.

   `#hoja-montaje` vive al final de `<main>` (index.html): sin posición fija, un
   `replaceChildren()` ahí no lleva la vista hasta la hoja — quedaba con el título
   cortado arriba de la pantalla (corrección del coordinador, 26 sep 2026, segunda
   vuelta). Con la hoja abierta, ese contenedor se vuelve el overlay de verdad, con
   un fondo de `--ink` semitransparente (no es un color nuevo: mismo token). */
#hoja-montaje:has(.hoja-platillo) { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; overflow: auto; }
#hoja-montaje:has(.hoja-platillo)::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--ink); opacity: .6; }
/* Con la hoja abierta, la navegación inferior se oculta (corrección del 26 sep
   2026, tercera vuelta, punto 2): sin ella tapando el borde, el pie fijo de la
   hoja no compite por el mismo espacio de 4.65rem. */
body:has(#hoja-montaje .hoja-platillo) .mobile-nav { display: none; }
/* Con la hoja abierta sólo ella se desplaza: el menú de atrás no se mueve ni roba ancho con su barra. */
html:has(#hoja-montaje .hoja-platillo) { overflow: hidden; }
/* `height` EXPLÍCITA, no sólo `min-height`/`max-height` (misma corrección, punto 1):
   sin una altura definida, un hijo con `height: 100%` no tiene de qué porcentaje
   partir — `.hoja-cuerpo` crecía con su contenido en vez de recortarlo, y el pie
   `sticky` no tenía scrollport donde quedarse pegado: en escritorio el contenido
   se colaba DEBAJO del botón fijo, y en móvil el pie quedaba fuera de la
   ventana, invisible sin hacer scroll. */
/* Una sola página con el diseño del detalle de producto (palabra de Pablo, 26 sep 2026:
   «tiene que tener el diseño […] todo en la misma y se actualiza en el momento que se
   elige»): la foto ocupa la hoja entera y se queda quieta; encima, `.hoja-desplazable`
   es lo único que hace scroll, y el cristal (`.hoja-cuerpo`) arranca abajo —dejando ver
   el platillo— y sube con todos los grupos. `margin-top: auto`, nunca
   `justify-content: flex-end`: éste deja inalcanzable lo que desborda por arriba. */
.hoja-platillo { display: grid; width: min(100%, 72rem); height: min(52rem, calc(100svh - 2rem)); margin: 0; }
.hoja-platillo > img, .hoja-platillo > .hoja-desplazable { grid-area: 1 / 1; }
.hoja-platillo > img { position: static; }
.hoja-desplazable { position: relative; z-index: 1; display: flex; min-height: 0; flex-direction: column; padding: 6rem clamp(1rem, 4vw, 3rem) 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* Sin barra lateral (palabra del dueño, 26 sep 2026: «quita la barra de scroll lateral»): se sigue desplazando con el dedo, la rueda y el teclado. */
.hoja-desplazable::-webkit-scrollbar { display: none; }
.hoja-platillo .hoja-cuerpo { position: relative; inset: auto; display: grid; width: min(34rem, 100%); grid-template-columns: minmax(0, 1fr); justify-content: stretch; margin-top: auto; padding-bottom: 0; overflow: visible; border-radius: 1.35rem 1.35rem 0 0; }
.hoja-platillo .hoja-cuerpo h1 { max-width: 8ch; margin: .25rem 0 1rem; }
.hoja-platillo .hoja-cuerpo .lede { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--paper); }
.hoja-platillo .hoja-grupos { padding-bottom: 1.5rem; }
/* Sin `overflow: hidden` (rompería el pie `sticky`), el cristal se recorta con su
   propio radio; y llega hasta el borde de abajo, para que nada asome bajo el pie. */
.hoja-platillo .hoja-cuerpo::before { border-radius: inherit; }
/* En escritorio el cristal va centrado en vertical (palabra de Pablo, 26 sep 2026:
   «centra esto verticalmente»). `margin-block: auto` y no `justify-content: center`,
   por la misma razón que arriba: si desborda, arranca arriba y se alcanza entero. */
@media (min-width: 800px) {
  .hoja-desplazable { padding-block: 3rem; }
  .hoja-platillo .hoja-cuerpo { margin-block: auto; border-radius: 1.35rem; }
  .hoja-platillo .hoja-pie { border-radius: 0 0 1.35rem 1.35rem; }
}
.hoja-grupos { display: grid; gap: 1.5rem; }
.hoja-grupo { padding: 0; border: 0; scroll-margin-top: 1.5rem; }
.hoja-grupo legend { padding-bottom: .5rem; border-bottom: 1px solid var(--paper); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }
/* Fila/chip de marca — nunca el radio azul del navegador (corrección del 26 sep
   2026): el `<input>` sigue ahí para teclado y lector de pantalla, sólo se
   redibuja con `appearance: none`. El estado marcado se distingue por PESO y
   grosor de borde (S67: nunca sólo por color — mismo criterio que
   `button[aria-pressed='true']` arriba), nunca por `background`/`color`. */
/* Más aire entre opciones y un borde apenas visible (palabra del dueño, 26 sep 2026). El
   borde tenue es un `::before` con opacidad —no una función de mezcla de color, que verificar-colores.py
   prohíbe—; al marcar se vuelve pleno y más grueso, además del peso (S67). */
.hoja-grupo > * + * { margin-top: .75rem; }
.hoja-opcion, .hoja-contador-fila { position: relative; isolation: isolate; }
.hoja-opcion::before, .hoja-contador-fila::before { position: absolute; inset: 0; z-index: -1; border: 1px solid var(--paper); border-radius: inherit; content: ''; opacity: .22; pointer-events: none; }
.hoja-opcion { display: flex; align-items: center; gap: .65rem; min-height: var(--touch); padding: .85rem 1rem; border: 0; border-radius: .85rem; cursor: pointer; }
.hoja-opcion:has(input:checked) { font-weight: 700; }
.hoja-opcion:has(input:checked)::before { border-width: 2px; opacity: 1; }
.hoja-opcion input[type="radio"], .hoja-opcion input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; padding: 0;
  flex: 0 0 auto; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit; /* sin ellos hereda de `input` (l. 240) el fondo claro y el color oscuro: lo NO elegido se veía relleno y el círculo desaparecía sobre el fondo oscuro */
}
.hoja-opcion input[type="checkbox"] { border-radius: .3rem; }
/* Punto reconocible: RELLENO, no un aro más grueso (corrección del 26 sep 2026,
   tercera vuelta, punto 3) — la versión anterior engrosaba el borde de un círculo
   del mismo tamaño, y el hueco visible quedaba MÁS CHICO que el de una opción sin
   marcar: se leía al revés. `box-shadow` (nunca `background`/`color`: S67 sigue
   vigente en este selector, contiene `:checked`) con `currentColor` — el mismo
   tono del texto, no un color de estado — rellena el círculo entero. */
.hoja-opcion input:checked { border-width: 2px; box-shadow: inset 0 0 0 .6rem currentColor; }
.hoja-precio { margin-left: auto; font-variant-numeric: tabular-nums; }
.hoja-contador { margin: 0; font-size: .78rem; opacity: .85; }
/* Nombre a la izquierda y los tres controles en columnas de ancho FIJO: así todos los
   − / cantidad / + de la hoja caen en la misma vertical, sea cual sea el largo del nombre. */
.hoja-contador-fila { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem 2rem 2.25rem; align-items: center; column-gap: .5rem; min-height: var(--touch); padding: .85rem 1rem; border: 0; border-radius: .85rem; }
.hoja-contador-etiqueta { display: grid; gap: .15rem; }
.hoja-nivel-nombre { font-weight: 700; }
.hoja-nivel-tamano { font-size: .8rem; opacity: .75; }
.hoja-nivel-precio { font-size: .9rem; font-variant-numeric: tabular-nums; }
.hoja-contador-fila .round-button { width: 2.25rem; height: 2.25rem; padding: 0; background: var(--soft); color: var(--ink); }
/* Un botón de cantidad en 0/lleno se ve GRIS, nunca con borde punteado (corrección
   del 26 sep 2026): el punteado global de `button[disabled]` es para botones
   rectangulares, no para estos círculos. */
.hoja-contador-boton:disabled { border-style: solid; opacity: .4; }
.hoja-cantidad { min-width: 1.5rem; text-align: center; font-weight: 700; }
.hoja-pie { position: sticky; bottom: 0; z-index: 1; display: grid; gap: .5rem; margin-inline: calc(-1 * clamp(1.4rem, 4vw, 2.4rem)); padding: .75rem clamp(1.4rem, 4vw, 2.4rem) max(1rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--paper); background: var(--ink); }
.hoja-pie[hidden] { display: none; }
/* Sólo para lector de pantalla: lo que falta ya se lee en los grupos «Requerido». */
.hoja-que-falta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hoja-agregar { width: 100%; border-color: var(--soft); background: var(--soft); color: var(--ink); }
.hoja-agregar:disabled { opacity: .55; cursor: not-allowed; text-decoration: none; }

/* En el teléfono la hoja ocupa la pantalla entera y el cristal arranca a media
   altura, como el detalle de producto: el platillo se ve antes de elegir nada. */
@media (max-width: 799px) {
  #hoja-montaje:has(.hoja-platillo) { padding: 0; place-items: stretch; overflow: hidden; }
  .product-detail.hoja-platillo { width: 100%; height: 100%; margin: 0; border-radius: 0; }
  .hoja-desplazable { padding: 42svh .75rem 0; }
  .hoja-platillo .hoja-cuerpo { width: 100%; }
  .hoja-platillo .hoja-cuerpo h1 { max-width: none; font-size: clamp(2.8rem, 13vw, 4.4rem); }
}

/* El carrito (`#/carrito`), reescrito el 26 sep 2026 (cuarta vuelta del
   coordinador): mismo lenguaje que la hoja — `.round-button`/`.hoja-contador-boton`
   para el contador, `.field`/`.form-grid` ya existentes para la entrega — nunca un
   `<input type=number>` ni un `<select>` sin estilo. */
.carrito-sin-pedidos { display: grid; gap: 1.25rem; justify-items: start; max-width: 32rem; margin-block: 2rem; }
.carrito-tarjetas { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.carrito-tarjeta { display: grid; gap: .5rem; padding: 1.1rem 1.25rem; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
/* Tarjeta verde y sin bordes, ni en ella ni en sus botones (palabra del dueño, 26 sep 2026:
   «quita los bordes de la tarjeta en general y de los botones, al fondo de la tarjeta ponlo
   verde»). El foco de teclado sigue viéndose: es `outline`, no borde. */
.carrito-tarjeta button { border: 0; }
.carrito-tarjeta .text-button { color: var(--paper); font-weight: 700; }
/* La foto cubre TODO el lado izquierdo de la tarjeta, de borde a borde y de arriba abajo
   (palabra del dueño, 26 sep 2026, con el lado marcado en rojo): sin relleno en la tarjeta,
   la foto se estira a la altura de la fila y el recorte redondeado lo da la propia tarjeta. */
.carrito-tarjeta-con-imagen { grid-template-columns: clamp(6rem, 30%, 11rem) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.carrito-tarjeta-foto { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.carrito-tarjeta-cuerpo { display: grid; gap: .5rem; min-width: 0; padding: 1.1rem 1.25rem; }
.carrito-tarjeta-cuerpo .carrito-tarjeta-pie { flex-wrap: wrap; }
.carrito-tarjeta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.carrito-tarjeta-info { display: grid; gap: .2rem; }
.carrito-tarjeta-nombre { margin: 0; font-family: var(--fuente-encabezado), sans-serif; font-size: 1.35rem; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.carrito-tarjeta-presentacion { margin: 0; font-size: .85rem; opacity: .82; }
.carrito-tarjeta .carrito-precio { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carrito-eleccion, .carrito-extra, .carrito-complementos { margin: 0; font-size: .85rem; opacity: .82; }
.carrito-extra { font-variant-numeric: tabular-nums; }
.carrito-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .35rem; padding-top: .75rem; }
.carrito-contador { display: flex; align-items: center; gap: .6rem; }
.carrito-contador .round-button { width: 2.25rem; height: 2.25rem; background: var(--soft); color: var(--ink); }
.carrito-subtotal { margin: 1.5rem 0; font-weight: 700; }
.carrito-entrega { display: grid; gap: 1.25rem; max-width: 40rem; }
/* Carrito y pago en UNA columna centrada, con el mismo ancho para todo —encabezado, aviso,
   tarjetas, subtotal y formulario— (quien opera, 26 sep 2026: «todo tiene que ir centrado y
   con márgenes declarados; la tarjeta de ítem debe ser del mismo ancho que el resto»). */
.route-view[data-view='carrito'], .route-view[data-view='checkout'] { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
.route-view[data-view='carrito'] > *, .route-view[data-view='checkout'] > *,
.route-view[data-view='carrito'] .carrito-entrega { max-width: none; }
select { width: 100%; min-height: var(--touch); padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: .8rem; background: var(--paper); color: var(--ink); }

.action-state, .auth-state, .order-ticket, .privacy-panel { max-width: 45rem; margin-block: 2.5rem 5rem; padding: clamp(2rem, 6vw, 4rem); border: 1px solid var(--ink); border-radius: var(--radius); }.action-state { background: var(--soft); }.auth-state { background: var(--ink); color: var(--paper); }.auth-state .button { border-color: var(--soft); background: var(--soft); color: var(--ink); }.order-ticket { border-style: dashed; }.order-ticket .ticket-folio { margin-block: 1rem 2rem; font-family: ui-monospace, monospace; font-size: clamp(1.35rem, 4vw, 2.25rem); font-weight: 700; overflow-wrap: anywhere; }
.route-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 2.5rem 0; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); }.step-panel { min-height: 18rem; padding: 2rem; background: var(--paper); }.step-panel strong { display: block; margin-bottom: 3rem; font-family: var(--fuente-encabezado), sans-serif; font-size: 3rem; font-weight: 400; line-height: 1; }.route-story { margin-bottom: 4rem; }.faq-list { max-width: 52rem; margin-block: 2.5rem 5rem; border-top: 1px solid var(--ink); }.faq-list details { border-bottom: 1px solid var(--ink); }.faq-list summary { min-height: var(--touch); padding: 1.1rem 3rem 1.1rem 0; cursor: pointer; font-weight: 600; }.faq-list p { max-width: 42rem; padding-bottom: 1.25rem; }
.faq-list ul { max-width: 42rem; margin: 0 0 1.25rem; padding-left: 1.25rem; display: grid; gap: .3rem; }.privacy-panel { background: linear-gradient(135deg, var(--soft), var(--paper)); }.privacy-panel p { max-width: 44rem; padding-top: 1rem; border-top: 1px solid var(--ink); }

@media (hover: hover) {
  button:hover, .button:hover, .button-secondary:hover, .text-button:hover,
  .desktop-nav a:hover, .header-actions a:hover { text-decoration: underline; text-underline-offset: .2rem; }
  .menu-product-card:hover > img, .product-photo:hover > img { transform: scale(1.035); }
}

.story-panel-dark .brand-isotipo-corner,
.story-panel-dark .brand-signoff { filter: brightness(0) invert(1); }

@media (max-width: 1024px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header .brand { justify-content: start; }
  .desktop-nav { display: none; }
  .header-actions { display: none; }
  .more-menu { display: block; }
  .recipe-step { width: 100%; margin-left: 0; }
  .recipe-grid > .menu-page-head { display: block; }
  .recipe-grid {
    grid-template-columns: min(92vw, 42rem);
    grid-auto-flow: row;
    justify-content: center;
    gap: .85rem;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
  }
  .recipe-grid::before, .recipe-grid::after { display: block; margin: 1.25rem 0 .15rem; font-size: clamp(1.25rem, 4vw, 1.7rem); font-weight: 700; }
  .recipe-grid::before { order: 0; margin-top: .75rem; content: 'Recomendación de la casa'; }
  .recipe-grid::after { order: 2; content: 'Otros platillos'; }
  .recipe-grid > .menu-product-card:first-of-type { order: 1; grid-template-rows: auto minmax(11.5rem, auto); }
  .recipe-grid > .menu-product-card:first-of-type > img { aspect-ratio: 4 / 3; }
  .recipe-grid > .menu-product-card:not(:first-of-type) { order: 3; grid-template-columns: minmax(7rem, 32%) minmax(0, 1fr); grid-template-rows: minmax(10rem, auto); min-height: 10rem; }
  .recipe-grid > .menu-product-card:not(:first-of-type) > img { width: 100%; height: 100%; aspect-ratio: 1; }
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-glass { height: auto; padding: .85rem; }
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-title { gap: .45rem; }
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-product-icon { width: 2rem; height: 2rem; }
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-glass strong { font-size: clamp(1rem, 3.7vw, 1.45rem); }
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-nutri-porcion,
  .recipe-grid > .menu-product-card:not(:first-of-type) .menu-card-nutri-nota { font-size: clamp(.62rem, 2.2vw, .76rem); }
  .mobile-nav {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
    left: max(.75rem, env(safe-area-inset-left, 0px));
    z-index: 40;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(32rem, calc(100% - 1.5rem));
    min-height: 4.65rem;
    margin-inline: auto;
    padding: .38rem;
    overflow: hidden;
    border-radius: 1.4rem;
    background: transparent;
    color: var(--paper);
    box-shadow: 0 .35rem .85rem -.45rem var(--ink);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }
  .mobile-nav::before { position: absolute; inset: 0; z-index: -1; background: var(--ink); content: ''; opacity: .72; }
  .mobile-nav a { position: relative; display: flex; min-width: 0; min-height: 3.85rem; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border-radius: 1.05rem; font-size: .72rem; line-height: 1; }
  .mobile-nav a[aria-current='page'] { background: var(--soft); color: var(--ink); font-weight: 700; }
  .mobile-nav a[aria-current='page']::after { position: absolute; right: .65rem; top: .55rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); content: ''; }
  .mobile-nav svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  .mobile-nav span { font-size: .72rem; line-height: 1; }
  /* La burbuja de piezas sobre «Carrito» (`burbuja-carrito.js`). */
  .mobile-nav .burbuja-carrito { position: absolute; top: .35rem; left: calc(50% + .35rem); display: grid; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; place-items: center; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  /* Sin borde: sobre la pestaña activa (fondo `--soft`) se invierte para seguir viéndose. */
  .mobile-nav a[aria-current='page'] .burbuja-carrito { background: var(--ink); color: var(--soft); }
}

@media (max-width: 800px) {
  .site-header { width: calc(100% - 2rem); }
  .page-head { display: block; padding-top: 3rem; }
  .menu-page-head { padding: 1.5rem; }
  .page-head > p { margin-top: 1.5rem; }
  .steps, .product-grid, .story-grid, .route-steps { grid-template-columns: 1fr; }
  .product-detail { min-height: calc(100svh - 7.5rem); margin-top: .5rem; }
  .detail-copy { right: 1rem; width: auto; }
  .catalog-note, .information-section { grid-template-columns: 1fr; gap: 1rem; }
  .complement-menu { grid-template-columns: 1fr; }
  .complement-menu button:nth-child(n) { padding-inline: 0; border-left-width: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .section-intro { display: block; }
  .section-intro > p { margin-top: 1.5rem; }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; }.hero-media { min-height: 26rem; }.hero-copy { min-height: 32rem; }
}

@media (max-width: 520px) {
  .hero { width: calc(100% - 1rem); }
  .hero-copy { padding: 1.5rem; }
  .hero-copy h1 { font-size: 3.5rem; }
  .product-card { min-height: 28rem; }
  .menu-page-head { display: block; padding: 1.4rem; }
  .menu-page-title { min-height: 0; padding-left: 0; }
  .menu-page-icon { width: 8.5rem; margin: -1rem -1rem .25rem .5rem; }
  .menu-page-head > p { margin-top: 1rem; font-size: 1rem; }
  .menu-how { gap: .35rem; font-size: .68rem; letter-spacing: .04em; }
  .recipe-grid { grid-auto-columns: 84vw; gap: .75rem; padding-inline: 8vw; scroll-padding-inline: 8vw; }
  .detail-copy h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .product-detail-close { top: .8rem; right: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sólo para lectores de pantalla. Va en clase y NO en style="": la CSP de la tienda
   declara style-src 'self', así que el navegador ignora todo estilo en línea — y así
   fue como «Agregado: <platillo>» se pintaba a la vista (Pablo, 28 sep 2026). */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* C-75: franjas con su disponibilidad. El estado se dice con texto y tachado, no con el tono (S67). */

/* Las coliflores (Ana, 10-OCT-2026): sin foto todavía, el recuadro de la marca; y la leyenda de alérgenos. */
.menu-card-sinfoto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--color-verde-fresco); }
.menu-card-sinfoto img { width: 46%; height: auto; }
.menu-card-aviso { font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25; }
.hoja-aviso { margin: 0 0 1.25rem; padding: .7rem 1rem; border: 2px solid var(--paper); border-radius: .85rem; font-weight: 700; }
.menu-product-card[hidden] { display: none; }
/* Contacto (Ana, 10-OCT-2026): correo y teléfono, en filas como las de la ayuda. */
.contacto-lista { max-width: 52rem; margin-block: 2.5rem 5rem; border-top: 1px solid var(--ink); }
.contacto-fila { display: grid; gap: .25rem; margin: 0; padding: 1.25rem 0; border-bottom: 1px solid var(--ink); }
.contacto-fila a { font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 600; overflow-wrap: anywhere; }