/* ===========================
    Base CSS (mobile-first)
   =========================== */

:root{
  /* Paleta (neutra + acento azul) */
  --clr-bg: #b1adad;
  --clr-surface: #ffffff;
  --clr-surface-2: #c2bda1;
  --clr-surface-3: #ffffff;
  --clr-surface-4-solid: #54ADEC;
  /*--clr-surface-4: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(224, 224, 224, 1) 63%, rgba(224, 222, 222, 1) 99%);*/
  --clr-surface-4: #ffffff;
  --clr-border: rgba(19, 33, 68, .10);

  --clr-text: #15223b;
  --clr-text-dim: #4a5877;

  --clr-primary-50:#eef4ff;
  --clr-primary-100:#d9e6ff;
  --clr-primary-200:#bcd3ff;
  --clr-primary-300:#95b7ff;
  --clr-primary-400:#6b97ff;
  --clr-primary-500:#4678ff;
  --clr-primary-600:#2f62f5;
  --clr-primary-700:#1f4ee0;
  --clr-primary-800:#41403f;
  --clr-primary-900:#102b86;

  --radius-sm: .6rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;

  --shadow-sm: 0 2px 8px rgba(16, 43, 134, .08);
  --shadow-md: 0 10px 30px rgba(16, 43, 134, .10);
  --shadow-lg: 0 22px 46px rgba(16, 43, 134, .12);

  /* Glass */
  --header-glass: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  --chip-glass: linear-gradient(180deg, #fff, #bac2da);

  /* GSAP vars */
  --fx-hue: 210;
  --fx-alpha: .16;
}

* { box-sizing: border-box; }
html,body { height:100%; }
html { scroll-behavior:smooth; }
[hidden]{ display:none !important; }

body{
  margin:0;
  font: 400 16px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Enlaces “reset” */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--clr-primary-700) 50%, #000); }

/* ---------------------------
   HEADER (usa tu markup actual)
---------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem;
  backdrop-filter: blur(8px);
  background: var(--header-glass);
  border-bottom:1px solid var(--clr-border);
}

/* Centrar logo sin wrappers extra */
.site-header .logo{ margin: 0 auto; line-height:0; }
.site-header .logo img{ height: 36px; width:auto; display:block; }
@media (min-width: 768px){ .site-header .logo img{ height: 65px; } }

/* Botones del header */
.icon-btn{
  inline-size:42px; block-size:42px;
  position: relative; /* para badge del carrito */
  display:grid; place-items:center;
  border-radius: 14px;
  background: var(--chip-glass);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  color: var(--clr-primary-700);
  transition: transform .15s ease, box-shadow .2s ease, color .15s ease, background .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); color:var(--clr-primary-800); }
.icon-btn:active{ transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Iconos dentro del botón (SVG o IMG) */
.icon-btn svg,
.icon-btn img{ width:22px; height:22px; display:block; }

/* — CLAVE: forzar color de los trazos/rellenos — */
.icon-btn svg, .icon-btn svg *{
  fill: #000 !important;
  stroke: #000 !important;
}

/* Badge del carrito */
.badge{
  position:absolute; top:-6px; right:-6px;
  min-width: 22px; height:22px; padding:0 6px;
  display:inline-grid; place-items:center;
  color:#fff; background: linear-gradient(180deg, var(--clr-primary-600), var(--clr-primary-800));
  border-radius:999px; font-weight:700; font-size:.75rem;
  box-shadow: var(--shadow-sm);
  border:2px solid #fff;
}

/* ---------------------------
   DRAWER / menú lateral
---------------------------- */
#drawer{
  position: fixed; inset:0 auto 0 0;
  width: 86vw; max-width: 360px;
  transform: translateX(-100%);
  transition: transform .25s ease;
  background: #0F172A; color:#E7EEF8;
  z-index: 61;
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column;
}
#drawer.open{ transform: translateX(0); }

#drawerBackdrop{
  position: fixed; inset:0; z-index:60;
  background: rgba(10,20,40,.35); backdrop-filter: blur(2px);
}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer-nav{
  padding: .4rem .6rem 1rem;
  display:grid; gap:.25rem; overflow:auto;
}
.drawer-nav a{
  padding:.7rem .8rem; border-radius:.8rem;
  color:#E7EEF8;
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.drawer-nav a:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(255,255,255,.14);
}

/* ---------------------------
   CÁRUSELES (tu estructura actual)
---------------------------- */
.hscroll{ position: relative; max-width:1280px; margin: .9rem auto 1.25rem; }
.hscroll-viewport{
  display:flex; gap:.8rem;
  overflow-x:auto; overflow-y:hidden;
  padding: 0 .8rem;
  scroll-snap-type: x mandatory;
}
.hscroll-viewport::-webkit-scrollbar{ height:8px; }
.hscroll-viewport::-webkit-scrollbar-thumb{ background: rgba(16,43,134,.18); border-radius:10px; }
.hscroll-viewport::-webkit-scrollbar-track{ background: transparent; }

/* Flechas overlay (usa .hscroll-controls con .hs-prev/.hs-next) */
@media (min-width:1024px){
  .hscroll-controls{
    position:absolute; inset:0; pointer-events:none;
  }
  .hscroll-controls .hs-prev,
  .hscroll-controls .hs-next{
    pointer-events:auto;
    position:absolute; top:50%; transform: translateY(-50%);
    width:36px; height:36px; display:grid; place-items:center;
    border-radius:12px; background: var(--chip-glass);
    border:1px solid var(--clr-border); color:var(--clr-text-dim);
    box-shadow: var(--shadow-sm); font-weight:700;
  }
  .hscroll-controls .hs-prev{ left:-1.85rem; }
  .hscroll-controls .hs-next{ right:-1.85rem; }
  .hscroll-controls button:hover{ color:var(--clr-primary-700); box-shadow: var(--shadow-md); }
}
/* Píldoras (categorías/marcas) */
.card-mini{
  min-width: 300px; scroll-snap-align:start;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: .9rem 1rem;
  display:flex; align-items:center; gap:.75rem;
  transition: box-shadow .2s ease, transform .18s ease, border-color .2s ease;
}
.card-mini:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(19,33,68,.18);
}
.card-mini .ico-box{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  background: var(--chip-glass);
  border: 1px solid var(--clr-border);
  color: var(--clr-primary-700);
  box-shadow: var(--shadow-sm);
}
.card-mini .ico-box svg{ width:26px;height:26px; color: currentColor; }
.card-mini .title{ font-weight:700; color:var(--clr-text); }
.card-mini .meta{ font-size:.85rem; color:var(--clr-text-dim); }

/* ---------------------------
    GRID de productos
---------------------------- */

.products{ 
  max-width:1280px; 
  margin: .5rem auto 2rem; 
  padding: 0 .8rem; 
}

.product-grid{
  display:grid; 
  gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (min-width:640px){ 
  .product-grid{ 
    grid-template-columns: repeat(2, minmax(0,1fr)); 
  } 
}

@media (min-width:1024px){
  /* Cards normales: 60% imagen, 40% body */
  .product-card .img{ 
    aspect-ratio: 3 / 2; 
    background: var(--clr-surface-2);
  }
  
  .product-card .img img{ 
    object-fit: contain; 
    padding: .6rem;
  }
  
  .product-card .body{ 
    padding: .85rem .95rem .9rem; 
    gap: .4rem; 
  }
  
  .product-card .name{ 
    font-size: .95rem; 
    line-height: 1.3; 
    -webkit-line-clamp: 3; 
  }
  
  .product-card .brand{ 
    font-size: .82rem; 
  }
  
  .product-card .price{ 
    font-size: 1.05rem; 
  }
  
  /* ===== CARDS GRANDES: 80% imagen, 20% body ===== */
  .module--hero .product-card .img,
  .module--featstack .panel-feature .product-card .img{ 
    aspect-ratio: 4 / 1; /* 80% imagen */
  }
  
  .module--hero .product-card .body,
  .module--featstack .panel-feature .product-card .body{ 
    padding: .7rem .9rem .75rem;
    gap: .25rem;
    flex: 1 1 auto; /* Permite crecer si el texto no cabe */
  }
  
  .module--hero .product-card .name,
  .module--featstack .panel-feature .product-card .name{ 
    font-size: 1rem;
    line-height: 1.2;
    -webkit-line-clamp: 2; /* Solo 2 líneas para que quepa en el 20% */
  }
  
  .module--hero .product-card .brand,
  .module--featstack .panel-feature .product-card .brand{ 
    font-size: .8rem;
  }
  
  .module--hero .product-card .price,
  .module--featstack .panel-feature .product-card .price{ 
    font-size: 1.1rem;
  }
  
  .module--hero .product-card .price-row,
  .module--featstack .panel-feature .product-card .price-row{ 
    padding-top: .3rem;
    margin-top: auto;
  }
}

@media (min-width:1280px){ 
  .product-grid{ 
    grid-template-columns: repeat(4, minmax(0,1fr)); 
  } 
}

/* ========== PRODUCT CARD ========== */
.product-card{
  background: var(--clr-surface-4, #54ADEC);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  display:flex; 
  flex-direction:column;
  transition: transform .18s ease, box-shadow .2s ease;
  height: 100%;
}

.product-card:hover{ 
  transform: translateY(-3px); 
  box-shadow: var(--shadow-md); 
}

.product-card .img{
  background: var(--clr-surface-3); 
  display:grid; 
  place-items:center; 
  overflow: hidden;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.product-card .img img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
}

.product-card .body{ 
  padding: .75rem .85rem .85rem; 
  display:flex; 
  flex-direction:column; 
  gap:.35rem;
  flex: 1;
}

.product-card .name{
  color:var(--clr-text); 
  font-weight:700; 
  font-size:.9rem; 
  line-height:1.25;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2; 
  overflow:hidden;
  margin: 0;
}

.product-card .brand{ 
  color:var(--clr-text-dim); 
  font-size:.8rem; 
  margin:0; 
}

.product-card .price-row{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:.5rem;
  margin-top: auto; 
  padding-top:.4rem;
}

.product-card .price{ 
  margin:0; 
  font-weight:800; 
  font-size:.95rem; 
  color:var(--clr-primary-800); 
  flex: 1; 
}

/* ========== TABLET ========== */
@media (min-width:640px){
  .product-card .img{ 
    aspect-ratio: 4/3; 
  }
  
  .product-card .img img{ 
    object-fit:contain; 
  }
  
  .product-card .name{ 
    font-size:.95rem; 
  }
  
  .product-card .price{ 
    font-size:1rem; 
  }
}

/* ========== DESKTOP - 60/40 FORZADO ========== */
@media (min-width:1024px){
  .product-card .img{ 
    aspect-ratio: 3 / 2; 
    background: var(--clr-surface-2);
  }
  
  .product-card .img img{ 
    object-fit: contain; 
    padding: .6rem;
  }
  
  .product-card .body{ 
    padding: .85rem .95rem .9rem; 
    gap:.4rem; 
  }
  
  .product-card .name{ 
    font-size:.95rem; 
    line-height:1.3; 
    -webkit-line-clamp: 3; 
  }
  
  .product-card .brand{ 
    font-size:.82rem; 
  }
  
  .product-card .price{ 
    font-size:1.05rem; 
  }
  
  .module--hero .product-card .name,
  .module--featstack .panel-feature .product-card .name{ 
    font-size:1.15rem; 
  }
  
  .module--hero .product-card .price,
  .module--featstack .panel-feature .product-card .price{ 
    font-size:1.25rem; 
  }
  
  .module--hero .product-card .body,
  .module--featstack .panel-feature .product-card .body{ 
    padding:1rem 1.1rem 1.05rem; 
  }
}

@media (min-width:1280px){
  .product-card .img{ 
    aspect-ratio: 4/2.8; 
  }
  
  .product-card .name{ 
    font-size:1rem; 
  }
  
  .product-card .price{ 
    font-size:1.1rem; 
  }
  
  .module--hero .product-card .name,
  .module--featstack .panel-feature .product-card .name{ 
    font-size:1.25rem; 
  }
  
  .module--hero .product-card .price,
  .module--featstack .panel-feature .product-card .price{ 
    font-size:1.35rem; 
  }
}

/* ========== MÓDULOS ========== */
@media (min-width:1024px){
  .module{ 
    display:grid; 
  }
  
  .module .inner{ 
    height:100%; 
    display:grid; 
    align-items:stretch; 
  }
  
  .module--row4 .inner{ 
    grid-template-columns: repeat(4,1fr); 
    gap:16px; 
  }
  
  .module--row3 .inner{ 
    grid-template-columns: repeat(3,1fr); 
    gap:16px; 
  }
  
  .module--featstack .inner{ 
    grid-template-columns: 2fr 1fr; 
    gap:16px; 
  }
  
  .module--featstack .panel-feature{ 
    display:grid; 
  }
  
  .module--featstack .panel-stack{ 
    display:grid; 
    grid-template-rows: 1fr 1fr; 
    gap:16px; 
  }
  
  .module--duo .inner{ 
    grid-template-columns: repeat(2,1fr); 
    gap:16px; 
  }
  
  .module--hero .inner{ 
    grid-template-columns: 1fr; 
  }
  
  .module .product-card{ 
    height:100%; 
  }
}

/* ========== MINI CARDS ========== */
.product-card.mini .img{ 
  aspect-ratio: 1/1; 
}

.product-card.mini .img img{ 
  object-fit:cover; 
}

.product-card.mini .body{ 
  padding: .5rem .6rem .6rem; 
  gap:.25rem; 
}

.product-card.mini .name{ 
  font-size:.8rem; 
  line-height:1.2; 
  -webkit-line-clamp: 2; 
}

.price-row-mini{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:.35rem; 
  margin-top:.3rem; 
}

.price-mini{ 
  font-size:.75rem; 
  font-weight:700; 
  color:var(--clr-primary-800); 
}

/* ========== LISTA ========== */
.product-list-item{ 
  display:flex; 
  gap:12px; 
  padding:12px; 
  border-radius:12px;
  background: var(--clr-surface-4, #54ADEC); 
  border: 1px solid var(--clr-border);
}

.product-list-item .thumb{ 
  width:80px; 
  min-width:80px; 
}

.product-list-item .thumb img{ 
  width:100%; 
  aspect-ratio: 1/1; 
  object-fit:cover; 
  border-radius:8px; 
}

.product-list-item .meta{ 
  flex: 1; 
  display:flex; 
  flex-direction:column; 
  gap:.25rem; 
}

.product-list-item .meta .name{ 
  font-size:.9rem; 
  font-weight:600; 
  line-height:1.25; 
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2; 
  overflow:hidden; 
}

.product-list-item .meta .brand{ 
  opacity:.7; 
  font-size:.78rem; 
}

.price-row-list{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:.5rem; 
  margin-top:.4rem; 
}

.product-list-item .price{ 
  font-size:.95rem; 
  font-weight:700; 
  color:var(--clr-primary-800); 
}

/* ========== UTILIDADES ========== */
.product-card img{ 
  max-width:100%; 
  display:block; 
}

.product-grid > div[style*="height: 1px"]{ 
  grid-column: 1/-1; 
  height:1px; 
  visibility:hidden; 
}

.grid-error{ 
  grid-column: 1/-1; 
}








/* ---------------------------
   FOOTER
---------------------------- */
.site-footer{
  margin-top: 2.25rem;
  background: #494646;
  color: #ccccc6;
  border-top: 1px solid var(--clr-border);
}
.footer-inner{
  max-width: 1280px; margin:auto; padding: 1.25rem .8rem 2rem;
  display:grid; gap:1rem;
}
.logo_footer img{
  height: 55px;
}

@media (min-width: 768px){
  .footer-inner{ grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-col h4{
  margin:.25rem 0 .65rem; font-size:1rem; font-weight:700; color:var(--clr-text);
}
.footer-col p, .footer-col li, .footer-col a{
  font-size:.95rem; color:var(--clr-text-dim); text-decoration:none;
}
.footer-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.35rem; }
.footer-bottom{
  border-top:1px solid var(--clr-border);
  padding:.85rem .8rem; text-align:center; color:var(--clr-text-dim); font-size:.88rem;
}

/* ---------------------------
   Capa animada (GSAP)
---------------------------- */
.fx-bg{
  position:fixed; inset:-40vh -20vw auto -20vw; height:56vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(80% 80% at 30% 40%, hsla(var(--fx-hue) 100% 65% / var(--fx-alpha)), transparent 60%),
    radial-gradient(80% 80% at 70% 20%, hsla(calc(var(--fx-hue) + 60) 100% 70% / calc(var(--fx-alpha) - .04)), transparent 60%),
    radial-gradient(100% 100% at 50% 100%, hsla(calc(var(--fx-hue) - 40) 100% 60% / calc(var(--fx-alpha) - .06)), transparent 60%);
  filter: blur(30px) saturate(1.05);
  opacity:.9;
}

/* Layout helpers */
.container{ max-width:1280px; margin:auto; padding:0 .8rem; }
.hidden{ display:none !important; }






/* Base móvil (ya lo tienes, aquí referencia) */
.product-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.module { display:block; }
.module.span-2 { grid-column: 1 / -1; }

/* list2 (móvil) */
.module--list2 .list { display:flex; flex-direction:column; gap:12px; }
.product-list-item { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; background:var(--surface, rgba(255,255,255,0.04)); }
.product-list-item .thumb { width:80px; min-width:80px; }
.product-list-item .thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }
.product-list-item .meta .name { font-size:0.95rem; font-weight:600; line-height:1.25; }
.product-list-item .meta .brand { opacity:.7; font-size:.8rem; margin-top:2px; }
.product-list-item .meta .price { margin-top:6px; font-weight:700; }

/* quad4 (móvil) */
.module--quad4 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.product-card.mini .img img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.product-card.mini .body .name { font-size:.85rem; margin-top:6px; }

/* Sentinel no rompa el grid */
.product-grid > div[style*="height: 1px"] { grid-column: 1 / -1; display:block; height:1px !important; }

/* ===== Desktop (romper cuadricula) ===== */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap:16px;
    grid-auto-flow: dense; /* rellena huecos inteligentemente */
  }
  /* spans genéricos */
  .col-span-4  { grid-column: span 4; }
  .col-span-6  { grid-column: span 6; }
  .col-span-8  { grid-column: span 8; }
  .col-span-12 { grid-column: 1 / -1; } /* fila completa */

  /* Módulos desktop */
  .module--duo .inner    { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
  .module--row .inner    { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
  .module--quad .inner   { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
  .module--triplet .inner{ display:grid; grid-template-columns: 1fr; row-gap:16px; }

  /* Card "feature" para héroe */
  .product-card.feature .img img { width:100%; aspect-ratio: 16 / 9; object-fit:cover; border-radius:12px; }
  .product-card.feature .body .name { font-size:1.15rem; line-height:1.25; margin-top:8px; }
}

/* Tablet intermedio (opcional): 3 cols simples */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
}




module .inner,
.module .inner > * { height: 100%; }
.module .product-card { height: 100%; }

/* ===== Desktop: filas completas y alturas niveladas ===== */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap:16px;
    grid-auto-flow: dense;
  }
  .col-span-12 { grid-column: 1 / -1; }

  /* 4 por fila */
  .module--row4 .inner {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; align-items:stretch;
  }
  /* 3 por fila */
  .module--row3 .inner {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:stretch;
  }
  /* hero 6 + 3 + 3 */
  .module--mix .inner {
    display:grid; grid-template-columns: 2fr 1fr 1fr; gap:16px; align-items:stretch;
  }
  /* QUAD (8) + STACK (4) */
  .module--quadrow .inner {
    display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:stretch;
  }
  .module--quadrow .panel-quad {
    display:grid; grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap:16px;
  }
  .module--quadrow .panel-stack {
    display:grid; grid-template-rows: 1fr 1fr; gap:16px;
  }

  /* DUO/HERO finales, también estiran */
  .module--duo .inner {
    display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; align-items:stretch;
  }
  .module--hero .inner { display:grid; grid-template-columns: 1fr; }

  /* Imagen destacada en hero */
  .product-card.feature .img img {
    width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px;
  }
}

/* ===== Móvil: asegurar estiramiento en módulos 2up/list/quad ===== */
.module--2up { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.module--2up .product-card { height:100%; }
.module--list2 .list { display:flex; flex-direction:column; gap:12px; }
.module--quad4 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }



/* Fondo sólido en todas las tarjetas (sin transparencias) */
.product-card,
.product-card.mini,
.product-list-item {
  background: var(--clr-surface-4, #54ADEC);
}

/* Contenedor de imagen consistente (homogéneo) */
.product-card .img {
  background: var(--clr-surface-3);
  display:grid; place-items:center; overflow:hidden;
  aspect-ratio: 4 / 3;    /* móvil y desktop por defecto */
}
.product-card .img img { width:100%; height:100%; object-fit:contain; }

/* Mini-cards cuadradas */
.product-card.mini .img { aspect-ratio: 1 / 1; }
.product-card.mini .img img { object-fit:cover; }

/* Lista (móvil) con fondo sólido y layout consistente */
.product-list-item { 
  display:flex; gap:12px; align-items:flex-start; padding:12px;
  border-radius:12px;
}
.product-list-item .thumb { width:80px; min-width:80px; }
.product-list-item .thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }

/* MÓVIL: todos los módulos ocupan 2 columnas (span-2) */
.module.span-2 { grid-column: 1 / -1; }
.module--2up { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.module--list2 .list { display:flex; flex-direction:column; gap:12px; }
.module--quad4 { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* Desktop: filas completas y alturas niveladas */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap:16px;
    grid-auto-flow: dense;
  }
  .col-span-12 { grid-column: 1 / -1; }

  /* 4 por fila */
  .module--row4 .inner {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; align-items:stretch;
  }
  /* 3 por fila */
  .module--row3 .inner {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:stretch;
  }
  /* Feature + stack (8 + 4) con 2 filas en el panel feature */
  .module--featstack .inner {
    display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:stretch;
  }
  .module--featstack .panel-feature { display:grid; grid-auto-rows: 1fr; }
  .module--featstack .panel-stack {
    display:grid; grid-template-rows: 1fr 1fr; gap:16px;
  }

  /* DUO/HERO finales */
  .module--duo .inner { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; align-items:stretch; }
  .module--hero .inner { display:grid; grid-template-columns: 1fr; }

  /* Limitar “gigantes”: destacada con altura acotada */
  .product-card.feature .img {
    aspect-ratio: 3 / 2;
    max-height: min(46vh, 520px);
    object-fit: cover;
  }
}

/* Igualar alturas dentro de módulos */
.module .inner,
.module .inner > * { height: 100%; }
.product-card { height: 100%; }

/* Sentinel no rompa el grid */
.product-grid > div[style*="height: 1px"] { grid-column: 1 / -1; display:block; height:1px !important; }





/* ===========================
   BOTÓN CARRITO + PRECIOS
   Agregar al final de base.css
   =========================== */

/* ========== PRECIO + BOTÓN (Cards Normales) ========== */
.product-card .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.product-card .price {
  margin-top: 0;
  font-weight: 800;
  color: var(--clr-primary-800);
  flex: 1;
  font-size: 1rem;
}

/* ========== MINI CARDS (módulo quad4) ========== */
.product-card.mini .body {
  padding: 0.5rem 0.6rem 0.6rem;
}

.product-card.mini .name {
  font-size: 0.8rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.price-row-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.price-mini {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  flex: 1;
}

/* Botón más pequeño en mini cards */
.product-card.mini .btn-add-cart {
  width: 32px;
  height: 32px;
}

.product-card.mini .btn-add-cart svg {
  width: 14px;
  height: 14px;
}

.product-card.mini .cart-badge {
  min-width: 16px;
  height: 16px;
  font-size: 0.6rem;
  top: -4px;
  right: -4px;
}

/* ========== LISTA (module--list2) ========== */
.price-row-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.product-list-item .price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  flex: 1;
}

.product-list-item .btn-add-cart {
  width: 38px;
  height: 38px;
}

.product-list-item .btn-add-cart svg {
  width: 15px;
  height: 15px;
}

.product-list-item .cart-badge {
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
}

/* ========== PRECIO NO DISPONIBLE ========== */
.price-unavailable {
  font-size: 0.85rem;
  color: var(--clr-text-dim);
  font-style: italic;
  font-weight: 500;
}

/* ========== PLACEHOLDERS DE IMÁGENES ========== */
.img-placeholder,
.img-placeholder-mini,
.img-placeholder-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  color: var(--clr-text-dim);
}

.img-placeholder svg,
.img-placeholder-mini svg,
.img-placeholder-thumb svg {
  opacity: 0.3;
  stroke-width: 1.5;
}

/* ========== BOTÓN AGREGAR AL CARRITO ========== */
.btn-add-cart {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 12px;
  /*background: linear-gradient(180deg, var(--clr-primary-600), var(--clr-primary-800));*/
  background: #C6613F;
  color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}

.btn-add-cart:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
  /*background: linear-gradient(180deg, var(--clr-primary-500), var(--clr-primary-700));*/
  background: #e66e46;
}

.btn-add-cart:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

/* Animación al agregar */
.btn-add-cart.adding {
  animation: pulse-cart 0.6s ease-out;
}

@keyframes pulse-cart {
  0% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Icono SVG */
.btn-add-cart svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}



/* Focus visible (accesibilidad) */
.btn-add-cart:focus-visible {
  outline: 3px solid var(--clr-primary-300);
  outline-offset: 2px;
}

/* ========== RESPONSIVE ========== */

/* Móvil: ajustes generales */
@media (max-width: 640px) {
  .btn-add-cart {
    width: 40px;
    height: 40px;
  }
  
  .btn-add-cart svg {
    width: 16px;
    height: 16px;
  }
  
  .cart-badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }

  .product-card .price {
    font-size: 0.95rem;
  }
}

/* Desktop: cards feature más grandes */
@media (min-width: 1024px) {
  .product-card.feature .price-row {
    margin-top: 0.75rem;
  }

  .product-card.feature .price {
    font-size: 1.25rem;
  }

  .product-card.feature .btn-add-cart {
    width: 52px;
    height: 52px;
  }

  .product-card.feature .btn-add-cart svg {
    width: 22px;
    height: 22px;
  }

  .product-card.feature .cart-badge {
    min-width: 24px;
    height: 24px;
    font-size: 0.75rem;
    top: -8px;
    right: -8px;
  }
}

/* ========== ERROR STATES ========== */
.grid-error {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
}

/* ========== DARK MODE ========== */
@media (prefers-color-scheme: dark) {
  .img-placeholder,
  .img-placeholder-mini,
  .img-placeholder-thumb {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #888;
  }
  
  .price-unavailable {
    color: #888;
  }
}

/* ========== ANIMACIÓN DEL BADGE DEL HEADER ========== */
.site-header .badge {
  animation-fill-mode: both;
}

/* Keyframe reutilizable para badge */
@keyframes pulse-badge {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}