/* ============================================================
   ESTILOS DEL MOTOR — todo el color/tipografía viene de variables
   que engine.js inyecta desde config.js. No editar por cliente.
   ============================================================ */
:root {
  --primario: #E8740C;
  --primario-claro: #F4943D;
  --fondo: #111111;
  --superficie: #1a1a1a;
  --superficie2: #222222;
  --borde: #2a2a2a;
  --texto: #eeeeee;
  --texto-suave: #999999;
  --whatsapp: #25D366;
  --font-display: 'Georgia', serif;
  --font-ui: 'Arial Narrow', sans-serif;
  --font-body: 'Helvetica', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: var(--fondo); color: var(--texto); font-family: var(--font-body); padding-bottom: 90px; }

/* Sugerencia de instalación (PWA) */
.install-banner { display: flex; align-items: center; gap: 10px; background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 10px 14px; }
.install-banner[hidden] { display: none; }
.install-icono { font-size: 22px; }
.install-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.install-texto strong { font-family: var(--font-ui); font-size: 13px; color: var(--texto); }
.install-texto span { font-size: 12px; color: var(--texto-suave); }
.install-btn { font-family: var(--font-ui); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--fondo); background: var(--primario); border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.install-cerrar { background: none; border: none; color: var(--texto-suave); font-size: 16px; cursor: pointer; padding: 4px; }

/* Header */
.header { text-align: center; padding: 40px 16px 30px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.28); position: relative; z-index: 1; }
/* Logo del header: círculo fijo (mismo tamaño en mobile y desktop). object-fit:cover
   evita deformarlo; el fondo blanco se ve a través de los recortes/transparencias de
   logos que no son cuadrados (ej. PNG con espacio vacío alrededor del isotipo). */
.header-logo-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--borde); margin: 0 auto 12px; display: none; }
.header-logo-img.visible { display: block; }
.header-nombre { font-family: var(--font-display); font-size: 48px; line-height: 1.05; color: var(--primario); }
.header-sub { font-family: var(--font-ui); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--texto-suave); margin-top: 6px; }
.header-info { font-size: 12px; color: var(--texto-suave); margin-top: 10px; }
.header-info a, .footer a { color: var(--primario); text-decoration: none; }
.header-info a:hover, .footer a:hover { text-decoration: underline; }

/* Carrusel de banners (opt-in) */
.banners-carousel { max-width: 1100px; margin: 0 auto; padding: 12px 16px 0; }
.banners-carousel[hidden] { display: none; }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 14px; scrollbar-width: none; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 6; background: var(--superficie) center / cover no-repeat; display: flex; align-items: flex-end; text-decoration: none; position: relative; }
.banner-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 60%); }
.banner-info { position: relative; z-index: 1; padding: 16px; color: #fff; }
.banner-titulo { font-family: var(--font-ui); font-size: 18px; font-weight: 700; }
.banner-texto { font-size: 13px; opacity: .9; margin-top: 2px; }
.banner-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
.banner-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--borde); cursor: pointer; padding: 0; }
.banner-dot.activo { background: var(--primario); width: 20px; border-radius: 4px; }

/* Buscador */
.buscador-wrap { max-width: 1100px; margin: 0 auto; padding: 14px 16px 0; }
.buscador-input { width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 10px 16px; }
.buscador-input::placeholder { color: var(--texto-suave); }
.buscador-input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }

/* Nav categorías */
.nav-cats { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.nav-cats::-webkit-scrollbar { display: none; }
.nav-cat { flex: 0 0 auto; font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all .15s; }
.nav-cat.activa, .nav-cat:hover { color: var(--fondo); background: var(--primario); border-color: var(--primario); }

/* Catálogo */
main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; }
.categoria { padding-top: 26px; scroll-margin-top: 70px; }
.categoria-titulo { font-family: var(--font-display); font-size: 24px; color: var(--primario-claro); margin-bottom: 14px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.card:hover { border-color: var(--primario); }
.card-img { width: 100%; height: 150px; object-fit: cover; cursor: zoom-in; }
.card-img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--superficie2); cursor: default; }
/* Badge Nuevo/Oferta (columna opcional "etiqueta"): antes solo se veía en el
   tema "ios" y quedaba cargado sin mostrarse en el clásico. */
.card-img-wrap { position: relative; }
.card-etiqueta { position: absolute; top: 8px; left: 8px; z-index: 1; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 4px 9px; border-radius: 999px; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.card-etiqueta-nuevo { background: #0A84FF; }
.card-etiqueta-oferta { background: #FF3B30; }
.card-etiqueta-generica { background: var(--primario); }
.card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.card-nombre { font-family: var(--font-ui); font-size: 16px; letter-spacing: .5px; }
.card-desc { font-size: 13px; color: var(--texto-suave); margin-top: 4px; line-height: 1.45; }
.card-pie { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 12px; }
.card-precio { font-family: var(--font-ui); font-size: 19px; color: var(--primario); font-weight: 600; }
.precio-mayor { font-size: 11px; color: var(--texto-suave); }
.btn-agregar { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--fondo); background: var(--primario); border: none; border-radius: 10px; padding: 9px 18px; cursor: pointer; }
.btn-agregar:active { transform: scale(.96); }

/* Selector de cantidad en la tarjeta (opt-in: solo productos con unidad="kg") */
.qty-selector-kg { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.qty-selector-kg button { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie2); color: var(--texto); cursor: pointer; }
.qty-selector-kg input { width: 56px; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--texto); background: var(--superficie2); border: 1px solid var(--borde); border-radius: 8px; padding: 4px 2px; }
.qty-selector-unidad { font-size: 12px; color: var(--texto-suave); }

/* Catálogo en el celular: dos productos por fila en vez de uno solo ocupando
   toda la pantalla (tema clásico; el tema "ios" ya usa carrusel horizontal
   y no pasa por acá). El precio, el selector de cantidad y "Agregar" se
   apilan en vertical porque de a dos por fila no entran en una sola línea. */
@media (max-width: 480px) {
  .grilla { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-img, .card-img-placeholder { height: 110px; }
  .card-body { padding: 8px; }
  .card-nombre {
    font-size: 13px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card-desc { display: none; }  /* "Por kg" ya está en el precio; no suma nada acá */
  .card-pie { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; }
  .card-precio { font-size: 15px; }
  .qty-selector-kg { margin-bottom: 0; }
  .qty-selector-kg input { width: 100%; }
  .btn-agregar { width: 100%; padding: 10px 8px; text-align: center; }
}

/* Vista ampliada de imagen (lightbox) */
.lightbox { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 20px; }
.lightbox.visible { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 88vh; border-radius: 12px; object-fit: contain; }
.lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 71; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }

/* Skeleton de carga */
.skeleton-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding-top: 8px; }
.skeleton-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; padding: 14px; }
.skeleton-img { height: 150px; margin: -14px -14px 14px; border-radius: 0; }
.skeleton-line { height: 12px; }
.skeleton-block { background: var(--superficie2); border-radius: 6px; margin-bottom: 10px; position: relative; overflow: hidden; }
.skeleton-block::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--texto) 12%, transparent), transparent);
  animation: skeleton-shine 1.4s ease-in-out infinite;
}
@keyframes skeleton-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Animación al agregar al carrito */
@keyframes pulse-agregar { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
.btn-agregar.pulse, .cart-float-count.pulse { animation: pulse-agregar .35s ease; }

/* Carrito flotante */
.cart-float { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: none; justify-content: space-between; align-items: center; background: var(--primario); color: var(--fondo); border-radius: 14px; padding: 14px 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.cart-float.visible { display: flex; }
.cart-float-left { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.cart-float-count { background: var(--fondo); color: var(--primario); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-weight: 700; }
.cart-float-total { font-family: var(--font-ui); font-size: 17px; font-weight: 700; }

/* Botón flotante de WhatsApp (opt-in vía config.modulos.whatsappFlotante): apilado
   arriba de donde aparece el carrito flotante (que es una barra, no un botón, así que
   "posiciones opuestas" no evita superponerse en mobile) para nunca pisarlo, esté o no
   visible el carrito en ese momento. En desktop el carrito flotante no existe (barra
   lateral en su lugar), así que baja a la esquina. */
.whatsapp-float { position: fixed; right: 16px; bottom: 86px; z-index: 41; width: 54px; height: 54px; border-radius: 50%; background: var(--whatsapp); display: none; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.35); cursor: pointer; }
.whatsapp-float:not([hidden]) { display: flex; }

/* Carrito modal / sidebar */
.cart-modal, .aviso { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.cart-modal.visible, .aviso.visible { display: flex; }
.cart-box { width: 100%; max-width: 480px; max-height: 80vh; background: var(--superficie); border-radius: 18px 18px 0 0; padding: 18px; display: flex; flex-direction: column; overflow: hidden; }
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex: none; }
/* El carrito puede tener mucho contenido (entrega, promos, líneas...): solo el
   cuerpo scrollea, el encabezado con la X para volver queda siempre a la vista.
   Antes .cart-box scrolleaba entero y la X se perdía de vista al bajar. */
.cart-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cart-title { font-family: var(--font-ui); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; }
.modal-close-btn { background: none; border: none; color: var(--texto-suave); font-size: 18px; cursor: pointer; }
.cart-empty { text-align: center; color: var(--texto-suave); padding: 30px 10px; }
.cart-linea { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.cart-linea-info { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.cart-linea-info span { color: var(--texto-suave); font-size: 12px; }
.cart-linea-qty { display: flex; align-items: center; gap: 8px; }
.cart-linea-qty button { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie2); color: var(--texto); cursor: pointer; }
.cart-linea-qty-kg input { width: 52px; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--texto); background: var(--superficie2); border: 1px solid var(--borde); border-radius: 8px; padding: 4px 2px; }
.cart-linea-unidad { font-size: 12px; color: var(--texto-suave); }
.cart-linea-sub { width: 76px; text-align: right; font-family: var(--font-ui); }
/* Entrega dentro del carrito: retiro/delivery, franja y envío */
.cart-entrega { border-top: 1px solid var(--borde); padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cart-entrega .checkout-radios label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto); }
.cart-franja, .cart-fecha { width: 100%; font-size: 14px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); }
.cart-fecha { margin-bottom: 6px; }
.cart-entrega .fila { display: flex; justify-content: space-between; color: var(--texto-suave); }
.cart-total-linea { display: flex; justify-content: space-between; padding: 14px 0; font-size: 17px; }
.btn-enviar { width: 100%; font-family: var(--font-ui); font-size: 15px; letter-spacing: 1px; background: var(--whatsapp); color: #fff; border: none; border-radius: 12px; padding: 14px; cursor: pointer; }
#cartSidebar { display: none; }

/* Avisos */
.aviso { align-items: center; padding: 20px; }
.aviso-box { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 26px 22px; max-width: 380px; text-align: center; }
.aviso-icono { font-size: 38px; margin-bottom: 10px; }
.aviso-titulo { font-family: var(--font-ui); font-size: 16px; color: var(--primario-claro); margin-bottom: 10px; }
.aviso-texto { font-size: 14px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 16px; }
.aviso-btn { width: 100%; font-family: var(--font-ui); font-size: 14px; background: var(--primario); color: var(--fondo); border: none; border-radius: 10px; padding: 12px; cursor: pointer; }
.aviso-volver { margin-top: 10px; background: none; border: none; color: var(--texto-suave); font-size: 13px; cursor: pointer; }

/* Checkout (opt-in) */
.checkout-box { text-align: left; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.checkout-box .aviso-icono, .checkout-box .aviso-titulo { text-align: center; }
.checkout-box .aviso-volver { display: block; text-align: center; }
.checkout-campo { margin-bottom: 14px; }
.checkout-campo label { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.checkout-campo input[type="text"], .checkout-campo input[type="tel"], .checkout-campo select, .checkout-campo textarea {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--texto); background: var(--superficie2);
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
}
.checkout-campo textarea { resize: vertical; min-height: 60px; }
.checkout-radios { display: flex; gap: 14px; }
.checkout-radios label { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 14px; color: var(--texto); text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.checkout-error { color: #ff6b6b; font-size: 13px; margin-bottom: 10px; }
.checkout-error:empty { display: none; }
.checkout-resumen { display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding: 12px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.checkout-resumen .fila { display: flex; justify-content: space-between; color: var(--texto-suave); }
.checkout-resumen .fila.total { color: var(--texto); font-weight: 700; font-size: 16px; }

/* Toast, estados */
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: 96px; z-index: 60; background: var(--superficie2); border: 1px solid var(--primario); color: var(--texto); font-size: 13px; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: all .25s; pointer-events: none; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cargando, .estado-error { text-align: center; padding: 60px 20px; color: var(--texto-suave); }
.estado-icono { font-size: 40px; margin-bottom: 12px; }
.estado-titulo { font-family: var(--font-ui); font-size: 17px; color: var(--primario); }
.btn-reintentar { margin-top: 16px; padding: 10px 24px; background: var(--primario); color: var(--fondo); border: none; border-radius: 10px; font-family: var(--font-ui); cursor: pointer; }

/* "¿Por qué elegirnos?" (opt-in) */
.porque-elegirnos { max-width: 1100px; margin: 0 auto; padding: 36px 16px 0; }
.porque-elegirnos[hidden] { display: none; }
.porque-elegirnos-titulo { font-family: var(--font-display); font-size: 22px; color: var(--primario-claro); text-align: center; margin-bottom: 18px; }
.porque-elegirnos-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.porque-elegirnos-lista li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px 14px 40px; font-size: 14px; color: var(--texto); position: relative; }
.porque-elegirnos-lista li::before { content: '✓'; position: absolute; left: 14px; top: 14px; color: var(--primario); font-weight: 700; }

/* Footer */
.footer { text-align: center; padding: 34px 16px 60px; border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: 13px; }
.footer-nombre { font-family: var(--font-display); font-size: 22px; color: var(--primario); margin-bottom: 6px; }
.footer-ig-label { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--primario-claro); margin: 16px 0 6px; }
/* QR de Instagram (opt-in): fondo blanco fijo (no var(--superficie)) a propósito,
   un QR necesita zona clara de alto contraste para escanear bien sin importar el tema. */
.footer-ig-qr { display: block; width: fit-content; margin: 4px auto 10px; background: #fff; padding: 10px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.12); line-height: 0; }
.footer-ig-qr svg { display: block; width: 150px; height: 150px; }
/* Sin QR (o antes de que cargue), el @usuario es el único hijo de #footerIg y el
   text-align:center del footer ya lo centra; con QR, display:block evita que quede
   en la misma línea que el recuadro del QR (ahí el texto-align solo centraría la
   línea combinada, no cada elemento por separado) — así siempre queda debajo,
   centrado en su propio eje. */
.footer-ig-usuario { display: block; }
/* Crédito del desarrollador (siempre visible, config.creditoDev con default "Creado por Impulsa") */
.footer-credito-dev { font-family: var(--font-ui); font-size: 11px; color: var(--texto-suave); margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-credito-dev-linea { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-credito-dev-logo { height: 46px; width: auto; vertical-align: middle; }
.footer-credito-dev:empty { display: none; }
#footerCredito { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 12px; }

/* Desktop: carrito lateral */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  main { padding-right: 360px; }
  #cartSidebar { display: block; position: fixed; top: 80px; right: 20px; width: 320px; z-index: 30; }
  #cartSidebar .cart-box { border-radius: 16px; border: 1px solid var(--borde); max-height: calc(100vh - 120px); }
  #cartSidebar .modal-close-btn { display: none; }
  .cart-float { display: none !important; }
  .whatsapp-float { right: 20px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Oferta del día (opt-in): imagen grande fija debajo del carrusel */
.oferta-dia { max-width: 1100px; margin: 0 auto; padding: 12px 16px 0; }
.oferta-dia[hidden] { display: none; }
.oferta-dia-caja { position: relative; border-radius: 14px; overflow: hidden; background: var(--superficie); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.oferta-dia-caja img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; margin: 0 auto; }
.oferta-dia-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; color: #fff; font-family: var(--font-ui); font-size: 20px; font-weight: 700; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); }

/* Compra mínima: aviso de cuánto falta y botón de envío deshabilitado */
.cart-minimo { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--primario) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--primario) 35%, var(--borde)); color: var(--texto); font-size: 14px; }
.btn-enviar[disabled] { opacity: .45; cursor: not-allowed; }

/* Promociones de precio: tarjetas, líneas del carrito y selector de condiciones */
.promo-card { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--primario); line-height: 1.3; }
.precio-tachado { color: var(--texto-suave); font-weight: 400; }
.linea-promo, .linea-hint { display: block; font-style: normal; font-size: 12px; line-height: 1.3; margin-top: 2px; }
.linea-promo { color: var(--primario); font-weight: 700; }
.linea-hint { color: var(--texto-suave); }
.cart-promos { border-top: 1px solid var(--borde); padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cart-pago-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-suave); }
.cart-pago { width: 100%; font-size: 14px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); }
.cart-req { display: flex; align-items: flex-start; gap: 8px; color: var(--texto); }

.cart-vaciar { display: block; margin: 10px auto 0; background: none; border: none; color: var(--texto-suave); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }

/* Ubicación por GPS (opcional) dentro del checkout */
.btn-ubicacion { width: 100%; background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; font-size: 14px; cursor: pointer; }
.btn-ubicacion[disabled] { opacity: .6; cursor: default; }
.checkout-ubicacion-estado { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.checkout-ubicacion-estado.ok { color: var(--ok, #16A34A); }
.checkout-ubicacion-estado.error { color: var(--error); }