:root {
  --verde: #2f7a3d;
  --verde-oscuro: #1f5a2b;
  --verde-claro: #e8f5e9;
  --texto: #1c1c1c;
  --gris: #6b6b6b;
  --fondo: #fafafa;
  --borde: #e2e2e2;
  --radio: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background-color: var(--fondo);
  position: relative;
}
/* Foto real del huerto de Plantin como textura de fondo de TODA la tienda -- pedido usuario
   2026-08-22: antes era un bloque grande separado arriba que "no hacía nada"; ahora es
   ambiente de fondo. Sin lavado/alpha encima -- pedido usuario 2026-08-22 ("ponlo sin alpha,
   ponlo tal cual"): la foto va tal como es, sin gradiente blanco por delante.
   Capa ::before fija (position:fixed, no background-attachment:fixed) -- pedido usuario
   2026-08-22 ("que llegue hasta arriba, que abarque todo"): background-attachment:fixed es
   poco confiable en Safari de iPhone (bug conocido: no se pinta bien detrás del contenido al
   hacer scroll en el celular, que es donde más se ve la tienda). Con inset:0 + fixed + z-index
   negativo cubre TODO el viewport siempre, en cualquier navegador. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background-image:
    url("https://static.wixstatic.com/media/f9d6e5_6439772bcaaf415eb0f973ae7c7b7134~mv2.jpg/v1/fill/w_1600,h_1200,al_c,q_75/banner.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Pedido usuario 2026-08-22 ("sin alpha, quiero verlo como es"): estas franjas tenían un
   lavado blanco/verde semitransparente + blur -- eso ES el alpha que seguía tapando la foto
   justo donde más se ve (arriba de todo). Sin fondo, la foto queda tal cual detrás; el texto
   se lee con text-shadow en vez de un fondo tapando la imagen. */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
}
.marca {
  font-size: 1.3rem; font-weight: 700; color: var(--verde-oscuro); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7);
}
.marca svg { flex: none; }
.marca .logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }

.buscador { flex: 1; }
.buscador input {
  width: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--borde); font-size: 0.95rem;
}
.btn-carrito {
  border: none; background: var(--verde); color: #fff;
  padding: 10px 14px; border-radius: 999px; font-size: 1rem; cursor: pointer;
}
.btn-carrito.btn-secundario { background: var(--verde-claro); color: var(--verde-oscuro); }
.btn-carrito.oculto { display: none; }

.banner-edicion {
  background: var(--verde-oscuro); color: #fff; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 0.88rem;
}
.banner-edicion.oculto { display: none; }
.banner-edicion button {
  border: none; background: #fff; color: var(--verde-oscuro); font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 0.82rem;
}

.nav-secundaria {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  padding: 6px 16px;
}
.nav-secundaria a, .nav-secundaria button {
  border: none; background: none; color: var(--verde-oscuro); font-weight: 600;
  font-size: 0.78rem; text-decoration: none; cursor: pointer; padding: 2px 0;
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7);
}

.franja-confianza {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  padding: 6px 16px; font-size: 0.74rem; color: var(--verde-oscuro);
  text-align: center;
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7);
}
.franja-confianza span:empty { display: none; }

.categorias {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 16px;
  -webkit-overflow-scrolling: touch;
}
.categorias::-webkit-scrollbar { display: none; }
.chip-categoria {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  font-size: 0.9rem; white-space: nowrap;
}
.chip-categoria.activo { background: var(--verde); color: #fff; border-color: var(--verde); }

.catalogo {
  max-width: 1100px; margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.cargando {
  grid-column: 1/-1; text-align: center; color: var(--gris); padding: 60px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.brote { animation: brote-crecer 1.4s ease-in-out infinite; transform-origin: bottom center; }
.brote .hoja-izq, .brote .hoja-der { transform-origin: 12px 10px; }
.brote .hoja-izq { animation: hoja-mecer 1.4s ease-in-out infinite; }
.brote .hoja-der { animation: hoja-mecer 1.4s ease-in-out infinite reverse; }
@keyframes brote-crecer {
  0%, 100% { transform: scaleY(0.9); }
  50% { transform: scaleY(1); }
}
@keyframes hoja-mecer {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

.tarjeta-producto {
  position: relative;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, opacity .35s ease, translate .45s ease;
  opacity: 0; translate: 0 14px;
  /* Ayuda de rendimiento (pedido usuario 2026-08-22, "a veces lo veo medio pegado"): opacity
     cambia en cada frame de scroll (foco por distancia) -- will-change avisa al navegador que
     lo suba a su propia capa compuesta de entrada, en vez de recalcular sobre la marcha. */
  will-change: opacity;
}
/* Foco por distancia al centro (pedido 2026-08-22) recalcula opacity a mano en CADA frame de
   scroll -- si esa opacidad TAMBIÉN trae transición CSS, queda siempre ~150ms atrás del target
   y el arrastre se nota como si la zona nítida se corriera y agrandara según hacia dónde se
   scrollea ("cuando bajo, el centro baja... cuando subo, sube"). Una vez que la tarjeta ya hizo
   su entrada (.visible), la opacidad pasa a manejarse solo por JS, sin transición -- por eso
   .foco-activo la anula explícitamente.
*/
.tarjeta-producto.visible { opacity: 1; translate: 0 0; }
.tarjeta-producto.visible.foco-activo { transition: transform .15s ease, box-shadow .15s ease, translate .45s ease; }
.tarjeta-producto:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.tarjeta-producto img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--verde-claro);
  cursor: pointer;
}
.info-producto { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nombre-producto { font-size: 0.88rem; font-weight: 600; line-height: 1.25; min-height: 2.3em; cursor: pointer; }
.nombre-producto:hover { color: var(--verde-oscuro); }
.precio-producto { font-size: 1rem; font-weight: 700; color: var(--verde-oscuro); }
.btn-agregar {
  margin-top: auto; border: none; background: var(--verde); color: #fff;
  padding: 8px; border-radius: 8px; font-size: 0.85rem; cursor: pointer;
}
.btn-agregar:active { background: var(--verde-oscuro); }
.sin-stock { opacity: 0.55; }
.sin-stock .btn-agregar { background: var(--gris); cursor: not-allowed; }
.tarjeta-producto.no-disponible { position: relative; opacity: 0.5; }
.tarjeta-producto.no-disponible img { filter: grayscale(0.6); }
.tarjeta-producto.no-disponible:hover { transform: none; box-shadow: none; }
.etiqueta-oculto {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  background: rgba(28,28,28,.72); color: #fff; font-size: 0.68rem; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}

/* Promo flash por producto (pedido usuario 2026-08-22, "como un juego... con barrita de
   tiempo... botoncito que dice tomar descuento"): caja propia arriba de la info del producto,
   con ícono, % y botón antes de tomarlo; barra que se vacía en vivo después. */
.promo-flash {
  margin: 8px 8px 0; border-radius: 10px; padding: 8px;
  background: linear-gradient(135deg, #fff3d6, #ffe2b8);
  border: 1px solid #ffcf7a;
  animation: pulso-promo 1.8s ease-in-out infinite;
}
.promo-flash.activa { background: var(--verde-claro); border-color: var(--verde); animation: none; padding: 6px 8px; }
@keyframes pulso-promo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,157,74,.35); }
  50% { box-shadow: 0 0 0 6px rgba(255,157,74,0); }
}
.promo-cabecera { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: #7a4a00; }
.promo-icono { font-size: 0.9rem; }
.promo-pct { font-size: 1.15rem; font-weight: 800; color: #b35c00; text-align: center; margin: 2px 0 6px; }
.btn-tomar-descuento {
  width: 100%; border: none; border-radius: 8px; padding: 6px; font-size: 0.72rem; font-weight: 700;
  background: linear-gradient(135deg, #ffb347, #ff8c42); color: #4a2200; cursor: pointer;
}
.promo-barra { height: 6px; border-radius: 999px; background: rgba(255,255,255,.6); overflow: hidden; }
.promo-barra-relleno { height: 100%; background: var(--verde); transition: width 1s linear; }
.promo-texto-activa { display: block; margin-top: 3px; font-size: 0.68rem; color: var(--verde-oscuro); font-weight: 600; text-align: center; }
.precio-tachado { color: var(--gris); text-decoration: line-through; font-size: 0.78rem; font-weight: 400; display: block; }

/* Tomar descuento in-place (2026-08-22): el botón se aprieta y se desliza afuera, la caja
   colapsa a la versión con barra, y el precio nuevo entra por abajo del tachado. Todo sobre
   los MISMOS nodos -- nunca se reemplaza la tarjeta completa (eso la dejaba invisible). */
.btn-tomar-descuento.presionado { animation: presion-boton .28s ease; }
@keyframes presion-boton {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); filter: brightness(1.15); }
  100% { transform: scale(1) translateX(140%); opacity: 0; }
}
.promo-pct.saliendo { animation: pct-sale .28s ease forwards; }
@keyframes pct-sale { to { opacity: 0; transform: translateY(-6px) scale(0.85); } }
.promo-flash.colapsando { padding-bottom: 2px; }
.promo-flash.entrando { animation: caja-entra .3s ease; }
@keyframes caja-entra { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.precio-nuevo-flash {
  display: block; color: var(--verde-oscuro); font-weight: 800; font-size: 1.02rem;
  animation: precio-entra .35s ease;
}
.precio-nuevo-flash.entrando { opacity: 0; transform: translateY(-4px); }
@keyframes precio-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Ráfaga de brillos al activar un cupón -- CSS puro, sin canvas ni librería, unos puntitos que
   salen y se desvanecen. */
.tarjeta-producto.brillos::after {
  content: "✨"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; pointer-events: none; animation: brillo-explota .9s ease-out forwards;
}
@keyframes brillo-explota {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  35% { opacity: 1; transform: scale(1.15) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.6) rotate(20deg); }
}

/* Animación "vuela al carrito" -- una miniatura del producto viaja del botón al ícono del
   carrito, para que se entienda de un vistazo que se agregó. Un solo elemento reciclado
   (no uno por click) para no acumular nodos si el cliente agrega rápido varias veces. */
.volando-al-carrito {
  position: fixed; z-index: 60; border-radius: 8px; object-fit: cover;
  pointer-events: none; transition: transform .55s cubic-bezier(.3,.05,.4,1), opacity .55s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.toast-gratificante {
  position: fixed; left: 50%; bottom: 24px; z-index: 70;
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--verde-oscuro); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .3s ease, opacity .3s ease;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.toast-gratificante.visible { transform: translate(-50%, 0); opacity: 1; }

.tarjeta-producto.agregada { animation: pulso-agregar .4s ease; }
@keyframes pulso-agregar {
  0% { box-shadow: 0 0 0 0 rgba(47,122,61,.35); }
  100% { box-shadow: 0 0 0 14px rgba(47,122,61,0); }
}
.btn-carrito.rebote { animation: rebote-carrito .4s ease; }
@keyframes rebote-carrito {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.22); }
  60% { transform: scale(0.95); }
}

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30;
}
.overlay.oculto { display: none; }

.panel-carrito {
  position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 100vw);
  background: #fff; z-index: 40; display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,.15);
  transform: translateX(0); transition: transform .2s ease;
}
.panel-carrito.oculto { transform: translateX(100%); pointer-events: none; }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--borde);
}
.panel-header h2 { margin: 0; font-size: 1.1rem; }
.cerrar { border: none; background: none; font-size: 1.2rem; cursor: pointer; color: var(--gris); }
.btn-modificar-carrito {
  border: none; background: none; color: var(--verde-oscuro); font-weight: 600; font-size: 0.82rem;
  cursor: pointer; padding: 8px 16px 0; text-align: left;
}

.items-carrito { flex: 1; overflow-y: auto; padding: 12px 16px; }
.fila-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.fila-item img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.fila-datos { flex: 1; min-width: 0; }
.fila-nombre { font-size: 0.85rem; font-weight: 600; }
.fila-precio { font-size: 0.8rem; color: var(--gris); }
.fila-subtotal { font-size: 0.82rem; font-weight: 700; color: var(--verde-oscuro); margin-top: 2px; }
.fila-controles { display: flex; align-items: center; gap: 6px; }
.fila-controles button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--borde);
  background: #fff; cursor: pointer; font-size: 0.9rem;
}
.vacio-carrito { text-align: center; color: var(--gris); padding: 40px 0; }

.panel-footer { padding: 14px 16px; border-top: 1px solid var(--borde); }
.total-linea {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 1.05rem;
}
.btn-primario {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: var(--verde); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.btn-primario:disabled { background: var(--gris); cursor: not-allowed; }

.tabs-checkout { display: flex; border-bottom: 1px solid var(--borde); }
.tab-checkout {
  flex: 1; border: none; background: none; padding: 12px; font-size: 0.88rem; font-weight: 600;
  color: var(--gris); cursor: pointer; border-bottom: 2px solid transparent;
}
.tab-checkout.activo { color: var(--verde-oscuro); border-bottom-color: var(--verde); }

.checkout-body { flex: 1; overflow-y: auto; padding: 16px; }
.tab-contenido { display: flex; flex-direction: column; gap: 12px; }
.tab-contenido.oculto { display: none; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 0.8rem; color: var(--gris); }
.campo input, .campo select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde); font-size: 0.95rem;
  font-family: inherit; background: #fff;
}
#camposDireccion { display: flex; flex-direction: column; gap: 12px; }
/* !important necesario: bug real 2026-08-22 -- ".tarjeta-pago" (más abajo en este archivo)
   también define su propio "display: flex" y, al empatar en especificidad, ganaba la regla que
   aparece DESPUÉS en el CSS -- por eso "Pagar al retirar" seguía visible aunque nunca se
   hubiera elegido retiro. Con !important, ocultar gana siempre sin importar el orden. */
.oculto-campo { display: none !important; }

.tarjetas-recibo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.tarjeta-recibo {
  border: 2px solid var(--borde); border-radius: var(--radio); background: #fff;
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; text-align: center; font-family: inherit;
}
.tarjeta-recibo strong { font-size: 0.88rem; }
.tarjeta-recibo span { font-size: 0.74rem; color: var(--gris); }
.tarjeta-recibo.seleccionado { border-color: var(--verde); background: var(--verde-claro); }
.icono-recibo { font-size: 1.7rem; }

.resumen-retiro {
  background: var(--verde-claro); border-radius: 10px; padding: 12px; font-size: 0.86rem; line-height: 1.5;
}

.aviso-precio-envio {
  background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 600;
  font-size: 0.86rem; padding: 8px 12px; border-radius: 8px;
}
.aviso-precio-envio.sin-cobertura { background: #fde2e1; color: #b3261e; }

.tarjetas-courier { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
.tarjeta-courier {
  border: 2px solid var(--borde); border-radius: 10px; background: #fff;
  padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.78rem; cursor: pointer; font-family: inherit;
}
.tarjeta-courier.seleccionado { border-color: var(--verde); background: var(--verde-claro); }
.msg-info-envio { font-size: 0.78rem; color: var(--gris); line-height: 1.5; }

.etiqueta-metodo { margin: 6px 0 0; font-size: 0.85rem; color: var(--gris); }
.carrusel-pago { position: relative; }
/* Bug real 2026-08-22 ("en el cel aparecen hacia el lado... no caben, mejor hacia abajo"): el
   carrusel horizontal con scroll-snap no entraba bien en pantallas angostas -- en el celular
   ahora es una lista vertical simple, fila por fila. El carrusel deslizable queda solo para
   pantallas más anchas (ver media query abajo), donde sí hay espacio real de sobra. */
.carrusel-pista {
  display: flex; flex-direction: column; gap: 8px;
}
.tarjeta-pago {
  border: 2px solid var(--borde); border-radius: var(--radio); background: #fff;
  padding: 12px 14px; display: flex; flex-direction: row; align-items: center; gap: 12px;
  cursor: pointer; text-align: left; width: 100%;
}
.tarjeta-pago.seleccionado { border-color: var(--verde); background: var(--verde-claro); }
.icono-pago { font-size: 1.6rem; flex: none; }
.texto-pago { display: flex; flex-direction: column; gap: 1px; }
.nombre-pago { font-weight: 700; font-size: 0.92rem; }
.desc-pago { font-size: 0.75rem; color: var(--gris); }
.carrusel-puntos { display: none; }

.resultado-pago { font-size: 0.88rem; }
.resultado-pago.error { color: #b3261e; }
.resultado-pago a {
  display: inline-block; margin-top: 6px; color: var(--verde-oscuro); font-weight: 600;
}
.datos-transferencia {
  background: var(--verde-claro); border-radius: 10px; padding: 12px; margin-top: 8px; font-size: 0.85rem;
  line-height: 1.6;
}

/* El detalle se pinta EN EL MISMO LUGAR del catálogo (no en un panel aparte) -- ocupa todas
   las columnas del grid de #catalogo. */
.vista-detalle { grid-column: 1/-1; max-width: 900px; margin: 0 auto; width: 100%; }
.btn-volver {
  border: none; background: none; color: var(--verde-oscuro); font-weight: 600;
  font-size: 0.9rem; cursor: pointer; padding: 8px 0 16px; display: inline-block;
}
.detalle-hero {
  background: #fff; border-radius: var(--radio); padding: 16px; margin-bottom: 20px;
  border: 1px solid var(--borde); position: relative; overflow: hidden;
}
/* Raíz decorativa de fondo -- textura orgánica propia (no es una foto real, se marca como tal
   en el diseño: muy tenue, solo ambiente), pedido usuario 2026-08-22 de más textura vegetal. */
.detalle-hero::before {
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 220px; height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%232f7a3d' stroke-width='2.5'%3E%3Cpath d='M100 10v90'/%3E%3Cpath d='M100 60c-30 10-40 40-50 70'/%3E%3Cpath d='M100 75c25 8 35 35 45 65'/%3E%3Cpath d='M100 45c-20 5-28 22-35 40'/%3E%3Cpath d='M100 55c18 6 25 20 32 38'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.06; pointer-events: none;
}
.detalle-img {
  width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radio);
  background: var(--verde-claro); margin-bottom: 14px; position: relative; z-index: 1;
}
.detalle-hero-datos { position: relative; z-index: 1; }
.chip-seccion {
  display: inline-block; background: var(--verde-claro); color: var(--verde-oscuro);
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.detalle-nombre { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.3; }
.detalle-precio { font-size: 1.5rem; font-weight: 700; color: var(--verde-oscuro); margin-bottom: 14px; }
.fila-cantidad { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.selector-cantidad {
  display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
}
.selector-cantidad button {
  border: none; background: var(--verde-claro); color: var(--verde-oscuro); font-size: 1.1rem;
  width: 38px; cursor: pointer;
}
.selector-cantidad input {
  width: 52px; text-align: center; font-weight: 600; border: none; font-size: 0.95rem;
  font-family: inherit; padding: 0; -moz-appearance: textfield;
}
.selector-cantidad input::-webkit-outer-spin-button, .selector-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-seleccionar-tramo {
  border: 1px solid var(--verde); background: #fff; color: var(--verde-oscuro);
  border-radius: 6px; padding: 3px 10px; font-size: 0.76rem; cursor: pointer;
}
.fila-cantidad .btn-primario { flex: 1; max-width: 260px; margin: 0; }
.detalle-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.badge-mini {
  font-size: 0.74rem; color: var(--gris); background: var(--fondo); border: 1px solid var(--borde);
  padding: 4px 10px; border-radius: 999px;
}
.aviso-mayorista {
  display: block; font-size: 0.68rem; color: var(--verde-oscuro); background: var(--verde-claro);
  padding: 2px 7px; border-radius: 999px; width: fit-content; margin-top: 2px;
}
.tabla-mayorista {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 16px; margin-bottom: 18px; font-size: 0.85rem;
}
.tabla-mayorista strong { display: block; margin-bottom: 6px; color: var(--verde-oscuro); }
.tabla-mayorista table { width: 100%; border-collapse: collapse; }
.tabla-mayorista td { padding: 3px 0; }
.tabla-mayorista td:last-child { text-align: right; font-weight: 700; color: var(--verde-oscuro); }
.btn-texto {
  border: none; background: none; color: var(--verde-oscuro); font-weight: 600; font-size: 0.85rem;
  cursor: pointer; padding: 0;
}

.detalle-intro { font-size: 0.95rem; line-height: 1.6; color: var(--texto); margin-bottom: 18px; }

/* "Visitar tienda" y "Contacto" -- vistas inline, mismo lugar que el detalle de producto,
   nunca un panel lateral (pedido usuario 2026-08-22). */
.vista-info { max-width: 560px; }
.vista-info h2 { margin: 4px 0 16px; }
.vista-info p { font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
.mapa-embebido {
  border-radius: var(--radio); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--borde);
}
.mapa-embebido iframe { width: 100%; height: 260px; border: 0; display: block; }
.fila-botones-mapa { display: flex; gap: 10px; margin-bottom: 18px; }
.fila-botones-mapa .btn-primario { margin: 0; text-decoration: none; text-align: center; }
.btn-mapa-secundario { background: #fff; color: var(--verde-oscuro); border: 2px solid var(--verde); }
.tarjeta-contacto {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px; margin-bottom: 14px;
}
.tarjeta-contacto strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.tarjeta-contacto p { margin-bottom: 10px; }
.tarjeta-contacto .btn-primario { text-decoration: none; text-align: center; margin-bottom: 6px; }

.secciones-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.seccion-info { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.seccion-info h4 { margin: 0 0 8px; font-size: 0.92rem; color: var(--verde-oscuro); }
.seccion-info ul { margin: 0; padding-left: 18px; font-size: 0.85rem; line-height: 1.55; color: var(--texto); }
.seccion-info li { margin-bottom: 4px; }
.seccion-info p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--texto); }

@media (min-width: 640px) {
  .detalle-hero { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 24px; }
  .detalle-img { margin-bottom: 0; max-width: none; }
}

.vista-pedido h2 { margin: 0 0 8px; font-size: 1.3rem; }
.etiqueta-estado {
  display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 0.82rem;
  font-weight: 700; margin-bottom: 18px;
}
.estado-pendiente_pago { background: #fff3cd; color: #8a6300; }
.estado-pagado { background: var(--verde-claro); color: var(--verde-oscuro); }
.estado-preparado { background: #dbeafe; color: #1e4ed8; }
.estado-despachado { background: #ede9fe; color: #6d28d9; }
.tabla-pedido { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 0.9rem; }
.tabla-pedido td { padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.tabla-pedido td:last-child { text-align: right; font-weight: 600; }
.msg-no-editable { color: var(--gris); font-size: 0.88rem; }
.link-guardar { color: var(--gris); font-size: 0.8rem; margin-top: 20px; }

@media (max-width: 480px) {
  .marca { font-size: 1.1rem; }
  .catalogo { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 10px; }
  .panel-carrito { width: 100vw; }
}

/* En pantallas anchas (PC) hay espacio de sobra: se ven las 3-4 tarjetas de pago en fila, cada
   una como caja centrada -- en el celular (base, ver arriba) van apiladas en columna. */
@media (min-width: 640px) {
  #panelCheckout.panel-carrito { width: min(560px, 100vw); }
  .carrusel-pista { flex-direction: row; gap: 10px; }
  .tarjeta-pago { flex: 1 1 0; flex-direction: column; text-align: center; padding: 16px 12px; }
  .texto-pago { align-items: center; }
}

/* Widget PLANTA10 dado de baja 2026-08-22 -- queda la caja de descuento flash por producto
   (.promo-flash, más abajo), con su propia barra de tiempo real. */

.aviso-descuento {
  background: var(--verde-claro); color: var(--verde-oscuro); font-weight: 700;
  font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; margin: 8px 0;
}
.aviso-ya-generado { color: var(--gris); font-size: 0.82rem; margin: 0 0 6px; }
.btn-abrir-pago { display: block; text-align: center; text-decoration: none; margin-top: 8px; }
.btn-ver-pedido {
  display: block; text-align: center; text-decoration: none; margin-bottom: 14px;
  background: #fff; color: var(--verde-oscuro); border: 2px solid var(--verde);
}

/* Burbuja de chat -- pedido usuario 2026-08-22, "bonita, de plantin". Guarda historia y
   contexto de sesión (pedido/carrito) en el servidor de la tienda; TODAVÍA no está conectada
   al bot real del Desk (ver nota en server.js agregarMensajeChat). */
.burbuja-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--verde); color: #fff; font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(47,122,61,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.burbuja-chat:hover { transform: scale(1.08); }

.panel-chat {
  position: fixed; right: 18px; bottom: 88px; z-index: 55;
  width: min(340px, calc(100vw - 36px)); height: min(480px, calc(100vh - 120px));
  background: #fff; border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.22);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; transition: transform .2s ease, opacity .2s ease;
}
.panel-chat.oculto { transform: scale(0.9); opacity: 0; pointer-events: none; }
.chat-header {
  background: var(--verde-oscuro); color: #fff; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-header-marca { display: flex; align-items: center; gap: 10px; }
.chat-header-marca img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.chat-header-marca strong { display: block; font-size: 0.92rem; }
.chat-header-marca span { display: block; font-size: 0.72rem; opacity: 0.85; }
.chat-header .cerrar { color: #fff; }

.mensajes-chat { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--fondo); }
.msj-chat {
  max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 0.86rem; line-height: 1.4;
}
.msj-chat.de-cliente { align-self: flex-end; background: var(--verde); color: #fff; border-bottom-right-radius: 4px; }
.msj-chat.de-sistema, .msj-chat.de-admin { align-self: flex-start; background: #fff; border: 1px solid var(--borde); border-bottom-left-radius: 4px; }

.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); }
.chat-form input {
  flex: 1; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--borde); font-size: 0.88rem;
}
.chat-form button {
  border: none; background: var(--verde); color: #fff; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; font-size: 1rem;
}