/* ============================================================
   RealMusik-Pro — styles.css (v2, mobile-first)
   Variables + estilos compartidos por todas las páginas.
   Puntos de corte pensados en: 360 / 768 / 1024 / 1440 px.
   ============================================================ */

/* ---------- Fuentes locales ---------- */
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-regular-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-regular-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-medium-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-medium-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-semibold-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-semibold-latin-ext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-bold-latin.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-bold-latin-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-extrabold-latin.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/poppins-extrabold-latin-ext.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}
@font-face{font-family:'Anton';src:url('../assets/fonts/anton-regular-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Anton';src:url('../assets/fonts/anton-regular-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB}

/* ---------- Variables ---------- */
:root{
  --rojo:#E10E17;
  --rojo-oscuro:#B60B12;
  --negro:#141414;
  --gris-texto:#454545;
  --gris-borde:#e6e6e6;
  --gris-fondo:#f6f6f7;
  --plata:#c9ccd1;
  --blanco:#ffffff;
  --verde-wa:#25D366;
  --fuente:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  --fuente-condensada:'Anton','Arial Narrow','Poppins',sans-serif;
  --ancho:1320px;
  --radio:10px;
  --sombra-tarjeta:0 12px 26px rgba(0,0,0,.11);
  --transicion:.25s ease;
}

/* ---------- Base (mobile-first) ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fuente);color:var(--negro);background:var(--blanco);font-size:15px;line-height:1.5;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid rgba(225,14,23,.6);outline-offset:2px;border-radius:4px}
.container{max-width:var(--ancho);margin:0 auto;padding:0 16px;width:100%}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pos-relativa{position:relative}

/* ---------- 1. Encabezado ---------- */
.encabezado{background:var(--blanco)}
.encabezado-interno{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
.logo{display:inline-flex;align-items:center}
.logo img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.encabezado-acciones{display:flex;align-items:center;gap:6px}
.accion-cuenta{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px;transition:color var(--transicion)}
.accion-cuenta span{display:none} /* En móvil, «Mi cuenta» es solo ícono */
.accion-cuenta:hover{color:var(--rojo)}
.accion-cuenta svg{width:23px;height:23px;stroke:currentColor}
.accion-carrito{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.accion-carrito svg{width:26px;height:26px;stroke:var(--negro)}
.carrito-contador{position:absolute;top:2px;right:0;background:var(--rojo);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px}
.boton-hamburguesa{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px}
.boton-hamburguesa svg{width:26px;height:26px;stroke:var(--negro)}

/* ---------- 2. Barra roja + buscador ---------- */
.barra-nav{background:var(--rojo);position:relative;z-index:80}
.barra-nav-interno{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding-bottom:10px}
.boton-categorias{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:13.5px;letter-spacing:.4px;min-height:44px;padding:6px 4px;white-space:nowrap;text-transform:uppercase}
.boton-categorias svg{width:21px;height:21px;stroke:#fff;flex:none}
.buscador{order:3;flex:1 1 100%} /* En móvil, el buscador va en su propia fila */
.buscador-forma{display:flex;background:#fff;border-radius:999px;overflow:hidden}
.buscador input{flex:1;border:none;outline:none;padding:11px 18px;font-family:inherit;font-size:14px;color:var(--negro);min-width:0}
.buscador button{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;background:#fff}
.buscador button svg{width:19px;height:19px;stroke:var(--negro)}

/* ---------- 3. Menú de categorías: DRAWER en móvil ---------- */
.fondo-drawer{position:fixed;inset:0;background:rgba(10,10,12,.55);z-index:190;opacity:0;visibility:hidden;transition:all var(--transicion)}
.fondo-drawer.visible{opacity:1;visibility:visible}
.menu-categorias{position:fixed;top:0;left:0;z-index:200;width:min(88vw,340px);height:100dvh;background:#fff;box-shadow:18px 0 40px rgba(0,0,0,.25);transform:translateX(-106%);transition:transform .32s ease;overflow-y:auto;padding:14px 0 30px}
.menu-categorias.abierto{transform:translateX(0)}
.drawer-cabecera{display:flex;align-items:center;justify-content:space-between;padding:2px 18px 12px;border-bottom:2px solid var(--rojo);margin-bottom:6px}
.drawer-cabecera strong{font-size:15px;text-transform:uppercase;letter-spacing:.6px}
.drawer-cerrar{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px}
.drawer-cerrar svg{width:22px;height:22px;stroke:var(--negro)}
.cat-item{border-bottom:1px solid #f0f0f0}
.cat-fila{display:flex;align-items:center}
.cat-fila>a{flex:1;display:flex;align-items:center;min-height:48px;padding:10px 6px 10px 18px;font-size:14.5px;color:var(--gris-texto)}
.cat-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.cat-toggle svg{width:16px;height:16px;stroke:#999;transition:transform var(--transicion)}
.cat-item.abierta .cat-toggle svg{transform:rotate(90deg);stroke:var(--rojo)}
.cat-sub{display:none;padding:2px 18px 12px 30px}
.cat-item.abierta .cat-sub{display:block}
.cat-sub a{display:block;padding:7px 0;font-size:13.5px;color:#777;min-height:32px}
.cat-sub a:hover{color:var(--rojo)}

/* ---------- 4. Barra negra de promociones ---------- */
.barra-promos{background:var(--negro);border-bottom:3px solid var(--rojo)}
.barra-promos-interno{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.barra-promos-interno::-webkit-scrollbar{display:none}
.promo-mini{flex:0 0 66%;scroll-snap-align:start;padding:10px 14px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.14)}
.promo-mini small{display:block;font-size:10px;letter-spacing:1.6px;color:var(--plata);text-transform:uppercase;white-space:nowrap}
.promo-mini strong{display:block;font-size:13.5px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.promo-mini strong em{font-style:normal;color:var(--rojo)}

/* ---------- 5. Hero: texto a un lado, nunca sobre el producto ---------- */
.hero{position:relative;background:#0c0c0d}
.hero .swiper{--swiper-navigation-color:#fff;--swiper-pagination-color:var(--rojo)}
.hero-slide{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden}
.hero-slide img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide[data-align="left"] img.fondo{object-position:72% center}
.hero-slide[data-align="right"] img.fondo{object-position:28% center}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:1}
.hero-slide[data-align="left"]::after{background:linear-gradient(90deg,rgba(7,7,9,.88) 0%,rgba(7,7,9,.55) 42%,rgba(7,7,9,0) 68%)}
.hero-slide[data-align="right"]::after{background:linear-gradient(270deg,rgba(7,7,9,.88) 0%,rgba(7,7,9,.55) 42%,rgba(7,7,9,0) 68%)}
.hero-slide .container{position:relative;z-index:2;width:100%}
.hero-contenido{color:#fff;padding:52px 0;max-width:min(560px,88%)}
.hero-slide[data-align="right"] .hero-contenido{margin-left:auto}
.hero-contenido .kicker{font-size:11.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--plata)}
.hero-contenido h1,.hero-contenido h2{font-family:var(--fuente-condensada);font-weight:400;font-size:clamp(2.55rem,7.2vw,4.7rem);line-height:.99;letter-spacing:.5px;text-transform:uppercase;margin:12px 0 10px}
.hero-contenido h1 span,.hero-contenido h2 span{color:var(--rojo)}
.hero-contenido p{font-size:clamp(.92rem,2.4vw,1.02rem);color:#ececec;max-width:430px}
.hero-descuento{display:flex;align-items:baseline;gap:10px;margin:16px 0 20px}
.hero-descuento .desde{font-size:12.5px;letter-spacing:2px;text-transform:uppercase}
.hero-descuento .cifra{font-family:var(--fuente-condensada);font-size:clamp(3rem,9vw,4.4rem);color:var(--rojo);line-height:1}
.hero-descuento .off{font-size:19px;font-weight:700}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;padding:12px 28px;border-radius:6px;transition:all var(--transicion)}
.boton-amarillo{background:#FFC61A;color:#111;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.boton-amarillo:hover{background:var(--rojo);color:#fff;transform:translateY(-2px)}
.boton-rojo{background:var(--rojo);color:#fff}
.boton-rojo:hover{background:var(--rojo-oscuro);transform:translateY(-2px)}
.hero .swiper-pagination{bottom:14px}
.hero .swiper-pagination-bullet{background:#fff;opacity:.55;width:9px;height:9px}
.hero .swiper-pagination-bullet-active{background:var(--rojo);opacity:1}
.hero .swiper-button-prev,.hero .swiper-button-next{display:none}

/* ---------- Marquee de marcas (debajo del hero) ---------- */
.marquee{background:#fff;border-bottom:1px solid var(--gris-borde);overflow:hidden;padding:16px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-grupo{display:flex;align-items:center;gap:56px;padding-right:56px}
.marquee-grupo img{height:32px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:all var(--transicion)}
.marquee-grupo a:hover img{filter:grayscale(0);opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .whatsapp-flotante{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 6. Beneficios ---------- */
.beneficios{border-bottom:1px solid var(--gris-borde)}
.beneficios-interno{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:22px 0}
.beneficio{display:flex;gap:11px;align-items:flex-start}
.beneficio svg{width:30px;height:30px;min-width:30px;stroke:var(--rojo);fill:none;stroke-width:1.5}
.beneficio h3{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--rojo)}
.beneficio p{font-size:12px;color:var(--gris-texto);line-height:1.45;margin-top:2px}

/* ---------- Secciones y carruseles de productos ---------- */
.seccion{padding:30px 0 6px}
.titulo-seccion{font-size:clamp(1.3rem,3vw,1.55rem);font-weight:700;color:var(--rojo);margin-bottom:18px}
.carrusel-wrap{position:relative;padding-bottom:32px}
.carrusel-wrap .swiper{padding:6px 2px 10px}
.carrusel-wrap .swiper-pagination{bottom:2px}
.carrusel-wrap .swiper-pagination-bullet{background:#c9c9c9;opacity:1}
.carrusel-wrap .swiper-pagination-bullet-active{background:var(--rojo)}
.flecha{display:none} /* En móvil/tablet se desliza con el dedo */
/* Tarjeta de producto */
.tarjeta{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio);padding:14px;position:relative;height:100%;display:flex;flex-direction:column;transition:transform var(--transicion),box-shadow var(--transicion),border-color var(--transicion)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-tarjeta);border-color:#dcdcdc}
.tarjeta .foto{aspect-ratio:1/1;border-radius:6px;background:#f4f4f6;overflow:hidden;margin-bottom:13px}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.tarjeta .marca{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--rojo);text-transform:uppercase}
.tarjeta .nombre{font-size:12.5px;font-weight:500;text-transform:uppercase;line-height:1.45;margin:5px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.tarjeta .precios{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tarjeta .precio{font-size:17px;font-weight:700}
.tarjeta .precio-antes{font-size:13px;color:#9a9a9a;text-decoration:line-through}
.tarjeta .btn-carrito{margin-top:12px;width:100%;min-height:44px;padding:10px 8px;border:1.5px solid var(--rojo);border-radius:6px;color:var(--rojo);font-weight:600;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;background:#fff;transition:all var(--transicion)}
.tarjeta .btn-carrito:hover,.tarjeta:hover .btn-carrito{background:var(--rojo);color:#fff}
.etiqueta-descuento{position:absolute;top:12px;right:12px;z-index:3;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}

/* ---------- 8. Cuadrícula de categorías (2 columnas en móvil) ---------- */
.categorias-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 0 4px}
.categoria-tile{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3.1;display:block}
.categoria-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.categoria-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.5))}
.categoria-tile:hover img{transform:scale(1.06)}
.categoria-tile span{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fuente-condensada);font-size:clamp(1.05rem,4.6vw,1.8rem);letter-spacing:1px;text-transform:uppercase;text-align:center;padding:0 10px;text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* ---------- 10. Banners dobles (marca + equipo + descuento) ---------- */
.banners-dobles{display:grid;grid-template-columns:1fr;gap:14px;padding:20px 0 2px}
.banner-promo{position:relative;border-radius:var(--radio);overflow:hidden;min-height:240px;display:flex;align-items:center;background:#0d0d10}
.banner-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center}
.banner-promo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.9) 0%,rgba(9,9,11,.62) 48%,rgba(9,9,11,.05) 78%)}
.banner-promo .contenido{position:relative;z-index:2;color:#fff;padding:26px;max-width:62%}
.banner-promo .marca-promo{font-family:var(--fuente-condensada);font-size:clamp(1.5rem,4.5vw,2.1rem);letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.banner-promo .marca-promo span{color:var(--rojo)}
.banner-promo h3{font-size:clamp(.95rem,2.6vw,1.15rem);font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--plata);margin:2px 0 6px}
.banner-promo .gran-oferta{font-family:var(--fuente-condensada);font-size:clamp(2.6rem,8vw,3.6rem);color:var(--rojo);line-height:1}
.banner-promo .gran-oferta small{font-size:1.05rem;color:#fff}
.banner-promo .boton{margin-top:14px;min-height:44px;padding:10px 20px;font-size:12.5px}

/* ---------- 12. Nuestras marcas (logos en carrusel, sin puntos) ---------- */
.marcas{padding-bottom:34px}
.marcas .titulo-seccion{text-align:center}
.marca-celda{border:1px solid var(--gris-borde);border-radius:var(--radio);height:84px;display:flex;align-items:center;justify-content:center;background:#fff;padding:14px 18px;transition:all var(--transicion)}
.marca-celda:hover{border-color:var(--plata);box-shadow:var(--sombra-tarjeta)}
.marca-celda img{max-height:40px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.65;transition:all var(--transicion)}
.marca-celda:hover img{filter:grayscale(0);opacity:1}

/* ---------- 13. Crédito directo (solo rojo / blanco / negro) ---------- */
.credito{position:relative;overflow:hidden;background:#0b0b0d;margin-top:10px}
.credito>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;opacity:.55}
.credito::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.94) 26%,rgba(8,8,10,.45) 62%,rgba(8,8,10,.25))}
.credito-ondas{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,80%);opacity:.5;pointer-events:none}
.credito-interno{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px;padding:42px 0;color:#fff}
.credito h2{font-family:var(--fuente-condensada);font-weight:400;font-size:clamp(1.9rem,6vw,3rem);text-transform:uppercase;line-height:1.04;letter-spacing:.5px}
.credito h2 span{color:var(--rojo)}
.credito .pastilla{display:inline-block;margin-top:16px;background:var(--rojo);color:#fff;border-radius:999px;padding:11px 26px;font-weight:700;font-size:15px;box-shadow:0 10px 24px rgba(225,14,23,.4)}
.credito .legal{font-size:11.5px;color:#d7d7d7;margin-top:12px}
.credito-derecha .dif{font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#e8e8e8}
.credito-derecha .meses{display:flex;align-items:baseline;gap:10px}
.credito-derecha .meses .hasta{font-size:14px;font-weight:700;color:var(--rojo);letter-spacing:1px;text-transform:uppercase}
.credito-derecha .meses .num{font-family:var(--fuente-condensada);font-size:clamp(4.6rem,13vw,7.2rem);color:#fff;line-height:.95}
.credito-derecha .meses .plazo{font-family:var(--fuente-condensada);font-size:clamp(1.3rem,4vw,1.8rem);color:var(--rojo);text-transform:uppercase;line-height:1.05}
.credito-derecha .nota{font-size:11.5px;color:#d7d7d7;margin-top:4px}

/* ---------- 14. Newsletter ---------- */
.newsletter{background:var(--rojo);color:#fff;margin-top:40px}
.newsletter-interno{display:flex;align-items:center;gap:18px;padding:22px 0;flex-wrap:wrap}
.newsletter>div svg,.newsletter svg.avion{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.4;flex:none}
.newsletter .textos{flex:1;min-width:200px}
.newsletter h2{font-size:clamp(1.15rem,3vw,1.35rem);font-weight:700}
.newsletter p{font-size:13.5px;color:#ffe1e2}
.newsletter form{display:flex;gap:10px;flex:1 1 300px;max-width:560px}
.newsletter input{flex:1;border:none;border-radius:5px;padding:12px 16px;font-family:inherit;font-size:14px;outline:none;min-width:0;min-height:46px}
.newsletter button{background:var(--rojo);border:1.5px solid #fff;color:#fff;font-weight:700;letter-spacing:.6px;padding:11px 24px;border-radius:5px;min-height:46px;transition:all var(--transicion)}
.newsletter button:hover{background:#fff;color:var(--rojo)}

/* ---------- 15. Pie de página ---------- */
.pie{background:#fff;padding:38px 0 8px}
.pie-grid{display:grid;grid-template-columns:1fr;gap:6px}
.pie-logo{margin-bottom:14px}
.pie-logo img{width:118px;height:118px;border-radius:50%;object-fit:cover}
.pie-nombre{font-weight:800;font-size:19px;white-space:nowrap;margin-top:8px}
.pie-nombre span{color:var(--rojo)}
.pie-eslogan{font-size:10.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gris-texto);white-space:nowrap}
.pie-col{border-top:1px solid var(--gris-borde)}
.pie-col h4{font-size:14.5px;font-weight:600;min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.pie-col h4::after{content:"›";color:var(--rojo);font-weight:700;font-size:20px;transform:rotate(90deg);transition:transform var(--transicion)}
.pie-col.abierta h4::after{transform:rotate(-90deg)}
.pie-col ul{display:none;padding-bottom:14px}
.pie-col.abierta ul{display:block}
.pie-col ul li{margin-bottom:9px}
.pie-col ul a{font-size:13.5px;color:var(--gris-texto);display:inline-flex;gap:7px;align-items:center;min-height:28px}
.pie-col ul a::before{content:"›";color:var(--rojo);font-weight:700}
.pie-col ul a:hover{color:var(--rojo)}
.pie-social{padding-top:18px}
.pie-social h4{font-size:14.5px;font-weight:600;margin-bottom:13px}
.redes{display:flex;gap:10px;margin-bottom:6px}
.redes a{width:40px;height:40px;border:1.5px solid var(--gris-borde);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transicion)}
.redes a:hover{border-color:var(--rojo);background:var(--rojo)}
.redes svg{width:18px;height:18px;fill:#444;transition:fill var(--transicion)}
.redes a:hover svg{fill:#fff}
.pie h5{font-size:13px;font-weight:600;margin:16px 0 9px}
.pagos-logos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pago-logo{height:38px;border:1px solid var(--gris-borde);border-radius:6px;background:#fff;padding:6px 10px;display:flex;align-items:center;justify-content:center}
.pago-logo img{height:100%;width:auto;max-width:76px;object-fit:contain}
.pie-inferior{border-top:1px solid var(--gris-borde);margin-top:26px;padding:15px 0;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#888}
.pie-inferior strong{color:var(--gris-texto)}

/* ---------- 16. WhatsApp flotante ---------- */
.whatsapp-flotante{position:fixed;right:16px;bottom:16px;z-index:150;width:48px;height:48px;border-radius:50%;background:var(--verde-wa);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.25);animation:pulso-wa 2.6s ease-in-out infinite;transition:transform var(--transicion)}
.whatsapp-flotante:hover{transform:scale(1.08)}
.whatsapp-flotante svg{width:26px;height:26px;fill:#fff}
.whatsapp-flotante .tooltip{display:none}
@keyframes pulso-wa{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 9px rgba(37,211,102,0)}}

/* ============================================================
   TABLET — desde 768px
   ============================================================ */
@media (min-width:768px){
  .container{padding:0 22px}
  .logo img{width:84px;height:84px}
  .promo-mini{flex-basis:38%}
  .hero-slide{min-height:480px}
  .hero .swiper-button-prev,.hero .swiper-button-next{display:flex;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.35)}
  .hero .swiper-button-prev:hover,.hero .swiper-button-next:hover{background:var(--rojo)}
  .hero .swiper-button-prev::after,.hero .swiper-button-next::after{font-size:17px;font-weight:700}
  .categorias-grid{gap:14px}
  .categoria-tile{aspect-ratio:16/8.6}
  .banners-dobles{grid-template-columns:1fr 1fr;gap:16px}
  .credito-interno{flex-direction:row;align-items:center;justify-content:space-between}
  .pie-grid{grid-template-columns:repeat(3,1fr);gap:10px 26px}
  .pie-col{border-top:none}
  .pie-col h4{cursor:default;min-height:0;margin-bottom:13px}
  .pie-col h4::after{display:none}
  .pie-col ul{display:block;padding-bottom:0}
  .pie-inferior{flex-direction:row;justify-content:space-between}
}

/* ============================================================
   ESCRITORIO — desde 1024px
   ============================================================ */
@media (min-width:1024px){
  .barra-nav{position:sticky;top:0;box-shadow:0 4px 14px rgba(0,0,0,.12)} /* Barra fija en escritorio */
  .logo img{width:96px;height:96px}
  .accion-cuenta span{display:inline;font-weight:600;font-size:14px}
  .accion-cuenta{gap:8px;padding:0 6px}
  .boton-hamburguesa{display:none}
  .barra-nav-interno{flex-wrap:nowrap;padding-bottom:0;gap:26px}
  .buscador{order:0;flex:1;padding:8px 0}
  .buscador-forma{max-width:560px;margin:0 auto}
  /* Menú de categorías: desplegable bajo la barra (como la referencia) */
  .menu-categorias{position:absolute;top:100%;left:0;width:302px;height:auto;max-height:none;box-shadow:0 18px 30px rgba(0,0,0,.13);border:1px solid var(--gris-borde);border-top:none;transform:none;opacity:0;visibility:hidden;transition:all var(--transicion);padding:0 0 6px;overflow:visible}
  .menu-categorias.abierto{opacity:1;visibility:visible}
  .drawer-cabecera,.drawer-cerrar,.fondo-drawer{display:none}
  .cat-toggle{display:none}
  .cat-sub{display:none!important}
  .cat-fila>a{min-height:44px;padding:10px 18px;transition:all var(--transicion)}
  .cat-fila>a::after{content:"›";margin-left:auto;color:#bbb;font-weight:700}
  .cat-fila>a:hover{color:var(--rojo);padding-left:24px;background:var(--gris-fondo)}
  .barra-promos-interno{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible}
  .promo-mini{flex:none}
  .hero-slide{min-height:520px}
  .beneficios-interno{grid-template-columns:repeat(4,1fr);gap:24px;padding:27px 0}
  .beneficio svg{width:34px;height:34px;min-width:34px}
  .beneficio h3{font-size:12.5px}
  .beneficio p{font-size:12.5px}
  .categorias-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  /* Flechas FUERA de las tarjetas: carril con margen lateral */
  .carrusel-wrap{margin:0 40px}
  .flecha{display:flex;position:absolute;top:36%;z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--gris-borde);align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.08);transition:all var(--transicion)}
  .flecha:hover{background:var(--rojo);border-color:var(--rojo)}
  .flecha svg{width:16px;height:16px;stroke:var(--negro)}
  .flecha:hover svg{stroke:#fff}
  .flecha-prev{left:-40px}
  .flecha-next{right:-40px}
  .marcas .carrusel-wrap{margin:0 40px}
  .pie-grid{grid-template-columns:1.35fr .95fr .95fr 1.15fr 1.1fr 1.35fr;gap:26px}
  .whatsapp-flotante{width:56px;height:56px;right:22px;bottom:22px}
  .whatsapp-flotante svg{width:30px;height:30px}
  .whatsapp-flotante .tooltip{display:block;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);background:var(--negro);color:#fff;font-size:12.5px;font-weight:500;padding:8px 13px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--transicion)}
  .whatsapp-flotante:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* Escritorio amplio — 1440px */
@media (min-width:1440px){
  .hero-slide{min-height:560px}
  .hero-contenido{padding:72px 0}
}

/* ============================================================
   AJUSTES V3 — header rediseñado, metálico, tarjetas reales,
   grano sutil y corrección de scroll táctil.
   ============================================================ */
/* Barra superior negra */
.topbar{background:#0c0c0e;color:#e9e9e9;font-size:12.5px}
.topbar-interno{display:flex;align-items:center;justify-content:space-between;gap:16px;height:32px}
.topbar-item{display:inline-flex;align-items:center;gap:7px;color:#e9e9e9;white-space:nowrap}
.topbar-item svg{width:15px;height:15px;stroke:#E10E17;fill:none}
.topbar-item svg path{fill:none}
a.topbar-item svg{fill:#25D366;stroke:none}
.topbar-item.centro{color:#bdbdc2;letter-spacing:.3px}
@media (max-width:767px){.topbar{display:none}}
/* Header: logo contenido (~52-56px), buscador junto al logo */
.encabezado{border-bottom:1px solid var(--gris-borde)}
.encabezado-interno{flex-wrap:wrap;padding:8px 0;min-height:72px}
.encabezado .logo img{width:54px;height:54px}
.buscador-header{order:3;flex:1 1 100%;margin-top:8px}
.buscador-header .buscador-forma{border:1.5px solid #dcdcdc;transition:border-color var(--transicion)}
.buscador-header .buscador-forma:focus-within{border-color:var(--rojo)}
.buscador-header input{flex:1;border:none;outline:none;padding:11px 18px;font-family:inherit;font-size:14px;min-width:0}
.buscador-header button{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;background:#fff}
.buscador-header button svg{width:19px;height:19px;stroke:var(--negro)}
/* Acciones tipo píldora */
.encabezado-acciones{gap:8px}
.accion-cuenta,.accion-carrito{border:1.5px solid var(--gris-borde);border-radius:999px;padding:8px 14px;min-height:44px;gap:8px;font-weight:600;font-size:13.5px;position:relative;transition:all var(--transicion)}
.accion-cuenta:hover,.accion-carrito:hover{border-color:var(--rojo);color:var(--rojo)}
.accion-cuenta span{display:none}
.accion-carrito span:not(.carrito-contador){display:none}
.carrito-contador{top:-7px;right:-5px}
.boton-hamburguesa{border:1.5px solid var(--gris-borde);border-radius:999px}
@media (min-width:560px){.accion-cuenta span{display:inline}.accion-carrito span:not(.carrito-contador){display:inline}}
@media (min-width:768px){
  .encabezado{position:sticky;top:0;z-index:140;background:#fff;transition:box-shadow .25s ease}
  .encabezado.compacto{box-shadow:0 8px 24px rgba(0,0,0,.13)}
  .encabezado.compacto .logo img{width:40px;height:40px}
  .encabezado.compacto .encabezado-interno{min-height:56px;padding:4px 0}
  .encabezado .logo img{transition:width .25s ease,height .25s ease}
  .buscador-header{order:0;flex:1 1 auto;margin:0 22px}
  .encabezado-interno{flex-wrap:nowrap}
}
@media (min-width:1024px){.barra-nav{position:relative;box-shadow:none}}
.nav-links{display:none}
@media (min-width:1024px){
  .nav-links{display:flex;gap:24px;margin-left:auto}
  .nav-links a{color:#fff;font-size:13.5px;font-weight:500;min-height:44px;display:flex;align-items:center;opacity:.92}
  .nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
}
/* Hero: el slide llena TODO el container (sin franja inferior) */
.hero{background:#0a0a0c}
.hero-slide{height:clamp(440px,62vh,560px);min-height:0}
.hero-slide .container{display:flex;align-items:center;height:100%}
.hero-contenido{padding:34px 0}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
.credito::before,.banner-promo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
.banner-promo .contenido{z-index:2}
/* Texto metálico (solo hero, crédito y marcas de banners dobles) */
.metal-plata{background:linear-gradient(178deg,#ffffff 0%,#c9ccd1 34%,#ffffff 52%,#9ea3ab 74%,#eef0f2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.metal-rojo{background:linear-gradient(178deg,#ff8a8e 0%,#E10E17 34%,#ffc2c4 52%,#E10E17 72%,#8f0b10 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
/* Tarjetas: favoritos, etiquetas, cuotas y zoom */
.btn-fav{position:absolute;top:10px;left:10px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--gris-borde);display:flex;align-items:center;justify-content:center;transition:all var(--transicion)}
.btn-fav svg{width:18px;height:18px;fill:none;stroke:#666;stroke-width:1.8}
.btn-fav:hover{border-color:var(--rojo)}
.btn-fav.activo svg{fill:var(--rojo);stroke:var(--rojo)}
.etiqueta-tag{position:absolute;top:54px;left:10px;z-index:3;background:var(--negro);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.tarjeta .foto img{transition:transform .45s ease}
.tarjeta:hover .foto img{transform:scale(1.06)}
.tarjeta .cuota{font-size:12px;color:#7a7a7a;margin-top:5px}
.tarjeta .cuota.envio{color:var(--rojo);font-weight:600}
.btn-carrito.cargando{pointer-events:none;opacity:.75}
.btn-carrito .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(225,14,23,.3);border-top-color:var(--rojo);border-radius:50%;vertical-align:-2px;margin-right:7px;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
/* Logos de marca con fallback discreto si el archivo aún no existe */
.blogo{display:flex;align-items:center;justify-content:center}
.blogo-txt{display:none;font-weight:800;font-size:16.5px;letter-spacing:.3px;color:#3c3c40;white-space:nowrap}
.blogo img.logo-ausente{display:none}
.blogo img.logo-ausente~.blogo-txt{display:block}
/* Crédito: más alto y con aire en escritorio */
@media (min-width:1024px){.credito-interno{min-height:308px;padding:54px 0}}
/* Pagos: logos reales con alto visual uniforme */
.pago-logo{height:40px;padding:6px 12px}
.pago-logo img{height:auto;max-height:26px;width:auto;max-width:104px;object-fit:contain}
/* Scroll táctil: el arrastre vertical siempre mueve la página */
.swiper,.marquee,.hero,.barra-promos-interno{touch-action:pan-y}
.fondo-drawer{pointer-events:none}
.fondo-drawer.visible{pointer-events:auto}

/* ============================================================
   AJUSTES V4 — márgenes globales, header móvil con lupa,
   promos en marquee, tarjetas de altura uniforme, pie pulido.
   ============================================================ */
/* 0) Contenedor global: el fondo llega al borde, el contenido no */
.container{padding-inline:clamp(16px,5vw,24px)}
/* 1) Header móvil: logo ~48px, sin hamburguesa, buscador por lupa */
@media (max-width:1023px){
  .encabezado .logo img{width:48px;height:48px}
  .buscador-header{display:none}
  .encabezado-interno{min-height:64px;gap:8px}
}
@media (min-width:1024px){.buscador-header{display:block}}
.boton-buscar{display:none}
@media (max-width:1023px){
  .boton-buscar{display:flex;align-items:center;justify-content:center;margin-left:auto;min-width:44px;min-height:44px;border-radius:50%}
  .boton-buscar svg{width:21px;height:21px;stroke:#fff}
}
.buscador-expandido{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease}
.buscador-expandido.abierto{max-height:78px;opacity:1}
.buscador-expandido-interno{display:flex;gap:10px;align-items:center;padding-top:2px;padding-bottom:12px}
.buscador-expandido .buscador-forma{flex:1;display:flex;background:#fff;border-radius:999px;overflow:hidden}
.buscador-expandido input{flex:1;border:none;outline:none;padding:11px 18px;font-family:inherit;font-size:14px;min-width:0}
.buscador-expandido form button{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;background:#fff}
.buscador-expandido form button svg{width:19px;height:19px;stroke:var(--negro)}
.buscador-cerrar{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.buscador-cerrar svg{width:19px;height:19px;stroke:#fff}
@media (min-width:1024px){.buscador-expandido{display:none}}
/* 2) Barra de promos: marquee lento bajo 1024px; estática en escritorio */
@media (max-width:1023px){
  .barra-promos-interno{display:block;overflow:hidden}
  .promo-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
  .promo-grupo{display:flex}
  .barra-promos .promo-mini{flex:none;border-right:1px solid rgba(255,255,255,.14);padding:10px 22px}
  .barra-promos:hover .promo-track,.barra-promos:active .promo-track{animation-play-state:paused}
}
@media (min-width:1024px){
  .barra-promos-interno{display:block;overflow:visible}
  .promo-track{display:grid;grid-template-columns:repeat(5,1fr)}
  .promo-grupo{display:contents}
  .promo-grupo.duplicada{display:none}
}
@media (prefers-reduced-motion:reduce){
  .promo-track{animation:none}
  .barra-promos-interno{overflow-x:auto}
}
/* 3) Marcas: logos con alto visual uniforme, sin texto */
.marquee-grupo .blogo img{height:40px;width:auto;max-width:150px;object-fit:contain}
.marca-celda .blogo img{max-height:44px;width:auto;max-width:100%;object-fit:contain}
@media (min-width:1024px){
  .marquee-grupo .blogo img{height:48px}
  .marca-celda .blogo img{max-height:48px}
}
/* 4) Tarjetas: misma altura en todo el carrusel, pie anclado abajo */
.carrusel-productos .swiper-slide{height:auto;display:flex}
.carrusel-productos .tarjeta{flex:1;width:100%}
.tarjeta-pie{margin-top:auto}
.tarjeta .precios{margin-top:0}
.tarjeta-pie .btn-carrito{width:100%}
/* 5) Beneficios: aire generoso */
.beneficios-interno{gap:22px 18px;padding:26px 0}
/* 6) Crédito en móvil: jerarquía y espacios */
.credito-interno{gap:26px;padding:38px 0}
/* 7) Newsletter en móvil: formulario apilado */
@media (max-width:767px){
  .newsletter-interno{gap:14px;padding:24px 0}
  .newsletter form{flex-direction:column;max-width:none}
  .newsletter button{width:100%}
}
/* 8) Pie: logo 76px + eslogan, redes de colores, cajas de pago uniformes */
.pie{padding-bottom:88px}
@media (min-width:768px){.pie{padding-bottom:64px}}
.pie-logo{display:flex;align-items:center;gap:14px}
.pie-logo img{width:76px;height:76px;border-radius:50%;object-fit:cover}
.pie-eslogan-corto{font-size:13.5px;color:var(--gris-texto);line-height:1.45;max-width:180px}
.redes{gap:10px}
.redes a{width:44px;height:44px;border:none;transition:transform var(--transicion),box-shadow var(--transicion)}
.redes a svg{width:20px;height:20px;fill:#fff}
.redes a:hover{transform:translateY(-2px)}
.redes a.red-fb{background:#1877F2}
.redes a.red-ig{background:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 30%,#D62976 58%,#962FBF 82%,#4F5BD5 100%)}
.redes a.red-tt{background:#000}
.redes a.red-tt:hover{box-shadow:2.5px 2.5px 0 #25F4EE,-2.5px -2.5px 0 #FE2C55}
.pagos-logos{display:flex;flex-wrap:wrap;gap:10px}
.pago-logo{width:96px;height:48px;padding:6px;display:flex;align-items:center;justify-content:center}
.pago-logo img{height:28px;width:auto;max-width:80px;object-fit:contain}

/* ============================================================
   AJUSTES V5 — .container definitivo, newsletter en fila,
   crédito móvil reordenado, marquee sin huecos, marcas en
   cuadrícula y logo del pie completo en escritorio.
   ============================================================ */
/* 1) Clase única .container para TODAS las secciones y el pie */
.container{max-width:var(--ancho);margin-inline:auto;width:100%;padding-inline:clamp(20px,5.5vw,28px)}
/* 2) Newsletter móvil: campo y botón EN LA MISMA FILA (como antes) */
@media (max-width:767px){
  .newsletter form{flex-direction:row;max-width:none;flex-basis:100%}
  .newsletter button{width:auto}
  .newsletter .textos{min-width:0;flex:1 1 180px}
  .newsletter p{overflow-wrap:break-word}
}
/* 3) Crédito móvil: orden título → plazo → botón → legal, overlay fuerte */
@media (max-width:767px){
  .credito::after{background:linear-gradient(180deg,rgba(7,7,9,.90) 0%,rgba(7,7,9,.95) 100%)}
  .credito-interno{gap:20px;padding:36px 0}
  .credito-texto,.credito-derecha{display:contents}
  .credito-interno h2{order:1}
  .credito-interno .dif,.credito-interno .meses,.credito-interno .nota{order:2}
  .credito-interno .pastilla{order:3;align-self:flex-start}
  .credito-interno .legal{order:4}
  .credito-derecha .nota{margin-top:6px}
}
/* 4) Marquee sin huecos: grupos sin gap, margen por logo, -50% exacto */
.marquee-track{will-change:transform}
.marquee-grupo{gap:0;padding-right:0}
.marquee-grupo>a{display:flex;align-items:center;justify-content:center;margin-right:56px;min-width:64px;min-height:48px}
.promo-track{will-change:transform}
/* 5) Nuestras marcas: cuadrícula estática centrada */
.marcas-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding-bottom:8px}
.marcas-grid .marca-celda{width:100px;height:56px;flex:none;border:1px solid var(--gris-borde);border-radius:var(--radio);background:#fff;display:flex;align-items:center;justify-content:center;padding:10px 12px}
.marcas-grid .marca-celda .blogo img{max-height:36px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:all var(--transicion)}
.marcas-grid .marca-celda:hover .blogo img{filter:grayscale(0);opacity:1}
@media (min-width:768px){
  .marcas-grid{gap:14px}
  .marcas-grid .marca-celda{width:160px;height:80px;padding:14px 18px}
  .marcas-grid .marca-celda .blogo img{max-height:48px}
}
/* 6) Pie: logo completo en escritorio; 72px + eslogan en móvil */
.pie-logo img{width:auto;height:72px;object-fit:contain;border-radius:0}
@media (min-width:768px){
  .pie-logo{display:block}
  .pie-logo img{height:96px}
  .pie-eslogan-corto{display:none}
}

/* ============================================================
   AJUSTES V6 — solo los dos errores reportados.
   1) Crédito móvil: las reglas padding:38px 0 / padding:36px 0 de
   .credito-interno anulaban el padding-inline de .container
   (el shorthand lo resetea a 0). Se fijan 24px explícitos.
   2) Logos SVG sin tamaño intrínseco: alto explícito en cuadrícula.
   ============================================================ */
@media (max-width:1023px){
  .credito-interno{padding-left:24px;padding-right:24px}
  .credito::after{background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 100%)}
  .credito-fondo{object-position:72% 50%}
}
.marcas-grid .marca-celda .blogo img{height:36px}
@media (min-width:768px){.marcas-grid .marca-celda .blogo img{height:48px}}

/* ============================================================
   AJUSTES V7 — marquee sin vaivén, logo del pie circular y
   mega-menú de escritorio.
   ============================================================ */
/* 1) Marquee: caja fija por logo (140x48) — el ancho del track ya no
   depende de la carga de imágenes. La duración vive en la variable
   --dur (JS la fija UNA vez por construcción) y la animación corre
   solo con la clase .listo (tras decodificar las imágenes). */
.marquee-track{animation:marquee var(--dur,32s) linear infinite;animation-play-state:paused}
.marquee-track.listo{animation-play-state:running}
.marquee-grupo>a{width:140px;height:48px;flex:none;margin-right:24px}
.marquee-grupo .blogo{display:block;width:100%;height:100%}
.marquee-track .marquee-grupo .blogo img{width:100%;height:100%;object-fit:contain}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media (max-width:1023px){
  .promo-track{animation:marquee var(--dur,30s) linear infinite;animation-play-state:paused}
  .promo-track.listo{animation-play-state:running}
}
/* 3) Logo del pie: recorte circular — solo se ve el círculo plateado */
.pie-logo img{border-radius:50%;clip-path:circle(49% at 50% 50%)}
/* 4) Mega-menú de escritorio */
.mega-panel{display:none}
@media (min-width:1024px){
  .menu-categorias .cat-sub{display:none}
  .menu-categorias .cat-toggle{display:none}
  .menu-categorias .cat-item.activo .cat-fila{background:var(--rojo)}
  .menu-categorias .cat-item.activo .cat-fila a{color:#fff}
  .mega-panel{display:block;position:absolute;top:0;left:calc(100% + 12px);width:min(880px,calc(100vw - 360px));max-height:min(72vh,580px);overflow-y:auto;background:#fff;border:1px solid var(--gris-borde);border-radius:14px;box-shadow:0 24px 48px rgba(10,10,12,.18);padding:22px 26px 26px;z-index:60}
  .mega-cabecera{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--gris-borde);padding-bottom:12px;margin-bottom:18px}
  .mega-cabecera h3{font-size:20px;letter-spacing:.01em}
  .mega-cabecera a{color:var(--rojo);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
  .mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px 26px}
  .mega-grupo h4{color:var(--rojo);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
  .mega-grupo ul{display:grid;gap:6px}
  .mega-grupo ul a{font-size:13.5px;color:var(--gris-texto)}
  .mega-grupo ul a:hover{color:var(--rojo)}
  .mega-grupo .mega-vertodo{display:inline-block;margin-top:9px;color:var(--rojo);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
}

/* ============================================================
   V8 — Mega-menú corregido, acordeón móvil de 3 niveles, capa
   tenue, carrito (drawer/toast) y páginas producto/categoría/
   carrito.
   ============================================================ */
/* Acordeón móvil: niveles 2 y 3 */
.cat-vertodo{color:var(--rojo)!important;font-weight:700}
.grupo-item{border-top:1px dashed #eee}
.grupo-fila{display:flex;align-items:center}
.grupo-fila>a{flex:1;display:flex;align-items:center;min-height:42px;padding:8px 0;font-size:14px;font-weight:600;color:var(--gris-texto)}
.grupo-toggle{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
.grupo-toggle svg{width:14px;height:14px;stroke:#999;transition:transform var(--transicion)}
.grupo-item.abierta .grupo-toggle svg{transform:rotate(90deg);stroke:var(--rojo)}
.grupo-sub{display:none;padding:0 0 8px 14px}
.grupo-item.abierta .grupo-sub{display:block}
.grupo-sub .grupo-vertodo{color:var(--rojo)!important;font-weight:600;font-size:13px}
@media (min-width:1024px){
  .grupo-toggle{display:none}
  /* Capa tenue oscura detrás del mega-menú (bajo el encabezado) */
  .fondo-drawer{display:block;z-index:130;background:rgba(10,10,12,.35)}
  /* Mega-menú: lista y panel como UNA unidad pegada, borde superior compartido */
  .mega-panel{left:100%;top:0;border-left:none;border-radius:0 14px 14px 0;width:min(1060px,calc(100vw - 352px));max-height:calc(100vh - 160px)}
  .mega-panel[hidden]{display:none!important}
  .mega-cols{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
  .mega-grupo h4 a{color:var(--rojo)}
  .menu-categorias .cat-item.activo .cat-fila>a::after{color:#fff}
}
/* ---------- Mini-carrito (drawer) y toast ---------- */
.carrito-fondo{position:fixed;inset:0;background:rgba(10,10,12,.5);z-index:300;opacity:0;visibility:hidden;transition:all var(--transicion)}
.carrito-fondo.visible{opacity:1;visibility:visible}
.carrito-drawer{position:fixed;top:0;right:0;z-index:310;width:min(92vw,380px);height:100dvh;background:#fff;box-shadow:-18px 0 40px rgba(0,0,0,.25);transform:translateX(106%);transition:transform .32s ease;display:flex;flex-direction:column}
.carrito-drawer.abierto{transform:translateX(0)}
.carrito-cabecera{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--gris-borde);font-size:16px}
.carrito-cerrar{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.carrito-cerrar svg{width:20px;height:20px;stroke:var(--negro)}
.carrito-items{flex:1;overflow-y:auto;padding:8px 18px}
.carrito-vacio{padding:26px 0;color:#888;text-align:center}
.carrito-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0}
.carrito-item-foto{flex:none;width:64px;height:64px;border:1px solid var(--gris-borde);border-radius:8px;overflow:hidden}
.carrito-item-foto img{width:100%;height:100%;object-fit:cover}
.carrito-item-datos{flex:1;display:grid;gap:3px}
.carrito-item-datos>a{font-size:12.5px;font-weight:600;text-transform:uppercase;line-height:1.35;color:var(--negro)}
.carrito-item-datos>span{color:#888;font-size:12.5px}
.carrito-item>strong{font-size:13.5px}
.cantidad-mini{display:flex;align-items:center;gap:8px;margin-top:4px}
.cantidad-mini button{width:26px;height:26px;border:1px solid var(--gris-borde);border-radius:6px;font-size:15px;line-height:1}
.cantidad-mini .quitar{width:auto;padding:0 8px;font-size:11.5px;color:var(--rojo);border:none}
.carrito-pie{padding:14px 18px 18px;border-top:1px solid var(--gris-borde);display:grid;gap:9px}
.carrito-total{display:flex;justify-content:space-between;font-size:15px}
.btn-carrito-ver{display:block;text-align:center;padding:12px;border:1.5px solid var(--rojo);border-radius:8px;color:var(--rojo);font-weight:700}
.btn-carrito-wa{display:block;text-align:center;padding:12px;border-radius:8px;background:#1FA855;color:#fff;font-weight:700}
.toast-carrito{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:320;background:var(--negro);color:#fff;padding:12px 18px;border-radius:10px;font-size:13.5px;opacity:0;visibility:hidden;transition:all .3s ease;max-width:min(92vw,480px);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast-carrito.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* ---------- Migas de pan ---------- */
.migas{padding:14px 0 4px;font-size:12.5px;color:#999;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.migas a{color:#777}
.migas a:hover{color:var(--rojo)}
.migas .separador{color:#ccc}
/* ---------- Página de producto ---------- */
.producto-layout{display:grid;gap:22px;padding:10px 0 8px}
.galeria{display:grid;gap:10px}
.galeria-principal{position:relative;border:1px solid var(--gris-borde);border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.galeria-principal img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.galeria-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--gris-borde);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.1);color:var(--rojo);font-size:20px;font-weight:700}
.galeria-flecha.anterior{left:10px}.galeria-flecha.siguiente{right:10px}
.galeria-puntos{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.galeria-puntos button{width:8px;height:8px;border-radius:50%;background:#d5d5d5;padding:0}
.galeria-puntos button.activo{background:var(--rojo)}
.galeria-minis{display:flex;gap:8px;overflow-x:auto}
.galeria-minis button{flex:none;width:70px;height:70px;border:1.5px solid var(--gris-borde);border-radius:8px;overflow:hidden;padding:0;background:#fff}
.galeria-minis button.activo{border-color:var(--rojo)}
.galeria-minis img{width:100%;height:100%;object-fit:cover}
.compra{border:1px solid var(--gris-borde);border-radius:12px;padding:20px;background:#fff}
.compra h1{font-size:clamp(19px,2.4vw,25px);line-height:1.25;text-transform:uppercase;margin-bottom:10px}
.compra .marca-codigo{font-size:13px;color:#888;display:grid;gap:2px;margin-bottom:14px}
.compra .marca-codigo a{color:var(--rojo);font-weight:600}
.compra .precio-grande{font-size:32px;font-weight:800;color:var(--rojo);line-height:1.1}
.compra .precio-antes{color:#9a9a9a;text-decoration:line-through;font-size:16px;margin-left:8px}
.compra .cuotas-linea{color:#666;font-size:13.5px;margin:6px 0 4px}
.compra .stock-ok{color:#1FA855;font-weight:600;font-size:13.5px}
.compra .stock-no{color:var(--rojo);font-weight:600;font-size:13.5px}
.cantidad-fila{display:flex;align-items:center;gap:12px;margin:16px 0}
.cantidad{display:flex;align-items:center;border:1.5px solid var(--gris-borde);border-radius:8px;overflow:hidden}
.cantidad button{width:40px;height:42px;font-size:18px;background:#fff}
.cantidad span{min-width:36px;text-align:center;font-weight:700}
.btn-add-grande{width:100%;min-height:50px;background:var(--rojo);color:#fff;border-radius:8px;font-weight:700;font-size:15px;letter-spacing:.4px;text-transform:uppercase}
.btn-add-grande:disabled{background:#c9c9c9;cursor:not-allowed}
.btn-wa-grande{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:10px;border:1.5px solid #1FA855;color:#128C4B;border-radius:8px;font-weight:700;font-size:14.5px;text-transform:uppercase}
.btn-wa-grande svg{width:20px;height:20px;fill:#1FA855}
.compra .notas{font-size:12.5px;color:#888;margin-top:12px;line-height:1.6}
.compartir{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:#888}
.compartir a,.compartir button{width:34px;height:34px;border-radius:50%;border:1px solid var(--gris-borde);display:flex;align-items:center;justify-content:center;background:#fff}
.compartir svg{width:16px;height:16px;fill:#555}
.compra .pagos-titulo{font-size:13px;color:#888;margin:16px 0 8px}
.pagos-fila{display:flex;flex-wrap:wrap;gap:6px}
.pagos-fila .pago-caja{width:64px;height:34px;border:1px solid var(--gris-borde);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:4px;background:#fff}
.pagos-fila .pago-caja img{max-width:100%;max-height:100%;object-fit:contain}
.garantias-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 4px}
.garantias-fila .garantia{display:flex;gap:10px;align-items:center;border:1px solid var(--gris-borde);border-radius:10px;padding:12px;background:#fff;font-size:13px;font-weight:600}
.garantias-fila .garantia svg{width:26px;height:26px;stroke:var(--rojo);flex:none}
.pestanas{margin-top:26px}
.pestanas-botones{display:flex;gap:4px;border-bottom:2px solid var(--gris-borde);flex-wrap:wrap}
.pestanas-botones button{padding:11px 16px;font-weight:600;font-size:14px;color:#777;border-bottom:2.5px solid transparent;margin-bottom:-2px}
.pestanas-botones button.activo{color:var(--rojo);border-color:var(--rojo)}
.pestana-panel{padding:18px 2px;font-size:14.5px;line-height:1.7;color:#555}
.pestana-panel ul{list-style:disc;padding-left:20px}
.barra-producto-movil{position:fixed;left:0;right:0;bottom:0;z-index:160;background:#fff;border-top:1px solid var(--gris-borde);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.barra-producto-movil .precio{font-size:18px;font-weight:800;color:var(--rojo);white-space:nowrap}
.barra-producto-movil button{flex:1;min-height:46px;background:var(--rojo);color:#fff;border-radius:8px;font-weight:700;text-transform:uppercase;font-size:13.5px}
.barra-producto-movil button:disabled{background:#c9c9c9}
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(5,5,8,.92);display:none;align-items:center;justify-content:center}
.lightbox.abierto{display:flex}
.lightbox img{max-width:94vw;max-height:88dvh;border-radius:8px}
.lightbox .cerrar{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:#fff;font-size:20px}
@media (min-width:768px){
  .galeria{grid-template-columns:84px 1fr;align-items:start}
  .galeria-principal{order:2}
  .galeria-minis{order:1;flex-direction:column;overflow:visible}
  .galeria-minis button{width:84px;height:84px}
  .galeria-principal:hover img{transform:scale(1.6)}
}
@media (min-width:1024px){
  .producto-layout{grid-template-columns:1.05fr .95fr;gap:34px}
  .compra{position:sticky;top:150px;align-self:start}
  .barra-producto-movil{display:none}
}
@media (max-width:1023px){
  body.con-barra-producto{padding-bottom:84px}
  body.con-barra-producto .whatsapp-flotante{bottom:92px}
}
/* ---------- Página de categoría ---------- */
.categoria-layout{display:grid;gap:20px;padding:8px 0 30px}
.etiqueta-ambito{display:inline-block;background:var(--rojo);color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px;padding:7px 12px;border-radius:6px;margin-bottom:10px}
.filtros h2{font-size:19px;padding-bottom:10px;border-bottom:2.5px solid var(--rojo)}
.filtro-bloque{border-bottom:1px solid var(--gris-borde);padding:12px 0}
.filtro-bloque>button{width:100%;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14.5px;padding:2px 0;text-transform:capitalize}
.filtro-bloque>button svg{width:15px;height:15px;stroke:#999;transition:transform var(--transicion)}
.filtro-bloque.cerrado>button svg{transform:rotate(-90deg)}
.filtro-bloque .filtro-cuerpo{padding-top:9px;display:grid;gap:2px}
.filtro-bloque.cerrado .filtro-cuerpo{display:none}
.filtro-opcion{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#555;padding:4px 0;cursor:pointer}
.filtro-opcion input{width:16px;height:16px;accent-color:var(--rojo)}
.filtro-opcion .conteo{margin-left:auto;color:#aaa;font-size:12px}
.filtro-grupo-titulo{font-weight:700;font-size:13px;text-transform:uppercase;color:var(--negro);margin:9px 0 3px}
.filtro-grupo-titulo a{color:var(--negro)}
.precio-fila{display:flex;gap:8px;align-items:center}
.precio-fila input{width:100%;min-height:38px;border:1px solid var(--gris-borde);border-radius:6px;padding:6px 9px;font-size:13.5px}
.resultados-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.resultados-cabecera h1{font-size:clamp(19px,2.6vw,26px);text-transform:uppercase}
.resultados-cabecera .total{ color:#888;font-size:13.5px}
.ordenar{display:flex;align-items:center;gap:8px;font-size:13px;color:#777}
.ordenar select{min-height:38px;border:1px solid var(--gris-borde);border-radius:6px;padding:6px 9px;font-size:13.5px;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fdecec;border:1px solid #f3c2c4;color:#a31219;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px}
.chip button{font-size:14px;line-height:1;color:#a31219}
.limpiar-filtros{font-size:12.5px;font-weight:700;color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.productos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.productos-grid .tarjeta{height:auto}
.esqueleto{border:1px solid var(--gris-borde);border-radius:12px;padding:14px;display:grid;gap:10px}
.esqueleto i{display:block;background:linear-gradient(90deg,#eee,#f7f7f7,#eee);background-size:200% 100%;animation:brillo 1.1s infinite;border-radius:6px}
@keyframes brillo{to{background-position:-200% 0}}
.paginacion{display:flex;gap:6px;justify-content:center;margin:22px 0 4px;flex-wrap:wrap}
.paginacion button{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--gris-borde);border-radius:8px;background:#fff;font-weight:600;font-size:13.5px}
.paginacion button.activo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.sin-resultados{text-align:center;padding:36px 0}
.sin-resultados h2{font-size:20px;margin-bottom:8px}
.sin-resultados p{color:#888;margin-bottom:16px}
.boton-filtros-movil{position:fixed;left:16px;bottom:16px;z-index:160;background:var(--negro);color:#fff;border-radius:999px;padding:13px 20px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.3);font-size:14px}
@media (min-width:768px){.productos-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){
  .categoria-layout{grid-template-columns:264px 1fr;gap:30px}
  .productos-grid{grid-template-columns:repeat(4,1fr)}
  .boton-filtros-movil{display:none}
}
@media (max-width:1023px){
  .filtros{position:fixed;left:0;right:0;bottom:0;z-index:330;background:#fff;border-radius:18px 18px 0 0;max-height:82dvh;overflow-y:auto;padding:18px 20px 28px;transform:translateY(105%);transition:transform .3s ease;box-shadow:0 -14px 40px rgba(0,0,0,.25)}
  .filtros.abierto{transform:translateY(0)}
  .filtros-fondo{position:fixed;inset:0;background:rgba(10,10,12,.5);z-index:325;opacity:0;visibility:hidden;transition:all var(--transicion)}
  .filtros-fondo.visible{opacity:1;visibility:visible}
}
/* ---------- Página de carrito ---------- */
.carrito-layout{display:grid;gap:16px;padding:14px 0 30px}
.carrito-linea{display:flex;gap:14px;border:1px solid var(--gris-borde);border-radius:12px;padding:14px;background:#fff;align-items:center}
.carrito-linea .foto{flex:none;width:86px;height:86px;border-radius:8px;overflow:hidden;border:1px solid var(--gris-borde)}
.carrito-linea .foto img{width:100%;height:100%;object-fit:cover}
.carrito-linea .datos{flex:1;display:grid;gap:3px}
.carrito-linea .datos a{font-weight:600;text-transform:uppercase;font-size:13.5px;color:var(--negro)}
.carrito-linea .datos span{color:#888;font-size:12.5px}
.carrito-resumen{border:1px solid var(--gris-borde);border-radius:12px;padding:20px;background:#fff;display:grid;gap:10px;align-self:start}
.carrito-resumen .fila{display:flex;justify-content:space-between;font-size:14.5px}
.carrito-resumen .total{border-top:1px solid var(--gris-borde);padding-top:12px;font-size:17px;font-weight:800}
.btn-finalizar-wa{display:block;text-align:center;background:#1FA855;color:#fff;font-weight:700;padding:14px;border-radius:8px;text-transform:uppercase;font-size:14px}
.btn-seguir{display:block;text-align:center;border:1.5px solid var(--rojo);color:var(--rojo);font-weight:700;padding:12px;border-radius:8px}
.carrito-vacio-pagina{text-align:center;padding:30px 0}
@media (min-width:1024px){.carrito-layout{grid-template-columns:1fr 340px}}
/* Logos de marcas: contraste en reposo (la normalización óptica fina va por JS) */
.marquee-grupo .blogo img{opacity:.75;filter:grayscale(1);transition:all var(--transicion)}
.marquee-grupo>a:hover .blogo img{opacity:1;filter:none}

/* ============================================================
   V8.1 — Ajustes de componentes de producto/categoría/carrito
   ============================================================ */
[hidden]{display:none!important}
.migas .actual{font-weight:700;color:var(--negro)}
.galeria-flecha svg{width:18px;height:18px;stroke:currentColor;fill:none}
.lightbox .cerrar svg{width:20px;height:20px;stroke:#111}
.compra .descuento-tag{display:inline-block;vertical-align:middle;margin-left:10px;background:var(--rojo);color:#fff;font-weight:800;font-size:14px;padding:4px 9px;border-radius:6px}
.compra .notas{list-style:none;padding:0}
.compra .cantidad-etiqueta{font-size:13.5px;color:#666;font-weight:600}
.garantias-fila .garantia>div{display:flex;flex-direction:column;line-height:1.35}
.garantias-fila .garantia span{font-weight:400;color:#777;font-size:12px}
@media (max-width:767px){.garantias-fila{grid-template-columns:1fr}}
.producto-error{text-align:center;padding:44px 20px 30px}
.producto-error h1{font-size:clamp(21px,3vw,28px);margin-bottom:10px}
.producto-error p{color:#888;margin-bottom:20px}
.tarjeta .nombre-enlace{text-decoration:none;color:inherit;display:block}
.tarjeta>a.foto{display:block}
.compartir button.copiado{border-color:#1FA855;background:#eafaf1}
.carrito-linea .quitar-linea{color:var(--rojo);font-size:12.5px;font-weight:700;text-align:left;padding:0}
.sugeridos-titulo{font-size:19px;margin:26px 0 14px;text-transform:uppercase}
.carrusel-relacionados .swiper-slide{height:auto;display:flex}
.carrusel-relacionados .tarjeta{flex:1;width:100%}

/* ============================================================
   V8.2 — Categoría en escritorio + detalles
   (todo lo de escritorio va dentro de min-width:1024px;
   el móvil no se toca)
   ============================================================ */
/* Controles solo de escritorio: ocultos por defecto (móvil intacto) */
.filtro-grupo-flecha{display:none}
.ver-mas-marcas{display:none}
/* En móvil el resto de marcas fluye como si no hubiera envoltorio */
.marcas-resto{display:contents}
/* Ícono de WhatsApp unificado (symbol #icon-whatsapp) en la tarjeta
   de garantías: verde WhatsApp, sin trazo rojo heredado */
.garantias-fila .garantia svg.icono-whatsapp{fill:#25D366;stroke:none}
@media (min-width:1024px){
  /* Contenedor: filtros a la izquierda, productos a la derecha */
  .categoria-layout{grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start}
  .categoria-layout>section{min-width:0}
  /* El panel de filtros es una columna normal y fija, no un bottom sheet */
  .filtros{position:sticky;top:120px;transform:none;max-height:calc(100vh - 140px);overflow-y:auto}
  .filtros-fondo{display:none}
  /* Cuadrícula: 3 columnas entre 1024 y 1279px */
  .productos-grid{grid-template-columns:repeat(3,1fr)}
  .productos-grid .tarjeta{height:100%}
  /* Fila de precios reservada y alineada en todas las tarjetas */
  .productos-grid .precios{min-height:27px;display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px}
  /* Paginación en una sola línea centrada, compacta */
  .paginacion{flex-wrap:nowrap}
  .paginacion button{min-width:34px;height:34px;padding:0 8px;font-size:13px}
  /* Grupos de Sub-categoría plegables en escritorio */
  .filtro-grupo-flecha{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:auto;padding:0}
  .filtro-grupo-flecha svg{width:13px;height:13px;stroke:#999;transition:transform var(--transicion)}
  .filtro-grupo.cerrado .filtro-grupo-flecha svg{transform:rotate(-90deg)}
  .filtro-grupo.cerrado .filtro-grupo-opciones{display:none}
  .filtro-grupo-titulo{display:flex;align-items:center}
  /* Marcas: resto oculto tras «Ver más» solo en escritorio */
  .marcas-resto{display:none}
  .marcas-resto.visible{display:contents}
  .ver-mas-marcas{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--rojo);padding:2px 0}
}
@media (min-width:1280px){
  /* Cuadrícula: 4 columnas desde 1280px */
  .productos-grid{grid-template-columns:repeat(4,1fr)}
}

/* CORRECCIÓN 2026-10-31 — Newsletter solo en móvil: botón icono, sin desborde */
.newsletter button .icono-enviar{display:none}
@media (max-width:767px){
  .newsletter{overflow:hidden}
  .newsletter-interno{width:100%}
  .newsletter form{flex:1 1 100%;width:100%;max-width:100%;flex-wrap:nowrap;gap:8px}
  .newsletter input{flex:1 1 0;width:0;min-width:0;padding:11px 12px;font-size:13.5px;min-height:44px}
  .newsletter button{flex:0 0 46px;width:46px;min-width:46px;padding:0;display:flex;align-items:center;justify-content:center}
  .newsletter button .texto-enviar{display:none}
  .newsletter button .icono-enviar{display:block;width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .newsletter button:hover .icono-enviar{stroke:var(--rojo)}
}