/* Canastita. Móvil primero: esto se usa parado en la góndola, con una mano.
 *
 * La paleta tiene tres papeles y no más: el VERDE es plata que te queda en el bolsillo
 * —se usa sólo para el precio final y el ahorro, nunca de adorno—, el NARANJA es «mirá
 * esto» y aparece una vez por pantalla, y el resto es papel y tinta. Cuando todo grita,
 * no se oye nada: el número grande tiene que ser lo único que grite. */
:root {
  --papel:    #fffdf8;   /* crema, no blanco puro: cansa menos en una pantalla al sol */
  --tarjeta:  #ffffff;
  --tinta:    #1b1712;
  /* #6b6358 y no #7a7266: el de antes daba 4,3:1 sobre el verde suave y 4,29 sobre el
     naranja suave, por debajo del 4,5 que pide AA para texto chico (axe, 22-sep-2026). */
  --suave:    #6b6358;
  --linea:    #ece5d8;
  --verde:    #007a55;   /* la plata. Era #00815a: 4,43:1 sobre --verde-suave */
  --verde-suave: #eaf7f1;
  --naranja:  #e8590c;   /* el «mirá esto»: bordes, fondos, íconos */
  /* **El naranja de arriba NO sirve para texto**: da 3,5:1 sobre el papel y 3,2 sobre su
     propio fondo suave. Para letras va éste, 5,3:1 y 4,9:1. En modo oscuro son el mismo. */
  --naranja-texto: #b84400;
  --naranja-suave: #fff1e8;
  --sombra:   0 1px 2px rgba(27,23,18,.06), 0 8px 24px rgba(27,23,18,.07);
  --sobre-verde: #ffffff;   /* sobre el verde oscuro del modo claro */
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14120e; --tarjeta: #1e1a15; --tinta: #f6f1e7; --suave: #a29889;
    --linea: #322c24; --verde: #34d399; --verde-suave: #16281f;
    --naranja: #ff8a4c; --naranja-suave: #2a1a10; --naranja-texto: #ff8a4c;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --sobre-verde: #08150f;   /* el verde del modo oscuro es claro: encima va tinta */
  }
}
/* La tipografía de la marca: Baloo 2, redonda y gorda, bajo licencia OFL 1.1. Se usa
   SÓLO en el nombre —18 KB de subconjunto latino— porque una página entera con una
   display se lee peor, y porque el precio y el ahorro tienen que seguir viéndose como
   números y no como un cartel. `swap`: si la fuente tarda, el nombre se ve igual con la
   del sistema en vez de quedar en blanco. */
@font-face {
  font-family: "Baloo Canastita";
  src: url("/tipo/baloo2-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta);
  /* 100 % y no 16px: con 16px fijos, el texto agrandado del sistema (150 % en un
     Android) no llegaba a nada, porque todo lo demás está en rem y cuelga de acá. */
  font: 100%/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; }
main { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1rem 5rem; }

h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); margin: 0; letter-spacing: -.01em;
  font-family: "Baloo Canastita", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 800; line-height: 1.05; }
h1 .punto { color: var(--naranja); }

/* El lema. Va pegado al nombre y antes que la explicación: es la promesa en seis
   palabras, y lo único que alguien se lleva si no lee nada más. El naranja marca la
   mitad que es la diferencia —lo que PAGÁS— y el resto queda en tinta suave. */
.lema { margin: .1rem 0 .9rem; font-size: 1.02rem; font-weight: 600; color: var(--tinta); }
.lema em { font-style: normal; color: var(--naranja-texto); }
.bajada { color: var(--suave); margin: .3rem 0 1.6rem; font-size: .95rem; }

fieldset { border: 1px solid var(--linea); border-radius: 1rem; padding: 1.1rem;
  margin: 0 0 1rem; background: var(--tarjeta); box-shadow: var(--sombra); }
legend { font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--suave); padding: 0 .45rem; }
textarea, input[type=number], input[type=text], select { width: 100%; font: inherit;
  padding: .65rem .7rem; border: 1px solid var(--linea); border-radius: .6rem;
  background: var(--papel); color: var(--tinta); }
textarea { min-height: 8.5rem; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--verde);
  outline-offset: 1px; border-color: transparent; }
/* `display:flex` le gana al `[hidden] { display: none }` del navegador, así que sin
   esto la caja de la dirección se veía igual con el atributo puesto: los dos botones
   quedaban de adorno arriba de un campo que ya estaba abierto. */
[hidden] { display: none !important; }
.fila { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 8rem; }
label.chico { font-size: .78rem; color: var(--suave); display: block; margin-bottom: .25rem;
  font-weight: 600; }

/* El texto del botón NO es blanco fijo: en modo oscuro `--verde` pasa a un verde claro
   y «Ver dónde comprar» quedaba en 1,92:1 de contraste, prácticamente ilegible. Con
   `--sobre-verde` el texto acompaña al fondo en los dos modos. */
button { font: inherit; font-weight: 700; padding: .75rem 1.2rem; border-radius: .6rem;
  border: 1px solid var(--verde); background: var(--verde); color: var(--sobre-verde);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease; }
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button.suave { background: transparent; color: var(--verde); }
button[disabled] { opacity: .5; cursor: progress; }
#calcular { width: 100%; font-size: 1.05rem; padding: .95rem; }

label.efectivo { display: flex; align-items: center; gap: .5rem; font-size: .92rem;
  font-weight: 600; padding: .5rem .8rem; margin-bottom: .7rem; cursor: pointer;
  border: 1px solid var(--linea); border-radius: .6rem; background: var(--papel); }
label.efectivo:has(input:checked) { border-color: var(--naranja);
  background: var(--naranja-suave); color: var(--naranja-texto); }
.medios.apagado { opacity: .35; pointer-events: none; }

/* Las familias van UNA DEBAJO DE OTRA, no como columnas. Era `flex-wrap`, que
   funcionaba de casualidad: cada `.familia` se estiraba porque su contenido era una tira
   ancha. Al volver grilla los chips, el contenido dejó de empujar y las tres familias se
   acomodaron una al lado de la otra, cada una de una sola columna. */
.medios { display: grid; gap: .4rem; }
/* El logo del banco en la opción: chiquito, al lado del nombre. `alt=""` y
   `aria-hidden` porque el nombre ya está escrito ahí —para un lector de pantalla el
   logo sería una repetición, no información. */
.logo-chip { height: 1.4rem; width: 1.4rem; object-fit: contain; border-radius: 50%;
  background: #fff; flex: 0 0 auto; }

.medios label { display: flex; align-items: center; gap: .35rem; font-size: .88rem;
  border: 1px solid var(--linea); border-radius: 2rem; padding: .35rem .8rem; cursor: pointer;
  background: var(--papel); min-width: 0; }
/* El nombre que no entra baja de renglón; NO se corta con puntos suspensivos. Con
   `ellipsis` la grilla quedaba prolija y decía «mercado p…» y «carrefour b…», que es
   perder justo el dato por el que alguien mira esta lista. La grilla iguala la altura de
   la fila, así que una píldora de dos renglones no descoloca a las de al lado.
   `anywhere` es para el nombre de una sola palabra —«supervielle»— que no tiene dónde
   partirse y si no se saldría de la píldora. */
.medios label span { min-width: 0; overflow-wrap: anywhere; }
/* El hueco del logo cuando el medio no tiene. Sin esto el nombre arranca pegado al
   casillero y no coincide con el de arriba — que es la mitad del problema que este
   bloque vino a arreglar. Son dos casos hoy: ciudadanía porteña y provincia. */
.logo-chip.vacio { background: none; }
.medios label:has(input:checked) { border-color: var(--verde); background: var(--verde-suave);
  color: var(--verde); font-weight: 700; }

.sugerencias { position: absolute; z-index: 10; left: 0; right: 0; top: 100%;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: .6rem;
  box-shadow: var(--sombra); overflow-x: hidden; overflow-y: auto; margin-top: .2rem;
  overscroll-behavior: contain; }
/* La opción marcada con las flechas: el foco sigue en el campo (aria-activedescendant),
   así que esto es lo único que la muestra. */
.sugerencias [role="option"].activa { background: var(--verde-suave);
  box-shadow: inset 3px 0 0 var(--verde); }
/* Al subir el campo para que las sugerencias no queden bajo el teclado, un poco de aire. */
[role="combobox"] { scroll-margin-top: .6rem; }
.sugerencias button { display: block; width: 100%; text-align: left; background: none;
  border: 0; border-radius: 0; color: var(--tinta); font-weight: 500; font-size: .92rem;
  padding: .55rem .7rem; border-bottom: 1px solid var(--linea); }
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:hover { background: var(--verde-suave); }
.sugerencias .donde { color: var(--suave); font-size: .8rem; font-weight: 400; }

/* --- Tu lista, arriba del resultado: si el producto está mal, todo está mal --- */
.tu-lista { border: 1px solid var(--linea); border-radius: 1rem; padding: 1rem;
  background: var(--tarjeta); box-shadow: var(--sombra); margin: 1.2rem 0; }
.tu-lista h2 { margin: 0 0 .1rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--suave); }
.tu-lista .ayuda { margin: 0 0 .8rem; font-size: .84rem; color: var(--suave); }
.renglon { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .5rem 0;
  border-top: 1px solid var(--linea); }
/* La foto del producto ya no va acá: el renglón es el texto pedido arriba y el carrusel
   abajo, y la foto del elegido es la tarjeta marcada de la tira. */
/* `minmax(0, 1fr)` y no `1fr`: con el texto al 150 % el precio por unidad empujaba la
   columna del nombre más allá de la pantalla (Galaxy de 360). */
.que-llevar li.con-foto { grid-template-columns: 2.8rem minmax(0, 1fr) fit-content(36%); align-items: center; }
/* 2,8rem y no 1,9: el packshot del fabricante trae margen blanco propio —la yerba
   ocupa el 34 % de su imagen—, así que a 30 px el producto quedaba en diez píxeles. */
.que-llevar .foto-mini { width: 2.8rem; height: 2.8rem; object-fit: contain;
  background: #fff; border: 1px solid var(--linea); border-radius: .35rem;
  /* El acercamiento que manda la API recorta el margen blanco del packshot. */
  overflow: hidden; }
.que-llevar li.con-foto .cual { grid-column: 2 / -1; }
.renglon:first-of-type { border-top: 0; }
.renglon .pedido { font-size: .8rem; color: var(--suave); }
.renglon .pedido b { color: var(--tinta); }
.renglon.sin .aviso { font-size: .85rem; color: var(--naranja-texto); }

/* --- Los escenarios ---------------------------------------------------------- */
.escenarios { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .4rem 0 0;
  /* Al llegar el resultado se desplaza hasta acá: el margen deja a la vista el título
     de arriba y la etiqueta «la mejor hoy», que sobresale del borde de la tarjeta. */
  scroll-margin-top: 3rem; }
#salida .aviso { scroll-margin-top: 3rem; }
.escenarios.uno { grid-template-columns: minmax(0, 1fr); }
.esc { border: 2px solid var(--linea); border-radius: 1rem; padding: 1.1rem;
  background: var(--tarjeta); box-shadow: var(--sombra); position: relative;
  display: flex; flex-direction: column; }
.esc.gana { border-color: var(--verde); }
.etiqueta { position: absolute; top: -.7rem; left: 1rem; font-size: .75rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 1rem;
  /* Sobre `--linea` el gris `--suave` daba 3,79:1. Con el papel de fondo y la tinta
     encima se lee en los dos modos. */
  background: var(--papel); border: 1px solid var(--linea); color: var(--tinta); }
.esc.gana .etiqueta { background: var(--verde); color: var(--sobre-verde); }
.esc h3 { margin: .3rem 0 .1rem; font-size: 1rem; display: flex; align-items: center;
  gap: .45rem; }
/* Los logos de cadena vienen de sus sitios y tienen formas muy distintas —isotipo
   cuadrado, logotipo apaisado—, así que se limita el ALTO y el ancho es el que salga. */
.logo-cadena { height: 1.7rem; width: auto; max-width: 6rem; object-fit: contain; }
.logo-parada { height: 1.5rem; width: auto; max-width: 4.5rem; object-fit: contain;
  flex: 0 0 auto; }
.logo-tabla { height: 1.3rem; width: auto; max-width: 3.5rem; object-fit: contain; }
.celda-cadena { display: inline-flex; align-items: center; gap: .45rem; }
.esc .lugar { color: var(--suave); font-size: .86rem; margin: 0 0 .6rem; }
.plata { font-size: 2.15rem; font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
  color: var(--verde); font-variant-numeric: tabular-nums; margin: 0; }
.ahorro { margin: .3rem 0 0; font-size: .95rem; font-weight: 700; color: var(--naranja-texto); }
.ahorro .tachado { color: var(--suave); font-weight: 400; text-decoration: line-through;
  font-size: .85em; margin-left: .35rem; }
.con-que { margin: .55rem 0 0; font-size: .88rem; color: var(--tinta); }
.con-que b { color: var(--verde); }
.hoy-es { margin: 0 0 .15rem; font-size: .76rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--suave); }
.otro-dia { margin: .7rem 0 0; padding: .65rem .7rem; border-radius: .7rem;
  background: var(--naranja-suave); border: 1px solid var(--naranja);
  font-size: .88rem; line-height: 1.45; }
.otro-dia strong { color: var(--naranja-texto); }
.otro-dia .encabezado { margin: 0; }
/* El beneficio de otro día va sobre el naranja del aviso, no sobre el verde de lo que
   se puede pagar hoy: son dos cosas distintas y no tienen que parecer la misma. */
.beneficio.de-otro-dia { background: var(--tarjeta); margin-top: .55rem; }
.beneficio.de-otro-dia .pct { color: var(--naranja-texto); }
.sin-medio { font-size: .8rem; color: var(--suave); font-style: italic; }

/* --- El beneficio, con su logo ---------------------------------------------- */
.beneficio { margin: .7rem 0 0; padding: .7rem; border-radius: .7rem;
  background: var(--verde-suave); border: 1px solid transparent; }
.beneficio .titular { display: flex; align-items: center; gap: .55rem; }
.beneficio .pct { font-size: 1.7rem; font-weight: 800; color: var(--verde);
  line-height: 1; letter-spacing: -.03em; }
.beneficio .que { font-size: .82rem; color: var(--tinta); line-height: 1.25; }
.beneficio .cuando { font-weight: 700; }
.beneficio .paga { margin-top: .5rem; }
.beneficio .detalles { margin: .45rem 0 0; font-size: .8rem; color: var(--suave); }
.beneficio .avisito { color: var(--naranja-texto); }
.sin-promo { margin: .7rem 0 0; font-size: .88rem; color: var(--suave); }

.chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  vertical-align: middle; }
/* Los logos del índice de MODO son cuadrados de 512 px con el isotipo centrado. A
   1,5 rem se veían como una manchita: un logo que no se reconoce no sirve de nada.
   Van a 2,2 rem, redondos —son circulares— y sobre blanco, porque varios son claros
   y desaparecerían sobre el fondo oscuro. */
.logo { height: 2.2rem; width: 2.2rem; object-fit: contain; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--linea); border-radius: 50%; }
/* Un logo blanco sobre transparente —los del índice de MODO están hechos para su app
   oscura— desaparece sobre el fondo blanco: el de Visa es blanco puro y se veía un
   rectángulo vacío. Se le pone atrás el fondo para el que fue dibujado. */
.sobre-oscuro { background: #1b1712; border-color: #1b1712; padding: .12rem; }
.chip { font-size: .75rem; font-weight: 700; line-height: 1.7; text-transform: uppercase;
  letter-spacing: .04em; padding: .2rem .45rem; border-radius: .35rem;
  background: var(--tarjeta); border: 1px solid var(--linea); color: var(--suave); }
.mini { display: block; margin-top: .25rem; font-size: .84rem; color: var(--suave); }

.paradas { margin: .6rem 0 0; padding: 0; list-style: none; font-size: .88rem; }
.paradas > li { padding: .6rem 0; border-top: 1px dashed var(--linea); }
.paradas > li:first-child { border-top: 0; padding-top: 0; }
.paradas .bajada { display: block; color: var(--suave); font-size: .82rem; }
.cabeza-parada { display: flex; align-items: center; gap: .5rem; }
.cabeza-parada > div { flex: 1; }
.orden { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde); font-size: .8rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.subtotal { font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums; }
/* Qué llevar en cada parada. Sin esto la recomendación no se puede seguir: «3
   productos» no dice cuáles, y en la góndola eso es lo único que importa. */
.que-llevar { margin: .45rem 0 0; padding: 0 0 0 2rem; list-style: none; font-size: .85rem; }
.que-llevar li { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 0 .5rem;
  padding: .22rem 0; border-bottom: 1px dotted var(--linea); }
.que-llevar li:last-child { border-bottom: 0; }
.que-llevar .precio { font-variant-numeric: tabular-nums; color: var(--tinta); }
.que-llevar .cual { grid-column: 1 / -1; color: var(--suave); font-size: .84rem; }
.que-llevar .que { min-width: 0; overflow-wrap: anywhere; }
.esc .pie { margin-top: auto; padding-top: .6rem; color: var(--suave); font-size: .8rem; }
/* Compartir: un botón del tamaño de un dedo, no un iconito. Va arriba del pie. */
.esc .acciones { margin: .9rem 0 0; }
.compartir { display: inline-flex; align-items: center; gap: .4rem; font: inherit;
  font-size: .88rem; font-weight: 700; color: var(--verde); background: var(--tarjeta);
  border: 2px solid var(--verde); border-radius: 2rem; padding: .5rem 1rem; cursor: pointer;
  min-height: 2.6rem; }
.compartir:hover { background: var(--verde); color: var(--sobre-verde); }
.compartir:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

.cerca-de { color: var(--suave); font-size: .85rem; margin: 1.6rem 0 1rem; }
.titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--suave); margin: 2rem 0 .6rem; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
td { padding: .6rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.final { font-weight: 800; font-size: 1.05rem; }
.promo { color: var(--verde); font-size: .84rem; }
.aviso { color: var(--naranja-texto); font-size: .84rem; }
.envoltorio { overflow-x: auto; }

.plegable { margin: 1.6rem 0 0; border-top: 1px solid var(--linea); padding-top: .9rem; }
.plegable summary { cursor: pointer; color: var(--suave); font-size: .88rem; font-weight: 600; }
.plegable summary::marker { color: var(--naranja-texto); }

.pie-pagina { margin-top: 3rem; font-size: .8rem; color: var(--suave);
  border-top: 1px solid var(--linea); padding-top: 1rem; }
.pie-pagina p { margin: .45rem 0; }
.cargando { color: var(--suave); font-style: italic; }

/* --- Celular ----------------------------------------------------------------
   Una tabla de columnas en 360 px obliga a scrollear de costado para ver el
   precio, que es lo único que se quiere ver. Y los dos escenarios se apilan. */


/* Los medios, por familia. Antes era una sola tira ordenada por cantidad de promos y
   cortada en 14, así que Mercado Pago —16º— no aparecía en ningún lado. */
.familia { margin: 0 0 .7rem; }
.familia h2 { margin: 0 0 .35rem; font-size: .75rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--suave); }
/* **Grilla y no `flex-wrap`.** Con flex cada píldora mide lo que mide su nombre —medidos
   el 21-sep-2026: 25 anchos distintos entre 104 y 187 px— así que ninguna columna
   coincide con la de la fila de arriba y los 33 medios se leen como una nube. En grilla
   todas las columnas miden igual y los nombres quedan uno debajo del otro. Es lo mismo
   que se arregló en las góndolas, del otro lado de la pantalla. */
.chips-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .4rem; align-items: stretch; }
.mas-bancos summary { font-size: .9rem; color: var(--verde); cursor: pointer;
  position: relative; padding: .45rem 0; }
.mas-bancos .chips-medios { margin-top: .45rem; }

/* Los dos caminos para decir dónde estás, del mismo tamaño y uno al lado del otro: así
   se lee «elegí uno de estos dos». Antes el campo estaba siempre abierto y el GPS era
   un botón chico al costado. */
.dos-caminos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.camino { display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .8rem .5rem; border: 2px solid var(--linea); border-radius: .8rem;
  background: var(--tarjeta); color: var(--verde); font: inherit; font-weight: 700;
  font-size: .88rem; cursor: pointer; text-align: center; line-height: 1.2; }
.camino:hover { border-color: var(--verde); }
/* El elegido se ve de lejos: fondo verde lleno, borde grueso y un tilde. Marcarlo sólo
   con el borde no alcanzaba — en el celular, con una mano y a la luz del día, un borde
   de 2 px no se lee como «es éste». */
.camino[aria-pressed="true"] { background: var(--verde); border-color: var(--verde);
  color: var(--sobre-verde); }
.camino[aria-pressed="true"] .rotulo::after { content: " ✓"; }
.camino:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.camino svg { width: 1.4rem; height: 1.4rem; }
@media (max-width: 22rem) { .dos-caminos { grid-template-columns: 1fr; } }

/* La marca, con la canasta. El verde es el mismo del precio que se paga: la cosa de la
   que habla toda la página. */
.marca { display: flex; align-items: center; gap: .4rem; }
.logo-canasta { width: .95em; height: .95em; flex: 0 0 auto; color: var(--verde);
  /* Se apoya en la línea base del texto en vez de flotar por encima. */
  transform: translateY(.04em); }

/* --- La lista, un campo por producto ------------------------------------------- */
.renglones { display: grid; gap: .45rem; }
/* El «×» a la altura del campo (48 px) y separado de la cantidad: pegados, el dedo que
   iba a corregir la cantidad borraba el renglón. */
.ren { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 2.75rem; gap: .4rem .5rem;
  align-items: start; }
.ren .campo { position: relative; min-width: 0; }
.ren input[type="text"] { width: 100%; }
.ren .cant { text-align: center; }
.ren .quitar { border: 1px solid var(--linea); background: var(--tarjeta); border-radius: .5rem;
  color: var(--suave); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0;
  width: 100%; height: calc(1.55em + 1.3rem + 2px); min-height: 2.75rem; }
/* El nombre elegido entero, cuando no entra en el campo. */
.ren .completo { display: block; margin: .2rem .1rem 0; font-size: .84rem; line-height: 1.3;
  color: var(--suave); overflow-wrap: anywhere; }
.ren .quitar:hover:not(:disabled) { color: var(--naranja-texto); border-color: var(--naranja); }
.ren .quitar:disabled { opacity: .35; cursor: default; }
/* Las sugerencias del producto van sobre lo de abajo, igual que las de dirección. Con
   tope de alto: ocho nombres de producto son largos y tapaban la pantalla entera. */
/* Del ancho de TODO el renglón, no sólo del campo: en 320 la caja medía 147 px y cada
   opción ocupaba cinco renglones. Se estira sobre la cantidad y el «×». */
.prod-sug { max-height: 15rem; overflow-y: auto; right: calc(-1 * (4rem + 2.75rem + 1rem)); }
.prod-sug button { line-height: 1.3; }
/* En renglón aparte: el nombre del producto ocupa dos líneas y la marca le quedaba
   pegada atrás —«1000 cm3WILLINER»—. */
.prod-sug .donde { display: block; margin-top: .12rem; }
.prod-sug .sin-nada { margin: 0; padding: .6rem .7rem; font-size: .85rem; color: var(--suave); }
/* 44 px de alto: «+ agregar otro producto», «ver más», «Mis listas» se tocan con el dedo. */
.chico-boton { font-size: .88rem; padding: .35rem .8rem; margin-top: .45rem; min-height: 2.75rem; }

/* El texto propio de la promo, cuando dice cuál de las tarjetas de esa marca es: DIA
   tiene Sidecreer Black, Platinum y Verde el mismo domingo, con 25, 20 y 10 %. */
.detalle-promo { margin: .3rem 0 0; font-size: .78rem; line-height: 1.35;
  color: var(--suave); }

/* «te queda en» arriba del número, cuando es reintegro y no descuento. */
.plata small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--suave); line-height: 1; margin-bottom: -.1rem; }

/* Crédito o débito: con la tarjeta equivocada el descuento no existe. */
.tarjeta { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: .12rem .45rem; border-radius: 1rem;
  border: 1px solid currentColor; margin: .3rem 0 0; }
.tarjeta.credito, .tarjeta.debito { color: var(--naranja-texto); }
.tarjeta.ambas { color: var(--verde); }
/* «No aclara» va en gris y sin gritar: es una falta de dato, no una advertencia. */
.tarjeta.duda { color: var(--suave); font-weight: 600; text-transform: none;
  letter-spacing: 0; }

/* Los parecidos: lo que la sucursal tiene en lugar de lo que falta. */
.parecidos { margin: 0 0 .5rem; }
.titulo-par { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; color: var(--verde); }
.parecidos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
/* Dos renglones: el nombre del producto necesita el ancho entero. Con el botón en la
   misma fila quedaba una columna de una palabra por línea. */
.parecidos li { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: .2rem .5rem;
  align-items: center; background: var(--verde-suave); border-radius: .6rem; padding: .5rem; }
/* `fit-content` y no `auto` en el precio: con el texto al 150 %, «$2.622 por L» se
   quedaba con todo el ancho y el nombre salía una letra por renglón. */
.parecidos li.con-foto { grid-template-columns: 2.8rem minmax(0, 1fr); }
.parecidos li.con-foto .precio { grid-column: 2; flex-direction: row; flex-wrap: wrap;
  align-items: baseline; gap: 0 .5rem; }
.parecidos li.con-foto .foto-mini { grid-row: 1 / 3; width: 2.8rem; height: 2.8rem;
  object-fit: contain; background: #fff; border: 1px solid var(--linea);
  border-radius: .35rem; overflow: hidden; }
.parecidos .usar { grid-column: 1 / -1; justify-self: start; margin-top: .15rem; }
.parecidos li.con-foto .usar { grid-column: 2 / -1; }
.parecidos .en-vez { display: block; font-size: .8rem; color: var(--suave); }
.parecidos .que { font-size: .88rem; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.parecidos .precio { display: flex; flex-direction: column; align-items: flex-end;
  font-size: .85rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.parecidos .precio small { font-weight: 400; font-size: .82rem; color: var(--suave);
  text-align: right; }
.parecidos .usar { border: 1px solid var(--verde); background: var(--tarjeta);
  color: var(--verde); border-radius: 1.4rem; padding: .25rem .9rem; font-size: .88rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 2.75rem; }
.parecidos .usar:hover { background: var(--verde); color: var(--sobre-verde); }

/* Cómo llegar: abre la app de Maps en el celular y la web en una computadora. */
.mapa { display: inline-flex; align-items: center; gap: .2rem; font-size: .84rem;
  font-weight: 600; color: var(--verde); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--linea); border-radius: 1rem; padding: .2rem .6rem .2rem .4rem;
  margin: .15rem 0 .15rem .35rem; background: var(--tarjeta); position: relative; }
/* **44 px de alto para el dedo, sin agrandar la píldora**: el área que se toca la pone
   un pseudo-elemento. Lo mismo en los otros enlaces chicos de abajo. */
.mapa::after, .legal-cita summary::after, .mas-bancos summary::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem;
  transform: translateY(-50%); }
.mapa:hover { border-color: var(--verde); }
.mejor-dia.esperar .mapa { color: var(--naranja-texto); }

/* Mientras calcula. Un «buscando…» quieto no se distingue de una pantalla colgada. */
.cargando { display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 2.2rem 1rem; text-align: center; }
.cargando .que-hace { margin: 0; font-size: 1rem; font-weight: 600; color: var(--tinta); }
.changuito { display: flex; gap: .35rem; }
.changuito span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--verde);
  animation: latir 1s infinite ease-in-out both; }
.changuito span:nth-child(2) { animation-delay: .16s; }
.changuito span:nth-child(3) { animation-delay: .32s; }
@keyframes latir { 0%, 80%, 100% { transform: scale(.5); opacity: .4 }
                   40% { transform: scale(1); opacity: 1 } }
/* Quien pidió menos movimiento en el sistema no tiene por qué ver esto latir. */
@media (prefers-reduced-motion: reduce) {
  .changuito span { animation: none; opacity: .8; }
}
.pasos { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--suave);
  display: grid; gap: .3rem; }
.pasos li::before { content: "○ "; }
.pasos li.hecho { color: var(--verde); }
.pasos li.hecho::before { content: "✓ "; }

/* Qué tiene y qué NO tiene una sucursal que cubre parte de la lista. «Le faltan 2 de 4»
   no alcanza para decidir: puede faltarle el pan o puede faltarle la levadura. */
.detalle-parcial td { padding: 0 .55rem .7rem; border-top: 0; }
.no-tiene { margin: 0 0 .35rem; font-size: .82rem; color: var(--naranja-texto); }
/* «tiene todo» va en verde al lado del nombre: es la respuesta a «¿qué tiene
   y qué no tiene ésta?», que era lo único que la tabla no decía. */
.tiene-todo { color: var(--verde); font-weight: 700; }
.detalle-parcial .que-llevar { padding-left: 0; }

/* --- El carrusel de productos -------------------------------------------------- */
/* Era un <select>. Entre dos aguas el nombre dice lo mismo en las dos —«AGUA MINERAL
   SIN GAS VILLA DEL SUR»— y lo que decide es la foto y el tamaño, que un desplegable
   no puede mostrar. Se arrastra de costado: en un celular es el gesto natural y en
   escritorio hay rueda horizontal y teclado. */
.carrusel { display: flex; gap: .5rem; overflow-x: auto; padding: .15rem .15rem .5rem;
  margin: .35rem 0 0; scroll-snap-type: x proximity;
  /* Sin esto Firefox pinta una barra gorda arriba de las tarjetas. */
  scrollbar-width: thin; }
.carrusel .prod { scroll-snap-align: start; flex: 0 0 8rem; display: flex;
  flex-direction: column; align-items: stretch; gap: .2rem; text-align: left;
  padding: .45rem; border: 2px solid var(--linea); border-radius: .8rem;
  background: var(--tarjeta); cursor: pointer; font: inherit; color: var(--tinta); }
.carrusel .prod:hover { border-color: var(--suave); }
.carrusel .prod.elegido { border-color: var(--verde); background: var(--verde-suave); }
.carrusel .prod:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.carrusel .marco { display: block; height: 4.4rem; background: #fff; overflow: hidden;
  border-radius: .45rem; border: 1px solid var(--linea); }
.carrusel .marco img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El hueco mientras la foto se está buscando: un gris quieto, no un esqueleto que
   parpadea. La tarjeta ya es usable sin la foto. */
.carrusel .sin-foto { display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(-45deg, var(--papel) 0 6px, var(--tarjeta) 6px 12px); }
/* El nombre entra ENTERO. Con `line-clamp: 2` dos productos de la misma familia se
   leían iguales —«Arroz MOLINOS ALA Doble Carolina x1kg» y «…grano largo dorado» se
   cortan antes de llegar a la diferencia— y era justo lo que la tarjeta tenía que
   mostrar. La tira es un flex: todas las tarjetas se estiran a la más alta. */
.carrusel .nom { font-size: .84rem; line-height: 1.25; color: var(--tinta);
  overflow-wrap: anywhere; }
.carrusel .tam { font-size: .84rem; font-weight: 700; }
.carrusel .desde { font-size: .84rem; color: var(--suave);
  font-variant-numeric: tabular-nums; }
.carrusel .tilde { font-size: .75rem; font-weight: 800; color: var(--verde);
  text-transform: uppercase; letter-spacing: .04em; }

/* El campo que falta completar, y el motivo al lado. Sin esto el aviso decía qué falta
   pero no dónde, y en un celular quedaba abajo de todo. */
.falta-aqui { margin: .4rem 0 0; font-size: .85rem; line-height: 1.4;
  color: var(--naranja-texto); font-weight: 500; }
.falta { border-color: var(--naranja) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 22%, transparent); }

/* El descuento que se pierde sólo por el mínimo de compra. No es una alarma —no se
   perdió nada— pero sí un dato accionable, así que se ve. */
.por-minimo { margin: .7rem 0 0; padding: .6rem .7rem; border-radius: .7rem;
  background: var(--naranja-suave); border: 1px solid var(--linea); }
.por-minimo .encabezado { margin: 0; font-size: .85rem; line-height: 1.45; }
.por-minimo .chips { margin-top: .35rem; }

/* Cuando el filtro por tarjeta esconde promos, hay que poder verlo: el gris de
   `.cerca-de` se lee como pie de página y esto es un dato que cambia lo que se ve. */
.cerca-de.filtrando { color: var(--tinta); background: var(--naranja-suave);
  border-radius: .6rem; padding: .55rem .7rem; }

/* De cuándo son los descuentos. Gris cuando es de hoy —es un dato, no una alarma— y
   naranja cuando hay algo atrasado o que no se pudo leer. */
.procedencia { margin: .1rem 0 .5rem; font-size: .78rem; line-height: 1.45;
  color: var(--suave); }
.procedencia.atrasada { color: var(--naranja-texto); }
.procedencia strong { font-weight: 700; }

/* --- El mejor día de la semana ------------------------------------------------ */
.mejor-dia { border: 2px solid var(--verde); border-radius: 1rem; padding: 1rem 1.1rem;
  background: var(--verde-suave); margin: .9rem 0 .2rem; }
.mejor-dia.esperar { border-color: var(--naranja); background: var(--naranja-suave); }
/* El logo va flotando y NO como ítem de un flex: con flex, el <strong> del título
   pasaba a ser un ítem propio y «Hoy es el mejor día» quedaba en un renglón solo. */
.mejor-dia h3 { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.45;
  display: flex; align-items: baseline; gap: .5rem; }
.mejor-dia h3 > span { flex: 1 1 auto; }
.mejor-dia h3 strong { color: var(--verde); }
.mejor-dia.esperar h3 strong { color: var(--naranja-texto); }
.mejor-dia .lugar { margin: .25rem 0 .6rem; font-size: .85rem; color: var(--suave); }
/* La tarjeta del beneficio va en blanco sobre el color del aviso: si comparte fondo
   con la tira, las dos se leen como una sola cosa. */
.mejor-dia .beneficio { background: var(--tarjeta); border-color: var(--linea); }
.mejor-dia .pie { margin: .5rem 0 0; font-size: .74rem; color: var(--suave); }
/* Cuando hoy es el mejor día, este bloque no repite la tarjeta de abajo: sólo el
   título y la tira, que es lo único que la tarjeta no dice. */
.mejor-dia.compacta { padding: .8rem 1rem; }
.mejor-dia.compacta h3 { font-size: .95rem; }

/* La tira de días adentro de la tarjeta ganadora, cuando hoy es el mejor día y el
   bloque de arriba no hace falta. */
.semana-en-tarjeta { margin: .7rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--linea); }
.semana-en-tarjeta .rotulo { margin: 0 0 .4rem; font-size: .76rem; color: var(--suave); }

/* Los siete días, para ver de un vistazo que hoy no es el más barato. Scrollea solo
   en pantallas angostas en vez de apretujar siete columnas. */
.semana { display: flex; gap: .3rem; margin: .7rem 0 0; padding: 0; list-style: none;
  overflow-x: auto; }
.semana li { flex: 1 0 auto; min-width: 3.4rem; }
.semana button { display: block; width: 100%; text-align: center; padding: .35rem .2rem;
  border: 1px solid var(--linea); border-radius: .5rem; background: var(--tarjeta);
  cursor: pointer; font: inherit; color: inherit; }
.semana button:hover { border-color: var(--suave); }
.semana button:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
/* El mejor día queda marcado aunque estés mirando otro: si no, tocás el domingo y se
   pierde cuál era el que convenía. */
.semana li.el-mejor:not(.gana) button { border-color: var(--verde); border-width: 2px; }
.semana .dia { display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); }
.semana .plata { display: block; font-size: .86rem; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: -.02em; }
.semana li.gana button { border-color: var(--verde); background: var(--verde); }
.semana li.gana .dia, .semana li.gana .plata { color: var(--sobre-verde); }
.mejor-dia.esperar .semana li.gana button { border-color: var(--naranja);
  background: var(--naranja); }
.mejor-dia.esperar .semana li.gana .dia,
.mejor-dia.esperar .semana li.gana .plata { color: #fff; }
.semana li.es-hoy:not(.gana):not(.el-mejor) button { border-style: dashed; }
.sin-promo-dia { margin: .5rem 0 0; font-size: .85rem; color: var(--suave);
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: .7rem;
  padding: .6rem .7rem; }

/* El precio por unidad, abajo del precio: es lo que deja comparar dos envases. */
.que-llevar .precio { display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.25; }
/* Baja de renglón si no entra: con el texto agrandado, «$2.622 por L» en una sola línea
   empujaba la grilla fuera de la pantalla. */
.que-llevar .precio small { font-weight: 400; font-size: .82rem; color: var(--suave);
  text-align: right; }

@media (max-width: 42rem) {
  main { padding: 1.1rem .85rem 3.5rem; }
  h1 { font-size: 1.6rem; }
  .escenarios { grid-template-columns: 1fr; gap: 1.3rem; }
  .plata { font-size: 2.5rem; }
  .fila > * { flex: 1 1 100%; }
  button.suave { width: 100%; }
  /* Más alto para el dedo, pero angosto de costados: el ancho ahora lo fija la grilla y
     el padding de .9rem se comía 29 px de los 152 de la columna, dejando a «supervielle»
     sin lugar. El área que se toca es la celda entera, no el texto. */
  .medios label { font-size: .92rem; padding: .5rem .6rem; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border: 1px solid var(--linea); border-radius: .7rem; padding: .7rem;
       margin-bottom: .6rem; background: var(--tarjeta); }
  td { border: 0; padding: .12rem 0; }
  td.num { text-align: left; }
  td.final { font-size: 1.25rem; margin-top: .2rem; }
  td.final::before { content: "pagás "; color: var(--suave); font-size: .72em;
    font-weight: 500; }
  .mejor-dia h3 { font-size: .98rem; }
  /* En un celular la tira de siete días se parte en dos renglones. Scrollear de costado
     adentro de una tarjeta se descubre de casualidad: media semana queda invisible. */
  /* En grilla de columnas en rem: con el texto agrandado entran menos por renglón en
     vez de desbordar la celda (el precio medía 58 px en celdas de 49). */
  .semana { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    overflow-x: visible; }
  .semana li { min-width: 0; }
  /* Las tarjetas se salen de la pantalla a propósito: el borde cortado es lo que
     avisa que hay más para el costado. Con tres enteras parece que no hay nada más. */
  .carrusel .prod { flex-basis: 7.4rem; }
  /* En un celular la foto del producto es lo que hace la lista escaneable: si se achica
     más deja de distinguirse de la de al lado. */
  .que-llevar { padding-left: 0; }
}

/* **En horizontal el encabezado se comía el 60 % de cada paso** (915×412): el h1 de
   3,4rem, el lema y la bajada, antes de la primera cosa que se toca. La media query de
   celular es por ANCHO y en horizontal no entra. */
@media (max-height: 31rem) and (orientation: landscape) {
  main { padding-top: .5rem; }
  h1 { font-size: 1.5rem; }
  .lema { margin: 0 0 .4rem; font-size: .92rem; }
  main > .bajada { display: none; }
}

/* === Los cuatro pasos, las góndolas y el buscador grande (20-sep-2026) =======
   Armar el carrito es lo que cuesta, así que se lleva una pantalla entera. */

.tramos li { list-style: none; }
/* `minmax(0, 1fr)` y no `1fr`: el mínimo automático de una columna de grid es el ancho
   de su contenido, así que con cuatro tramos la palabra más larga —«comprar»— le ponía
   piso a la columna y el encabezado se iba de la pantalla. Medido en un celular de
   320 px: 327 px de `.tramos` contra 285 de viewport, y era el ÚNICO elemento que
   desbordaba. Con tres tramos sobraba lugar y no se veía. */
.tramos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem;
  list-style: none; padding: 0; margin: 0 0 1.1rem; }
.tramos button { width: 100%; display: flex; align-items: center; justify-content: center;
  gap: .35rem; padding: .5rem .3rem; min-height: 2.75rem; border: 0; border-top: 3px solid var(--linea);
  background: none; color: var(--suave); font: inherit; font-size: .78rem;
  font-weight: 700; cursor: pointer; text-align: center; line-height: 1.15; }
.tramos button .n { display: inline-grid; place-items: center; width: 1.25rem;
  height: 1.25rem; border-radius: 50%; background: var(--linea); color: var(--suave);
  font-size: .7rem; flex: 0 0 auto; }
.tramos button[aria-current="step"] { border-top-color: var(--verde); color: var(--tinta); }
.tramos button[aria-current="step"] .n { background: var(--verde); color: var(--sobre-verde); }
.tramos button.hecho { border-top-color: var(--verde); color: var(--verde); }
.tramos button.hecho .n { background: var(--verde-suave); color: var(--verde); }
.tramos button:disabled { cursor: default; opacity: .55; }
/* En un celular angosto el circulito al lado del texto se come un tercio de la columna
   y «Dónde comprar» sale en tres renglones. Arriba, el rótulo usa todo el ancho. */
@media (max-width: 25rem) {
  .tramos button { flex-direction: column; gap: .2rem; font-size: .7rem; padding: .45rem .2rem; }
}

/* El botón de seguir: igual de grande que el de calcular, porque es el mismo gesto. */
.siguiente { width: 100%; padding: .95rem 1rem; border: 0; border-radius: .8rem;
  background: var(--verde); color: var(--sobre-verde); font: inherit; font-weight: 700;
  font-size: 1rem; cursor: pointer; margin-top: .2rem; }
.siguiente:hover { filter: brightness(1.06); }

.buscador-grande { position: relative; margin-bottom: .9rem; }
.buscador-grande input { width: 100%; font-size: 1rem; padding: .8rem .9rem; }
#sug-todo button { display: block; width: 100%; text-align: left; padding: .55rem .7rem;
  border: 0; background: none; font: inherit; cursor: pointer; }
#sug-todo button:hover, #sug-todo button:focus-visible { background: var(--verde-suave); }
#sug-todo .nom { display: block; font-weight: 600; font-size: .92rem; }
#sug-todo .meta { display: block; color: var(--suave); font-size: .84rem; }
#sug-todo .nada { padding: .7rem; margin: 0; color: var(--suave); font-size: .85rem; }

/* Las góndolas: una fila por rubro, que se abre. */
.gondolas { display: grid; gap: .3rem; }
.gondola { border: 1px solid var(--linea); border-radius: .7rem; background: var(--papel); }
.gondola > summary { display: flex; align-items: center;
  gap: .5rem; padding: .7rem .8rem; cursor: pointer; font-weight: 700; font-size: .92rem;
  list-style: none; }
/* El nombre se come el espacio sobrante y el número queda pegado a la flecha. Con
   `space-between` los tres hijos se repartían el hueco y cada cuenta caía en una x
   distinta según el largo del rubro: diez números desparramados por el medio de la
   pantalla, que en un celular es donde más se nota. */
.gondola > summary .nombre { flex: 1; min-width: 0; }
.gondola > summary .cuantos { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.gondola > summary::-webkit-details-marker { display: none; }
.gondola > summary::after { content: "⌄"; color: var(--suave); font-size: 1.1rem;
  line-height: 1; transition: transform .15s; }
.gondola[open] > summary::after { transform: rotate(180deg); }
.gondola .cuantos { color: var(--suave); font-weight: 400; font-size: .84rem; }
.subrubros { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .8rem .7rem; }
.subrubros .sub { display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .75rem; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--tarjeta); color: var(--tinta); font: inherit; font-size: .88rem;
  cursor: pointer; min-height: 2.75rem; }
.subrubros .sub.abierto { background: var(--verde); border-color: var(--verde);
  color: var(--sobre-verde); }
.subrubros .sub.abierto .cuantos { color: var(--sobre-verde); }

/* El estante: la grilla de productos con foto, que es lo que pedía la devolución —
   «ver cuál es el producto» y no adivinar por el nombre. */
.estante { padding: 0 .8rem .8rem; }
.estante-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .5rem; }
.estante .prod { display: flex; flex-direction: column; gap: .25rem; padding: .5rem;
  border: 1px solid var(--linea); border-radius: .6rem; background: var(--tarjeta); }
.estante .prod .foto { aspect-ratio: 1; background: #fff; border-radius: .4rem;
  display: grid; place-items: center; overflow: hidden; }
.estante .prod .foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Sin `line-clamp`: el nombre completo, por lo mismo que en el carrusel. */
.estante .prod .nom { margin: 0; font-size: .86rem; line-height: 1.25;
  overflow-wrap: anywhere; }
.estante .prod .datos { margin: 0; font-size: .88rem; }
.estante .prod .datos strong { color: var(--verde); }
.estante .prod .pu { display: block; color: var(--suave); font-size: .82rem;
  font-weight: 400; }
.estante .prod .donde { margin: 0; color: var(--suave); font-size: .8rem; }
/* La botonera: «+ agregar» sola, o «− 3 +» cuando ya hay. El «+» se queda con todo el
   ancho que sobra para que el segundo toque caiga en el mismo lugar que el primero —
   si el «+» se corriera al costado, tocar dos veces seguidas erraría. */
.estante .prod .poner { margin-top: auto; display: flex; align-items: stretch; gap: .25rem; }
.estante .prod .agregar-prod { flex: 1; padding: .4rem; border: 1px solid var(--verde);
  border-radius: .45rem; background: var(--tarjeta); color: var(--verde); font: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer; min-height: 2.75rem; }
.estante .prod .agregar-prod.puesto { background: var(--verde); color: var(--sobre-verde); }
.estante .prod .menos-prod { flex: 0 0 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--verde);
  border-radius: .45rem; background: var(--tarjeta); color: var(--verde); font: inherit;
  font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; }
.estante .prod .cuenta { align-self: center; min-width: 1.3rem; text-align: center;
  font-size: .85rem; font-weight: 700; color: var(--verde);
  font-variant-numeric: tabular-nums; }
.estante .ver-mas { margin-top: .5rem; }

/* Vacío se nota por el borde punteado, NO con `opacity`: al 65 % el «+ agregar» y la
   nota quedaban en 2,7:1 y 2,5:1 de contraste. */
#caja-carrito.vacio { border-style: dashed; box-shadow: none; }
.nota-carrito { margin: .6rem 0 0; }
#caja-carrito legend { color: var(--verde); }

/* --- Mis listas: volver a consultar lo de la otra vez ---------------------- */
.barra-listas { display: flex; justify-content: flex-end; margin: 0 0 .5rem; }
.mis-listas { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem;
  border: 1px solid var(--linea); border-radius: .7rem; background: var(--tarjeta); }
.mis-listas { padding: .4rem; }
.mis-listas li { display: flex; align-items: stretch; gap: .3rem; }
.mis-listas .volver-a { flex: 1; text-align: left; padding: .5rem .6rem; border: 0;
  border-radius: .5rem; background: none; color: var(--tinta); font: inherit;
  cursor: pointer; display: grid; gap: .1rem; }
.mis-listas .volver-a:hover, .mis-listas .volver-a:focus-visible {
  background: var(--verde-suave); }
.mis-listas .cuando { font-weight: 700; font-size: .84rem; color: var(--verde); }
.mis-listas .que { font-size: .85rem; line-height: 1.3; }
.mis-listas .donde { font-size: .82rem; color: var(--suave); }
.mis-listas .borrar-lista { flex: 0 0 auto; width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: .5rem;
  background: none; color: var(--suave); font-size: 1.1rem; cursor: pointer; }
.mis-listas .borrar-lista:hover { background: var(--naranja-suave); color: var(--naranja-texto); }

/* La promo que existe pero no tiene techo declarado: se avisa, no se cuenta. */
.sin-techo { margin: .7rem 0 0; padding: .6rem .7rem; border-radius: .6rem;
  background: var(--naranja-suave); border: 1px solid var(--naranja); }
.sin-techo .encabezado { margin: 0 0 .4rem; font-size: .86rem; line-height: 1.35; }

/* El detalle del día que se abre al tocar la tira. No tenía una sola regla: se pegaba
   contra la tira sin separación ni fondo, al revés que todas sus vecinas. */
.dia-abierto { margin-top: .6rem; padding: .6rem .7rem; border-radius: .6rem;
  background: var(--papel); border: 1px solid var(--linea); }
.dia-abierto .encabezado { margin: 0 0 .4rem; font-size: .86rem; line-height: 1.35; }
.dia-abierto .encabezado img { vertical-align: -.2em; margin-right: .3rem; }

/* La marca del reintegro donde el número aparece solo. Chiquita a propósito: no tiene
   que competir con el precio, tiene que impedir que se lea como un descuento. */
.es-reintegro { display: inline-block; font-size: .75rem; font-weight: 700;
  color: var(--naranja-texto); background: var(--naranja-suave); border-radius: .3rem;
  padding: .05rem .3rem; vertical-align: .25em; white-space: nowrap; }
.pico-reintegro { font-style: normal; color: var(--naranja-texto); font-size: .75em;
  margin-left: .1em; }
.nota-reintegro { margin: .45rem 0 0; font-size: .8rem; color: var(--suave);
  line-height: 1.3; }

/* Lo que el descuento NO se lleva. Va debajo del beneficio y antes de la lista, que es
   el orden en que se lee: primero cuánto, después sobre qué. En naranja y no en rojo
   —no es un error, es una condición— y con el precio alineado a la derecha, porque el
   número es lo que hace entender de cuánto se está hablando. */
.no-participan { margin: .6rem 0 0; padding: .55rem .65rem; font-size: .82rem;
  background: var(--naranja-suave); border-radius: .5rem; }
.no-participan p { margin: 0; color: var(--tinta); line-height: 1.35; }
.no-participan .avisito { margin-top: .4rem; color: var(--naranja-texto); }
.no-participan ul { margin: .45rem 0 0; padding: 0; list-style: none; }
.no-participan li { display: flex; align-items: baseline; gap: .4rem;
  padding: .18rem 0; }
.no-participan li span:first-child { flex: 1; min-width: 0; }
.no-participan .rubro { font-size: .8rem; color: var(--suave); white-space: nowrap; }
.no-participan .precio { font-weight: 700; white-space: nowrap; }
.no-participan a { color: inherit; }

/* La cita textual del legal, plegada: es la prueba de que el recorte no lo inventamos,
   y desplegada de entrada taparía el beneficio. */
.legal-cita { margin: .45rem 0 0; font-size: .82rem; color: var(--suave); }
.legal-cita summary { cursor: pointer; position: relative; padding: .3rem 0; }
.legal-cita p { margin: .3rem 0 0; line-height: 1.4; }

/* --- Sin TACC y vegano ------------------------------------------------------------ */
.dieta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .7rem; }
.dieta-titulo { font-size: .8rem; color: var(--suave); font-weight: 600; }
.chip-dieta { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem;
  font-weight: 700; border: 2px solid var(--linea); border-radius: 2rem;
  padding: .35rem .6rem; cursor: pointer; background: var(--tarjeta); min-height: 2.4rem; }
.chip-dieta:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
/* El casillero no se dibuja: el ícono ocupa su lugar y el chip entero se pinta al
   marcarlo. Sigue en el DOM —lector de pantalla y teclado— y el foco se ve en el chip. */
.chip-dieta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip-dieta { position: relative; }
.chip-dieta:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
.dieta-aviso { margin: -.2rem 0 .8rem; font-size: .8rem; color: var(--suave); line-height: 1.4; }
.sellos-dieta { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
.sello-dieta { font-size: .75rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  border-radius: .3rem; padding: .08rem .3rem; border: 1px solid var(--verde);
  color: var(--verde); background: var(--tarjeta); white-space: normal; }
.sello-dieta.vegano { border-color: var(--naranja); color: var(--naranja-texto); }
.sello-dieta { display: inline-flex; align-items: center; gap: .2rem; }
.ico-dieta { width: 1.25em; height: 1.25em; flex: none; }
.chip-dieta .ico-dieta { width: 1.2rem; height: 1.2rem; color: var(--verde); }
.chip-dieta:has(#dieta-vegano) .ico-dieta { color: var(--naranja); }
.dieta-falta { display: block; margin: .25rem 0 0; font-size: .84rem; }

/* --- Revisión del 22-sep-2026 --------------------------------------------------- */
/* Lo elegido en el campo de dirección, con su ciudad. */
.lugar-elegido { margin: .35rem 0 0; font-size: .88rem; color: var(--verde); font-weight: 600; }
/* «✓ agregado · N en el carrito», abajo del buscador, por dos segundos. */
.agregado { margin: -.4rem 0 .8rem; font-size: .9rem; font-weight: 700; color: var(--verde); }
/* La promo que no se cuenta porque es de un grupo (jubilados, plan sueldo…). */
.segmento { margin: .6rem 0 0; font-size: .86rem; color: var(--suave); line-height: 1.4; }
/* Sin sucursales en el radio: dónde está la más cercana, y el botón que lo agranda. */
.sin-sucursales { background: var(--naranja-suave); border-radius: .7rem;
  padding: .7rem .8rem; margin: 1rem 0; font-size: .92rem; }
.sin-sucursales p { margin: 0 0 .6rem; color: var(--tinta); }
.sin-sucursales button { width: 100%; }