/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   TARJETAS DE LA TIENDA — CELULAR (4/10/2026, propietario: «igual que en el inicio… moderno y premium»)
   Se carga solo con (max-width: 767.98px) desde views/tienda/categoria.php, DESPUÉS del bundle de la CLP.
   En computadora no cambia nada.

   La misma tarjeta que los carriles del inicio (assets/css/moderno/home/tarjetas-movil.css):
   foto cuadrada de borde a borde · nombre (2 líneas) · precio limpio («S/ 20», sin «.00») con un botón redondo
   azul marino a su derecha. Fuera: la sub-marca propia (igual en casi todas), «Sé el primero en opinar», «+N» con
   el icono de capas (los colores van sobre la foto: «● ● ● 3 colores») y «Comparar» (en computadora sigue).
   Fondo perla con grano, como la vitrina del inicio.

   Dos plantillas: modelos (_familia_card.php, en .clp-families-rows) y productos sueltos (_categoria_card.php, en
   #clpGrid). Ambos contenedores son display:contents dentro de la cuadrícula .clp-content. Las capas viejas usan
   !important con clases: aquí los selectores llevan un #id para ganarles sin pelear.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Fondo perla con grano ───────────────────────────────────────────────────────────────────────────────── */
body.clp-theme .clp-layout{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 380px at 50% 0%,rgba(96,165,250,.14),rgba(96,165,250,0) 70%),
    linear-gradient(180deg,#f7f9fd 0%,#eef2f8 55%,#f3f6fb 100%) !important;
}
body.clp-theme .clp-layout::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body.clp-theme .clp-grid{background:transparent !important}
/* La cabecera «Explora por modelo» quedó sin tarjetas propias (todo va en una lista) */
body.clp-theme #clpFamilies .clp-families-head{display:none !important}

/* ── Tarjeta ─────────────────────────────────────────────────────────────────────────────────────────────── */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech){
  position:relative !important;container-type:inline-size;
  display:flex !important;flex-direction:column !important;
  overflow:hidden !important;min-height:0 !important;height:auto !important;
  padding:0 !important;margin:0 !important;
  background:#fff !important;background-image:none !important;
  border:1px solid rgba(15,23,42,.07) !important;border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 28px -18px rgba(15,23,42,.38) !important;
  color:#0f172a !important;transform:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech)::before,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech)::after,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-info::before,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-info::after{display:none !important;content:none !important}

/* ── Foto: cuadrada, de borde a borde ────────────────────────────────────────────────────────────────────── */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .fam-card__img-link{display:block !important;margin:0 !important;padding:0 !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper{
  position:relative !important;width:100% !important;height:auto !important;aspect-ratio:1/1 !important;
  margin:0 !important;padding:0 !important;
  background:#fff !important;background-image:none !important;
  border:0 !important;border-bottom:1px solid #f1f5f9 !important;border-radius:0 !important;box-shadow:none !important;
  overflow:hidden !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper::before,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper::after{display:none !important;content:none !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper picture{display:block;width:100%;height:100%}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper img{
  position:absolute !important;inset:0 !important;z-index:0 !important;
  width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  margin:0 !important;padding:0 !important;object-fit:contain !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  filter:none !important;transform:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper.img-fondo-foto img,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper.is-foto-completa img{object-fit:cover !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-image-wrapper.img-fondo-oscuro{background:#0a1015 !important}

/* ── Texto: nombre (2 líneas) y precio ───────────────────────────────────────────────────────────────────── */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-info{
  position:static !important;display:flex !important;flex-direction:column !important;gap:.375rem !important;
  flex:1 1 auto !important;min-height:0 !important;
  padding:.625rem .625rem .625rem .75rem !important;margin:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  z-index:auto !important;isolation:auto !important;transform:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-info > *{margin:0 !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-name{
  order:1;min-height:2.6em !important;margin:0 !important;
  font-family:Inter,"DM Sans",system-ui,sans-serif !important;
  font-size:.875rem !important;font-weight:600 !important;line-height:1.3 !important;letter-spacing:-.005em !important;
  color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;text-align:left !important;
  display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2 !important;overflow:hidden !important;
  white-space:normal !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-name a{color:inherit !important;-webkit-text-fill-color:inherit !important;text-decoration:none !important}

/* Precio abajo, a la izquierda; deja sitio al botón redondo */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .clp-card-footer{
  order:3;margin-top:auto !important;display:block !important;padding:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-prices,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .fam-card__price-block{
  order:3;margin-top:auto !important;
  display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:baseline !important;align-content:center !important;
  justify-content:flex-start !important;text-align:left !important;gap:0 .375rem !important;
  min-height:40px !important;padding:0 48px 0 0 !important;background:none !important;border:0 !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .clp-card-footer .product-prices{margin-top:0 !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-current{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif !important;
  font-size:1.25rem !important;font-weight:700 !important;line-height:1.2 !important;letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums;white-space:nowrap !important;
  color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;background:none !important;text-shadow:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-current .pc-sim{
  font-size:.62em;font-weight:600;letter-spacing:0;margin-right:-.12em;color:#475569;-webkit-text-fill-color:#475569;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-current .pc-dec{font-size:.68em;font-weight:700;letter-spacing:0}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-current .pc-dec--cero{display:none}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-old{
  font-size:.75rem !important;font-weight:500 !important;color:#64748b !important;-webkit-text-fill-color:#64748b !important;text-decoration:line-through !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .fam-card__price-label{
  flex-basis:100%;font-size:.75rem !important;font-weight:600 !important;line-height:1.2 !important;
  color:#475569 !important;-webkit-text-fill-color:#475569 !important;text-transform:none !important;letter-spacing:0 !important;
}
@container (max-width:150px){
  html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-price-current{font-size:1.125rem !important}
}

/* Reseñas: solo cuando existen («★★★★★ (12)») */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-rating{order:2;display:flex !important;align-items:center;gap:.25rem;font-size:.75rem !important;color:#475569 !important;justify-content:flex-start !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-rating i{color:#d97706 !important;font-size:.7rem !important}

/* Lo que no va en la tarjeta en celular */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-brand,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-rating--empty,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .clp-compare-toggle,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .fam-card__badge,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .fam-card__chips,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-overlay{display:none !important}

/* ── Sobre la foto ───────────────────────────────────────────────────────────────────────────────────────── */
/* Favorito: círculo blanco arriba a la derecha (área táctil de 44 px) */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite{
  position:absolute !important;top:.375rem !important;right:.375rem !important;left:auto !important;bottom:auto !important;z-index:11 !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  width:36px !important;height:36px !important;min-width:36px !important;padding:0 !important;margin:0 !important;
  border:1px solid rgba(15,23,42,.08) !important;border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;box-shadow:0 2px 8px rgba(15,23,42,.14) !important;
  color:#334155 !important;opacity:1 !important;transform:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite i{color:inherit !important;font-size:.95rem !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite.active,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite.is-active,
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite .fas{color:#e11d48 !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) .product-favorite::after{content:"" !important;display:block !important;position:absolute;inset:-4px;border-radius:999px;background:none !important}

/* Etiquetas (descuento, Top, Nuevo, Últimas N…) arriba a la izquierda, sin chocar con el corazón */
html body #clpGrid > .product-card-tech .clp-badges{
  position:absolute !important;top:.5rem !important;left:.5rem !important;right:3.25rem !important;z-index:10 !important;
  display:flex !important;flex-wrap:wrap !important;gap:.25rem !important;pointer-events:none;
}
html body #clpGrid > .product-card-tech .clp-badges .clp-badge{
  padding:.2rem .45rem !important;border-radius:999px !important;font-size:.6875rem !important;font-weight:700 !important;line-height:1.2 !important;
  box-shadow:0 2px 6px rgba(15,23,42,.10) !important;
}
html body #clpGrid > .product-card-tech .clp-badges .clp-badge--ship{display:none !important}   /* promesas neutras: el envío lo define cada proveedor */

/* Colores: pastilla abajo a la izquierda de la foto («● ● ● 3 colores») */
html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatches{
  position:absolute !important;left:.5rem !important;top:calc(100cqw - 2.15rem) !important;bottom:auto !important;z-index:10 !important;
  width:auto !important;height:auto !important;max-width:calc(100% - 1rem);margin:0 !important;
  display:inline-flex !important;align-items:center;gap:.25rem;overflow:visible !important;
  padding:.25rem .5rem .25rem .375rem !important;
  border:1px solid #e2e8f0 !important;border-radius:999px !important;background:rgba(255,255,255,.95) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.10) !important;
}
html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatch{
  width:12px !important;height:12px !important;min-width:12px !important;margin:0 !important;
  border:0 !important;border-radius:999px !important;background:var(--swatch) !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.18) !important;
}
html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatch:nth-of-type(n+5),
html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatch-more{display:none !important}
html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatch-txt{
  display:inline !important;margin-left:.15rem;font-size:.75rem !important;font-weight:600 !important;line-height:1 !important;
  color:#334155 !important;-webkit-text-fill-color:#334155 !important;white-space:nowrap !important;
}
@supports not (top:1cqw){
  html body #clpFamilies .clp-families-rows > .fam-card .fam-card__swatches{position:static !important;order:2;align-self:flex-start}
}

/* ── Botón: círculo azul marino a la derecha del precio ─────────────────────────────────────────────────────
   Es el MISMO botón de siempre (mismo clic); el «+» se pinta con capas de fondo para dejar ::after como área táctil
   de 48 px. Al agregar, animarBotonAgregado() le pone un visto 2 s → verde. «Ver N…» = círculo con flecha. */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado){
  position:absolute !important;right:.625rem !important;bottom:.625rem !important;left:auto !important;top:auto !important;z-index:5 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:40px !important;min-width:40px !important;max-width:40px !important;height:40px !important;min-height:40px !important;
  padding:0 !important;margin:0 !important;gap:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;border-radius:999px !important;
  background:
    linear-gradient(#fff,#fff) center/14px 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 14px no-repeat,
    linear-gradient(180deg,#3563d9 0%,#1e40af 58%,#1a3690 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 4px rgba(0,0,0,.18),0 6px 14px -6px rgba(30,64,175,.6) !important;
  font-size:0 !important;color:#fff !important;-webkit-text-fill-color:#fff !important;overflow:visible !important;
  transform:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado) > span{display:none !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) button:is(.btn-add-cart, .clp-btn-add):not(.is-agotado) > i{display:none !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado)::before{display:none !important;content:none !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado)::after{
  content:"" !important;display:block !important;position:absolute !important;inset:-4px !important;border-radius:999px;background:none !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado):active{transform:scale(.94) !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado):focus-visible{outline:2px solid #1d4ed8 !important;outline-offset:2px !important}
/* Agregado (2 s): verde con visto */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) button:is(.btn-add-cart, .clp-btn-add):not(.is-agotado):has(> .fa-check){
  background:linear-gradient(180deg,#10b981 0%,#059669 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 6px 14px -6px rgba(5,150,105,.6) !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) button:is(.btn-add-cart, .clp-btn-add):not(.is-agotado) > i.fa-check{display:inline-block !important;font-size:1rem !important;color:#fff !important}
/* «Ver N modelos»: el mismo círculo con su flecha (o el ojo) */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) a.btn-add-cart:not(.is-agotado){background:linear-gradient(180deg,#3563d9 0%,#1e40af 58%,#1a3690 100%) !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) a.btn-add-cart:not(.is-agotado) > i{display:inline-block !important;margin:0 !important;font-size:.95rem !important;color:#fff !important;-webkit-text-fill-color:#fff !important}

/* Agotado: franja gris baja bajo el precio, sin reservar sitio para el círculo */
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech):has(.is-agotado, .clp-stock-out-label) :is(.product-prices, .fam-card__price-block){padding-right:0 !important;min-height:0 !important}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart.is-agotado, .clp-stock-out-label){
  order:9;position:static !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:.375rem !important;
  width:100% !important;height:34px !important;min-height:34px !important;margin:.375rem 0 0 !important;padding:0 .5rem !important;
  border:0 !important;border-radius:10px !important;background:#f1f5f9 !important;box-shadow:none !important;
  color:#475569 !important;-webkit-text-fill-color:#475569 !important;font-size:.8125rem !important;font-weight:700 !important;
}
html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart.is-agotado, .clp-stock-out-label) i{color:#475569 !important;-webkit-text-fill-color:#475569 !important}

@media (prefers-reduced-motion:reduce){
  html body :is(#clpFamilies .clp-families-rows > .fam-card, #clpGrid > .product-card-tech) :is(.btn-add-cart, .clp-btn-add):not(.is-agotado):active{transform:none !important}
}