/* Madelina by Marcela — capa de la tienda. Lenguaje de APLICACIÓN, no de revista.
   Pixel, 2026-08-06. Reescrita esa misma noche tras la revisión de Romfeli.

   **Qué cambió y por qué.** La primera versión salió editorial —serif de titular, esquinas de
   2px, aire de imprenta— porque se ancló en el manual de marca de Marcela, que está hecho para
   papel y packaging. Las capturas que ella eligió (`benchmark/referencias/`) piden lo contrario:
   una app. Tarjetas de esquina blanda, sans geométrica en negrita, rejillas de iconos, botón
   fijo abajo, y el producto **recortado flotando sobre un bloque de color plano**, que es el
   lenguaje del catálogo de comida rápida.

   **La tensión era real y así se resuelve, que es como la resuelve la propia referencia:**
   serif SOLO para el nombre del postre y los momentos de marca; sans negrita para toda la
   interfaz. La marca no se pierde: los colores y el patrón de rayas son los de su manual, no
   el morado de mellow.

   Esta hoja NO declara ni un color literal: todo sale de los tokens de la capa de marca. */

body { background: var(--lienzo); }

/* La tienda se usa con el pulgar. Los titulares de interfaz van en sans negrita —no en la
   serif de la landing— porque aquí no se lee: se navega. */
.tienda h1, .tienda h2, .tienda h3,
.panel__titulo, .seccion__titulo {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tienda h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); }

/* Rótulo de campo y de sección: mayúsculas pequeñas, como en la referencia */
.rotulo {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.4rem;
}

/* ── Cabecera fija, estilo píldora ──────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Opaca y SIN `backdrop-filter`. El desenfoque de una capa fija se recalcula en cada
     fotograma del scroll: en Android va por GPU y no se nota, pero en iPhone —Safari y también
     Chrome, que en iOS usa el mismo motor— hacía que la página «se moviera lenta», con dos capas
     difuminando a la vez. Lo reportó Romfeli desde su iPhone 14 Pro el 2026-09-17.
     Y opaca del todo: se probó con un 97%, y sin desenfoque ese 3% dejaba leer el título del
     postre detrás de «MADELINA» al bajar (`tienda/pruebas/test_iphone.py`). */
  background: var(--lienzo);
}
.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
}
/* `min-height: 44px` aunque el logotipo mida 23 de alto: el enlace al inicio es un objetivo
   táctil como cualquier otro, y medía 112×23 — por debajo del mínimo AA. Lo encontró el check,
   no el ojo: en la captura se ve perfectamente pulsable. */
.barra__marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
}
.barra__marca img { display: block; width: clamp(112px, 30vw, 150px); height: auto; }

/* Botón redondo de icono: atrás, usuario, carrito */
/* 2.75rem = 44px exactos: WCAG 2.2 SC 2.5.5 (AAA) y Apple HIG. Estaba en 2.6rem —41.6px, que
   el navegador redondea a 42— y el check de `UX.md` lo marcó. Dos píxeles que nadie ve y que
   son la diferencia entre cumplir la recomendación y no cumplirla. */
.icono {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  border: 0;
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra-tarjeta);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transicion);
}
.icono:hover, .icono:focus-visible { transform: scale(1.05); }
.icono svg { width: 1.2rem; height: 1.2rem; display: block; }
/* La cuenta del carrito va sobre el icono, no al lado: a 360px no sobra ancho */
.icono { position: relative; }
.icono__cuenta {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: var(--radio-pildora);
  background: var(--rosa-topo);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ── Hero curvo ─────────────────────────────────────────────────────────────── */
.hero-tienda {
  position: relative;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  margin-bottom: 1.75rem;
}
/* Clase propia y NO `.hero-tienda img`: ese selector tiene más especificidad que
   `.hero-tienda__logo` y le imponía `object-fit: cover` al logotipo, que salía recortado a
   «DEL». Seleccionar por etiqueta dentro de un componente pisa a sus propios modificadores. */
.hero-tienda__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-tienda__velo { position: absolute; inset: 0; background: color-mix(in srgb, var(--tinta) 35%, transparent); }
/* `brightness(0) invert(1)` = blanco puro, sea cual sea el color de origen del trazo.
   `max-width` además de `width` porque el SVG no trae caja intrínseca y sin tope se estira
   hasta desbordar el hero — salió recortado en la captura de 360px. */
.hero-tienda__logo {
  position: relative;
  width: 58%;
  max-width: 260px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* ── Sección con «Ver todo» ─────────────────────────────────────────────────── */
.fila-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 0.9rem;
}
.fila-titulo h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.ver-todo {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rosa-topo);
  text-decoration: none;
  white-space: nowrap;
}
.ver-todo:hover, .ver-todo:focus-visible { text-decoration: underline; }

/* ── Vitrina: dos columnas en móvil, como la referencia ─────────────────────── */
.vitrina { padding-bottom: 6rem; }   /* hueco para la barra fija de abajo */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tarjeta {
  background: var(--superficie);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
}
.tarjeta__enlace { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

/* EL bloque de color. La foto va recortada y flotando encima, como el catálogo de una
   cadena de comida rápida: producto centrado, sin fondo, sobre un plano liso.
   El color rota por posición y no se guarda en el modelo: es presentación, y meterlo en la
   base obligaría a Marcela a elegir un color cada vez que sube un postre. */
.tarjeta__medio {
  position: relative;
  aspect-ratio: 1;
  /* `overflow` y `min-height: 0`: sin ellos, en iPhone la foto VERTICAL de un cuchareable
     estiraba el bloque más allá del cuadrado —219px de alto contra 169 de ancho— y la fila
     de tarjetas quedaba dentada. Chrome respeta el `aspect-ratio`; Safari deja que el
     contenido lo empuje. */
  overflow: hidden;
  min-height: 0;
  display: grid;
  place-items: center;
}
.tarjeta:nth-child(4n+1) .tarjeta__medio { background: color-mix(in srgb, var(--lima) 78%, var(--blanco)); }
.tarjeta:nth-child(4n+2) .tarjeta__medio { background: color-mix(in srgb, var(--rosa-viejo) 30%, var(--blanco)); }
.tarjeta:nth-child(4n+3) .tarjeta__medio { background: color-mix(in srgb, var(--sabio) 38%, var(--blanco)); }
.tarjeta:nth-child(4n+4) .tarjeta__medio { background: color-mix(in srgb, var(--rosa-topo) 18%, var(--blanco)); }

/* `contain` para la foto RECORTADA: se enseña entera, flotando sobre el color. `cover` la
   cortaría por los bordes, que es lo contrario de este estilo. */
/* La foto FUERA del flujo: posicionada y no hija de la rejilla. Así no puede empujar el tamaño
   del bloque en ningún navegador, y el cuadrado lo decide solo el `aspect-ratio`. El margen de
   dentro deja el postre flotando con aire sobre el color, como en la referencia. */
.tarjeta__medio img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
}

/* Y el caso real de hoy: una foto con su propio fondo. Encogida dentro del bloque se vería
   como un rectángulo pegado sobre otro, así que llena el bloque y el color no se ve. El modelo
   lo decide solo mirando el canal alfa — a Marcela no se le pregunta qué es una transparencia. */
.tarjeta__medio--llena img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El «+» negro flotante de la esquina. Abre la ficha —no añade al carrito— porque sin fecha
   de entrega no se puede añadir, y un «+» que aparenta sumar y navega estaría mintiendo. */
.tarjeta__mas {
  flex: 0 0 auto;
  /* 2.25rem y no 2.75: ya no es objetivo táctil propio. La tarjeta ENTERA es el enlace, así que
     el pulgar acierta en cualquier parte de ella; el círculo es la pista, y en el pie tiene que
     convivir con el precio en tarjetas de 160px. */
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio-pildora);
  background: var(--tinta);
  color: var(--blanco);
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-flotante);
}
/* El icono se centra por su caja, no por una línea base: es lo que hace que quede exacto */
.tarjeta__mas svg { width: 1.1rem; height: 1.1rem; display: block; }
.tarjeta__enlace:hover .tarjeta__mas { background: var(--rosa-topo); }

.tarjeta__cuerpo { padding: 0.75rem 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
/* Serif SOLO aquí: es el momento de marca, igual que el nombre manuscrito de la referencia */
.tarjeta__nombre { font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; margin: 0; }
/* El pie: precio a la izquierda, + a la derecha, siempre abajo aunque el nombre ocupe dos
   líneas — así los precios de una misma fila quedan a la misma altura. */
.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.45rem;
}
.tarjeta__precio {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rosa-topo);
  margin: 0;
  min-width: 0;
  line-height: 1.2;
}
.tarjeta--agotada .tarjeta__medio img { opacity: 0.5; }

/* Hueco declarado: sin foto no se pone una de banco (principio 9), se dice que falta */
.falta-foto {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px dashed currentColor;
  border-radius: var(--radio-pildora);
  padding: 0.3rem 0.7rem;
}

/* ── Etiquetas de estado ────────────────────────────────────────────────────
   Nunca un punto de color: texto explícito. Impreso en blanco y negro se entiende igual
   (WCAG 1.4.1). El color acompaña; la palabra informa. */
.estado {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radio-pildora);
  color: var(--espera);
  background: color-mix(in srgb, var(--tinta-suave) 10%, transparent);
}
.estado--exito { color: var(--exito); background: color-mix(in srgb, var(--sabio) 22%, transparent); }
.estado--atencion { color: var(--atencion); background: color-mix(in srgb, var(--rosa-topo) 14%, transparent); }

/* ── Ficha ──────────────────────────────────────────────────────────────────
   La referencia la enseña como hoja que sube desde abajo. Se adopta la forma, no el
   mecanismo: sigue siendo una página con URL propia, porque aquí el catálogo se comparte
   por WhatsApp y un postre que no se puede enlazar no se puede recomendar. */
.ficha { padding-bottom: 7rem; }
.ficha__medio {
  border-radius: var(--radio-tarjeta);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--lima) 78%, var(--blanco));
}
.ficha__medio img { width: 100%; height: 100%; object-fit: contain; }

.ficha__cuerpo { padding-top: 1.25rem; }
.ficha__nombre { font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.6rem); margin: 0 0 0.3rem; }
.ficha__precio { font-family: var(--sans); font-size: 1.45rem; font-weight: 700; color: var(--rosa-topo); margin: 0; }
/* El bolívar va debajo y más pequeño: al lado y del mismo tamaño se lee mal cuál se cobra */
.ficha__bolivares { font-size: 0.85rem; color: var(--tinta-suave); margin: 0.15rem 0 1.1rem; }
.ficha__descripcion { color: var(--tinta-suave); font-size: 0.95rem; }

/* ── Tarjetas de contenido ──────────────────────────────────────────────────── */
.panel {
  background: var(--superficie);
  border-radius: var(--radio-tarjeta);
  padding: 1.15rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-tarjeta);
}
.panel--suave { background: color-mix(in srgb, var(--tinta-suave) 6%, transparent); box-shadow: none; }
.panel__titulo { font-size: 1.15rem; margin: 0 0 0.85rem; }

/* ── Campos ─────────────────────────────────────────────────────────────────── */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.campo { margin-bottom: 0.9rem; }
.campo input, .campo select, .campo textarea {
  font: inherit;
  font-size: 1rem;          /* 16px reales: por debajo, iOS hace zoom al enfocar */
  width: 100%;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--tinta-suave) 22%, transparent);
  border-radius: var(--radio-campo);
  padding: 0.85rem 0.9rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--rosa-topo);
  outline: 2px solid color-mix(in srgb, var(--rosa-topo) 30%, transparent);
  outline-offset: 0;
}
.campo__ayuda { display: block; font-size: 0.78rem; color: var(--tinta-suave); margin-top: 0.3rem; }
/* `align-items: end` porque a 360px «¿Para qué día lo quieres?» ocupa dos líneas y «¿A qué
   hora?» una: alineados arriba, los dos campos quedan a distinta altura y parece un error de
   maquetación. Alineados abajo, las etiquetas respiran y los controles forman una sola fila. */
.campo--fila { display: flex; flex-direction: column; gap: 0.9rem; }
.campo--fila > * { flex: 1; min-width: 0; }
/* Uno debajo del otro en el teléfono (Romfeli, 2026-09-17: «no tienen separación»). En un
   iPhone el selector de fecha nativo escribe «19 sept 2026» y a 172px de ancho quedaba pegado al
   de la hora; lado a lado solo tiene sitio a partir de una tableta. */
@media (min-width: 600px) {
  .campo--fila { flex-direction: row; align-items: end; gap: 0.75rem; }
}

/* Los campos de fecha y hora de iOS, domados. Safari les pone su propio aspecto, ignora a
   medias el `width: 100%` y, VACÍOS, se encogen: sin texto dentro miden menos de alto que el
   resto de campos, y el formulario queda dentado justo donde la clienta tiene que elegir. Se
   les quita el aspecto nativo y se les da el alto de los demás. El selector que se abre al
   tocarlos sigue siendo el del sistema, que es lo que se quiere. */
.campo input[type="date"], .campo input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-height: 3.2rem;
  line-height: 1.2;
}
.campo input[type="date"]::-webkit-date-and-time-value,
.campo input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Un icono a la derecha que dice qué es cada campo. En iPhone, un campo de fecha VACÍO es una
   caja en blanco —ni «dd/mm/aaaa» ni nada—, y no se sabe que abre un calendario hasta tocarlo.
   Es justo el campo que la clienta no puede saltarse. */
.campo input[type="date"], .campo input[type="time"] {
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1.15rem;
  padding-right: 2.8rem;
}
.campo input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}
.campo input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* Y el icono nativo de Chrome se vuelve invisible PERO se estira sobre todo el campo. Con el
   nuestro al lado habría dos iconos; y escondido sin más, en Chrome de escritorio el calendario
   solo se abre pinchando ese icono invisible — o sea que el campo parecería roto. Estirado,
   cualquier clic en el campo lo abre, que es lo que ya pasa en un teléfono. */
.campo input[type="date"], .campo input[type="time"] { position: relative; }
.campo input[type="date"]::-webkit-calendar-picker-indicator,
.campo input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

/* ── Opciones con icono, en rejilla ─────────────────────────────────────────
   Es el patrón que ella usó de verdad para elegir método de pago: cuadros de dos
   columnas con icono arriba y nombre debajo. Un radio de 13px en una lista pide
   puntería que un pulgar no tiene. */
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.opciones--una { grid-template-columns: 1fr; }

.opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  min-height: 5.5rem;
  padding: 0.9rem 0.6rem;
  border: 1.5px solid color-mix(in srgb, var(--tinta-suave) 20%, transparent);
  border-radius: var(--radio-campo);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
/* El radio nativo sigue debajo: sin JavaScript y con teclado esto funciona igual */
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion svg { width: 1.4rem; height: 1.4rem; color: var(--tinta); }
/* Caja FIJA y `contain`, igual que la foto del postre y por el mismo motivo: los logos vienen
   en proporciones que no controlamos —PayPal es apaisado, Zelle casi cuadrado— y con la caja
   fija cualquiera encaja sin que la fila quede dentada ni dé un salto al cargar. Las medidas
   del atributo `width`/`height` del HTML son estas mismas, para que el hueco reservado antes
   de cargar sea exacto. */
.opcion__logo { width: 4.5rem; height: 1.75rem; object-fit: contain; }
.opcion__nombre { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }
.opcion__nota { font-size: 0.72rem; color: var(--tinta-suave); }

.opcion:has(input:checked) {
  border-color: var(--rosa-topo);
  background: color-mix(in srgb, var(--rosa-topo) 7%, transparent);
}
.opcion:has(input:checked) svg { color: var(--rosa-topo); }
/* El foco tiene que verse en la TARJETA: el radio está oculto y sin esto la página
   queda navegable a ciegas */
.opcion:has(input:focus-visible) { outline: 2px solid var(--rosa-topo); outline-offset: 2px; }

/* ── Botones ────────────────────────────────────────────────────────────────── */
.boton-app {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: var(--radio-pildora);
  background: var(--rosa-topo);
  color: var(--blanco);
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion);
}
.boton-app:hover, .boton-app:focus-visible { background: var(--atencion); transform: translateY(-1px); }
.boton-app[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.boton-app--claro { background: var(--superficie); color: var(--rosa-topo); box-shadow: var(--sombra-tarjeta); }

/* ── Barra fija inferior ────────────────────────────────────────────────────
   El total y la acción viajan con el pulgar. En una pantalla de teléfono el botón de
   comprar no puede estar «más abajo»: está siempre. */
.barra-abajo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  /* Opaca y sin desenfoque, por lo mismo que la cabecera: en iPhone el blur de una capa fija
     se recalcula en cada fotograma del scroll. */
  background: var(--superficie);
  border-top: 1px solid color-mix(in srgb, var(--tinta-suave) 15%, transparent);
  padding: 0.75rem 0 max(0.75rem, env(safe-area-inset-bottom));
}
.barra-abajo__fila { display: flex; align-items: center; gap: 0.9rem; min-height: 3.5rem; }
.barra-abajo__cifra { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.barra-abajo .boton-app { width: auto; flex: 1; }

/* Píldora flotante de seguimiento, como «¿Dónde está mi pedido?» de la referencia */
.flotante {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radio-pildora);
  background: var(--tinta);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--sombra-flotante);
  white-space: nowrap;
}
.flotante svg { width: 1rem; height: 1rem; }

/* ── Pasos 1 → 2 ────────────────────────────────────────────────────────────── */
.pasos-compra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 1.5rem;
}
.pasos-compra li {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  background: var(--superficie);
  color: var(--tinta-suave);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--sombra-tarjeta);
}
.pasos-compra__actual { background: var(--rosa-topo); color: var(--blanco); }
.pasos-compra__hecho { background: var(--tinta); color: var(--blanco); }
/* El separador es un <li> más —la lista tiene que seguir siendo una lista— así que hay que
   deshacerle la caja que le da `.pasos-compra li`.

   Y va con el padre delante A PROPÓSITO: `.pasos-compra li` es clase + etiqueta (0,1,1) y
   `.pasos-compra__linea` a secas es solo clase (0,1,0), así que la regla del cuadro GANABA y
   el separador salía como un cuadro vacío entre el 1 y el 2. Lo vio Romfeli en la web.

   Es exactamente el mismo tropiezo que ya está documentado en `.hero-tienda__logo`:
   seleccionar por etiqueta dentro de un componente pisa a sus propios modificadores. Dos
   veces el mismo error en esta hoja. */
.pasos-compra .pasos-compra__linea {
  width: 2.5rem;
  height: 1.5px;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--tinta-suave) 25%, transparent);
  align-self: center;
}

/* Texto solo para lectores de pantalla: «1» a secas no dice de qué paso se trata, pero
   escribir «1 · Tus datos» dentro del círculo no cabe. `clip-path` y no `display:none`,
   que lo sacaría también del árbol de accesibilidad. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Carrito ────────────────────────────────────────────────────────────────── */
.carro { padding-bottom: 8rem; }
.carro__lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.linea {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 0.85rem;
  align-items: center;
  background: var(--superficie);
  border-radius: var(--radio-tarjeta);
  padding: 0.7rem;
  box-shadow: var(--sombra-tarjeta);
}
.linea__foto {
  aspect-ratio: 1;
  border-radius: var(--radio-campo);
  background: color-mix(in srgb, var(--lima) 78%, var(--blanco));
  display: grid;
  place-items: center;
  padding: 0.3rem;
}
.linea__foto img { width: 100%; height: 100%; object-fit: contain; }
.linea__nombre { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; margin: 0; }
.linea__fecha { font-size: 0.78rem; color: var(--tinta-suave); margin: 0.15rem 0 0.3rem; }
.linea__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.linea__importe { font-family: var(--sans); font-weight: 700; color: var(--rosa-topo); font-size: 0.95rem; }
.linea__quitar {
  background: none; border: 0; padding: 0.2rem; font: inherit; font-size: 0.78rem;
  color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linea__quitar:hover, .linea__quitar:focus-visible { color: var(--atencion); }

.resumen__fila { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.92rem; }
.resumen__total { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--tinta-suave) 18%, transparent); margin-top: 0.4rem; padding-top: 0.7rem; }

/* ── Portada: las dos líneas que dicen qué es esto ──────────────────────
   Van bajo el hero y no encima de la textura, donde competirían con el logotipo.
   Es lo primero que lee quien llega desde el Instagram de Marcela. */
/* Centrado, como la entrada que va justo debajo. Sin esto quedaba a la izquierda mientras la
   frase de abajo iba centrada: en el móvil casi no se nota y a 1180px de ancho se ve roto —
   dos líneas del mismo bloque empezando en sitios distintos. Lo cazó Romfeli mirando la web
   el 2026-09-16, no ningún test: la alineación no se comprueba, se ve. */
.portada__lema {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-align: center;
  margin: 1.1rem 0 0.2rem;
}
.portada__entrada {
  font-family: var(--serif);
  font-size: 1.35rem;
  text-align: center;
  margin: 0 0 1.6rem;
}

.vacio { text-align: center; padding: 4rem 1rem; color: var(--tinta-suave); }
/* Es la ÚNICA salida de una pantalla vacía: si algo tiene que ser fácil de pulsar, es esto.
   Medía 99×23 y lo cazó el check de objetivo táctil. */
.vacio a {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
}

/* ── Pago combinado: divulgación progresiva ─────────────────────────────────
   El bloque de reparto solo existe si se eligió «Combinado». Quien elige Zelle no tiene por
   qué ver seis campos de importe que no va a rellenar — es ruido que parece un formulario
   incompleto (Krug: cada pantalla se defiende sola).

   Con CSS y sin JavaScript. Y el orden importa: primero se oculta, luego la regla `:has()` lo
   devuelve. Un navegador sin `:has()` ignora AMBAS reglas y lo ve siempre, que es el
   comportamiento anterior — se degrada a lo de ayer, nunca a algo roto. */
@supports selector(:has(*)) {
  .combinado { display: none; }
  form:has(input[value="combinado"]:checked) .combinado { display: block; }

  /* Lo mismo para la dirección: solo cuando eligen que se lo lleven. Pedirle la dirección a
     quien va a pasar a buscarlo es pedirle su casa para nada. */
  .a-domicilio { display: none; }
  form:has(input[value="delivery"]:checked) .a-domicilio { display: block; }
}
.a-domicilio { margin-top: 1.25rem; }

/* ── Cuadre del pago combinado ─────────────────────────────────────────────
   La única pieza donde el color cambia solo, así que el texto dice la CIFRA y no «ok»:
   quien no distinga el matiz sigue sabiendo cuánto falta. */
.cuadre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--radio-campo);
  font-family: var(--sans); font-size: 0.88rem;
  color: var(--atencion); background: color-mix(in srgb, var(--rosa-topo) 9%, transparent);
}
.cuadre--completo { color: var(--exito); background: color-mix(in srgb, var(--sabio) 22%, transparent); }
.cuadre__cifra { font-weight: 700; font-size: 1.05rem; }

/* ── Datos de cobro y comprobante ───────────────────────────────────────────── */
.datos-pago {
  /* Monoespaciada: son cifras que se copian a mano, y un 0 que parece una O acaba en una
     transferencia perdida que nadie sabe reconstruir. */
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.subida {
  border: 1.5px dashed color-mix(in srgb, var(--tinta-suave) 30%, transparent);
  border-radius: var(--radio-campo);
  padding: 1.5rem 1rem;
  text-align: center;
  background: color-mix(in srgb, var(--tinta-suave) 4%, transparent);
}
.subida svg { width: 1.5rem; height: 1.5rem; color: var(--tinta-suave); margin-bottom: 0.4rem; }
.subida input[type="file"] { font: inherit; font-size: 0.85rem; max-width: 100%; }
.subida__nota { font-size: 0.78rem; color: var(--tinta-suave); margin: 0.5rem 0 0; }

/* ── Recibo ─────────────────────────────────────────────────────────────────
   La clienta captura esta pieza y se la manda a Marcela por WhatsApp: tiene que leerse
   en una captura RECORTADA, sin depender de la cabecera para saber de quién es. Por eso
   el monograma va dentro. */
.recibo { background: var(--superficie); border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: var(--sombra-tarjeta); margin-bottom: 1.25rem; }
.recibo__banda { height: 6px; }
.recibo__cabeza { padding: 1.4rem 1.1rem 1.1rem; text-align: center; }
.recibo__mono { width: 46px; height: auto; color: var(--rosa-topo); }
.recibo__codigo { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; margin: 0.4rem 0 0.5rem; }
.recibo__cuerpo { padding: 0 1.1rem 1.1rem; }

/* ── Mensajes ───────────────────────────────────────────────────────────────── */
.mensajes { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.mensajes li {
  padding: 0.8rem 1rem; border-radius: var(--radio-campo);
  background: var(--superficie); box-shadow: var(--sombra-tarjeta);
  font-size: 0.88rem; color: var(--tinta);
  border-left: 3px solid var(--espera);
}
.mensajes .exito { border-left-color: var(--exito); }
.mensajes .error { border-left-color: var(--atencion); }

/* ── Pie discreto ───────────────────────────────────────────────────────────── */
.pie-app { padding: 2rem 0 7rem; text-align: center; color: var(--tinta-suave); font-size: 0.8rem; }
/* `inline-block` con altura: el enlace de Instagram está solo en su línea, no dentro de una
   frase, así que NO le aplica la excepción de WCAG 2.5.8 para enlaces en línea. Medía 114×19. */
.pie-app a {
  color: var(--rosa-topo);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* ── Escritorio: se ensancha, NO se rediseña ────────────────────────────────
   Esta tienda está pensada para el teléfono (decisión de Romfeli, 2026-08-06). En pantalla
   grande no se inventa otra composición: se centra la columna y se dejan respirar las
   tarjetas. Quien entre desde un portátil ve la misma app, más cómoda. */
@media (min-width: 700px) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .ficha__disposicion { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
  .ficha__cuerpo { padding-top: 0; }
  .barra-abajo { border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; max-width: 640px; margin-inline: auto; }
  .flotante { bottom: 1.5rem; }
}
@media (min-width: 1100px) {
  .tarjetas { grid-template-columns: repeat(4, 1fr); }

  /* ── Las pantallas de APP dejan de estirarse ───────────────────────────────
     El carrito, el checkout y la página del pedido son listas de una columna pensadas para
     390px. A 1180 de ancho, una línea del carrito deja el nombre a la izquierda y el «Quitar»
     desterrado a la derecha con medio metro de vacío en medio: el ojo deja de relacionarlos.

     El tope es el mismo 640 que ya tenía la barra de abajo desde los 700px — así el contenido
     y el botón de comprar comparten eje en vez de flotar cada uno por su lado. */
  .carro .contenedor { max-width: 640px; }

  /* ── El hero deja de comerse la pantalla ───────────────────────────────────
     16/9 a 1180px son 664px de foto: la primera pantalla entera sin un solo postre. En un
     teléfono esa proporción está bien porque el ancho es 390; estirada no. Se recorta a una
     franja, que es lo que hace un hero en escritorio. */
  .hero-tienda { aspect-ratio: 21 / 7; }

  /* El bloque de entrada se lee, no se estira: una línea de texto a 1180px de ancho obliga a
     los ojos a volver al principio buscando el renglón. */
  .portada__lema, .portada__entrada { max-width: 46rem; margin-inline: auto; }

  /* La cabecera acompaña al contenido en vez de pegarse a los bordes de la ventana. */
  .barra__fila { max-width: 1180px; }

  /* ── La ficha: dos columnas, pero a tamaño de lectura ──────────────────────
     Medía 530×707 de foto para un pote de postre — más alto que la ventana de mucha gente. La
     proporción 4:5 está bien en un teléfono de 390px; estirada a 570 no. Se acota la columna
     y con ella la foto, y el conjunto se centra en vez de ocupar el ancho entero. */
  .ficha__disposicion { max-width: 920px; margin-inline: auto; }
  .ficha__medio { max-width: 380px; }
}

/* ── Botón flotante de WhatsApp (2026-08-21) ─────────────────────────────────
   Rosa topo con el glifo en blanco: el mismo par que `.boton-app`, que es el
   color de acción de esta tienda. Medido, no elegido a ojo: 4,92:1 el círculo
   contra el lienzo (WCAG 1.4.11 pide 3:1 para poder identificar un control) y
   5,44:1 el glifo dentro.

   NO lleva el verde de WhatsApp. #25D366 sobre este fondo da 1,80:1 y su glifo
   blanco encima, 1,98:1 — falla en cualquier sitio, porque ese segundo número no
   depende del fondo de la página sino del par glifo/círculo. Lo que identifica a
   WhatsApp es la forma del glifo, no el tono. */
.wa-flotante {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;

  /* 56px: por encima de los 44 de objetivo táctil, y el círculo entero es el
     área que responde, no el dibujo. */
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;

  background: var(--rosa-topo);
  color: var(--blanco);
  box-shadow: var(--sombra-tarjeta, 0 2px 12px rgb(0 0 0 / 0.25));
  transition: transform var(--transicion), background var(--transicion);
}

.wa-flotante svg { width: 30px; height: 30px; }

.wa-flotante:hover,
.wa-flotante:focus-visible { background: var(--atencion); transform: translateY(-2px); }

.wa-flotante:focus-visible { outline: 3px solid var(--blanco); outline-offset: 0; box-shadow: 0 0 0 6px var(--atencion); }

/* Donde hay barra de abajo, el círculo de WhatsApp se sube ENCIMA de ella. Antes quedaban en
   la misma esquina y el círculo tapaba el botón de «Agregar al carrito» o «Proceder al pago» —
   medido en un iPhone 14 Pro: se solapaban 56px—. La barra mide 0,75 + 3,5 + 0,75 rem, que es
   el alto fijo que se le da arriba precisamente para poder calcular esto sin adivinar.
   Hoy solo coinciden en la ficha: el carrito y el checkout ya no pintan el círculo. */
body:has(.barra-abajo) .wa-flotante {
  bottom: calc(5rem + 0.75rem + env(safe-area-inset-bottom, 0px));
}
/* Y el contenido deja sitio para las dos cosas: sin esto, lo último de la página —el último
   postre del carrito, el campo de la hora— quedaba escondido debajo de la barra. */
body:has(.barra-abajo) main { padding-bottom: calc(5rem + 1.5rem + env(safe-area-inset-bottom, 0px)); }

/* El pie necesita sitio abajo para que el último renglón no quede debajo del
   círculo justo cuando alguien llega al final buscando el contacto. */
.pie, footer { padding-bottom: calc(56px + 2rem); }

/* Pero solo donde el botón lo tapa de verdad. En escritorio el círculo flota en una esquina
   con toda la ventana de sobra, y esa reserva deja un vacío al final de la página que se lee
   como que falta algo — lo vio Romfeli mirando la web, no un test. */
@media (min-width: 1100px) {
  .pie, footer { padding-bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flotante { transition: none; }
  .wa-flotante:hover { transform: none; }
}

/* ── Horario de atención ─────────────────────────────────────────────────────
   Dos líneas por tramo en el móvil y no «Lunes a miércoles de 12:00 pm a 6:00 pm» en una
   sola: a 360px esa línea parte por donde le toca y el día acaba separado de su hora. */
.horario { list-style: none; margin: 0; padding: 0; }
.horario li { margin-bottom: 0.5rem; }
.horario__dias { display: block; }
.horario__horas { display: block; color: var(--tinta-suave); }
.horario__nota {
  /* La aclaración que evita la llamada: el cartel dice cuándo atiende, no cuándo entrega. */
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

/* La dirección dentro del recibo: separada del importe por una línea, porque son dos cosas
   distintas que la clienta comprueba por separado. */
.recibo__entrega {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--rosa-topo) 15%, transparent);
  font-size: 0.9rem;
}
.recibo__entrega p { margin: 0 0 0.25rem; }
.recibo__entrega * + .rotulo { margin-top: 0.75rem; }

/* ── El paso a paso de cantidad ───────────────────────────────────────────────
   Tres formularios y no uno: cada botón manda su propia acción y funciona sin JavaScript.
   44px por botón, que es el objetivo táctil que exige UX.md. */
.paso-cantidad { display: flex; align-items: center; gap: .25rem; }
.paso-cantidad__boton {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--rosa-topo) 35%, transparent);
  background: var(--blanco); color: var(--rosa-topo);
  font-family: var(--sans); font-size: 1.1rem; line-height: 1;
}
.paso-cantidad__boton:hover, .paso-cantidad__boton:focus-visible { background: var(--lima); }
.paso-cantidad__cifra {
  min-width: 2ch; text-align: center;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
}
.seguir { text-align: center; margin-top: 1.25rem; }
.seguir a { font-family: var(--sans); font-size: .9rem; color: var(--rosa-topo); }

/* El pie de la app, centrado también cuando la ventana es ancha. */
.pie-app .contenedor { max-width: 640px; }

/* ── Blog ─────────────────────────────────────────────────────────────────────
   Una columna de lectura, no el ancho de la ventana: un párrafo a 1180px obliga a los ojos a
   volver al principio buscando el renglón siguiente. */
.contenedor--lectura { max-width: 44rem; }

.entrada-blog {
  display: block; background: var(--blanco); border-radius: var(--radio-tarjeta);
  padding: 1.25rem; margin-bottom: .85rem; text-decoration: none; color: inherit;
}
.entrada-blog__titulo { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .35rem; }
.entrada-blog__entradilla { color: var(--tinta-suave); margin: 0; font-size: .92rem; line-height: 1.5; }

.articulo { padding: 1.5rem 0 3rem; }
.articulo__titulo { font-family: var(--serif); font-size: 1.9rem; line-height: 1.2; margin: 0 0 .6rem; }
.articulo__entradilla { font-size: 1.05rem; color: var(--tinta-suave); line-height: 1.6; margin: 0 0 1.75rem; }
.articulo__cuerpo { line-height: 1.7; }
.articulo__cuerpo h2 { font-family: var(--serif); font-size: 1.35rem; margin: 2rem 0 .6rem; }
.articulo__cuerpo h3 { font-family: var(--sans); font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.articulo__cuerpo p, .articulo__cuerpo li { margin-bottom: .9rem; }
.articulo__cuerpo a { color: var(--rosa-topo); }

/* El postre del que habla el artículo: es el punto entero de escribirlo.
   Rejilla y no flex con salto de línea: en un iPhone la foto de 120px y el texto no cabían en
   la misma fila, la foto quedaba sola arriba a la izquierda y la tarjeta parecía rota. Ahora es
   foto y nombre en una fila, y el botón a todo el ancho debajo, al alcance del pulgar. */
.postre-articulo {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem 1rem; align-items: center;
  background: var(--blanco); border-radius: var(--radio-tarjeta);
  padding: 1rem; margin: 2.5rem 0;
}
.postre-articulo--sin-foto { grid-template-columns: 1fr; }
.postre-articulo__foto {
  display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radio-campo); background: var(--lienzo);
}
.postre-articulo__foto img { width: 100%; height: 100%; object-fit: contain; }
.postre-articulo__nombre { font-family: var(--serif); font-size: 1.2rem; margin: 0; }
.postre-articulo__nombre a { color: inherit; text-decoration: none; }
.postre-articulo__precio { color: var(--rosa-topo); font-family: var(--sans); font-weight: 700; margin: .2rem 0 0; }
.postre-articulo__accion { grid-column: 1 / -1; }
.postre-articulo__accion .boton-app { width: 100%; }
.postre-articulo__agotado { margin: 0; color: var(--tinta-suave); }

/* `<details>` y no JavaScript: el navegador ya sabe abrir y cerrar, y Google lee el contenido
   aunque esté plegado. */
.faq { margin-top: 2.5rem; }
.faq h2 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 1rem; }
.faq__item {
  background: var(--blanco); border-radius: var(--radio-campo);
  padding: .95rem 1.1rem; margin-bottom: .6rem;
}
.faq__item summary {
  font-family: var(--sans); font-weight: 600; cursor: pointer; min-height: 32px;
  line-height: 1.45;
  /* El triángulo del navegador se dibuja distinto en cada uno —en iPhone salía un «▶» de
     texto—. Se quita y se pone la misma flecha de los desplegables de la tienda. */
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%); transition: transform var(--transicion);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq__item p { margin: .6rem 0 0; line-height: 1.6; color: var(--tinta-suave); }
.borrador {
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  background: var(--lima); border-left: 5px solid var(--atencion);
  border-radius: var(--radio-campo); padding: .75rem 1rem; margin: 0 0 1.25rem;
}


/* ── iPhone: lo que Safari decide por su cuenta ───────────────────────────────
   Safari —y Chrome en iOS, que usa su mismo motor— le pone a botones y campos un aspecto propio
   (degradados, bordes redondeados distintos, sombras) que en Android no existe. Es la razón de
   que la tienda se viera bien en un Android y rara en un iPhone. Se quita en la base y cada
   componente pone el suyo. */
button, input, select, textarea { -webkit-appearance: none; appearance: none; }
/* Pero no a casillas ni radios: sin su aspecto nativo desaparecen, porque su dibujo ES el
   aspecto. */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; }
/* El destello gris que iOS pone al tocar un enlace: en tarjetas grandes se ve como un bloque
   gris ocupando toda la tarjeta un instante. El foco visible ya dice qué se tocó. */
a, button { -webkit-tap-highlight-color: transparent; }
/* Sin retraso ni zoom por doble toque en lo que se pulsa rápido: el ± del carrito se toca dos
   veces seguidas y iOS lo interpretaba como «ampliar». */
button, .tarjeta__enlace, .opcion { touch-action: manipulation; }
/* Los desplegables pierden la flecha con `appearance: none`: se devuelve dibujada. */
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B4A4F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.6rem;
}

/* ── El ± de la ficha ─────────────────────────────────────────────────────────
   Sin JavaScript solo se ve el campo, de ancho normal. Con JavaScript los botones aparecen a
   los lados y el campo se estrecha al número. */
.paso-cantidad--ficha { gap: 0.6rem; }
.paso-cantidad__campo {
  /* 16px: por debajo iOS hace zoom al enfocar y descoloca la pantalla entera. */
  font-size: 1rem !important;
  text-align: center;
}
.paso-cantidad--vivo .paso-cantidad__campo {
  width: 4.5rem !important;
  flex: 0 0 auto;
  /* Sin las flechas nativas donde las hay (Android, escritorio): con el ± al lado sobran y
     aprietan el número. */
  -moz-appearance: textfield;
}
.paso-cantidad--vivo .paso-cantidad__campo::-webkit-outer-spin-button,
.paso-cantidad--vivo .paso-cantidad__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso-cantidad__boton:disabled { opacity: 0.35; cursor: default; }

/* Mientras viaja el toque, la línea lo dice sin moverse: bajar la opacidad no cambia el alto y
   no desplaza nada de lo que hay debajo. */
.linea--cargando { opacity: 0.6; transition: opacity 0.15s; }