/* Diseño de la página de pedidos.

   Dos reglas mandan acá y explican casi todo lo demás:

   1. Lo tiene que poder usar alguien de 75 años en su celular, con el
      teléfono en una mano. Nada bajo 16px, nada que haya que apuntar con
      precisión: los botones de kilos miden 52px y los de elegir lugar son
      tarjetas enteras, no círculos de radio.
   2. La página sirve para pedir y para nada más. No hay menú, no hay
      "quiénes somos", no hay nada que se pueda apretar y lleve a otra parte. */

:root {
  --verde: #2f5d3a;
  --verde-claro: #e8f0e6;
  --verde-vivo: #3f8a52;
  --crema: #fbf9f4;
  --tinta: #22271f;
  --tinta-suave: #5f6b5c;
  --linea: #ddd8cb;
  --rojo: #b3341f;
  --whatsapp: #22a65a;
  --radio: 16px;
  --sombra: 0 2px 10px rgba(34, 39, 31, 0.07);
}

* { box-sizing: border-box; }

/* Sin esto, el display: flex/grid de las reglas de abajo le gana al
   atributo hidden y lo que el JS oculta se sigue viendo. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  background: var(--crema);
  color: var(--tinta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Franja de borrador ---------- */

.franja-borrador {
  background: var(--rojo);
  color: #fff;
  text-align: center;
  padding: 11px 16px;
  font-size: 0.85rem;
  font-weight: 600;
}

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

/* Un verde un poco más claro que --verde, con frutillas (#f), cerezas (#c)
   y atados de espárragos (#e) dibujados en --verde. El dibujo va acá dentro
   y no en un .svg aparte porque el VPS sólo copia fotos (jpg, png, webp).
   Cada fruta se dibuja una vez en <defs> y se pone nueve veces con <use>:
   para moverla, cambia su translate(x y). En un data: el # se escribe %23. */
.cabecera {
  padding: 26px 20px 22px;
  text-align: center;
  background: #3f7a4c url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='240' height='240'%3E\
%3Cdefs%3E\
%3Cg id='f'%3E\
%3Cpath d='M0-9C11-12 17-3 14 6 11 14 5 20 0 22-5 20-11 14-14 6-17-3-11-12 0-9Z'/%3E\
%3Cpath d='M0-9-10-15-4-12-6-19 0-13 6-19 4-12 10-15Z'/%3E\
%3Cpath fill='none' stroke='%232f5d3a' stroke-width='2.5' d='M0-14Q1-20 5-22'/%3E\
%3Cg fill='%233f7a4c'%3E%3Cellipse cx='-6' cy='-1' rx='1.4' ry='2'/%3E%3Cellipse cx='1' cy='-3' rx='1.4' ry='2'/%3E\
%3Cellipse cx='7' cy='0' rx='1.4' ry='2'/%3E%3Cellipse cx='-3' cy='6' rx='1.4' ry='2'/%3E%3Cellipse cx='4' cy='7' rx='1.4' ry='2'/%3E\
%3Cellipse cx='-8' cy='7' rx='1.2' ry='1.8'/%3E%3Cellipse cx='0' cy='14' rx='1.4' ry='2'/%3E%3C/g%3E\
%3C/g%3E\
%3Cg id='c'%3E\
%3Cpath fill='none' stroke='%232f5d3a' stroke-width='2.5' d='M-8 8Q-6-6 2-16M8 10Q6-4 2-16'/%3E\
%3Cpath d='M2-16Q12-24 20-16Q10-10 2-16Z'/%3E\
%3Ccircle cx='-8' cy='12' r='8.5'/%3E%3Ccircle cx='9' cy='14' r='8.5'/%3E\
%3Ccircle cx='-11' cy='9' r='2' fill='%233f7a4c'/%3E%3Ccircle cx='6' cy='11' r='2' fill='%233f7a4c'/%3E\
%3C/g%3E\
%3Cg id='t'%3E\
%3Cpath fill='none' stroke='%232f5d3a' stroke-width='4.5' d='M0 24V-12'/%3E\
%3Cpath d='M-3.6-10Q-4.4-20 0-27Q4.4-20 3.6-10Q0-7-3.6-10Z'/%3E\
%3Cpath fill='none' stroke='%233f7a4c' stroke-width='1.1' d='M-2.2-17l2.2 2 2.2-2M-1.6 0l1.6 1.6 1.6-1.6'/%3E\
%3C/g%3E\
%3Cg id='e'%3E\
%3Cuse xlink:href='%23t' transform='rotate(-15 0 24)'/%3E%3Cuse xlink:href='%23t' transform='rotate(15 0 24)'/%3E%3Cuse xlink:href='%23t'/%3E\
%3Crect x='-8' y='9' width='16' height='4.5' rx='2.2' fill='%233f7a4c'/%3E\
%3C/g%3E\
%3C/defs%3E\
%3Cg fill='%232f5d3a' stroke-linecap='round' stroke-linejoin='round'%3E\
%3Cuse xlink:href='%23f' transform='translate(40 42) rotate(-14)'/%3E\
%3Cuse xlink:href='%23c' transform='translate(122 34) rotate(8) scale(.95)'/%3E\
%3Cuse xlink:href='%23e' transform='translate(202 46) rotate(16)'/%3E\
%3Cuse xlink:href='%23e' transform='translate(36 124) rotate(-10) scale(.95)'/%3E\
%3Cuse xlink:href='%23f' transform='translate(118 126) rotate(18) scale(1.05)'/%3E\
%3Cuse xlink:href='%23c' transform='translate(198 118) rotate(-12)'/%3E\
%3Cuse xlink:href='%23c' transform='translate(44 204) rotate(10)'/%3E\
%3Cuse xlink:href='%23e' transform='translate(124 200) rotate(-18)'/%3E\
%3Cuse xlink:href='%23f' transform='translate(204 206) rotate(-6) scale(.95)'/%3E\
%3Ccircle cx='80' cy='82' r='3'/%3E%3Ccircle cx='160' cy='78' r='2.5'/%3E%3Ccircle cx='78' cy='162' r='2.5'/%3E\
%3Ccircle cx='162' cy='160' r='3'/%3E%3Ccircle cx='10' cy='84' r='2'/%3E%3Ccircle cx='230' cy='162' r='2'/%3E\
%3Ccircle cx='120' cy='234' r='2'/%3E%3Ccircle cx='156' cy='236' r='2.5'/%3E\
%3C/g%3E\
%3C/svg%3E") 0 0 / 240px 240px repeat;
  color: #fff;
}

.cabecera-foto {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  margin: 0 auto 18px;
}

.cabecera h1 { margin: 0; font-size: 1.7rem; letter-spacing: -0.02em; }

.bajada { margin: 8px auto 0; max-width: 34ch; font-size: 1rem; opacity: 0.92; }

.aviso-entrega {
  margin: 16px auto 0;
  max-width: 40ch;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 8px 18px;
  display: inline-block;
  line-height: 1.6;
}
.aviso-entrega span { display: block; }

.nota-entrega { margin: 10px auto 0; max-width: 40ch; font-size: 0.88rem; opacity: 0.85; }

/* ---------- Bienvenida al que vuelve ---------- */

/* El que ya pidió una vez no debería volver a armar el pedido entero. Esta
   tarjeta le dice que la página lo reconoce —y le deja repetir de un toque. */
.bienvenida {
  background: var(--verde-claro);
  border: 1.5px solid var(--verde);
  border-radius: var(--radio);
  padding: 18px 16px;
  margin-top: 18px;
  text-align: center;
}

.bienvenida-saludo { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--verde); }
.bienvenida-donde { margin: 6px 0 0; font-size: 0.92rem; color: var(--tinta-suave); }
.bienvenida-ultimo { margin: 16px 0 0; font-size: 0.95rem; }
.bienvenida .boton-principal { margin-top: 10px; }

.boton-olvidar {
  background: none;
  border: none;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 14px;
  padding: 6px;
}

/* ---------- Pasos ---------- */

main { max-width: 560px; margin: 0 auto; padding: 0 16px 40px; }

#formulario { display: block; }

.paso {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 16px;
  margin-top: 18px;
  box-shadow: var(--sombra);
}

.paso-titulo {
  margin: 0 0 14px;
  font-size: 1.12rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* El número del paso es lo que hace legible la página de una pasada:
   son cuatro cosas y se ven las cuatro. */
.paso-numero {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.paso--cierre { background: none; border: none; box-shadow: none; padding: 18px 0 0; }

/* ---------- Paso 1: los kilos ---------- */

.productos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.producto {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 13px;
}

.producto--agotado { opacity: 0.55; }

.producto-figura {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  background: var(--verde-claro);
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  overflow: hidden;
}

.producto-figura img { width: 100%; height: 100%; object-fit: cover; }

.producto-cuerpo { min-width: 0; }
.producto > .producto-nombre { grid-column: 1 / -1; }

.producto-nombre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.producto-detalle { margin: 3px 0 0; font-size: 0.87rem; color: var(--tinta-suave); }

/* Por qué no hay más esta semana. Mismo tono que "Quedan 2 kilos": es un
   aviso, no un error. */
.producto-aviso {
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 10px;
  background: #fdf0d9;
  color: #8a5a12;
  font-size: 0.87rem;
  line-height: 1.4;
}

.producto-pie {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Precio arriba y unidad debajo: en una línea se parte y desalinea el botón. */
.producto-precio {
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.producto-unidad { font-weight: 400; color: var(--tinta-suave); font-size: 0.85rem; }

.producto-precio--pendiente { font-weight: 500; font-size: 0.88rem; color: var(--tinta-suave); }

.etiqueta {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--verde-claro);
  color: var(--verde);
  border-radius: 999px;
  padding: 3px 8px;
  font-weight: 700;
}

.etiqueta--agotado { background: #f0e8e6; color: var(--rojo); }
/* El nombre a la izquierda; la cuenta regresiva, o el "Cerrado esta semana"
   que la reemplaza, a la derecha. Rojo y más grande: es lo que apura a
   pedir, tiene que verse de reojo. */
.producto-nombre .etiqueta--agotado { margin-left: auto; }
.cierre-cuenta { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--rojo); white-space: nowrap; }
.cierre-cuenta b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* "Espárragos" arriba y "verdes" abajo: así el contador cabe al lado. */
.producto-nombre-texto { width: min-content; line-height: 1.2; }
.etiqueta--ultimas { background: #fdf0d9; color: #8a5a12; }
/* Rojo cereza, más rosado que el de Agotado: "pronto" no puede leerse "no hay". */
.etiqueta--pronto { background: #fde4e4; color: #c0392b; }

/* ---------- Contador de kilos ---------- */

.contador { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* 52px: el dedo de alguien que no ve bien la pantalla tiene que acertar
   sin apuntar. Es el elemento que más se aprieta en toda la página. */
.contador-boton {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  border: 1.5px solid var(--verde);
  background: #fff;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--verde);
  cursor: pointer;
  touch-action: manipulation;
  display: grid;
  place-items: center;
}

/* En los teléfonos de 360px el + se salía 6px del recuadro. 48px sigue
   siendo un blanco grande para el dedo. */
@media (max-width: 374px) {
  .contador-boton { width: 48px; height: 48px; }
}

.contador-boton:disabled { border-color: var(--linea); color: #b9b5aa; cursor: default; }
.contador-boton:active:not(:disabled) { background: var(--verde-claro); }

.contador-valor {
  min-width: 78px;
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--tinta-suave);
}

.contador--activo .contador-valor { color: var(--tinta); }

.boton-avisar {
  border: none;
  background: #2c5282;
  color: #fff;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.boton-avisar:active { background: #24426a; }

.boton-avisar--pronto { background: #d9534f; }
.boton-avisar--pronto:active { background: #b94440; }

/* Cuando hay que pedirle el teléfono, el campo y el botón toman el ancho
   entero de la tarjeta: al lado del texto no caben con letra legible. */
.control--ancho { flex: 1 1 100%; display: grid; gap: 8px; }
.avisame-campo { display: grid; gap: 6px; font-size: 0.92rem; font-weight: 600; }
.avisame-campo input {
  font: inherit;
  font-size: 1.05rem;   /* nunca bajo 16px: iOS hace zoom solo */
  font-weight: 400;
  padding: 14px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  width: 100%;
}

.avisado { font-size: 0.92rem; font-weight: 600; color: #c0392b; }

/* ---------- Tarjeta por filas: frutillas por formato, cerezas por caja ----------
   La foto chica arriba, al lado del nombre y la descripción, y debajo una
   fila por formato: lo que es y cuánto cuesta a la izquierda, el contador a
   la derecha. Con la foto al costado de las filas, el contador quedaba
   angosto y la foto flotando en el medio. */
/* auto 1fr: el alto que sobra de la foto va debajo de la descripción, no
   entre el nombre y la descripción. */
.producto--filas { grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; align-items: start;
  column-gap: 12px; row-gap: 2px; }
.producto--filas .producto-figura { width: 64px; height: 64px; grid-column: 1; grid-row: 1 / span 2; }
.producto--filas > .producto-nombre { grid-column: 2; grid-row: 1; }
.producto--filas .producto-cuerpo { display: contents; }
.producto--filas .producto-detalle { grid-column: 2; grid-row: 2; margin: 0; }
.producto--filas .producto-cuerpo > :not(.producto-detalle) { grid-column: 1 / -1; }
.producto--filas .producto-pie { margin-top: 6px; }

.formatos { display: grid; margin-top: 6px; }
.formato-fila,
.caja-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
  min-width: 0;
}
.formato-fila:last-child, .caja-fila:last-child { padding-bottom: 0; }
.producto--filas .control--ancho { gap: 0; }
/* El nombre arriba y el precio abajo, los dos a la izquierda. */
.formato-cabeza { display: grid; font-size: 0.95rem; line-height: 1.3; min-width: 0; }
.formato-cabeza b { white-space: nowrap; }
.formato-cabeza span { color: var(--tinta-suave); font-weight: 600; }
/* El contador a la derecha, del alto de la fila. */
.formato-fila .contador { grid-column: 2; grid-row: 1 / span 2; }
.caja-fila .contador { grid-column: 2; grid-row: 1; }
.formato-fila .contador-valor,
.caja-fila .contador-valor { min-width: 40px; font-size: 1.2rem; }
/* Lo que se pide para el viernes siguiente cae en la misma fila: el
   "Para el viernes 13" bajo el nombre y su contador a la derecha. */
.formato-fila .proximo-caja { display: contents; }
.formato-fila .proximo-rotulo { grid-column: 1; font-size: 0.85rem; }
/* Si no cabe, se parte antes de "viernes 13", no entre el día y el número. */
.formato-fila .proximo-rotulo b { white-space: nowrap; }
.formato-fila > .producto-aviso { grid-column: 1 / -1; }

/* Reservar por caja: el contador de siempre en rojo cereza, como su sello. */
.caja-nombre { font-size: 0.95rem; font-weight: 700; }
.caja-fila .contador-boton { border-color: #c0392b; color: #c0392b; }
.caja-fila .contador-boton:disabled { border-color: var(--linea); color: #b9b5aa; }
.caja-fila .contador-boton:active:not(:disabled) { background: #fde4e4; }
.caja-fila--activa .contador-valor { color: #8c1d31; }
.linea-total--reserva { font-weight: 650; }

/* El paso 1 en dos: lo de este viernes y lo que se reserva. */
.productos-grupo { margin-top: 2px; }
.productos-grupo h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--verde);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.productos-grupo p { margin: 2px 0 0; font-size: 0.9rem; color: var(--tinta-suave); line-height: 1.4; }
.productos-grupo--reserva { margin-top: 10px; padding-top: 16px; border-top: 1.5px dashed var(--linea); }
.productos-grupo--reserva h3 { color: #8c1d31; }

/* ---------- Tarjetas de elección (edificio / casa / día) ---------- */

.opciones { display: grid; gap: 10px; }

.tarjeta { display: block; cursor: pointer; }

/* El radio se esconde pero sigue existiendo: el teclado y el lector de
   pantalla lo necesitan. Lo que se ve y se aprieta es la tarjeta entera. */
.tarjeta input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tarjeta-cara {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.12s, background 0.12s;
}

.tarjeta-icono { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.tarjeta-texto { display: flex; flex-direction: column; min-width: 0; }
.tarjeta-texto strong { font-size: 1.05rem; font-weight: 650; }
.tarjeta-texto small { font-size: 0.85rem; color: var(--tinta-suave); }

.tarjeta--elegida .tarjeta-cara { border-color: var(--verde); background: var(--verde-claro); }
.tarjeta input:focus-visible + .tarjeta-cara { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }

/* ---------- El buscador de edificios ---------- */

/* La lista va pegada abajo del campo, no flotando: en un celular una lista
   flotante tapa lo que viene después y la gente se pierde. */
#campo-edificio-contenedor { position: relative; }

.lista-edificios {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--sombra);
}

.lista-edificios li {
  padding: 13px 14px;
  border-radius: 9px;
  font-size: 1rem;
  cursor: pointer;
}

.lista-edificios li + li { border-top: 1px solid var(--linea); }
.lista-edificios li:active { background: var(--verde-claro); }

.opcion-otro { color: var(--tinta-suave); font-size: .92rem; }

/* Sin buscador: la lista entera, sin scroll propio, con filas grandes para
   el pulgar. Una lista con scroll dentro de una página con scroll es donde
   la gente se pierde. */
.lista-edificios--botones { max-height: none; overflow: visible; margin-top: 2px; }
.lista-edificios--botones li { padding: 16px 14px; font-size: 1.05rem; }

/* El edificio ya elegido: se ve como la tarjeta marcada de arriba. */
.edificio-elegido {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 15px 16px;
  border: 1.5px solid var(--verde); border-radius: 12px;
  background: var(--verde-claro); color: var(--tinta);
  font: inherit; font-size: 1.05rem; font-weight: 650;
  cursor: pointer; touch-action: manipulation;
}
.edificio-cambiar { flex: 0 0 auto; font-size: .9rem; font-weight: 600; color: var(--verde); text-decoration: underline; }

/* ---------- El piso que entendimos ---------- */

/* Le repetimos el piso que entendimos: así cacha el dedazo antes de mandar. */
.eco {
  font-size: .88rem;
  font-weight: 600;
  color: var(--verde);
}

/* ---------- Campos ---------- */

.bloque { margin-top: 16px; display: grid; gap: 14px; }

.campo { display: grid; gap: 6px; margin-top: 14px; }
.paso .campo:first-of-type { margin-top: 0; }
.bloque .campo { margin-top: 0; }

.campo-titulo { font-size: 0.92rem; font-weight: 600; }
.opcional { font-weight: 400; color: var(--tinta-suave); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1.05rem;   /* nunca bajo 16px: iOS hace zoom solo y descuadra todo */
  padding: 14px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  width: 100%;
  appearance: none;
}

/* Un select sin flecha parece una caja de texto y nadie lo aprieta. */
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232f5d3a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--verde-vivo);
  outline-offset: 1px;
  border-color: transparent;
}

.campo--con-error input,
.campo--con-error select { border-color: var(--rojo); }

.campo-error { color: var(--rojo); font-size: 0.85rem; font-weight: 600; }
.campo-error--suelto { display: block; margin-top: 8px; }
.campo-error:empty { display: none; }

/* La dirección del edificio que eligió, de vuelta: es la confirmación de
   que marcó la torre correcta. */
.direccion-confirmada {
  margin: 0;
  background: var(--verde-claro);
  color: var(--verde);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

.dia-fijo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  background: var(--verde-claro);
  color: var(--verde);
  border-radius: 12px;
  padding: 13px 15px;
}

.aviso-minimo {
  background: #fdf0d9;
  color: #8a5a12;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 14px 0 0;
}

/* ---------- Resumen de lo que se manda ---------- */

.resumen-envio {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 13px 15px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .98rem;
}

.resumen-rotulo {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  font-weight: 700;
}

/* ---------- Pantalla de listo ---------- */

/* Antes la página quedaba idéntica después de apretar. El que volvía de
   WhatsApp sin mandar el mensaje no tenía cómo saber si había pedido. */
.listo {
  background: #fff;
  border: 2px solid var(--verde);
  border-radius: var(--radio);
  padding: 30px 20px 26px;
  margin-top: 20px;
  text-align: center;
  box-shadow: var(--sombra);
}

.listo-marca {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  font-weight: 700;
}

.listo h2 { margin: 0; font-size: 1.45rem; color: var(--verde); }
.listo-que { margin: 12px 0 0; font-size: 1.08rem; font-weight: 650; }
.listo-cuando { margin: 4px 0 0; color: var(--tinta-suave); }
.listo-nota {
  margin: 18px 0 0;
  font-size: .92rem;
  background: var(--verde-claro);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
/* El <a> es inline por defecto: sin esto el ancho del 100% no le aplica, el
   margen de arriba se come y el botón se monta sobre el texto. */
.listo .boton-principal { display: block; text-decoration: none; }
.listo-otro { margin-top: 14px; }

/* ---------- Total y botón ---------- */

.totales { margin-top: 4px; display: grid; gap: 6px; }

.linea-total { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--tinta-suave); }

.linea-total--final {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tinta);
  border-top: 1.5px solid var(--linea);
  padding-top: 12px;
  margin-top: 4px;
}

.boton-principal {
  background: var(--verde);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  width: 100%;
  margin-top: 18px;
}

.boton-whatsapp { background: var(--whatsapp); }
.boton-whatsapp:active { background: #1c8b4b; }

.nota-envio {
  font-size: 0.88rem;
  color: var(--tinta-suave);
  text-align: center;
  margin: 12px 0 0;
}

/* ---------- Transferencia y pie ---------- */

.transferencia {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px;
}

.transferencia h3 { margin: 0 0 10px; font-size: 1rem; }
.transferencia dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.92rem; }
.transferencia dt { color: var(--tinta-suave); }
.transferencia dd { margin: 0; font-weight: 600; }

.pie { text-align: center; padding: 4px 20px 28px; font-size: 0.88rem; color: var(--tinta-suave); }
.pie p { margin: 0; }

.vacio { text-align: center; color: var(--tinta-suave); padding: 30px 10px; }

/* ---------- Pantallas grandes ---------- */

@media (min-width: 620px) {
  body { font-size: 18px; }
  .paso { padding: 22px 20px; }
}

/* ---------- El inicio: cómo quieres pedir ---------- */

.inicio { padding-top: 14px; }
.inicio-productos { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px;
  grid-auto-rows: 1fr; }   /* con más de tres, la segunda fila del mismo porte */
.inicio-producto { background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  padding: 8px; text-align: center; font-size: .9rem; color: var(--tinta-suave); }
/* La foto entera, sin recortar: recortada a lo ancho, al atado de
   espárragos se le iban las puntas y no se entendía qué era. */
.inicio-producto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border-radius: 10px; }
.inicio-emoji { display: grid; place-items: center; aspect-ratio: 4 / 3; font-size: 2rem; }
.inicio-producto b { display: block; margin-top: 6px; font-size: 1rem; color: var(--tinta); }
/* Lo que no hay este viernes pero se pide para el siguiente: en rojo por qué
   no hay, y abajo, en verde y del mismo porte, para cuándo se pide. */
.inicio-proximo { display: block; margin-top: 4px; padding: 5px 6px 6px; border-radius: 10px;
  background: var(--verde-claro); color: var(--verde); font-style: normal; font-size: .8rem;
  font-weight: 600; line-height: 1.25; }
.inicio-proximo span { display: block; margin-bottom: 2px; color: var(--rojo); font-size: .72rem; font-weight: 700; }
.inicio-proximo b { display: inline; margin: 0; font-size: inherit; color: inherit; font-weight: 800; white-space: nowrap; }
.inicio-pregunta { text-align: center; font-size: 1.3rem; margin: 22px 0 4px; }
.inicio-opcion { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px;
  text-align: left; background: #fff; border: 2px solid var(--linea); border-radius: 18px;
  padding: 18px 14px 18px 16px; font: inherit; color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.inicio-opcion:active { transform: scale(.99); }
/* Pedir aquí es el camino principal: el borde marcado y una sombra. WhatsApp,
   la alternativa, con el mismo dibujo pero más suave. */
.inicio-opcion--pagina { border-color: var(--verde); box-shadow: 0 4px 14px rgba(47, 93, 58, 0.14); }
.inicio-icono { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde); }
.inicio-opcion--whatsapp .inicio-icono { background: #e9f7ef; color: #157a40; }
.inicio-icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.inicio-flecha { flex: 0 0 auto; width: 22px; height: 22px; margin-left: auto; fill: none; stroke: var(--tinta-suave);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.inicio-opcion--pagina .inicio-flecha { stroke: var(--verde); }
.inicio-texto strong { display: block; font-size: 1.2rem; }
.inicio-texto small { display: block; margin-top: 4px; color: var(--tinta-suave); font-size: .95rem; line-height: 1.4; }
.inicio-pie { text-align: center; color: var(--tinta-suave); font-size: .9rem; margin: 18px 6px 0; }
.inicio-no-abrio { text-align: center; background: #e9f7ef; color: #157a40; border-radius: 12px;
  padding: 10px 12px; margin-top: 12px; font-weight: 650; }

/* La salida del que se complica a mitad del formulario. */
.salida-whatsapp { text-align: center; color: var(--tinta-suave); font-size: .95rem; margin: 14px 0 0; }
.enlace-whatsapp { background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: #157a40; text-decoration: underline; cursor: pointer; }

/* Las listas de edificios: las torres de un parque bajo su título. */
.lista-edificios li.lista-grupo { cursor: default; background: var(--crema); font-size: .74rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave);
  padding: 8px 14px 6px; }
.lista-edificios li.lista-grupo:active { background: var(--crema); }
.lista-edificios li.opcion-en-grupo { padding-left: 28px; }

/* ---------- Lo que no alcanzó, para el viernes siguiente ---------- */
.producto-pregunta strong { display: block; }
.pregunta-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pregunta-botones button { font: inherit; font-size: .88rem; font-weight: 700; border-radius: 10px;
  padding: 9px 12px; cursor: pointer; border: 1.5px solid #8a5a12; touch-action: manipulation; }
.pregunta-si { background: #8a5a12; color: #fff; }
.pregunta-no { background: #fff; color: #8a5a12; }
.proximo-caja { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; color: var(--rojo); font-size: .9rem; }
.proximo-rotulo { flex-basis: 100%; }
.proximo-titulo { margin: 8px 0 0; color: var(--rojo); font-size: .9rem; }
/* El contador del viernes siguiente es el mismo de arriba: mismos botones,
   mismo verde, el 0 en gris. Lo que lo distingue es el texto rojo, no un
   botón más chico. */
.linea-total--proximo { color: var(--rojo); font-weight: 650; }