/* Pollos Don Guillo — tienda
   La paleta y la tipografía salen del prototipo que el cliente aprobó en
   agosto. No se reinventan: ya las vio y las validó.

   Regla de toda esta hoja: el 90% entra por celular, muchas veces con mala
   señal y con las manos ocupadas. Se diseña para eso, no para la demo en un
   monitor grande. */

:root {
  --rojo:      #C6202B;
  --rojo-osc:  #96131C;
  --amarillo:  #FFC72C;
  --azul:      #14509E;
  --verde:     #1E7A47;
  --naranja:   #C25A12;
  --carbon:    #241C18;
  --crema:     #FFF7E9;
  --blanco:    #fff;
  --linea:     #E7DCC9;
  --gris:      #6B625B;

  /* Una sola familia, un solo archivo de 14 KB. Los títulos se distinguen por
     peso y tamaño, no por otra tipografía: se ve más cuidado y pesa la tercera
     parte de lo que pesaban dos. */
  --fuente:  'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Quicksand', system-ui, -apple-system, sans-serif;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px;
  --sombra:      0 2px 8px rgba(36,28,24,.08);
  --sombra-alta: 0 12px 32px rgba(36,28,24,.16);

  /* Blanco mínimo de toque. No bajar de aquí: se opera con una mano,
     a veces con la otra ocupada sosteniendo el teléfono y el pedido. */
  --toque: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--carbon);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  /* Sitio de una sola columna: el ancho lo pone el contenido, no la pantalla */
  overflow-x: hidden;
}

/* Por defecto los títulos van en Quicksand. Bricolage se pide a mano con
   .display, para que su presencia sea una decisión y no un descuido. */
h1, h2, h3 { font-family: var(--fuente); font-weight: 700; margin: 0; line-height: 1.2; }
.display { font-weight: 700; letter-spacing: -.015em; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

.contenido { max-width: 720px; margin: 0 auto; padding: 0 16px 120px; }

/* --- Cabecera ----------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--rojo); color: var(--blanco);
  box-shadow: var(--sombra);
}
.cabecera-fila {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; min-height: 60px;
}
.cabecera img {
  height: 46px; width: 46px; flex: 0 0 46px;
  /* El emblema es circular y ya trae su anillo blanco y azul: sobre el rojo
     de la cabecera se sostiene solo. Una sombra suave lo despega del fondo
     sin ponerle una caja alrededor. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}
.cabecera-sede { flex: 1; min-width: 0; }
.cabecera-sede small { display: block; opacity: .85; font-size: 12px; }
.cabecera-sede strong { display: block; font-size: 15px; }
.btn-cambiar {
  background: rgba(255,255,255,.15); color: var(--blanco);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; min-height: 40px;
}

/* --- Avisos ------------------------------------------------------------- */
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  margin: 12px 0; font-size: 14px; line-height: 1.45;
}
/* Sin bordes de color: el fondo suave y el texto ya distinguen el tono. Un
   borde de color en cada tarjeta satura una pantalla que ya tiene rojo,
   amarillo y crema en la marca. */
.aviso-info  { background: #EAF1FB; color: #123B73; }
.aviso-ojo   { background: #FFF3D6; color: #7A5600; }
.aviso-malo  { background: #FDE8E9; color: var(--rojo-osc); }
.aviso-bueno { background: #E6F4EC; color: var(--verde); }

/* --- Sedes -------------------------------------------------------------- */
.portada { text-align: center; padding: 0 0 14px; }

/* LA COMIDA PRIMERO.
   Antes lo primero que veía el cliente eran cinco tarjetas de texto: una
   página de restaurante donde no se veía comida. La foto ocupa el ancho
   completo, sangrando fuera del contenedor, porque una foto con márgenes a
   los lados se lee como "imagen decorativa" y no como "esto es lo que te
   vas a comer". */
.portada-foto {
  position: relative;
  margin: 0 -16px 18px;   /* sangra el padding de .contenido */
  height: 208px; overflow: hidden;
  background: var(--carbon);
}
.portada-foto > img:first-child {
  width: 100%; height: 100%; object-fit: cover;
  /* El encuadre baja un poco: en la foto el pollo está en el tercio inferior
     y un recorte centrado le corta la mitad. */
  object-position: center 45%;
}

/* Sin esto el logo blanco se pierde sobre las zonas claras de la foto, y el
   texto de abajo compite con el dorado del pollo. */
.portada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(36,28,24,.30) 0%, rgba(36,28,24,.04) 38%,
    rgba(255,247,233,.55) 78%, var(--crema) 100%);
}

/* El archivo del logo trae las esquinas en blanco: sobre la foto se veía un
   cuadro. Se recorta en círculo, que además es la forma real del emblema. */
.portada-logo {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 116px; height: 116px; display: block;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(36,28,24,.4);
}

/* Son 28 años: el lema es el activo de marca más fuerte que tienen y estaba
   tratado como nota al pie, en gris y pequeño. */
.lema {
  font-family: var(--display); font-style: italic;
  color: var(--rojo); font-weight: 700; font-size: 17px;
  letter-spacing: .01em; margin: 0 0 12px !important;
}

.portada h1 { font-size: 27px; line-height: 1.2; }
.portada p  { color: var(--gris); margin: 10px auto 0; font-size: 15px;
              max-width: 34ch; line-height: 1.5; }

/* Títulos de pantalla: centrados y con aire. Los de CATEGORÍA de la carta
   siguen a la izquierda a propósito — la gente escanea por el borde
   izquierdo y centrarlos hace más lento encontrar "Bebidas". */
.titulo-pantalla {
  font-size: 22px; line-height: 1.2; text-align: center;
  margin: 22px 0 16px;
}

.sede {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px;
  text-align: left; box-shadow: var(--sombra);
  min-height: var(--toque);
}
.sede:disabled { opacity: .55; }
.sede-datos { flex: 1; min-width: 0; }
.sede-datos strong { display: block; font-size: 17px; font-weight: 700; }
.sede-datos small  { display: block; color: var(--gris); font-size: 13px; margin-top: 2px; }
.sede-flecha { color: var(--rojo); font-size: 22px; }

.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; margin-top: 6px;
}
.pastilla-abierta { background: #E6F4EC; color: var(--verde); }
.pastilla-cerrada { background: #F1EDE6; color: var(--gris); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- Carta -------------------------------------------------------------- */
.categorias {
  position: sticky; top: 60px; z-index: 15;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  background: var(--crema); border-bottom: 1px solid var(--linea);
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categorias button {
  flex: 0 0 auto; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; white-space: nowrap;
  min-height: 40px;
}
.categorias button[aria-current="true"] {
  background: var(--carbon); color: var(--blanco); border-color: var(--carbon);
}

.grupo-titulo { font-size: 19px; margin: 26px 0 12px; }

.plato {
  display: flex; gap: 14px; width: 100%; text-align: left;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 12px; margin-bottom: 10px;
  box-shadow: var(--sombra);
}
.plato:disabled { opacity: .5; }
.plato-datos { flex: 1; min-width: 0; }
.plato-datos strong { display: block; font-size: 16px; font-weight: 700; }
.plato-datos p {
  margin: 4px 0 0; font-size: 13px; color: var(--gris);
  line-height: 1.4;
  /* Dos líneas y corta: en una carta de 48 productos, párrafos largos
     obligan a desplazarse eternamente */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.plato-precio { font-weight: 700; font-size: 16px; margin-top: 8px; display: block; }
.plato-porcion {
  font-size: 12px; color: var(--naranja); font-weight: 600; margin-top: 3px;
  display: block;
}

/* Toda la ficha agrega, pero el + lo dice sin que haya que descubrirlo.
   Una tarjeta que reacciona sin señal visible no se toca: la gente no
   adivina que algo es un botón. */
.plato-media { position: relative; flex: 0 0 92px; }
.plato-mas {
  position: absolute; right: -6px; bottom: -6px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rojo); color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(198,32,43,.4);
  border: 2px solid var(--blanco);
}

/* La foto y el hueco ocupan lo mismo: sin esto la carta salta mientras
   cargan las imágenes, y el dedo termina tocando otro plato. */
.plato-foto, .plato-sinfoto {
  width: 92px; height: 92px; flex: 0 0 92px;
  border-radius: var(--r-md); object-fit: cover; background: #F1EDE6;
}
.plato-sinfoto {
  display: grid; place-items: center; text-align: center;
  font-size: 10px; color: #A99B8B; line-height: 1.3; padding: 6px;
  border: 1px dashed var(--linea);
}

.agotado {
  display: inline-block; background: #F1EDE6; color: var(--gris);
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; margin-top: 6px;
}

/* --- Barra del carrito -------------------------------------------------- */
.barra-carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--blanco); border-top: 1px solid var(--linea);
  box-shadow: 0 -4px 20px rgba(36,28,24,.10);
}
.barra-carrito .adentro {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}

.btn {
  border: none; border-radius: var(--r-md); padding: 14px 20px;
  font-size: 16px; font-weight: 700; min-height: var(--toque);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primario { background: var(--rojo); color: var(--blanco); flex: 1; }
.btn-primario:disabled { background: #D8CFC4; color: #8A8078; }
.btn-secundario { background: var(--blanco); color: var(--carbon); border: 1px solid var(--linea); }
.btn-ancho { width: 100%; }

/* --- Carrito y pago ----------------------------------------------------- */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px;
  box-shadow: var(--sombra);
}
.tarjeta h3 { font-size: 16px; margin-bottom: 12px; }

/* La propina del domiciliario.
   Es en efectivo y NO pasa por el sistema: esto es un recordatorio, no un
   cargo. Va en crema y no en rojo justamente por eso — un cliente que cree
   que le están cobrando algo que no pidió no vuelve, y en un negocio de
   barrio de 28 años eso se paga caro. */
.propina { background: var(--crema); border-color: var(--amarillo); }
.propina-titulo { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.propina-nota   { font-size: 13px; color: var(--gris); margin: 0; line-height: 1.45; }

.gratis { color: var(--verde); font-weight: 700; }

/* Escoger sabor de bebida.
   Hoja que sube desde abajo: se opera con el pulgar, con una mano, casi
   siempre de pie. Un cuadro en el centro obliga a estirar el dedo. */
.velo-sabor {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(36,28,24,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.hoja-sabor {
  background: var(--blanco); width: 100%; max-width: 480px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: var(--sombra-alta);
}
.hoja-sabor h3 { font-size: 17px; margin: 0 0 2px; }
.sabor-pregunta { font-size: 14px; color: var(--gris); margin: 0 0 14px; }
.sabores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sabor {
  flex: 1 1 auto; min-width: 96px; min-height: var(--toque);
  border: 2px solid var(--linea); background: var(--blanco);
  border-radius: var(--r-md); font: 700 15px var(--fuente);
  color: var(--carbon); cursor: pointer;
}
.sabor:hover, .sabor:focus-visible { border-color: var(--rojo); color: var(--rojo); }
.sabor-nota { font-size: 12px; color: var(--gris); margin: 0 0 14px; line-height: 1.4; }

.renglon { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.renglon:last-child { border-bottom: none; }
.renglon-datos { flex: 1; min-width: 0; }
.renglon-datos strong { display: block; font-size: 15px; }
.renglon-notas { font-size: 12px; color: var(--naranja); margin-top: 2px; }

.cantidad { display: flex; align-items: center; gap: 4px; }
.cantidad button {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--blanco);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.cantidad span { min-width: 28px; text-align: center; font-weight: 700; }

.totales { font-size: 15px; }
.totales div { display: flex; justify-content: space-between; padding: 6px 0; }
.totales .total {
  font-size: 20px; font-weight: 700; font-family: var(--display);
  border-top: 2px solid var(--carbon); margin-top: 8px; padding-top: 12px;
}

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; padding: 13px 14px; font-size: 16px; /* 16px evita el zoom de iOS */
  font-family: inherit; color: var(--carbon);
  border: 1px solid var(--linea); border-radius: var(--r-md);
  background: var(--blanco); min-height: var(--toque);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul);
}
.campo-malo input, .campo-malo select { border-color: var(--rojo); }
.error-campo { color: var(--rojo-osc); font-size: 13px; margin-top: 5px; }

.opciones { display: grid; gap: 8px; }
.opcion {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border: 1px solid var(--linea); border-radius: var(--r-md);
  background: var(--blanco); min-height: var(--toque); text-align: left;
}
.opcion[aria-checked="true"] { border-color: var(--rojo); border-width: 2px; background: #FDF4F4; }
.opcion-titulo { flex: 1; font-weight: 600; font-size: 15px; }
.opcion small { display: block; font-weight: 400; color: var(--gris); font-size: 13px; }

/* --- Seguimiento --------------------------------------------------------- */
.numero-pedido {
  font-family: var(--display); font-size: 44px; font-weight: 800;
  color: var(--rojo); line-height: 1;
}
.linea-tiempo { list-style: none; padding: 0; margin: 20px 0 0; }
.paso {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 22px; position: relative;
}
/* La línea que une los pasos. El último no la lleva. */
.paso:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 26px; bottom: 0;
  width: 2px; background: var(--linea);
}
.paso-hecho:not(:last-child)::before { background: var(--verde); }
.paso-marca {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 14px; z-index: 1;
  background: var(--blanco); border: 2px solid var(--linea); color: var(--gris);
}
.paso-hecho .paso-marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.paso-ahora .paso-marca { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* EL PASO DE AHORA RESPIRA.
   Un cliente que espera mira esta pantalla varias veces. Sin movimiento no
   sabe si la página está viva o si se le congeló el teléfono — y entonces
   llama a la sede, que es la llamada que este canal vino a evitar.
   Es un latido lento, no un parpadeo: tiene que tranquilizar, no apurar. */
.paso-ahora .paso-marca { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,32,43,.45); }
  50%      { box-shadow: 0 0 0 9px rgba(198,32,43,0); }
}

/* La línea que llega al paso actual se dibuja sola al abrir. Se anima la
   altura de un forro y no la línea misma, para no recalcular la página. */
.paso-hecho:not(:last-child)::before { transform-origin: top; animation: crecer .5s ease-out both; }
.paso-hecho:nth-child(2)::before { animation-delay: .12s; }
.paso-hecho:nth-child(3)::before { animation-delay: .24s; }
.paso-hecho:nth-child(4)::before { animation-delay: .36s; }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Quien pidió menos movimiento en su teléfono no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  .paso-ahora .paso-marca,
  .paso-hecho:not(:last-child)::before { animation: none; }
}
.paso-texto strong { display: block; font-size: 15px; }
.paso-ahora .paso-texto strong { color: var(--rojo); }
.paso-texto small { color: var(--gris); font-size: 13px; }

/* --- Estados ------------------------------------------------------------ */
.cargando { text-align: center; padding: 50px 20px; color: var(--gris); }
.girando {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid var(--linea); border-top-color: var(--rojo);
  border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.vacio { text-align: center; padding: 48px 20px; color: var(--gris); }
.vacio p { margin: 10px 0 20px; }

/* Quien prefiere menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* En pantalla grande la carta va a dos columnas, como cualquier tienda.
   No es una app de celular estirada. */
@media (min-width: 700px) {
  .lista-platos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lista-platos .plato { margin-bottom: 0; }
}


/* --- Firma de SARA -------------------------------------------------------
   Muy discreta en la tienda: el protagonista es Don Guillo, no nosotros.
   Va al pie, en gris, y solo se nota si alguien la busca. */
.firma {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 28px 16px 8px; opacity: .42;
}
.firma svg { height: 13px; width: auto; color: var(--gris); }
.firma span { font-size: 11px; color: var(--gris); letter-spacing: .02em; }


/* --- Pago con comprobante ------------------------------------------------ */
.cuenta {
  display: flex; align-items: center; gap: 12px;
  background: var(--crema); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 8px;
}
.cuenta small { display: block; font-size: 12px; color: var(--gris); text-transform: capitalize; }
.cuenta strong { display: block; font-size: 19px; letter-spacing: .02em; margin: 1px 0; }
.cuenta .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* El botón de subir es una etiqueta con el input escondido: el input de
   archivo nativo no se puede estilizar y se ve roto en cada navegador. */
.subir {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--toque); margin-top: 4px;
  background: var(--carbon); color: var(--blanco);
  border-radius: var(--r-md); font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.subir-ocupado { opacity: .6; cursor: wait; }


/* --- Confirmación de comprobante ------------------------------------------
   Cálida, no un mensaje de sistema. Es el momento en que alguien acaba de
   mandar plata a una cuenta y necesita saber que llegó bien. */
.tarjeta-recibido { text-align: center; border: 2px solid #A9D8BF; background: #F4FBF7; }
.tarjeta-recibido h3 { font-size: 18px; margin-bottom: 8px; }
.tarjeta-recibido p { margin: 0 0 8px; font-size: 15px; color: var(--carbon); line-height: 1.5; }
.tarjeta-recibido .fino { font-size: 13px; color: var(--gris); margin: 0; }
.palomita {
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--verde); color: #fff;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}


/* ===========================================================================
   PIE DEL SITIO

   Los dos enlaces legales no son adorno: la Ley 1581 exige que la política de
   datos esté publicada y accesible desde donde se capturan los datos, y Meta
   pide esa URL para aprobar la cuenta de WhatsApp Business.

   El `padding-bottom` grande es por la barra del carrito, que queda fija
   abajo: sin él, el último renglón queda debajo de la barra y no se puede leer.
   =========================================================================== */

.pie-sitio {
  background: var(--carbon);
  color: #B8ADA2;
  margin-top: 40px;
  padding: 30px 20px calc(30px + var(--toque, 48px) + env(safe-area-inset-bottom, 0px));
  font-size: 13.5px;
  line-height: 1.6;
}

.pie-interior { max-width: 760px; margin: 0 auto; text-align: center; }

.pie-negocio { margin: 0 0 18px; }
.pie-negocio strong { color: #F6EFE4; font-weight: 700; }

.pie-enlaces {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin-bottom: 20px;
}
.pie-enlaces a {
  color: var(--amarillo); text-decoration: none; font-weight: 600;
  /* área de toque cómoda en un celular, sin agrandar el texto */
  padding: 6px 2px;
}
.pie-enlaces a:hover { text-decoration: underline; }

.pie-lema {
  margin: 0; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: var(--amarillo); font-weight: 600; letter-spacing: .03em;
}


/* ===========================================================================
   ¿PARA CUÁNTOS ES? — la intención antes que el producto.

   Cuatro botones grandes y opcionales. Quien ya sabe qué quiere los ignora y
   baja a la carta; quien no sabe —que es la mayoría frente a 48 productos—
   resuelve en un toque. No es un paso obligatorio del flujo a propósito:
   cada paso obligatorio es gente que se cae.
   =========================================================================== */

.ocasiones-bloque { margin-bottom: 4px; }

.ocasiones {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.ocasion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--blanco); border: 1px solid var(--linea);
  text-align: left; min-height: var(--toque); color: inherit;
  transition: border-color .12s, background .12s;
}
.ocasion:active { transform: scale(.98); }
.ocasion-emoji { font-size: 21px; line-height: 1.2; }
.ocasion-t { font-weight: 700; font-size: 14.5px; }
.ocasion-s { font-size: 11.5px; color: var(--gris); line-height: 1.3; }

.ocasion-activa {
  border-color: var(--rojo); background: #FDF0F1;
  box-shadow: inset 0 0 0 1px var(--rojo);
}
.ocasion-activa .ocasion-s { color: var(--rojo-osc); }

.sugeridos-cabeza {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.btn-limpiar {
  background: none; border: 0; color: var(--rojo-osc);
  font-size: 13px; font-weight: 600; text-decoration: underline;
  padding: 6px 2px; cursor: pointer;
}

.tarjeta-sub { margin: -4px 0 12px; font-size: 13px; color: var(--gris); }

/* Los dos canales de ayuda, uno al lado del otro. WhatsApp NUNCA solo:
   quien no lo tenga instalado igual puede llamar. */
.ayuda-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.ayuda-fila .btn { flex: 1; min-width: 150px; text-decoration: none; text-align: center; }

/* La franja de demostración. La pinta la aplicación según el entorno, no
   está escrita en el HTML: así se apaga sola al publicar en producción. */
.franja-demo {
  background: var(--amarillo); color: #4A3300;
  padding: 10px 16px; text-align: center;
  font: 600 13px/1.45 var(--fuente);
}

@media (min-width: 620px) {
  .ocasiones { grid-template-columns: repeat(4, 1fr); }
}


/* La casilla de autorización de datos.
   Sin marcar de antemano por ley, y con el área de toque completa sobre la
   frase: en un celular, un cuadrito de 16 px es imposible de acertar. */
.acepta {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 13px 14px; margin: 4px 0 14px;
  font-size: 13px; line-height: 1.45; cursor: pointer;
}
.acepta input {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  accent-color: var(--rojo); cursor: pointer;
}
.acepta a { color: var(--rojo-osc); text-decoration: underline; }
.acepta.campo-malo { border-color: var(--rojo); background: #FDF0F1; }

/* Mientras no se sepa el barrio no hay valor que mostrar. En gris y en
   cursiva: es una nota, no una cifra. */
.envio-pendiente { color: var(--tenue); font-style: italic; font-weight: 500; }