/* ============================================================
   La tienda

   Contra diseño/la-tienda.html. Las medidas de acá están
   cerradas y medidas: cambiar una es cambiar el diseño.
   ============================================================ */

*{box-sizing:border-box}

/* las dos pantallas comparten el ancho de columna, pero no el alto: la carta
   fija la ventana para que la cabecera quede quieta, y el inicio fluye */
.tienda,
.inicio{max-width:520px;margin:0 auto}

/* el alto de la carta es el de la ventana: así la cabecera y las solapas
   quedan fijas y lo único que se mueve es la lista. dvh y no vh porque en el
   teléfono la barra del navegador aparece y desaparece */
.tienda{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ---------- la cabecera ---------- */
/* sin línea arriba de todo: el borde de la pantalla ya cierra */
.tapa{
  flex:none;
  padding:1.25rem .95rem 1rem;
  display:flex;justify-content:center;
  border-bottom:2px solid transparent;position:relative;
}
.logo{display:block;width:104px;height:104px;flex:none}

/* ---------- las solapas de la carta ---------- */
.solapas{display:flex;gap:2px;border-bottom:2px solid transparent;flex:none;position:relative;z-index:0}
.solapas button{
  flex:1 1 0;min-width:0;font-family:var(--ui);font-weight:800;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--verde);border:0;padding:.72rem .3rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;position:relative;
  transition:color .16s ease;
}
.solapas button[aria-pressed="true"]{color:var(--papel)}
.solapas .dib{width:28px;height:28px}
.solapas button:focus-visible{outline:2px solid var(--verde);outline-offset:-4px}

.lista{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}

/* provisorio: se va en el commit 18, cuando entren las empanadas */
.vacio{
  margin:auto;padding:2rem 1.5rem;text-align:center;
  color:var(--piedra);font-size:.86rem;font-weight:600;
}

/* ---------- el cartel de los ingredientes ----------
   Arriba de la primera pizza y en el flujo, no encima: taparle el primer
   renglón con el cartel que explica cómo usarlo sería esconder justo lo que
   explica. Cuando se va, el hueco se cierra solo y la lista sube.

   El costado es el mismo .95rem que todo lo demás y abajo no lleva nada: el
   primer <li> ya trae su --aire. El cuerpo de la pastilla es el de .frase en el
   checkout, que es el mismo dibujo.

   Arriba son 1,6rem y no los 2rem del segmentado de packs. Medido, 2rem deja
   los dos huecos iguales —24 px contra 24— pero se ven distintos: el de arriba
   linda con una línea fina y el de abajo con la Bowlby maciza, y el mismo
   espacio al lado de algo pesado se lee más chico. Los 6 px de menos son esa
   corrección, no un descuido. */
/* flex:none no es decorativo: .lista es flex en columna y el overflow:hidden
   de aca le resuelve el min-height a 0, asi que con la lista mas alta que la
   pantalla el flex lo encogia hasta desaparecer y el cartel terminaba
   encimado con el primer renglon */
.hueco-pista{overflow:hidden;flex:none}
.hueco-pista[hidden]{display:none}
.pista{
  position:relative;margin:1.6rem .95rem 0;padding:.6rem .7rem;
  font-family:var(--ui);font-size:.8rem;font-weight:700;
  text-align:center;color:var(--verde);pointer-events:none;
}
.pista::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background-color:rgba(30,82,69,.14);
  -webkit-mask:var(--frase) center/100% 100% no-repeat;
  mask:var(--frase) center/100% 100% no-repeat;
}
.hueco-pista{transition:height .42s ease}
.pista{transition:opacity .28s ease}
.hueco-pista.ido .pista{opacity:0}
.pista{animation:asomar .42s ease backwards}
@keyframes asomar{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* ---------- el renglón de la carta ---------- */
ol.carta{list-style:none;margin:0;padding:0}
ol.carta li{padding:var(--aire) .95rem;border-bottom:1px solid transparent;position:relative}

.renglon{display:flex;align-items:baseline;gap:.55rem}
.nombre{
  font-family:var(--cara);font-size:var(--tit);line-height:1.12;
  letter-spacing:-.02em;margin:0;-webkit-text-stroke:var(--grosor) currentColor;
}
/* los puntos suspensivos entre el nombre y el precio: se estiran y por eso el
   precio queda siempre pegado al borde, alineado entre renglones */
.puntos{flex:1;border-bottom:2px dotted rgba(30,82,69,.42);transform:translateY(-.32rem);min-width:1.2rem}
.plata{
  margin:0;font-family:var(--cara);font-size:calc(var(--tit) * .92);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  -webkit-text-stroke:var(--grosor) currentColor;
}

.abajo{display:flex;align-items:center;gap:.6rem;margin-top:.55rem}
/* nowrap a propósito: los cuatro ingredientes tienen que entrar en una fila.
   Si alguno se parte, el renglón está mal medido y hay que verlo */
.fila-ing{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0;min-width:0;flex:1}
.ing{
  font-family:var(--ui);font-weight:600;color:var(--verde);
  font-size:var(--ing-cuerpo);line-height:1.3;flex:0 0 auto;white-space:nowrap;
  display:inline-block;text-align:center;padding:.08rem .1rem;
  background:transparent;border:0;cursor:pointer;
  transition:background .15s ease,opacity .15s ease;
}
.ing:hover{background:rgba(30,82,69,.1)}
.ing:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
/* el sacado se tacha y se apaga, pero se sigue leyendo: el cliente tiene que
   ver que ese ingrediente existe y que lo saco el */
.ing[aria-pressed="false"]{opacity:.42;text-decoration:line-through;text-decoration-thickness:1.5px}
/* el fijo se ve igual que los demas y no reacciona: sin el deja de ser esa pizza */
.ing.fijo,.ing.fijo:disabled{cursor:default;color:var(--verde);opacity:1}
.ing.fijo:hover{background:transparent}
.sep{
  flex:0 0 auto;opacity:.5;padding:0 .3rem;
  font-size:var(--ing-cuerpo);font-weight:600;user-select:none;
}

/* ---------- las empanadas: packs de un gusto ---------- */
.tam{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
     column-gap:2px;border:2px solid transparent;margin:2rem .95rem 0;position:relative;z-index:0}
.tam button{
  min-width:0;position:relative;
  font-family:var(--ui);font-weight:800;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--verde);border:0;padding:.62rem .6rem;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.tam button[aria-pressed="true"]{color:var(--papel)}
.tam button:focus-visible{outline:2px solid var(--verde);outline-offset:-5px}

ol.gustos{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid transparent;position:relative}
ol.gustos li{
  display:flex;align-items:center;gap:.5rem;
  padding:.72rem .95rem;border-bottom:1px solid transparent;position:relative;
}
ol.gustos .nom{
  flex:1;margin:0;font-family:var(--cara);font-size:1.02rem;letter-spacing:-.02em;
  -webkit-text-stroke:var(--grosor) currentColor;min-width:0;
}
ol.gustos li.agotada{color:var(--piedra)}
ol.gustos li.agotada .nom{text-decoration:line-through}

/* el agotado se tacha, no se esconde: si se escondiera, el cliente no sabría
   que existe */
li.agotada{color:var(--piedra)}
li.agotada .nombre,
li.agotada .plata{text-decoration:line-through}
li.agotada .puntos{border-bottom-color:rgba(154,146,135,.5)}
li.agotada .ing,
li.agotada .ing.fijo,
li.agotada .ing.fijo:disabled{color:var(--piedra);pointer-events:none}
/* ---------- el contador ----------
   Va junto al precio y no al final del renglón: al final quedaba colgado
   cuando los ingredientes no llenaban el ancho. En cero se apaga el borde y
   el número, y el menos queda deshabilitado: no hay de dónde sacar.

   El contorno es la misma pastilla dibujada del botón, perfilada. Va en un
   pseudo por encima de las teclas: si fuera máscara del contador se comería
   los botones de adentro. El borde transparente y el radio se quedan igual
   para que la caja mida lo mismo y el fondo del hover siga recortado. */
.contador{
  display:inline-flex;align-items:center;flex:none;position:relative;
  border:1.4px solid transparent;border-radius:999px;overflow:hidden;height:var(--alto-c);
}
.contador::before{
  content:"";position:absolute;z-index:1;inset:-1.4px;pointer-events:none;
  background-color:var(--verde);
  -webkit-mask:var(--pastilla-hueca) center/100% 100% no-repeat;
  mask:var(--pastilla-hueca) center/100% 100% no-repeat;
}
.renglon .contador{align-self:center;margin-left:.15rem}
.contador button{
  width:var(--ancho-c);height:100%;border:0;background:transparent;color:var(--verde);
  cursor:pointer;display:grid;place-items:center;
  font-family:var(--ui);font-weight:800;font-size:.82rem;line-height:1;padding:0;
  transition:background .14s ease;
}
.contador button:hover:not(:disabled){background:rgba(30,82,69,.13)}
.contador button:disabled{opacity:.3;cursor:not-allowed}
.contador button:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.contador .n{
  min-width:var(--ancho-c);text-align:center;font-family:var(--ui);font-weight:800;
  font-size:.76rem;font-variant-numeric:tabular-nums;line-height:1;
}
.contador.cero::before{opacity:.45}
.contador.cero .n{opacity:.35}

/* El acuse de recibo. Al sumar una pizza cambian dos números a la vez —este y
   el total de la barra de abajo— y el ojo no puede estar en los dos lados: sin
   esto, el que mira el contador no ve que la barra se movió, y al revés.

   Los dos son hijos de un flex, así que ya son bloques y el transform los toma:
   no hace falta cambiarles el display. */
.late{animation:latido .34s ease}
@keyframes latido{
  0%{transform:scale(1)}
  38%{transform:scale(1.32)}
  100%{transform:scale(1)}
}

/* cuántos packs del otro tamaño ya lleva ese gusto: sin esto, cambiar de
   tamaño parece haber borrado lo que ya se habia sumado */
.otro{
  flex:none;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  opacity:.65;white-space:nowrap;
}
.renglon .otro{align-self:center;margin-right:.35rem}

/* la pastilla del agotado, dibujada igual que las demás. Va en su propio
   archivo y no estirando la del contador: al estirar una pastilla angosta a
   este ancho, el trazo de los lados verticales engorda y se nota */
.sello{
  flex:none;font-family:var(--ui);font-weight:800;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--piedra);
  border:1.4px solid transparent;border-radius:999px;padding:.2rem .55rem;
  align-self:center;white-space:nowrap;position:relative;
}
.sello::before{
  content:"";position:absolute;inset:-1.4px;pointer-events:none;
  background-color:var(--piedra);
  -webkit-mask:var(--pastilla-sello) center/100% 100% no-repeat;
  mask:var(--pastilla-sello) center/100% 100% no-repeat;
}

/* ---------- la barra del pedido ----------
   Arranca en alto cero y crece al sumar algo. Anima el alto y no la
   posición: así la lista se acomoda sola y el último renglón nunca queda
   tapado, que es lo que pasaría con una barra flotando encima.

   El borde de arriba no es una recta: se recorta con la misma onda que las
   demás líneas, anclada al mismo x, así queda en fase con ellas. La máscara
   mide 200 px de alto a propósito — la onda queda quieta arriba mientras la
   barra crece, en vez de estirarse con ella. */
/* el rótulo, el total y el botón van los tres juntos y el grupo al medio: se
   leen como una sola frase — qué llevás, cuánto sale y por dónde seguir */
.pedido{
  flex:none;background-color:var(--verde);color:var(--papel);
  padding:0 .95rem;display:flex;align-items:center;justify-content:center;gap:.7rem;
  height:0;overflow:hidden;
  transition:height .24s ease,padding .24s ease;
  -webkit-mask:var(--pie) repeat-x left top/auto 200px;
  mask:var(--pie) repeat-x left top/auto 200px;
}
/* los 4 px de más arriba son la media banda que se lleva la onda */
.pedido.visible{height:auto;padding-top:calc(.75rem + 4px);padding-bottom:.75rem}
.cuenta{flex:none;font-size:.86rem;font-weight:600}
/* el total en Archivo y no en Bowlby: Bowlby empasta los seis dígitos y no
   tiene números tabulares, así que el total saltaba de ancho al cambiar */
/* Archivo y no Bowlby: Bowlby empasta los seis dígitos sobre el verde y no
   tiene números tabulares, así que el total saltaba de ancho al cambiar */
.cuenta-total{
  flex:none;font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* la pastilla también va dibujada: es la misma onda, aplicada perpendicular al
   borde de una píldora. El radio lo pone el dibujo, no un border-radius */
.ver{
  font-family:var(--ui);font-weight:800;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;flex:none;text-decoration:none;
  display:inline-flex;align-items:center;
  background-color:var(--papel);color:var(--verde);border:0;
  padding:.55rem .95rem;cursor:pointer;
  -webkit-mask:var(--pastilla) center/100% 100% no-repeat;
  mask:var(--pastilla) center/100% 100% no-repeat;
}
.ver:focus-visible{outline:2px solid var(--papel);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pedido{transition:none}
  .hueco-pista,.pista{transition:none}
  .pista,.late,.listo > *{animation:none}
  /* de la entrada se va todo. Las líneas dibujadas son catorce pseudoelementos
     distintos; listarlos de nuevo acá sería una segunda copia de la lista de
     abajo que alguien se tiene que acordar de actualizar */
  .dibujando > *,.dibujando *::before,.dibujando *::after{animation:none}
}

/* ============================================================
   El inicio
   ============================================================ */

.portada{
  padding:1.25rem .95rem 1.15rem;display:flex;flex-direction:column;align-items:center;
  border-bottom:2px solid transparent;position:relative;
}
/* sin ancho máximo y con el cuerpo justo para que entre en un renglón:
   mide 314 px contra 358 disponibles */
.promesa{
  margin:0;font-family:var(--cara);font-size:1.04rem;line-height:1.2;text-align:center;
  letter-spacing:-.03em;-webkit-text-stroke:.4px currentColor;white-space:nowrap;
}

/* La franja del cuándo. Mismo fondo dibujado que la nota del WhatsApp en el
   checkout: es el mismo tipo de dato —algo que conviene saber antes de seguir—
   y no hacía falta inventarle una forma nueva. */
.franja{
  position:relative;z-index:0;margin:0 .95rem 1.15rem;padding:.7rem .8rem;
  font-size:.88rem;font-weight:700;text-align:center;line-height:1.4;
}
.franja::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background-color:rgba(30,82,69,.09);pointer-events:none;
  -webkit-mask:var(--frase) center/100% 100% no-repeat;
  mask:var(--frase) center/100% 100% no-repeat;
}
/* cerrada, el mismo renglón pasa a verde pleno y se queda solo al pie: es lo
   último que se lee y no hay botón abajo que le discuta el peso */
.franja.cerrada-ahora{color:var(--papel);margin-bottom:1.6rem}
.franja.cerrada-ahora::after{background-color:var(--verde)}

/* mismo padding que la portada. Sin línea abajo de todo: la última que se ve
   es la de arriba del botón */
.cta-pie{
  padding:1.25rem .95rem 1.15rem;
  border-top:2px solid transparent;position:relative;
}
.cta{
  display:block;width:100%;background:var(--verde);color:var(--papel);
  border:0;padding:.86rem;text-align:center;text-decoration:none;
  font-family:var(--ui);font-weight:800;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
}

.rubro{
  margin:0 0 .8rem;font-size:.67rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--piedra);
}
.seccion{padding:1.15rem .95rem}
.cierre{border-bottom:2px solid transparent;position:relative}

/* ---------- las credenciales ---------- */
.credenciales{display:flex;flex-direction:column}
.cred{display:grid;grid-template-columns:42px 1fr;gap:.7rem;align-items:start;padding:.85rem 0}
.cred:first-child{padding-top:0}
.cred:last-child{padding-bottom:0}
/* separador entre credenciales y ninguno después de la última: el bloque lo
   cierra la línea verde maciza de .cierre */
.cred + .cred{border-top:2px solid transparent;position:relative}
.cred .dib{width:42px;height:42px}
.cred b{display:block;font-size:.9rem;font-weight:700;line-height:1.25}
.cred span{display:block;font-size:.78rem;color:var(--piedra);line-height:1.35;margin-top:.1rem}

/* ---------- el recorrido ---------- */
.recorrido{list-style:none;margin:0;padding:0}
.recorrido li{
  display:grid;grid-template-columns:1.5rem 1fr;column-gap:.65rem;
  align-items:start;position:relative;padding-bottom:.95rem;
}
.recorrido li:last-child{padding-bottom:0}
/* la línea va continua de punta a punta: punteada dejaba huecos en los
   extremos y hacía parecer que los círculos estaban a distinta distancia */
/* la vertical se corre media banda para caer justo donde caía el borde */
.recorrido li::before{top:1.55rem;bottom:0;left:calc(.7rem + 1px - var(--trazo-alto) / 2)}
.solapas button + button::after,
.tam button + button::after{top:0;bottom:0;left:calc(-1px - var(--trazo-alto) / 2);z-index:1}
.recorrido li:last-child::before{display:none}
.recorrido .n{
  width:1.5rem;height:1.5rem;border:2px solid transparent;border-radius:50%;
  position:relative;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  font-variant-numeric:tabular-nums;background:var(--papel);
}
.recorrido .que{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.recorrido .que b{font-size:.93rem;font-weight:700;line-height:1.25}
.recorrido .que span{font-size:.78rem;color:var(--piedra);line-height:1.35}

/* el renglón de la espera va sin frase, y sin ella medía 39,2 px contra los
   51,9 de los demás: se le devuelven los 12,7 que faltaban para que la
   separación entre círculos quede pareja. El círculo no se centra porque
   centrarlo deja la distancia de arriba siempre 28 px distinta de la de abajo;
   se baja el título 2 px, que es lo único que hace falta */
.recorrido li.fermenta{padding-bottom:1.745rem}
.recorrido li.fermenta .que b{
  font-family:var(--cara);font-size:1rem;letter-spacing:-.02em;
  display:block;margin-top:2px;
}
.recorrido li.fermenta .n{border:0;background:transparent}
.recorrido li.fermenta .n svg{
  width:1.5rem;height:1.5rem;stroke:var(--verde);fill:var(--papel);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ============================================================
   Los dibujos

   Van como máscara y no como imagen: el archivo aporta la
   silueta y el color lo pone el texto. Por eso el mismo dibujo
   sale verde en una solapa apagada y crudo en la encendida, sin
   guardar dos versiones. Los PNG están a 160 px, el doble del
   uso más grande, para que aguanten en pantallas de 3x.
   ============================================================ */

.dib{
  display:block;flex:none;background-color:currentColor;
  -webkit-mask:var(--dibujo) center/contain no-repeat;
  mask:var(--dibujo) center/contain no-repeat;
}
.dib.fermento{--dibujo:url("../img/fermento.png")}
.dib.harina{--dibujo:url("../img/harina.png")}
.dib.envase{--dibujo:url("../img/envase.png")}
.dib.pizza{--dibujo:url("../img/pizza.png")}
.dib.empanada{--dibujo:url("../img/empanada.png")}
.dib.focaccia{--dibujo:url("../img/focaccia.png")}

/* ============================================================
   Las líneas

   Ninguna recta se saca: se vuelve transparente y encima se
   pinta el trazo con una máscara. El borde sigue ocupando su
   alto, así que ninguna medida cerrada de arriba se mueve, y
   como es máscara el trazo toma el color que le pongan, igual
   que los dibujos.
   ============================================================ */

.tapa::after,
.solapas::after,
.portada::after,
.cierre::after,
.cta-pie::before,
ol.carta li::after,
ol.gustos::before,
ol.gustos li::after,
.cred + .cred::before{
  content:"";position:absolute;left:0;right:0;height:var(--trazo-alto);
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--trazo) repeat-x left center/auto 100%;
  mask:var(--trazo) repeat-x left center/auto 100%;
}
/* El trazo va centrado sobre el borde que reemplaza, media banda de cada
   lado. Un absoluto se posiciona contra la caja de adentro, no contra el
   borde, asi que hay que sumarle el ancho del borde o el trazo queda corrido
   y el verde de al lado nunca cierra contra el. */
.tapa::after,
.solapas::after,
.portada::after,
.cierre::after{bottom:calc(var(--trazo-alto) / -2 - 2px)}
ol.carta li::after,
ol.gustos li::after{bottom:calc(var(--trazo-alto) / -2 - 1px)}
.cta-pie::before,
.cred + .cred::before{top:calc(var(--trazo-alto) / -2 - 2px)}
ol.gustos::before{top:calc(var(--trazo-alto) / -2 - 1px)}

/* las que en la maqueta eran suaves siguen suaves */
ol.carta li::after,
ol.gustos::before,
ol.gustos li::after{opacity:.35}
.cred + .cred::before{opacity:.55}

/* las verticales son el mismo trazo girado sobre su eje */
.recorrido li::before,
.solapas button + button::after,
.tam button + button::after{
  content:"";position:absolute;width:var(--trazo-alto);
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--trazo-v) repeat-y center top/100% auto;
  mask:var(--trazo-v) repeat-y center top/100% auto;
}

/* El relleno de lo elegido sale del MISMO dibujo que la línea que lo bordea.
   Un bloque de borde recto contra un trazo a pulso siempre deja papel de un
   lado y pintura de más del otro; recortándolo con la misma onda, el borde
   del verde y la línea son la misma curva y encajan exacto.

   Va detrás de los botones, tapando toda la fila, y se recorta a la columna
   encendida. La onda arranca en el mismo x que las dos líneas que toca, así
   que las tres van en fase. */
.solapas::before{
  content:"";position:absolute;z-index:-1;left:0;right:0;top:-4px;bottom:-6px;
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--banda) repeat-x left top/auto 100%;
  mask:var(--banda) repeat-x left top/auto 100%;
}

/* la caja del pack: el contorno y el relleno son el mismo camino, uno
   perfilado y el otro macizo, estirados igual. Por eso calzan */
.tam::after{
  content:"";position:absolute;z-index:1;inset:-2px;background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--caja) center/100% 100% no-repeat;
  mask:var(--caja) center/100% 100% no-repeat;
}
.tam::before{
  content:"";position:absolute;z-index:-1;inset:-2px;background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--caja-llena) center/100% 100% no-repeat;
  mask:var(--caja-llena) center/100% 100% no-repeat;
}

/* el botón deja de ser un rectángulo: es el mismo trazo, cerrado y macizo.
   Está dibujado a la proporción real que tiene en el teléfono, así al
   estirarlo al 100% la panza no se deforma */
.cta{
  -webkit-mask:var(--boton) center/100% 100% no-repeat;
  mask:var(--boton) center/100% 100% no-repeat;
}

/* el círculo del recorrido, también a pulso. El reloj de la espera no lleva:
   no es un número, es la marca del tiempo */
.recorrido li:not(.fermenta) .n::before{
  content:"";position:absolute;inset:-1px;background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--anillo) center/contain no-repeat;
  mask:var(--anillo) center/contain no-repeat;
}

/* El corte vertical del relleno tambien ondula, con la misma curva y en la
   misma fase que el divisor: un corte recto contra el trazo a pulso deja
   el mismo hilo de papel que teniamos arriba y abajo. */
.solapas:has(button:nth-child(1)[aria-pressed="true"])::before{clip-path:polygon(0 0px,0 110.00px,calc(33.3333% + 0.21px) 110.00px,calc(33.3333% + 0.49px) 106.07px,calc(33.3333% + 0.51px) 102.14px,calc(33.3333% + 0.26px) 98.21px,calc(33.3333% - 0.27px) 94.29px,calc(33.3333% - 0.46px) 90.36px,calc(33.3333% - 0.23px) 86.43px,calc(33.3333% + 0.29px) 82.50px,calc(33.3333% + 0.49px) 78.57px,calc(33.3333% + 0.38px) 74.64px,calc(33.3333% - 0.05px) 70.71px,calc(33.3333% - 0.44px) 66.79px,calc(33.3333% - 0.45px) 62.86px,calc(33.3333% - 0.08px) 58.93px,calc(33.3333% + 0.39px) 55.00px,calc(33.3333% + 0.51px) 51.07px,calc(33.3333% + 0.35px) 47.14px,calc(33.3333% - 0.07px) 43.21px,calc(33.3333% - 0.34px) 39.29px,calc(33.3333% - 0.28px) 35.36px,calc(33.3333% + 0.10px) 31.43px,calc(33.3333% + 0.46px) 27.50px,calc(33.3333% + 0.47px) 23.57px,calc(33.3333% + 0.17px) 19.64px,calc(33.3333% - 0.33px) 15.71px,calc(33.3333% - 0.53px) 11.79px,calc(33.3333% - 0.41px) 7.86px,calc(33.3333% + 0.01px) 3.93px,calc(33.3333% + 0.32px) 0.00px)}
.solapas:has(button:nth-child(2)[aria-pressed="true"])::before{clip-path:polygon(calc(33.3333% + 0.32px) 0.00px,calc(33.3333% + 0.01px) 3.93px,calc(33.3333% - 0.41px) 7.86px,calc(33.3333% - 0.53px) 11.79px,calc(33.3333% - 0.33px) 15.71px,calc(33.3333% + 0.17px) 19.64px,calc(33.3333% + 0.47px) 23.57px,calc(33.3333% + 0.46px) 27.50px,calc(33.3333% + 0.10px) 31.43px,calc(33.3333% - 0.28px) 35.36px,calc(33.3333% - 0.34px) 39.29px,calc(33.3333% - 0.07px) 43.21px,calc(33.3333% + 0.35px) 47.14px,calc(33.3333% + 0.51px) 51.07px,calc(33.3333% + 0.39px) 55.00px,calc(33.3333% - 0.08px) 58.93px,calc(33.3333% - 0.45px) 62.86px,calc(33.3333% - 0.44px) 66.79px,calc(33.3333% - 0.05px) 70.71px,calc(33.3333% + 0.38px) 74.64px,calc(33.3333% + 0.49px) 78.57px,calc(33.3333% + 0.29px) 82.50px,calc(33.3333% - 0.23px) 86.43px,calc(33.3333% - 0.46px) 90.36px,calc(33.3333% - 0.27px) 94.29px,calc(33.3333% + 0.26px) 98.21px,calc(33.3333% + 0.51px) 102.14px,calc(33.3333% + 0.49px) 106.07px,calc(33.3333% + 0.21px) 110.00px,calc(66.6667% + 0.21px) 110.00px,calc(66.6667% + 0.49px) 106.07px,calc(66.6667% + 0.51px) 102.14px,calc(66.6667% + 0.26px) 98.21px,calc(66.6667% - 0.27px) 94.29px,calc(66.6667% - 0.46px) 90.36px,calc(66.6667% - 0.23px) 86.43px,calc(66.6667% + 0.29px) 82.50px,calc(66.6667% + 0.49px) 78.57px,calc(66.6667% + 0.38px) 74.64px,calc(66.6667% - 0.05px) 70.71px,calc(66.6667% - 0.44px) 66.79px,calc(66.6667% - 0.45px) 62.86px,calc(66.6667% - 0.08px) 58.93px,calc(66.6667% + 0.39px) 55.00px,calc(66.6667% + 0.51px) 51.07px,calc(66.6667% + 0.35px) 47.14px,calc(66.6667% - 0.07px) 43.21px,calc(66.6667% - 0.34px) 39.29px,calc(66.6667% - 0.28px) 35.36px,calc(66.6667% + 0.10px) 31.43px,calc(66.6667% + 0.46px) 27.50px,calc(66.6667% + 0.47px) 23.57px,calc(66.6667% + 0.17px) 19.64px,calc(66.6667% - 0.33px) 15.71px,calc(66.6667% - 0.53px) 11.79px,calc(66.6667% - 0.41px) 7.86px,calc(66.6667% + 0.01px) 3.93px,calc(66.6667% + 0.32px) 0.00px)}
.solapas:has(button:nth-child(3)[aria-pressed="true"])::before{clip-path:polygon(calc(66.6667% + 0.32px) 0.00px,calc(66.6667% + 0.01px) 3.93px,calc(66.6667% - 0.41px) 7.86px,calc(66.6667% - 0.53px) 11.79px,calc(66.6667% - 0.33px) 15.71px,calc(66.6667% + 0.17px) 19.64px,calc(66.6667% + 0.47px) 23.57px,calc(66.6667% + 0.46px) 27.50px,calc(66.6667% + 0.10px) 31.43px,calc(66.6667% - 0.28px) 35.36px,calc(66.6667% - 0.34px) 39.29px,calc(66.6667% - 0.07px) 43.21px,calc(66.6667% + 0.35px) 47.14px,calc(66.6667% + 0.51px) 51.07px,calc(66.6667% + 0.39px) 55.00px,calc(66.6667% - 0.08px) 58.93px,calc(66.6667% - 0.45px) 62.86px,calc(66.6667% - 0.44px) 66.79px,calc(66.6667% - 0.05px) 70.71px,calc(66.6667% + 0.38px) 74.64px,calc(66.6667% + 0.49px) 78.57px,calc(66.6667% + 0.29px) 82.50px,calc(66.6667% - 0.23px) 86.43px,calc(66.6667% - 0.46px) 90.36px,calc(66.6667% - 0.27px) 94.29px,calc(66.6667% + 0.26px) 98.21px,calc(66.6667% + 0.51px) 102.14px,calc(66.6667% + 0.49px) 106.07px,calc(66.6667% + 0.21px) 110.00px,100% 110.00px,100% 0px)}
.tam:has(button:nth-child(1)[aria-pressed="true"])::before{clip-path:polygon(0 0px,0 70.00px,calc(50.0000% - 0.15px) 70.00px,calc(50.0000% - 0.40px) 67.50px,calc(50.0000% - 0.50px) 65.00px,calc(50.0000% - 0.44px) 62.50px,calc(50.0000% - 0.22px) 60.00px,calc(50.0000% + 0.15px) 57.50px,calc(50.0000% + 0.39px) 55.00px,calc(50.0000% + 0.50px) 52.50px,calc(50.0000% + 0.50px) 50.00px,calc(50.0000% + 0.38px) 47.50px,calc(50.0000% + 0.15px) 45.00px,calc(50.0000% - 0.14px) 42.50px,calc(50.0000% - 0.31px) 40.00px,calc(50.0000% - 0.35px) 37.50px,calc(50.0000% - 0.26px) 35.00px,calc(50.0000% - 0.04px) 32.50px,calc(50.0000% + 0.28px) 30.00px,calc(50.0000% + 0.46px) 27.50px,calc(50.0000% + 0.50px) 25.00px,calc(50.0000% + 0.42px) 22.50px,calc(50.0000% + 0.21px) 20.00px,calc(50.0000% - 0.13px) 17.50px,calc(50.0000% - 0.39px) 15.00px,calc(50.0000% - 0.51px) 12.50px,calc(50.0000% - 0.51px) 10.00px,calc(50.0000% - 0.39px) 7.50px,calc(50.0000% - 0.14px) 5.00px,calc(50.0000% + 0.16px) 2.50px,calc(50.0000% + 0.32px) 0.00px)}
.tam:has(button:nth-child(2)[aria-pressed="true"])::before{clip-path:polygon(calc(50.0000% + 0.32px) 0.00px,calc(50.0000% + 0.16px) 2.50px,calc(50.0000% - 0.14px) 5.00px,calc(50.0000% - 0.39px) 7.50px,calc(50.0000% - 0.51px) 10.00px,calc(50.0000% - 0.51px) 12.50px,calc(50.0000% - 0.39px) 15.00px,calc(50.0000% - 0.13px) 17.50px,calc(50.0000% + 0.21px) 20.00px,calc(50.0000% + 0.42px) 22.50px,calc(50.0000% + 0.50px) 25.00px,calc(50.0000% + 0.46px) 27.50px,calc(50.0000% + 0.28px) 30.00px,calc(50.0000% - 0.04px) 32.50px,calc(50.0000% - 0.26px) 35.00px,calc(50.0000% - 0.35px) 37.50px,calc(50.0000% - 0.31px) 40.00px,calc(50.0000% - 0.14px) 42.50px,calc(50.0000% + 0.15px) 45.00px,calc(50.0000% + 0.38px) 47.50px,calc(50.0000% + 0.50px) 50.00px,calc(50.0000% + 0.50px) 52.50px,calc(50.0000% + 0.39px) 55.00px,calc(50.0000% + 0.15px) 57.50px,calc(50.0000% - 0.22px) 60.00px,calc(50.0000% - 0.44px) 62.50px,calc(50.0000% - 0.50px) 65.00px,calc(50.0000% - 0.40px) 67.50px,calc(50.0000% - 0.15px) 70.00px,100% 70.00px,100% 0px)}

/* ============================================================
   El checkout

   Contra diseño/la-tienda.html. La lista y el total los escribe
   el navegador: el pedido vive ahí hasta que se confirma.
   ============================================================ */

/* la vuelta a la carta va arriba y sola: es lo único que se puede hacer desde
   acá además de seguir, y de este lado el gesto de atrás del teléfono también
   funciona porque es una pantalla de verdad y no un paso escondido */
.barra-tope{
  display:flex;align-items:center;gap:.6rem;flex:none;
  padding:.8rem .9rem;border-bottom:2px solid transparent;position:relative;
}
.barra-tope a{
  display:flex;align-items:center;gap:.45rem;color:var(--verde);text-decoration:none;
  font-family:var(--ui);font-weight:700;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;
}
.barra-tope svg{width:14px;height:14px}

.items{list-style:none;margin:0;padding:0;flex:none}
.items li{
  display:flex;align-items:baseline;gap:.42rem;
  padding:.72rem .9rem;border-bottom:1px solid transparent;position:relative;
}
.items li:last-child{border-bottom:0}
.items li:last-child::after{display:none}
.cant{
  font-family:var(--cara);font-size:calc(var(--item) * .94);flex:none;
  min-width:1.15rem;font-variant-numeric:tabular-nums;
}
.item-nombre{
  margin:0;flex:1;min-width:0;
  font-family:var(--cara);font-size:var(--item);line-height:1.22;letter-spacing:-.022em;
}
/* el «sin» va pegado al nombre y no en otro renglón: es parte de qué se pidió,
   no una aclaración al pie */
/* Esta pastilla cambia de largo con el texto — de «sin Albahaca» a «sin
   Albahaca, Oliva» hay un 40% de diferencia — así que estirar el dibujo entero
   deformaba las puntas y el grosor, y las dos se veían de distinto tamaño.
   Con border-image el dibujo se corta en tres: las dos puntas se pintan a su
   medida y solo el tramo del medio acompaña el largo.

   Es la única pieza dibujada que lleva el color adentro del archivo:
   border-image pinta la imagen, no la usa de máscara, así que no puede tomarlo
   del CSS. Si cambia el verde, hay que volver a generarla. */
.sin{
  font-family:var(--ui);font-size:calc(var(--item) * .84);font-weight:600;letter-spacing:0;
  padding:.18rem .6rem;margin-left:.35rem;white-space:nowrap;
  display:inline-block;vertical-align:.06em;
  border:1.2px solid transparent;
  border-image-source:var(--pastilla-sin);
  border-image-slice:0 12 0 12 fill;
  border-image-width:0 12px 0 12px;
  border-image-repeat:stretch;
}
.item-plata{
  margin:0;font-family:var(--cara);font-size:calc(var(--item) * .94);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.vacio-pedido{
  font-family:var(--ui);font-size:.9rem;font-weight:600;opacity:.6;
}

.total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex:none;
  padding:.95rem .9rem;position:relative;
  border-top:2px solid transparent;border-bottom:2px solid transparent;
}
.total dt{font-size:1.05rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.total dd{margin:0;font-family:var(--cara);font-size:1.72rem;font-variant-numeric:tabular-nums}
.total .guia{flex:1;border-bottom:2px dotted rgba(30,82,69,.42);transform:translateY(-.35rem)}

/* las tres líneas del checkout, con el mismo trazo que el resto */
.barra-tope::after,
.items li::after,
.total::before,
.total::after{
  content:"";position:absolute;left:0;right:0;height:var(--trazo-alto);
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--trazo) repeat-x left center/auto 100%;
  mask:var(--trazo) repeat-x left center/auto 100%;
}
.barra-tope::after,
.total::after{bottom:calc(var(--trazo-alto) / -2 - 2px)}
.items li::after{bottom:calc(var(--trazo-alto) / -2 - 1px)}
.total::before{top:calc(var(--trazo-alto) / -2 - 2px)}
.items li::after{opacity:.35}

/* ---------- los datos del cliente ----------
   Tres campos: nombre, dirección y WhatsApp. La dirección va en un solo
   renglón; lo que falte se arregla en la conversación de WhatsApp, que va a
   haber igual. El campo se subraya en vez de encajonarse: es un renglón para
   escribir, no una caja, y así se parece a la línea de puntos de la carta. */
.datos{padding:1.1rem .9rem 0;display:flex;flex-direction:column;gap:1.05rem;flex:none}


/* ---------- la barra del botón ----------
   Pegada abajo con margin-top:auto: si el pedido es corto la pantalla no queda
   con el botón flotando en el medio. El botón en sí es de site.css */
.accion{padding:1.2rem .9rem 1.1rem;flex:none;margin-top:auto;position:relative}
.accion::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--trazo-alto) / -2);
  height:var(--trazo-alto);background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--trazo) repeat-x left center/auto 100%;
  mask:var(--trazo) repeat-x left center/auto 100%;
}


/* ---------- la confirmación ----------
   La única pantalla de la tienda con el fondo verde. Marca el final del
   recorrido sin necesitar un cartel que lo diga. */
.listo{
  flex:1;background:var(--verde);color:var(--papel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:2rem 1.2rem;text-align:center;
}
.listo h1{
  margin:0;font-family:var(--cara);font-size:2.15rem;line-height:1.02;
  letter-spacing:-.03em;max-width:11ch;
}
/* el número, suelto. Con cifras tabulares para que no baile el día que el
   pedido 1000 tenga una cifra más que el 999 */
.listo .num{
  font-family:var(--ui);font-weight:800;font-size:1.05rem;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
.listo p{margin:0;font-size:.98rem;font-weight:600;line-height:1.45;max-width:29ch}

/* Los cuatro renglones suben escalonados. Es el final del recorrido y una
   pantalla verde entera que hasta ahora entraba de golpe; escalonada se lee en
   el orden en que importa: qué pasó, con qué número, y qué sigue.
   No necesita guion: la pantalla se carga de cero cada vez. */
.listo > *{animation:subir .5s ease backwards}
.listo > *:nth-child(1){animation-delay:.05s}
.listo > *:nth-child(2){animation-delay:.16s}
.listo > *:nth-child(3){animation-delay:.27s}
.listo > *:nth-child(4){animation-delay:.38s}
@keyframes subir{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* El logo arriba del título. Va como máscara y no como imagen: el archivo es
   una silueta de un solo color —el mismo verde que el fondo de esta pantalla—
   así que puesto de imagen no se vería. Teñido de papel, sí.
   148 px porque es lo único que hay para mirar: reemplaza al «48·72» escrito
   que estaba al pie, que a este tamaño no hacía falta repetir. */
.listo .marca-logo{
  display:block;flex:none;width:148px;height:148px;
  background-color:var(--papel);
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
}

/* Sin solapas la linea de la tapa no separa nada: queda una raya suelta arriba
   de una pantalla vacia. Mismo criterio que arriba de todo, donde el borde de
   la pantalla ya cierra. */
.tienda:has(.cerrada) .tapa::after{display:none}

/* ---------- la tienda cerrada ----------
   Reemplaza la carta entera. Se probaron tres maneras: una banda arriba con la
   carta legible, la carta en gris tachada, y esta. Gana esta porque las otras
   dos dejan a la vista precios y contadores de algo que no se puede pedir.
   Comparte la forma con la confirmación —centrada, la marca abajo— pero va
   sobre papel: el verde pleno es el final de un pedido, no una puerta cerrada. */
.cerrada{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:2.5rem 1.4rem;text-align:center;
}
.cerrada h1{
  margin:0;font-family:var(--cara);font-size:2rem;line-height:1.04;
  letter-spacing:-.03em;max-width:12ch;-webkit-text-stroke:var(--grosor) currentColor;
}
.cerrada p{margin:0;font-size:.98rem;font-weight:600;line-height:1.45;max-width:28ch}
.cerrada .marca{margin-top:1.2rem;font-size:1.15rem}


/* ============================================================
   La entrada

   Las tres pantallas que tienen líneas dibujadas entran igual:
   el bloque aparece y su línea se traza sola de izquierda a
   derecha, como si la estuvieran dibujando. No es una animación
   traída de otro lado: es lo que la página ya dice ser.

   La confirmación no lleva ninguna de estas —no tiene una sola
   línea dibujada— y entra escalonada con subir, más arriba.

   La clase la saca tienda.js cuando termina. Si se quedara
   puesta, cada cambio de solapa volvería a dibujar los renglones
   de esa familia: una familia escondida está en display:none, y
   al mostrarla el navegador le arranca las animaciones de cero.
   ============================================================ */

.dibujando > *{animation:tinta .45s ease backwards}
@keyframes tinta{from{opacity:0}to{opacity:1}}

/* El recorte va de derecha a izquierda y no es un ancho que crece: la línea
   está entera desde el primer cuadro y se destapa, así el trazo no se estira
   ni se deforma mientras aparece. */
.dibujando .tapa::after,
.dibujando .portada::after,
.dibujando .cierre::after,
.dibujando .cred + .cred::before,
.dibujando .cta-pie::before,
.dibujando .solapas::after,
.dibujando ol.carta li::after,
.dibujando ol.gustos::before,
.dibujando ol.gustos li::after,
.dibujando .barra-tope::after,
.dibujando .items li::after,
.dibujando .total::before,
.dibujando .total::after,
.dibujando .accion::before{animation:dibujarse .5s ease backwards}
@keyframes dibujarse{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}

/* El inicio es la única que se lee de arriba abajo, así que sus bloques entran
   en ese orden. La carta y el checkout entran los dos de una: son listas, y
   escalonar una lista es hacer esperar al que ya sabe qué venía a pedir.
   Cerrada, el inicio tiene cinco bloques en vez de seis: no está el botón. */
.inicio.dibujando > *:nth-child(1){animation-delay:.02s}
.inicio.dibujando > *:nth-child(2){animation-delay:.12s}
.inicio.dibujando > *:nth-child(3){animation-delay:.22s}
.inicio.dibujando > *:nth-child(4){animation-delay:.32s}
.inicio.dibujando > *:nth-child(5){animation-delay:.42s}
.inicio.dibujando > *:nth-child(6){animation-delay:.52s}
/* cada línea sale detrás del bloque que cierra, no antes */
.dibujando .portada::after{animation-delay:.16s}
.dibujando .cierre::after{animation-delay:.3s}
.dibujando .cta-pie::before{animation-delay:.56s}

/* Los renglones se dibujan de arriba abajo y pegaditos: si cada uno esperara a
   que terminara el anterior, leer la carta empezaría a tardar. Del séptimo en
   adelante van todos juntos —abajo del pliegue no se ven entrar— y así una
   carta de treinta pizzas no tarda más que una de seis. */
.dibujando ol.carta li:nth-child(1)::after,
.dibujando ol.gustos li:nth-child(1)::after,
.dibujando .items li:nth-child(1)::after{animation-delay:.10s}
.dibujando ol.carta li:nth-child(2)::after,
.dibujando ol.gustos li:nth-child(2)::after,
.dibujando .items li:nth-child(2)::after{animation-delay:.16s}
.dibujando ol.carta li:nth-child(3)::after,
.dibujando ol.gustos li:nth-child(3)::after,
.dibujando .items li:nth-child(3)::after{animation-delay:.22s}
.dibujando ol.carta li:nth-child(4)::after,
.dibujando ol.gustos li:nth-child(4)::after{animation-delay:.28s}
.dibujando ol.carta li:nth-child(5)::after,
.dibujando ol.gustos li:nth-child(5)::after{animation-delay:.34s}
.dibujando ol.carta li:nth-child(6)::after,
.dibujando ol.gustos li:nth-child(6)::after{animation-delay:.40s}
.dibujando ol.carta li:nth-child(n+7)::after,
.dibujando ol.gustos li:nth-child(n+7)::after{animation-delay:.46s}
/* las dos del total y la de arriba del botón, que cierran el checkout */
.dibujando .total::before{animation-delay:.28s}
.dibujando .total::after{animation-delay:.32s}
.dibujando .accion::before{animation-delay:.40s}