/* ═══════════════ la tienda: carrito y checkout ═══════════════
   Usa las variables del sitio (estilo.css): una sola paleta que mantener.

   El carrito es un cajón lateral y no una página aparte a propósito: sacar al
   cliente del catálogo para que mire lo que lleva es la forma más fácil de que
   no vuelva. */

/* La tercera opción del héroe: presente, pero sin competir con las dos que
   cierran venta. */
.btn-t{display:inline-block;padding:15px 20px;font-weight:600;font-size:15px;
       border-radius:12px;text-decoration:none;color:var(--tenue);
       transition:color .18s ease}
@media(hover:hover){ .btn-t:hover{color:var(--texto)} }

/* ── el botón del carrito, en la barra ── */
.carrito-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;
             background:transparent;border:1px solid var(--borde);border-radius:11px;
             color:var(--texto);cursor:pointer;padding:0}
@media(hover:hover){ .carrito-btn:hover{border-color:var(--verde);color:var(--verde)} }
.carrito-btn .cuenta{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
                     display:grid;place-items:center;padding:0 5px;border-radius:10px;
                     background:var(--verde);color:#0a1500;
                     font-size:11px;font-weight:700;line-height:1}

/* ── el cajón ── */
.tienda-fondo{position:fixed;inset:0;background:rgba(3,6,12,.72);z-index:45;
              opacity:0;transition:opacity .2s ease}
.tienda-fondo.abierto{opacity:1}

.tienda{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:46;
        background:var(--fondo);border-left:1px solid var(--borde);
        display:flex;flex-direction:column;
        /* Entra deslizando desde el borde. La clase la pone el JS DESPUÉS de
           mostrarlo: si la transición corriera sobre algo con display:none, al
           aparecer ya iría por la mitad. */
        transform:translateX(100%);transition:transform .24s ease}
.tienda.abierto{transform:none}
/* El atributo `hidden` es display:none del navegador y cualquier regla nuestra
   con display propio le gana. Sin esto el cajón tapa la página entera,
   invisible pero tragándose los toques. Ya pasó con el panel del chat. */
[hidden]{display:none !important}

.tienda-top{display:flex;align-items:center;gap:10px;padding:16px 18px;
            border-bottom:1px solid var(--borde);flex:0 0 auto}
.tienda-top h2{margin:0;font-size:17px;flex:1;font-weight:700}
.tienda-x{background:none;border:0;color:var(--tenue);font-size:27px;line-height:1;
          cursor:pointer;padding:2px 8px;border-radius:8px}
@media(hover:hover){ .tienda-x:hover{color:var(--texto)} }

.tienda-cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px}
.tienda-pie{flex:0 0 auto;padding:14px 18px;border-top:1px solid var(--borde);
            padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* ── líneas del carrito ── */
.linea{display:flex;gap:12px;align-items:center;padding:11px 0;
       border-bottom:1px solid var(--borde)}
.linea img{width:58px;height:58px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.linea-tx{flex:1;min-width:0}
.linea-tx b{display:block;font-size:14.5px}
.linea-tx small{color:var(--tenue);font-size:12.5px}
.cant{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.cant button{width:30px;height:30px;border:1px solid var(--borde);background:transparent;
             color:var(--texto);border-radius:8px;cursor:pointer;font-size:16px;line-height:1}
@media(hover:hover){ .cant button:hover{border-color:var(--verde);color:var(--verde)} }
.cant span{min-width:26px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}

.totales{margin-top:16px;font-size:14px}
.totales div{display:flex;justify-content:space-between;padding:5px 0;color:var(--tenue)}
.totales .grande{color:var(--texto);font-size:17px;font-weight:700;
                 border-top:1px solid var(--borde);margin-top:6px;padding-top:11px}
.regalo{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:12.5px;
        background:rgba(196,242,117,.09);color:var(--verde);line-height:1.45}
/* Cada meta de envío gratis es su propia tarjeta. Juntas en una sola caja se
   leían como una frase larga y no se distinguía cuál era cuál. */
.regalo + .regalo{margin-top:8px}
/* La que ya se cumplió se marca: es un logro, no una tarea pendiente. */
.regalo.logrado{background:rgba(53,208,127,.12);color:#35d07f}
/* El precio por mayor: en qué escalón va y cuánto le falta para el siguiente. */
.mayoreo{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;
         background:rgba(232,163,61,.10);color:#f0b458}

.vacio{text-align:center;color:var(--tenue);padding:48px 10px;font-size:14.5px;line-height:1.6}

/* ── el formulario ── */
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;color:var(--tenue);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--sup);color:var(--texto);border:1px solid var(--borde);
  border-radius:10px;padding:12px 13px;font:inherit;
  /* 16px o iOS hace zoom al enfocar y descuadra la página. */
  font-size:16px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde)}
.campo .ayuda{font-size:11.5px;color:var(--tenue);margin-top:4px;line-height:1.4}
.campo.malo input,.campo.malo select{border-color:#e06055}
.campo .error{font-size:11.5px;color:#e06055;margin-top:4px}

.medios{display:flex;flex-direction:column;gap:8px}
.medio{display:flex;align-items:center;gap:11px;padding:13px;border-radius:11px;
       border:1px solid var(--borde);background:var(--sup);cursor:pointer;font-size:14px}
.medio.on{border-color:var(--verde)}
.medio input{width:17px;height:17px;accent-color:var(--verde);flex:0 0 auto}
.medio .auto{font-size:11px;color:var(--verde);display:block;margin-top:2px}

.btn-tienda{display:block;width:100%;padding:15px;border:0;border-radius:12px;
            background:var(--verde);color:#0a1500;font:inherit;font-weight:700;
            font-size:15.5px;cursor:pointer;text-align:center;text-decoration:none}
.btn-tienda:disabled{opacity:.5;cursor:default}
.btn-plano{display:block;width:100%;padding:12px;margin-top:8px;border:0;
           background:none;color:var(--tenue);font:inherit;font-size:13.5px;cursor:pointer}

.aviso{padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;margin-bottom:14px}
.aviso.malo{background:rgba(224,96,85,.11);color:#e06055}
.aviso.bien{background:rgba(53,208,127,.11);color:#35d07f}
/* «Ya tienes un pedido con este celular» (29-sep-2026). Avisa, no bloquea. */
.previo-ped{margin-top:10px;padding:12px 13px;border-radius:10px;background:rgba(232,163,61,.10);
  border:1px solid rgba(232,163,61,.35);font-size:13.5px;line-height:1.5;color:var(--texto,#f9f5ea)}
.previo-ped .previo-tit{font-weight:700;margin-bottom:4px}
.previo-ped ul{margin:0 0 6px;padding-left:18px}
.previo-ped p{margin:0 0 8px;color:var(--tenue,#98a3b6)}
.previo-ped .previo-wa{display:inline-block;padding:9px 12px;border-radius:8px;background:#25d366;color:#07210f;
  font-weight:700;text-decoration:none;min-height:24px}
.aviso.repetido{background:rgba(232,163,61,.12);color:var(--texto,#f9f5ea);border:1px solid rgba(232,163,61,.4)}
.aviso.repetido .rep-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.aviso.repetido .rep-acc button,.aviso.repetido .rep-acc a{flex:1;min-width:140px;min-height:44px;padding:10px 12px;border-radius:9px;
  font-weight:700;font-size:13.5px;text-align:center;text-decoration:none;cursor:pointer;border:0}
.aviso.repetido .rep-acc button{background:var(--verde,#c4f275);color:#0a1500}
.aviso.repetido .rep-acc a{background:transparent;color:var(--texto,#f9f5ea);border:1px solid rgba(249,245,234,.3);display:flex;align-items:center;justify-content:center}

/* ── el botón de agregar, en cada tarjeta ── */
.agregar{border:1px solid var(--verde);background:transparent;color:var(--verde);
         font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;
         border-radius:9px;cursor:pointer;white-space:nowrap}
@media(hover:hover){ .agregar:hover{background:var(--verde);color:#0a1500} }
.agregar.puesto{background:var(--verde);color:#0a1500;border-color:var(--verde)}

/* ── la ficha del producto ──
   Tocar la tarjeta abre esto. En la rejilla solo cabe una foto y media línea,
   y para un lente la foto ES el producto. */
.ficha-fondo{position:fixed;inset:0;z-index:47;background:rgba(3,6,12,.8);
             display:grid;place-items:center;padding:18px;
             opacity:0;transition:opacity .2s ease}
.ficha-fondo.abierto{opacity:1}
.ficha{background:var(--fondo);border:1px solid var(--borde);border-radius:16px;
       width:min(430px,100%);max-height:88vh;overflow-y:auto;position:relative;
       transform:translateY(12px) scale(.98);transition:transform .2s ease}
.ficha-fondo.abierto .ficha{transform:none}
.ficha-x{position:absolute;top:8px;right:10px;z-index:2;width:34px;height:34px;
         border:0;border-radius:50%;background:rgba(6,10,19,.72);color:var(--texto);
         font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}

/* Las fotos se pasan deslizando, como en cualquier tienda. */
.ficha-fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
             scrollbar-width:none;border-radius:16px 16px 0 0}
.ficha-fotos::-webkit-scrollbar{display:none}
.ficha-fotos img{flex:0 0 100%;width:100%;aspect-ratio:1;object-fit:cover;scroll-snap-align:center}
.ficha-puntos{display:flex;gap:5px;justify-content:center;padding:9px 0 0}
.ficha-puntos span{width:6px;height:6px;border-radius:50%;background:var(--borde)}
.ficha-puntos span.on{background:var(--verde)}

.ficha-tx{padding:14px 18px 6px}
.ficha-tx h3{margin:0 0 3px;font-size:21px}
.ficha-tx p{margin:0 0 9px;color:var(--tenue);line-height:1.5;font-size:14.5px}
.ficha-precio{color:var(--texto) !important;font-size:19px;font-weight:700}
.ficha-precio small{color:var(--tenue);font-weight:400;font-size:13px}
.ficha-agotado{color:#e8a33d !important;font-weight:600}
.ficha-regalo{color:var(--verde) !important;font-size:13px !important}
.ficha-encargo{color:#7fb0ff !important;font-size:13px !important;line-height:1.45;background:rgba(127,176,255,.10);border:1px solid rgba(127,176,255,.28);border-radius:9px;padding:8px 11px;margin:6px 0}
.ficha .btn-tienda{width:calc(100% - 36px);margin:6px 18px 10px}
/* "Probar este modelo": secundario, debajo del de agregar. El que manda es
   agregar; este es para quien todavía duda. */
.ficha .ficha-probar{width:calc(100% - 36px);margin:0 18px 18px;
     padding:12px 14px;border-radius:11px;border:1px solid var(--borde);
     background:transparent;color:var(--texto);font:inherit;font-size:14.5px;
     font-weight:600;cursor:pointer;min-height:46px}
@media(hover:hover){
  .ficha .ficha-probar:hover{border-color:rgba(196,242,117,.55);color:var(--verde)}
}
.ficha .ficha-probar:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* La tarjeta se siente tocable. */
.prod[data-id]{cursor:pointer}

/* ── revisar antes de pedir ── */
.rev{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
     font-size:14px;border-bottom:1px solid var(--borde)}
.rev span{color:var(--tenue);flex:0 0 auto}
.rev b{text-align:right;font-weight:600;word-break:break-word}
.rev-tit{margin:20px 0 6px;font-size:13px;text-transform:uppercase;
         letter-spacing:.06em;color:var(--tenue);font-weight:600}
.req{color:var(--verde)}

/* El +57 va pegado al campo: un colombiano no tiene que dudar qué poner, y el
   número queda listo para abrir WhatsApp sin arreglarlo después. */
.contel{display:flex;align-items:stretch;border:1px solid var(--borde);
        border-radius:10px;background:var(--sup);overflow:hidden}
.contel .pais{display:grid;place-items:center;padding:0 12px;font-size:15px;
              color:var(--tenue);border-right:1px solid var(--borde);flex:0 0 auto}
.contel input{border:0 !important;border-radius:0 !important;background:transparent !important}
.campo.malo .contel{border-color:#e06055}

/* El mapa: mosaicos de OpenStreetMap servidos por nuestro dominio. */
.mapa{position:relative;height:200px;border-radius:12px;overflow:hidden;
      background:var(--sup);border:1px solid var(--borde);margin-bottom:8px}
.mapa img{position:absolute;width:256px;height:256px;image-rendering:auto}
.mapa .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-92%);
           font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));pointer-events:none}
.mapa-cargando{position:absolute;inset:0;display:grid;place-items:center;
               color:var(--tenue);font-size:13px;text-align:center;padding:0 20px}

/* ── el cupón, en el pie del carrito ──
   Va pegado a "Continuar" porque es lo último que se mira antes de seguir, y
   quien trae un código lo busca justo ahí. Ponerlo más adelante, entre los
   datos, obliga a escribir nombre y dirección sin saber cuánto va a pagar. */
.bono{display:flex;gap:8px;margin-bottom:10px}
.bono input{flex:1;min-width:0;background:var(--sup);color:var(--texto);
            border:1px solid var(--borde);border-radius:10px;padding:11px 12px;
            font:inherit;font-size:16px;text-transform:uppercase}
.bono input::placeholder{text-transform:none;color:var(--tenue)}
.bono input:focus{outline:none;border-color:var(--verde)}
.bono>button{flex:0 0 auto;padding:0 16px;border:1px solid var(--borde);
             background:transparent;color:var(--texto);border-radius:10px;
             font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media(hover:hover){ .bono>button:hover{border-color:var(--verde);color:var(--verde)} }
.bono>button:disabled{opacity:.5;cursor:default}

.bono.puesto{align-items:center;justify-content:space-between;gap:10px;
             padding:11px 13px;border-radius:10px;
             background:rgba(196,242,117,.09);border:1px solid rgba(196,242,117,.3)}
.bono.puesto b{display:block;font-size:14px;color:var(--verde)}
.bono.puesto small{display:block;color:var(--tenue);font-size:12.5px;margin-top:1px}
.bono.puesto button{border:0;background:none;color:var(--tenue);
                    font:inherit;font-size:13px;cursor:pointer;padding:4px 2px}
@media(hover:hover){ .bono.puesto button:hover{color:var(--texto)} }

.bono-mal{font-size:12.5px;color:#e06055;margin:-4px 0 10px;line-height:1.45}

/* El aviso del "pago en casa": va DENTRO de la opción, no al final del
   checkout. Enterarse de que el envío sale más caro cuando ya diste todos los
   datos es donde la gente abandona — y peor, enterarse en la puerta. */
.medio .ojo{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:#e8a33d}
/* Cuando el envío no es gratis pero se puede explicar cómo lograrlo, la
   tarjeta se pinta en ámbar: no es un logro ni una promesa, es un aviso. */
.regalo.aviso-envio{background:rgba(232,163,61,.1);color:#e8a33d}

/* Las sugerencias de ciudad. La lista es de la transportadora, así que elegir
   de aquí es lo que garantiza que reconozcan el destino. */
.sugc{margin-top:6px;border:1px solid var(--borde);border-radius:10px;
      background:var(--sup);overflow:hidden;max-height:230px;overflow-y:auto}
.sugc button{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
             padding:11px 13px;border:0;background:none;color:var(--texto);
             font:inherit;font-size:14.5px;cursor:pointer;
             border-bottom:1px solid var(--borde)}
.sugc button:last-child{border-bottom:0}
.sugc button small{color:var(--tenue);font-size:12px}
@media(hover:hover){ .sugc button:hover{background:rgba(196,242,117,.09);color:var(--verde)} }

/* ── las fotos de la ficha ──
   Tres formas de pasarlas —deslizando, con las flechas, o tocando la miniatura—
   y todas mueven la misma tira. Así el estado no se puede desincronizar: manda
   dónde quedó el scroll, no un contador aparte. */
.ficha-flecha{position:absolute;top:calc(50% - 60px);transform:translateY(-50%);z-index:3;
              width:38px;height:38px;border:0;border-radius:50%;
              background:rgba(6,10,19,.66);color:#fff;font-size:24px;line-height:1;
              cursor:pointer;backdrop-filter:blur(4px);
              display:grid;place-items:center;padding:0 0 3px}
.ficha-flecha.izq{left:10px}
.ficha-flecha.der{right:10px}
.ficha-flecha:disabled{opacity:.25;cursor:default}
@media(hover:hover){ .ficha-flecha:not(:disabled):hover{background:rgba(6,10,19,.85)} }

/* Las miniaturas: se ve de un vistazo cuántas fotos hay y qué trae cada una.
   Los puntitos solo decían "hay más", que es la mitad de la información. */
.ficha-mini{display:flex;gap:7px;padding:10px 14px 0;overflow-x:auto;
            scrollbar-width:none}
.ficha-mini::-webkit-scrollbar{display:none}
.ficha-mini button{flex:0 0 auto;width:52px;height:52px;padding:0;cursor:pointer;
                   border:2px solid transparent;border-radius:9px;overflow:hidden;
                   background:none;opacity:.55;transition:opacity .15s ease}
.ficha-mini button.on{border-color:var(--verde);opacity:1}
.ficha-mini img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover){ .ficha-mini button:hover{opacity:1} }

/* ── el contador en la tarjeta ── */
.cant-card{display:flex;align-items:center;gap:2px}
.cant-card button{width:30px;height:30px;border:1px solid var(--verde);
                  background:transparent;color:var(--verde);border-radius:8px;
                  cursor:pointer;font-size:16px;line-height:1;padding:0}
.cant-card span{min-width:26px;text-align:center;font-size:14px;font-weight:600;
                font-variant-numeric:tabular-nums;color:var(--verde)}
@media(hover:hover){ .cant-card button:hover{background:var(--verde);color:#0a1500} }

/* ── el aviso de "lo agregué" ──
   Abajo y por encima de todo, pero sin tapar el catálogo: el cliente sigue
   viendo lo que estaba mirando, que es de lo que se trata. */
.agregado{position:fixed;left:12px;right:12px;bottom:12px;z-index:44;
          display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          padding:12px;border-radius:14px;
          background:var(--sup);border:1px solid var(--verde);
          box-shadow:0 10px 30px rgba(0,0,0,.45);
          max-width:520px;margin:0 auto;
          transform:translateY(120%);transition:transform .26s ease}
.agregado.visible{transform:none}
.agregado img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.agregado-tx{flex:1;min-width:110px}
.agregado-tx b{display:block;font-size:14px}
.agregado-tx small{color:var(--tenue);font-size:12.5px}
.agregado-ir{flex:0 0 auto;padding:10px 14px;border:0;border-radius:10px;
             background:var(--verde);color:#0a1500;font:inherit;font-size:13.5px;
             font-weight:700;cursor:pointer}
.agregado-x{flex:0 0 auto;padding:10px 12px;border:0;background:none;
            color:var(--tenue);font:inherit;font-size:13px;cursor:pointer}
@media(hover:hover){ .agregado-x:hover{color:var(--texto)} }
@media(max-width:420px){
  .agregado{gap:8px;padding:10px}
  .agregado-ir,.agregado-x{font-size:13px}
}

/* El precio tachado. Ojo: en el carrusel del inicio el tachado ya significa
   AGOTADO (landing.css), así que aquí el que manda es el color: el rebajado va
   en verde y el de antes en gris apagado, para que no se confundan. */
.linea-tx s, .ficha-precio s, .totales s, .prod .precio s{
  color:var(--tenue);font-weight:400;margin-right:5px;text-decoration-thickness:1px}
.ficha-ahorro{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--verde)}

/* Lo que se ahorra en total: la oferta, el cupón y el envío, sumados. Se
   destaca porque es el número que hace que el cliente termine el pedido. */
.ahorro{margin-top:10px;padding:11px 13px;border-radius:10px;font-size:14px;
        font-weight:700;text-align:center;
        background:rgba(196,242,117,.14);color:var(--verde)}
/* Las sugerencias de dirección: dos líneas por opción, la calle y dónde queda.
   Sin la segunda, "Calle 84b" aparece tres veces y no hay forma de elegir. */
.sugc button small{display:block;color:var(--tenue);font-size:11.5px;margin-top:2px}
.sugc button{flex-direction:column;align-items:flex-start;gap:0}
/* Ficha de un producto sin foto todavía. */
.ficha-sinfoto{display:grid;place-items:center;gap:4px;width:100%;aspect-ratio:1;
               background:var(--sup);color:var(--tenue);
               font-size:44px;font-weight:800;border-radius:16px 16px 0 0}
.ficha-sinfoto small{font-size:13px;font-weight:400}

/* Los medios de pago, en dos grupos por CUÁNDO se paga. Ahí estaba la
   confusión: efectivo y pago en casa acaban los dos siendo plata en la puerta,
   pero uno lo cobra nuestro mensajero aquí y el otro la transportadora en el
   resto del país — y ese cuesta más. */
.medio-grupo{display:flex;flex-direction:column;gap:8px}
.medio-grupo + .medio-grupo{margin-top:16px;padding-top:14px;border-top:1px solid var(--borde)}
.medio-rotulo{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
              color:var(--verde);font-weight:700}

/* ── lo que se sugiere en el carrito ───────────────────────────────────
   Va DEBAJO de los totales, no arriba: primero el cliente ve lo que lleva y
   cuánto es, y solo entonces se le ofrece algo más. Al revés parece un intento
   de encarecerle el pedido antes de dejarlo mirar. */
.sugeridos{margin-top:16px;padding-top:14px;border-top:1px dashed var(--borde)}
.sug-tit{display:block;font-weight:700;font-size:13.5px;margin-bottom:9px;color:var(--tenue)}
.sug{display:flex;gap:10px;align-items:center;padding:7px 0}
.sug img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.sug-tx{flex:1;min-width:0}
.sug-tx b{display:block;font-size:13.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-tx small{font-size:12px;color:var(--tenue)}
.sug-tx s{opacity:.6;margin-right:4px}
.sug-add{flex:0 0 auto;padding:8px 13px;border-radius:9px;border:1px solid var(--verde);
  background:transparent;color:var(--verde);font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;min-height:38px}
@media(hover:hover){ .sug-add:hover{background:var(--verde);color:#0a1500} }

/* Los modelos de un cosmético Anyday (4-oct-2026): se elige el exacto en su
   ficha, antes de agregarlo, y una línea sin modelo lo pide en el carrito. */
.ficha-modelos{margin:10px 0 4px}
.ficha-modelos p{font-size:13px !important;margin:0 0 6px}
.fm-fam{margin:0 0 8px}
.fm-fam span{display:block;font-size:11.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;margin:0 0 4px}
.fm-chips{display:flex;flex-wrap:wrap;gap:6px}
.fm-chip{border:1px solid var(--borde);background:var(--sup);color:var(--texto);border-radius:999px;
         padding:6px 11px;font-size:13px;cursor:pointer;min-height:34px}
.fm-chip.on{border-color:var(--verde);color:var(--verde);background:rgba(196,242,117,.12);font-weight:600}
.fm-chip.agotado{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.btn-tienda:disabled{opacity:.55;cursor:default}
.linea-modelo{display:block;width:100%;margin:6px 0 0;font-size:13px;padding:6px 8px;border-radius:8px;
              background:var(--sup);color:var(--texto);border:1px solid var(--borde)}
.linea-modelo.falta{border-color:#ff8a65;box-shadow:0 0 0 2px rgba(255,138,101,.25)}
/* Pago en casa por debajo del mínimo de Interrapidísimo (5-oct-2026): se ve,
   con la razón y cuánto falta, pero no se puede elegir. */
.medio.apagado{opacity:.6;cursor:not-allowed}
.medio.apagado input{cursor:not-allowed}