*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{

--uw-black:#000000;
--uw-dark:#0f172a;

--uw-surface:#111827;
--uw-card:#1f2937;

--uw-text:#f8fafc;
--uw-muted:#94a3b8;

--uw-border:rgba(103,232,249,.12);

/* El acento de la marca. Un tema de campaña (api/tema.lib.php) cambia estas
   variables en el <body>; por eso los rgba() del acento usan --uw-acento-rgb. */
--uw-acento-rgb:46,198,204;
--uw-green:#2ec6cc;
--uw-green-dim:#1ba8af;
--uw-green-osc:#1a9fa4;
--uw-green-claro:#37dbf0;
--uw-green-menta:#91f8b8;
--uw-green-glow:rgba(var(--uw-acento-rgb),.18);
--uw-oferta:#ff3838;

--uw-white:#ffffff;

--uw-font-display:'Poppins',sans-serif;
--uw-font-body:'Lato',sans-serif;

--cart-open:0;

--theme-bg:#0b0f14;
--theme-surface:#111827;
--theme-card:#1f2937;
--theme-text:#f8fafc;
--theme-border:rgba(103,232,249,.12);

}
[data-theme="light"]{

--theme-bg:#f8fafc;
--theme-surface:#ffffff;
--theme-card:#ffffff;

--theme-text:#1e293b;

--theme-border:rgba(var(--uw-acento-rgb),.10);

--uw-muted:#64748b;

}
[data-theme="ultra"]{

--theme-bg:#081018;
--theme-surface:#0f172a;
--theme-card:#172033;

--theme-text:#dffcff;

--theme-border:rgba(var(--uw-acento-rgb),.18);

--uw-muted:#8dbec4;

}
html{scroll-behavior:smooth;font-size:16px}
body{
font-family:var(--uw-font-body);background:var(--theme-bg);color:var(--theme-text);
line-height:1.6;transition:background .4s,color .4s;overflow-x:hidden;min-height:100vh;
}
/* ─── TICKER ─── */

/* ─── NAV ─── */
nav{

position:sticky;
top:0;
z-index:900;

background:rgba(15,23,42,.68);

backdrop-filter:
blur(24px)
saturate(180%);

-webkit-backdrop-filter:
blur(24px)
saturate(180%);

border-bottom:
1px solid rgba(var(--uw-acento-rgb),.12);

box-shadow:
0 10px 30px rgba(0,0,0,.15);

transition:
all .4s ease;

}
[data-theme="light"] nav{

background:
rgba(255,255,255,.78);

backdrop-filter:
blur(24px)
saturate(180%);

box-shadow:
0 8px 30px rgba(15,23,42,.06);

}
[data-theme="ultra"] nav{background:rgba(0,12,6,.85)}

/* ═══════════════════════════════════════════════════════════════
   INTEGRACIÓN TICKER + NAV
   Lo maneja storage/js/nav-ticker-sync.js midiendo en vivo la posición
   REAL del ticker en pantalla.

   El nav SIEMPRE está visible. Lo único que hace es correrse hacia abajo
   para cederle el borde superior al ticker cuando este lo está ocupando,
   y volver a 0 cuando el ticker se esconde o se va con el scroll.

   Por qué medir en vez de usar selectores tipo ".ticker--sticky ~ nav":
   1) El modo del ticker lo decide ticker.config.js (hoy 'static') y puede
      cambiar en caliente, porque la config se recarga desde la API cada
      5 min. Un selector fijo se rompería en cuanto cambie el modo.
   2) ticker.js escribe --ticker-height como estilo INLINE sobre .ticker
      (r.style.setProperty), así que esa variable NO es legible desde el
      nav: leer var(--ticker-height) fuera del ticker da el valor por
      defecto del CSS (56px), no el real configurado (60px).

   --uw-nav-top lo escribe el JS sobre :root: cuánto del tope de la
   pantalla está tapando el ticker en este instante.
   ═══════════════════════════════════════════════════════════════ */
:root{ --uw-nav-top:0px; }

nav{
  top:var(--uw-nav-top,0px);
  /* Reemplaza el "transition:all .4s" de arriba. El top NO lleva
     transición a propósito: el JS lo actualiza frame a frame siguiendo
     al ticker, así que animarlo acá solo agregaría un desfase visible
     (el nav llegando tarde y dejando ver una franja). El resto de las
     propiedades conserva su suavidad original. */
  transition:
    background .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;
padding:.9rem 2rem;max-width:1200px;margin:auto;gap:1rem;
}
.brand{
font-family:var(--uw-font-display);font-weight:800;font-size:1.4rem;
color:var(--theme-text);text-decoration:none;letter-spacing:-.02em;display:flex;gap:.4rem;align-items:center;
}
.brand{
    position:relative;
    display:flex;
    align-items:center;
}

.brand img{

    height: 66px;

    transition:
    height .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1),
    filter .55s ease;

}

/* ESTADO TOP DE LA PÁGINA */

.nav-top .brand img{

    height:84px;

}

[data-theme="dark"] .nav-top .brand img,
[data-theme="ultra"] .nav-top .brand img{

    filter:
    drop-shadow(0 0 10px rgba(var(--uw-acento-rgb),.28))
    drop-shadow(0 0 25px rgba(var(--uw-acento-rgb),.18))
    drop-shadow(0 0 45px rgba(var(--uw-acento-rgb),.10));

}

.brand:hover img{

    transform:
    translateY(-2px)
    scale(1.04);

    filter:
    drop-shadow(0 0 12px rgba(var(--uw-acento-rgb),.35))
    drop-shadow(0 0 28px rgba(var(--uw-acento-rgb),.22))
    drop-shadow(0 0 55px rgba(var(--uw-acento-rgb),.10));

}

/* ANIMACIÓN SUAVE SOLO EN EL TOP */

.nav-top .brand{

    animation:
    logoFloat 4s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-3px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* TOP + HOVER */

.nav-top .brand:hover img{

    transform:
    translateY(-4px)
    scale(1.06);

    filter:
    drop-shadow(0 0 14px rgba(var(--uw-acento-rgb),.45))
    drop-shadow(0 0 35px rgba(var(--uw-acento-rgb),.28))
    drop-shadow(0 0 65px rgba(var(--uw-acento-rgb),.12));

}

.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{
color:var(--uw-muted);text-decoration:none;font-size:.88rem;font-weight:500;
transition:color .2s;letter-spacing:.02em;
}
.nav-links a:hover{color:var(--theme-text)}
.nav-actions{display:flex;gap:.75rem;align-items:center}
.btn-cart{
position:relative;background:var(--theme-card);border:1px solid var(--theme-border);
color:var(--theme-text);padding:.5rem 1.1rem;border-radius:99px;font-family:var(--uw-font-display);
font-size:.82rem;font-weight:700;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:.5rem;
}
.btn-cart:hover{border-color:var(--uw-green);color:var(--uw-green)}
.cart-badge{
position:absolute;top:-6px;right:-6px;background:var(--uw-green);color:#000;
width:18px;height:18px;border-radius:50%;font-size:.65rem;font-weight:800;
display:none;align-items:center;justify-content:center;
}
.cart-badge.show{display:flex}
.btn-theme{
background:none;border:1px solid var(--theme-border);color:var(--uw-muted);
padding:.5rem .8rem;border-radius:8px;cursor:pointer;font-size:.78rem;transition:all .25s;
}
.btn-theme:hover{border-color:var(--uw-green);color:var(--uw-green)}
/* ─── HERO ─── */
.hero{
min-height:92vh;display:flex;align-items:center;justify-content:center;
text-align:center;padding:4rem 2rem;position:relative;overflow:hidden;
background:var(--theme-bg);
}
.hero-bg{

background:
radial-gradient(
ellipse 80% 60% at 50% 40%,
rgba(var(--uw-acento-rgb),.10) 0%,
transparent 70%
);

animation:
heroGlow 8s ease-in-out infinite;

}

@keyframes heroGlow{

0%,100%{
opacity:1;
transform:scale(1);
}

50%{
opacity:.8;
transform:scale(1.05);
}

}
.hero-grid{
position:absolute;inset:0;pointer-events:none;opacity:.025;
background-image:linear-gradient(var(--theme-border) 1px,transparent 1px),linear-gradient(90deg,var(--theme-border) 1px,transparent 1px);
background-size:60px 60px;
}
.hero-content{position:relative;z-index:2;max-width:760px}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
background:var(--theme-card);border:1px solid var(--theme-border);
padding:.4rem 1rem;border-radius:99px;font-size:.75rem;font-weight:600;
color:var(--uw-green);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2rem;
}
.hero-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--uw-green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
h1.hero-title{
font-family:var(--uw-font-display);font-size:clamp(3rem,8vw,6rem);
font-weight:800;line-height:.96;letter-spacing:-.04em;
color:var(--theme-text);margin-bottom:1.5rem;
}
h1.hero-title em{font-style:normal;color:var(--uw-green)}
.hero-sub{
color:var(--uw-muted);font-size:1.1rem;font-weight:300;max-width:500px;
margin:0 auto 3rem;line-height:1.7;
}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-primary{
background:var(--uw-green);color:#000;font-family:var(--uw-font-display);
font-weight:700;padding:.85rem 2rem;border-radius:99px;border:none;
cursor:pointer;font-size:.9rem;letter-spacing:.02em;
transition:transform .2s,box-shadow .2s;
box-shadow:
0 8px 24px rgba(var(--uw-acento-rgb),.20);
}
.btn-primary:hover{

transform:
translateY(-3px);

box-shadow:
0 16px 40px rgba(var(--uw-acento-rgb),.28);

}
.btn-ghost{
background:none;color:var(--theme-text);border:1px solid var(--theme-border);
font-family:var(--uw-font-display);font-weight:600;padding:.85rem 2rem;
border-radius:99px;cursor:pointer;font-size:.9rem;transition:all .2s;
}
.btn-ghost:hover{border-color:var(--uw-green);color:var(--uw-green)}
.hero-stats{
display:flex;gap:3rem;justify-content:center;margin-top:5rem;flex-wrap:wrap;
border-top:1px solid var(--theme-border);padding-top:3rem;
}
.stat-item{text-align:center}
.stat-num{font-family:var(--uw-font-display);font-size:2rem;font-weight:800;color:var(--uw-green)}
.stat-label{font-size:.78rem;color:var(--uw-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem}
/* ─── HERO v2 (2026-09-19): texto + vitrina de productos ───
   Dos columnas en PC; en el teléfono el texto arriba y la vitrina como
   fila deslizable, para que se vean productos en la primera pantalla. */
.hero.hero-v2{
min-height:auto;flex-direction:column;align-items:stretch;
padding:3.5rem 2rem 2.5rem;text-align:left;
}
.hero-v2 .hero-wrap{
position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center;
}
.hero-v2 .hero-wrap.sin-vitrina{grid-template-columns:1fr;max-width:760px;text-align:center}
.hero-v2 .hero-content{max-width:none}
.hero-v2 .hero-eyebrow{margin-bottom:1.25rem;letter-spacing:.06em}
.hero-v2 h1.hero-title{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.02;margin-bottom:1.1rem}
.hero-v2 .hero-sub{margin:0 0 2rem;max-width:520px;font-size:1.05rem;line-height:1.6}
.hero-v2 .hero-wrap.sin-vitrina .hero-sub{margin:0 auto 2rem}
.hero-v2 .hero-ctas{justify-content:flex-start}
.hero-v2 .hero-wrap.sin-vitrina .hero-ctas{justify-content:center}
.hero-v2 .hero-ctas a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.hero-vitrina-cabecera{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.hero-vitrina-titulo{
font-family:var(--uw-font-display);font-weight:700;font-size:.8rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--uw-muted);margin:0;
}
.hero-vitrina{width:100%;max-width:460px;justify-self:end}
.hero-vitrina-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.hero-prod{
display:grid;text-decoration:none;color:var(--theme-text);
background:var(--theme-card);border:1px solid var(--theme-border);border-radius:16px;padding:.6rem .6rem .8rem;
transition:transform .2s,border-color .2s,box-shadow .2s;
/* escenario 3D del cambio de producto (.hero-prod-cara gira adentro) */
position:relative;overflow:hidden;perspective:900px;
}
.hero-prod-cara{grid-area:1/1;display:flex;flex-direction:column;gap:.35rem;min-width:0;backface-visibility:hidden}
.hero-prod:hover{transform:translateY(-3px);border-color:var(--uw-green);box-shadow:0 12px 30px var(--uw-green-glow);color:var(--theme-text)}
.hero-prod-foto{display:block;background:#fff;border-radius:11px;overflow:hidden;aspect-ratio:4/3}
.hero-prod-foto img{width:100%;height:100%;object-fit:contain;display:block}
.hero-prod-nombre{
font-size:.85rem;font-weight:600;line-height:1.3;padding:0 .2rem;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;
}
.hero-prod-precio{font-family:var(--uw-font-display);font-weight:800;color:var(--uw-green);padding:0 .2rem;font-size:1rem}
.hero-prod-precio s{color:var(--uw-muted);font-weight:500;font-size:.8rem;margin-right:.25rem}

/* ─── VITRINA QUE ROTA (2026-09-20, storage/js/vitrina.js) ───
   Cada tanda de 4 productos se va y entra la siguiente con un giro en 3D,
   una tarjeta después de otra (ola de izquierda a derecha). La que se va
   cae hacia atrás y se desenfoca; la que llega sube desde abajo y aterriza
   con un brillo que la cruza. Los "pasos" de arriba a la derecha dicen
   cuántas tandas hay, en cuál va y cuánto falta para la próxima. */
@keyframes uwVitSale{
from{transform:rotateX(0) translateZ(0) scale(1);opacity:1;filter:blur(0)}
55% {opacity:.22;filter:blur(2px)}
to  {transform:rotateX(-84deg) translateZ(-70px) scale(.93);opacity:0;filter:blur(3px)}
}
@keyframes uwVitEntra{
from{transform:rotateX(84deg) translateZ(-70px) scale(.93);opacity:0;filter:blur(3px)}
60% {opacity:1;filter:blur(0)}
to  {transform:rotateX(0) translateZ(0) scale(1);opacity:1;filter:blur(0)}
}
@keyframes uwVitBrillo{
from{opacity:0;transform:translateX(-130%)}
30% {opacity:1}
to  {opacity:0;transform:translateX(130%)}
}
.hero-prod-cara.uw-vit-sale{animation:uwVitSale .42s cubic-bezier(.55,.06,.87,.36) forwards}
.hero-prod-cara.uw-vit-entra{animation:uwVitEntra .62s cubic-bezier(.16,1,.3,1) .3s backwards}
.hero-prod.uw-vit-cambiando{border-color:var(--uw-green)}
.hero-prod.uw-vit-cambiando::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
background:linear-gradient(112deg,transparent 38%,rgba(var(--uw-acento-rgb),.20) 47%,rgba(255,255,255,.26) 52%,transparent 64%);
animation:uwVitBrillo .8s ease-out .28s;
}
.hero-vitrina-pasos{display:flex;align-items:center;gap:6px;flex-shrink:0}
.uw-vit-paso{
width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
background:var(--theme-border);transition:width .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.uw-vit-paso:hover{background:rgba(var(--uw-acento-rgb),.45)}
.uw-vit-paso.uw-vit-activo{width:30px;background:rgba(var(--uw-acento-rgb),.22);position:relative;overflow:hidden}
.uw-vit-paso.uw-vit-activo::before{
content:"";position:absolute;inset:0;background:var(--uw-green);border-radius:99px;
transform:scaleX(0);transform-origin:left;animation:uwVitPaso var(--uw-vit-ms,5200ms) linear forwards;
}
@keyframes uwVitPaso{to{transform:scaleX(1)}}
/* En pausa (mouse encima, teclado adentro, pestaña escondida o fuera de
   pantalla) también se detiene la barrita, para que no mienta. */
.hero-vitrina.uw-vit-pausa .uw-vit-paso.uw-vit-activo::before{animation-play-state:paused}
/* Con "reducir movimiento" activado no hay giro ni brillo: solo se funde
   una foto en la otra, sin 3D. */
@keyframes uwVitSaleSuave{from{opacity:1}to{opacity:0}}
@keyframes uwVitEntraSuave{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
.hero-prod-cara.uw-vit-sale{animation:uwVitSaleSuave .22s linear forwards}
.hero-prod-cara.uw-vit-entra{animation:uwVitEntraSuave .28s linear .12s backwards}
.hero-prod.uw-vit-cambiando::after{animation:none}
.uw-vit-paso.uw-vit-activo::before{animation:none;transform:scaleX(1)}
}

.hero-confianza{
position:relative;z-index:2;list-style:none;margin:2.5rem auto 0;padding:1.5rem 0 0;width:100%;max-width:1200px;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-top:1px solid var(--theme-border);
}
.hero-confianza li{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--uw-muted);line-height:1.35}
.hero-confianza i{font-size:1.35rem;color:var(--uw-green);flex-shrink:0}
.hero-confianza strong{color:var(--theme-text);font-weight:600;display:block}

@media (max-width:900px){
.hero.hero-v2{padding:1.75rem 16px 1.75rem}
.hero-v2 .hero-wrap{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.hero-v2 .hero-eyebrow{font-size:.68rem;margin-bottom:.9rem;max-width:100%;white-space:normal}
.hero-v2 h1.hero-title{font-size:clamp(2rem,9vw,2.8rem);margin-bottom:.75rem}
.hero-v2 .hero-sub{font-size:.95rem;margin-bottom:1.25rem}
.hero-v2 .hero-ctas{gap:.6rem}
.hero-v2 .hero-ctas a{flex:1 1 0;min-width:0;padding:.8rem .75rem;white-space:nowrap}
/* fila deslizable: se asoma la tarjeta siguiente para que se note */
.hero-vitrina{margin:0 -16px;max-width:none;width:auto;justify-self:stretch}
.hero-vitrina-cabecera{padding:0 16px}
.hero-vitrina-fila{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding:0 16px 4px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.hero-vitrina-fila::-webkit-scrollbar{display:none}
.hero-prod{flex:0 0 42%;scroll-snap-align:start}
.hero-confianza{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.5rem;padding-top:1.25rem;gap:.85rem}
.hero-confianza li{font-size:.78rem;gap:.55rem}
.hero-confianza i{font-size:1.15rem}
}
@media (min-width:600px) and (max-width:900px){
.hero-prod{flex-basis:28%}
}

/* ─── SECTIONS ─── */
.section{padding:5rem 2rem;max-width:1200px;margin:auto}
.section-header{margin-bottom:3.5rem}
h2.section-title{
font-family:var(--uw-font-display);font-size:clamp(2rem,4vw,3rem);
font-weight:800;letter-spacing:-.03em;color:var(--theme-text);margin-bottom:.75rem;
}
h2.section-title span{color:var(--uw-green)}
.section-sub{color:var(--uw-muted);font-size:.95rem;max-width:480px}
/* ─── TICKER PROMO ───
   Distinto del ticker.css (v3, el de arriba de todo). Este es una franja
   de scroll horizontal aparte, más abajo en la página (ver <div
   class="ticker-promo"> en index.php, antes de la sección "FEATURES").
   No comparte clases con .ticker/.ticker-track/etc, así que no hay
   conflicto — confirmado en uso, no es código muerto. */
.ticker-promo{
border-top:1px solid var(--theme-border);border-bottom:1px solid var(--theme-border);
background:var(--theme-card);overflow:hidden;height:40px;display:flex;align-items:center;
}
.ticker-promo-track{display:flex;white-space:nowrap;will-change:transform;animation:scrollLeft 25s linear infinite}
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-promo-item{padding:0 2.5rem;font-size:.8rem;font-weight:500;color:var(--uw-muted)}
.ticker-promo-item strong{color:var(--uw-green)}
/* ─── PRODUCT GRID ─── */
.filter-bar{
display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem;
}
/* .filter-btn definitivo: ver sección "BOTONES DE CATEGORÍA PRINCIPAL" */
/* Sin dense: lo llevaba por la tarjeta ancha de un pack, que ocupa dos
   columnas y dejaba un hueco al final de la fila. Los packs ya no van sueltos
   acá (van en su franja, ver "LA FRANJA DE PACKS"), así que no hay huecos que
   tapar — y sin dense la grilla respeta el orden del día tal cual, sin
   adelantar tarjetas. */
.product-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;
}
.product-card{
background:var(--theme-card);border:1px solid var(--theme-border);border-radius:18px;
overflow:hidden;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s;
position:relative;
}
/* ─── EL BORDE VIVO DE LAS TARJETAS ───
   El borde no se pinta con `border`: eso no admite degradados ni movimiento
   sin correr todo de sitio. Se pinta con un anillo ::after enmascarado (se ve
   el marco, el centro queda recortado). Respeta el radio de la tarjeta, no
   ocupa espacio y no tapa nada (pointer-events:none).

   Lo usan dos cosas, con la misma máquina: el hover de cualquier tarjeta (se
   enciende al pasar el mouse) y el borde propio de los packs (.pk-borde-*,
   que va encendido siempre). */
.product-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:14;
padding:var(--uw-borde-grosor,1.5px);pointer-events:none;
background:var(--uw-borde-pintura,var(--uw-green));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
opacity:0;transition:opacity .3s;
}
/* Hover sobrio: la tarjeta sube, la foto hace un acercamiento lento, el
   nombre se pinta y el borde se enciende. Solo donde hay mouse de verdad
   (@media hover): en la tablet el hover se quedaba pegado después de tocar.
   :focus-within hace lo mismo para quien anda con el teclado. */
.product-img img,.product-img video,
.product-img-slider img,.product-img-slider video{transition:transform .45s ease}
.product-name{transition:color .25s}
@media (hover:hover){
.product-card:hover,
.product-card:focus-within{
transform:translateY(-6px);
box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 40px rgba(var(--uw-acento-rgb),.14);
}
.product-card:hover::after,
.product-card:focus-within::after{opacity:1}
.product-card:hover .product-img img,
.product-card:hover .product-img video,
.product-card:hover .product-img-slider img,
.product-card:hover .product-img-slider video{transform:scale(1.05)}
.product-card:hover .product-name{color:var(--uw-green)}
}
/* En la tablet y el teléfono, un apretón corto al tocar y nada más. */
.product-card:active{transform:translateY(-2px)}
/* La tarjeta de un pack. "Incluye" en una línea por producto y el ahorro
   como sello. La ancha (se elige en StockFlow por pack) ocupa dos columnas
   con la foto 16:9, solo donde caben dos: en el teléfono es una más. */
.pack-incluye{margin-top:.6rem;font-size:.82rem;line-height:1.4}
.pack-incluye-tit{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--uw-muted);margin-bottom:.2rem}
.pack-incluye ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.pack-incluye li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack-ahorro{display:inline-block;margin-top:.45rem;padding:.2rem .6rem;border-radius:99px;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4);color:#4ade80;font-weight:700;font-size:.78rem}
@media (min-width:640px){
  .product-card--pack.es-ancha{grid-column:span 2}
  .product-card--pack.es-ancha .product-img,
  .product-card--pack.es-ancha .product-img-slider{aspect-ratio:16/9}
  .product-card--pack.es-ancha .product-img img,
  .product-card--pack.es-ancha .product-img-slider img,
  .product-card--pack.es-ancha .product-img-slider video{object-fit:cover}
  .product-card--pack.es-ancha .product-name{font-size:1.25rem}
  .product-card--pack.es-ancha .pack-incluye ul{flex-direction:row;flex-wrap:wrap;gap:.2rem .9rem}
}

/* ─── EL BORDE DE LOS PACKS ───
   Un pack se tiene que notar distinto de un producto suelto de una sola
   mirada. Cuál borde lleva se elige en StockFlow (Tienda web → Packs, y un
   valor por defecto para todos); llega como clase pk-borde-*. Acá solo se
   dice cómo se pinta cada uno, sobre el mismo anillo ::after del hover.

   El color sale del acento de la tienda, así que una campaña que cambie el
   acento cambia también estos bordes sin tocar nada. "Sin borde" no pone
   ninguna clase: el pack queda como cualquier tarjeta. */
@property --uw-borde-giro{syntax:"<angle>";initial-value:0deg;inherits:false}
.product-card--pack{--uw-borde-color:var(--uw-green);--uw-borde-grosor:2px}
.pk-borde-fino::after,
.pk-borde-degradado::after,
.pk-borde-giro::after,
.pk-borde-neon::after,
.pk-borde-cupon::after{opacity:1}
.pk-borde-fino::after{background:var(--uw-borde-color)}
.pk-borde-degradado::after{
background:linear-gradient(135deg,var(--uw-borde-color),rgba(var(--uw-acento-rgb),.15) 48%,var(--uw-borde-color));
}
/* Luz que gira: un destello recorre el marco. El ángulo se anima en el propio
   ::after (la variable no se hereda, así que animarla en la tarjeta no
   serviría). Donde @property no exista, el degradado se queda quieto y se ve
   igual de bien. */
.pk-borde-giro{border-color:rgba(var(--uw-acento-rgb),.4)}
.pk-borde-giro::after{
background:conic-gradient(from var(--uw-borde-giro),
rgba(var(--uw-acento-rgb),0) 0%,rgba(var(--uw-acento-rgb),.3) 10%,
var(--uw-borde-color) 20%,#e8fdff 24%,var(--uw-borde-color) 28%,
rgba(var(--uw-acento-rgb),.3) 40%,rgba(var(--uw-acento-rgb),0) 58%,
rgba(var(--uw-acento-rgb),0) 100%);
animation:uwBordeGiro 5s linear infinite;
}
@keyframes uwBordeGiro{to{--uw-borde-giro:360deg}}
/* Neón que respira: el marco sube y baja de brillo, con un resplandor suave
   por fuera (va en la tarjeta, no en el anillo: la máscara recortaría la
   sombra). */
.pk-borde-neon{box-shadow:0 0 26px rgba(var(--uw-acento-rgb),.18)}
.pk-borde-neon::after{background:var(--uw-borde-color);animation:uwBordeNeon 2.8s ease-in-out infinite}
@keyframes uwBordeNeon{0%,100%{opacity:.5}50%{opacity:1}}
/* Troquel de cupón: borde punteado de verdad, sin máscara. */
.pk-borde-cupon::after{
background:none;padding:0;border:2px dashed var(--uw-borde-color);
-webkit-mask:none;mask:none;opacity:.85;
}
/* Al pasar el mouse por un pack, su borde se enciende del todo igual que el
   de cualquier tarjeta. */
@media (hover:hover){
.product-card--pack:hover::after,
.product-card--pack:focus-within::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.pk-borde-giro::after,.pk-borde-neon::after{animation:none}
}

/* ─── LA FRANJA DE PACKS ───
   Todos los packs juntos en una fila entera de la grilla, con su encabezado
   y su propia grilla adentro (la arma catalogo.js, _franjaDePacks). Así un
   pack nunca queda suelto entre productos ni se pegan dos tarjetas anchas.
   En el teléfono la franja pasa a ser una fila que se desliza, con la
   siguiente tarjeta asomándose para que se note que hay más. */
.franja-packs{
grid-column:1/-1;border:1px solid var(--theme-border);border-radius:22px;
padding:1.35rem;
background:linear-gradient(180deg,rgba(var(--uw-acento-rgb),.07),transparent 65%),var(--theme-surface);
}
.franja-packs-cab{
display:flex;align-items:baseline;justify-content:space-between;
gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem;
}
.franja-packs-tit{
font-family:var(--uw-font-display);font-size:1.15rem;font-weight:800;
color:var(--theme-text);letter-spacing:-.01em;
}
.franja-packs-tit span{
display:block;font-family:var(--uw-font-body);font-size:.82rem;font-weight:400;
color:var(--uw-muted);letter-spacing:0;margin-top:.15rem;
}
.franja-packs-ahorro{
padding:.25rem .7rem;border-radius:99px;background:rgba(74,222,128,.14);
border:1px solid rgba(74,222,128,.4);color:#4ade80;font-weight:700;font-size:.78rem;
}
/* dense acá sí conviene: dentro de la franja solo hay packs, así que rellenar
   el hueco de la tarjeta ancha no desordena nada de la grilla. */
.franja-packs-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:1.25rem;grid-auto-flow:dense;
}
@media (max-width:640px){
.franja-packs{padding:1rem .85rem;border-radius:18px}
.franja-packs-grid{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;
padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.franja-packs-grid::-webkit-scrollbar{display:none}
.franja-packs-grid>.product-card{flex:0 0 78%;scroll-snap-align:start}
}

/* LA FRANJA "PARA EMPRENDER": los kits para abrir un carwash, siempre arriba
   de la grilla (catalogo.js, _franjaEmprende). Verde, para que no se confunda
   con los packs de siempre. */
.franja-emprende{
border-color:rgba(22,163,74,.45);
background:linear-gradient(180deg,rgba(22,163,74,.12),transparent 70%),var(--theme-surface);
}
.franja-emprende .franja-packs-tit{font-size:1.3rem}
.franja-emprende-guia{
margin-left:auto;font-size:.82rem;font-weight:700;color:#16a34a;text-decoration:none;white-space:nowrap;
}
.franja-emprende-guia:hover{text-decoration:underline}
.franja-emprende .franja-packs-ahorro{background:#16a34a;border-color:#16a34a;color:#fff}

/* Foto del producto completa (sin recortar): caja 4:3 con la imagen
   "contain". Las fotos de la tienda son 4:3 o cuadradas. */
.product-img{
width:100%;aspect-ratio:4/3;background:var(--theme-surface);overflow:hidden;
display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;
}
.product-img img,
.product-img-link img,
.product-img video,
.product-img-link video{width:100%;height:100%;object-fit:contain;display:block}
.product-img-link{display:block;width:100%;height:100%;font-size:.85rem;color:var(--uw-muted);text-decoration:none}
.product-cat-badge{
position:absolute;top:.75rem;left:.75rem;
background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
color:var(--uw-green);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:.3rem .7rem;border-radius:99px;border:1px solid var(--uw-green-dim);
}
.product-body{padding:1.25rem}
.product-sku{font-size:.68rem;color:var(--uw-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.product-name{
font-family:var(--uw-font-display);font-size:1.05rem;font-weight:700;
color:var(--theme-text);margin-bottom:.4rem;line-height:1.2;
}
.product-desc{font-size:.83rem;color:var(--uw-muted);line-height:1.5;margin-bottom:.75rem}
.product-format{
display:inline-block;background:var(--theme-surface);
border:1px solid var(--theme-border);color:var(--uw-muted);
font-size:.72rem;font-weight:600;padding:.25rem .65rem;border-radius:99px;margin-bottom:1rem;
}
.product-footer{display:flex;justify-content:space-between;align-items:center}
.product-price{
font-family:var(--uw-font-display);font-size:1.2rem;font-weight:800;color:var(--theme-text);
}
.btn-add{
background:var(--theme-surface);color:var(--uw-green);border:1px solid var(--uw-green);
padding:.5rem 1rem;border-radius:99px;font-size:.8rem;font-weight:700;
cursor:pointer;transition:all .2s;letter-spacing:.03em;
}
.btn-add:hover{background:var(--uw-green);color:#000}
.btn-add:active{transform:scale(.96)}
/* ─── CART DRAWER ─── */
/* Nota: .cart-drawer y .cart-drawer.open "reales" (con z-index y el
   ancho de 420px) están definidos más abajo, junto al resto de estilos
   nuevos del carrito — ver "CARRITO DRAWER: CAPAS Y CONTROL DE CAPAS". */
.cart-head{
padding:1.5rem;border-bottom:1px solid var(--theme-border);
display:flex;justify-content:space-between;align-items:center;
}
.cart-head h3{font-family:var(--uw-font-display);font-size:1.1rem;font-weight:800;color:var(--theme-text)}
.btn-close-cart{
background:var(--theme-card);border:1px solid var(--theme-border);color:var(--uw-muted);
width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.1rem;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.btn-close-cart:hover{border-color:var(--uw-green);color:var(--uw-green)}
.cart-items{flex:1;overflow-y:auto;padding:1rem}
.cart-empty{
text-align:center;padding:3rem 1rem;color:var(--uw-muted);
}
.cart-empty .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.4}
.cart-item{
display:flex;gap:1rem;padding:1rem;background:var(--theme-card);
border-radius:12px;margin-bottom:.75rem;border:1px solid var(--theme-border);
}
.cart-item-icon{
width:52px;height:52px;border-radius:10px;background:var(--theme-surface);
display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;
}
.cart-item-info{flex:1}
.cart-item-name{font-family:var(--uw-font-display);font-size:.9rem;font-weight:700;color:var(--theme-text);margin-bottom:.2rem}
.cart-item-price{font-size:.82rem;color:var(--uw-green);font-weight:600}
.cart-qty{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.qty-btn{
width:26px;height:26px;border-radius:50%;background:var(--theme-surface);
border:1px solid var(--theme-border);color:var(--theme-text);
cursor:pointer;font-size:.9rem;font-weight:700;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.qty-btn:hover{border-color:var(--uw-green);color:var(--uw-green)}
.qty-val{font-size:.88rem;font-weight:700;color:var(--theme-text);min-width:20px;text-align:center}
.btn-remove{
background:none;border:none;color:var(--uw-muted);cursor:pointer;font-size:.78rem;
margin-left:auto;transition:color .2s;
}
.btn-remove:hover{color:#615d5d}
.cart-foot{
padding:1.5rem;border-top:1px solid var(--theme-border);
}
.cart-total{
display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;
}
.cart-total span:first-child{font-size:.88rem;color:var(--uw-muted)}
.cart-total-val{font-family:var(--uw-font-display);font-size:1.4rem;font-weight:800;color:var(--uw-green)}
.btn-checkout{
width:100%;background:var(--uw-green);color:#000;border:none;padding:1rem;
border-radius:12px;font-family:var(--uw-font-display);font-weight:800;font-size:.95rem;
cursor:pointer;transition:all .25s;letter-spacing:.03em;
}
.btn-checkout:hover{box-shadow:0 12px 36px rgba(0,255,136,.3);transform:translateY(-1px)}
.btn-clear-cart{
width:100%;background:none;border:1px solid var(--theme-border);color:var(--uw-muted);
padding:.65rem;border-radius:10px;cursor:pointer;font-size:.8rem;margin-top:.6rem;transition:all .2s;
}
.btn-clear-cart:hover{border-color:#ff4444;color:#ff4444}
/* ─── CHECKOUT MODAL ─── */
.modal-overlay{
position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);
display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal-box{
background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:24px;
width:min(540px,100%);max-height:90vh;overflow-y:auto;
}
.modal-head{
padding:1.75rem 1.75rem 1rem;display:flex;justify-content:space-between;align-items:flex-start;
border-bottom:1px solid var(--theme-border);
}
.modal-head h3{font-family:var(--uw-font-display);font-size:1.2rem;font-weight:800;color:var(--theme-text)}
.modal-body{padding:1.75rem}
.form-group{margin-bottom:1.25rem}
.form-label{
display:block;font-size:.8rem;font-weight:600;color:var(--uw-muted);
letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem;
}
.form-input{
width:100%;background:var(--theme-card);border:1px solid var(--theme-border);
color:var(--theme-text);padding:.75rem 1rem;border-radius:10px;font-size:.9rem;
font-family:var(--uw-font-body);outline:none;transition:border-color .2s;
}
.form-input:focus{border-color:var(--uw-green)}
.form-input.error{border-color:#ff4444}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-select{
width:100%;background:var(--theme-card);border:1px solid var(--theme-border);
color:var(--theme-text);padding:.75rem 1rem;border-radius:10px;font-size:.9rem;
font-family:var(--uw-font-body);outline:none;transition:border-color .2s;cursor:pointer;
}
.form-select:focus{border-color:var(--uw-green)}
.toggle-group{display:flex;gap:.5rem}
.toggle-btn{
flex:1;background:var(--theme-card);border:1px solid var(--theme-border);
color:var(--uw-muted);padding:.65rem;border-radius:10px;font-size:.85rem;
font-weight:600;cursor:pointer;transition:all .2s;text-align:center;
}
.toggle-btn.active{background:var(--uw-green);color:#000;border-color:var(--uw-green)}
.factura-fields{display:none;margin-top:1rem}
.factura-fields.show{display:block}
.form-submit{
width:100%;background:var(--uw-green);color:#000;border:none;
padding:1rem;border-radius:12px;font-family:var(--uw-font-display);
font-weight:800;font-size:1rem;cursor:pointer;transition:all .25s;margin-top:1.5rem;
}
.form-submit:hover{box-shadow:0 12px 36px rgba(0,255,136,.3)}
.form-submit:disabled{opacity:.5;cursor:not-allowed}
/* ─── SUCCESS ─── */
.success-box{
text-align:center;padding:3rem 1.75rem;
}
.success-icon{font-size:4rem;margin-bottom:1.5rem;animation:popIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes popIn{from{transform:scale(0) rotate(-10deg)}to{transform:scale(1) rotate(0)}}
.success-title{font-family:var(--uw-font-display);font-size:1.6rem;font-weight:800;color:var(--uw-green);margin-bottom:.75rem}
.success-text{color:var(--uw-muted);font-size:.9rem;line-height:1.7}
/* ─── THEME PANEL ─── */
.theme-panel{
position:fixed;bottom:2rem;right:2rem;z-index:800;
background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:16px;
padding:1rem;display:none;gap:.5rem;flex-direction:column;
box-shadow:0 24px 48px rgba(0,0,0,.4);
}
.theme-panel.open{display:flex}
.theme-opt{
background:var(--theme-card);border:1px solid var(--theme-border);
color:var(--theme-text);padding:.6rem 1rem;border-radius:10px;font-size:.82rem;
font-weight:600;cursor:pointer;transition:all .2s;text-align:left;
display:flex;align-items:center;gap:.5rem;
}
.theme-opt:hover{border-color:var(--uw-green);color:var(--uw-green)}
.theme-opt.active{border-color:var(--uw-green);color:var(--uw-green)}
/* ─── TIKTOK HEART ─── */
.tiktok-heart{
position:fixed;pointer-events:none;z-index:9999;font-size:2.5rem;
transform:translate(-50%,-50%);animation:heartFloat 1.2s ease forwards;
}
@keyframes heartFloat{
0%{opacity:1;transform:translate(-50%,-50%) scale(0)}
30%{opacity:1;transform:translate(-50%,-80%) scale(1.2)}
100%{opacity:0;transform:translate(-50%,-200%) scale(.8)}
}
/* ─── NOTIFICATION (TOAST) ─── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  z-index: 9998;
  background: var(--theme-surface);
  border: 1px solid var(--uw-green);
  color: var(--theme-text);
  padding: 0.85rem 1.75rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  
  /* Transición suave para cuando se oculta */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none; /* Evita clics accidentales cuando está oculto */
}

/* Estado Activo con Animación de Entrada y Atención */
.toast.show {
  opacity: 1;
  pointer-events: auto;
  /* Combina la posición final con la animación de "atención" */
  animation: toastEntrada 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
            toastPulso 2s ease-in-out infinite 0.5s; 
}

/* Animación 1: Entrada con rebote sutil (Spring effect) */
@keyframes toastEntrada {
  0% {
    transform: translateX(-50%) translateY(150%) scale(0.9);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Animación 2: Pulso momentáneo para llamar la atención (Loop suave) */
@keyframes toastPulso {
  0%, 100% {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(var(--uw-green-rgb, 0, 255, 0), 0.2);
    transform: translateX(-50%) translateY(-4px); /* Pequeño salto flotante */
  }
}

/* ─── RESPONSIVE TOAST ─── */
@media (max-width: 576px) {
  .toast {
    width: 90%; /* Se adapta a pantallas pequeñas */
    max-width: 400px;
    white-space: normal; /* Permite que el texto salte de línea si es largo */
    text-align: center;
    border-radius: 16px; /* Bordes menos redondeados en móvil queda mejor */
    bottom: 1.5rem;
    padding: 1rem;
  }
}


/* ─── FEATURES ─── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  padding: 1.75rem;
  transition: border-color 0.3s, transform 0.3s ease;
}
.feature-card:hover {
  border-color: var(--uw-green);
  transform: translateY(-4px); /* Añadido un pequeño bounce al hacer hover */
}
.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.feature-title {
  font-family: var(--uw-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-text);
  margin-bottom: 0.5rem;
}
.feature-desc {
  font-size: 0.85rem;
  color: var(--uw-muted);
  line-height: 1.6;
}

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid var(--theme-border);
  padding: 3rem 2rem;
  background: var(--theme-surface);
}
.footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-brand {
  font-family: var(--uw-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--theme-text);
}
.footer-brand span {
  color: var(--uw-green);
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--uw-muted);
}

/* ─── RESPONSIVE GENERAL ─── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero-stats { gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 3rem 1rem; }
}

/* ─── REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}




.banner-renovador {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

/* =════════════════════════════════════════════════════════════
   ESTILOS BASE (Se mantienen las transiciones y bordes comunes)
═════════════════════════════════════════════════════════════= */
.banner-renovador-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 6px;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.banner-renovador-card:hover {
    transform: translateY(-6px) scale(1.01);
}

/* ════════════════════════════════════════════════════════════
   SUB-CLASES CROMÁTICAS INDIVIDUALES
═════════════════════════════════════════════════════════════= */

/* 1. RENOVADOR (Azul) */
.card-renovador {
    background: linear-gradient(135deg, #0a0a0a, #161616, #0044ff);
}
.card-renovador:hover {
    box-shadow: 0 20px 45px rgba(0, 68, 255, 0.35);
}

/* 2. SHAMPOO (Original / Cyan) */
.card-shampoo {
    background: linear-gradient(135deg, #0a0a0a, #1b1b1b, #f1025e);
}
.card-shampoo:hover {
    box-shadow: 0 20px 45px rgba(204, 46, 143, 0.25);
}

/* 3. SILICONA (Blanco / Plata) */
.card-silicona {
    background: linear-gradient(135deg, #0a0a0a, #222222, #ffffff);
}
.card-silicona:hover {
    box-shadow: 0 20px 45px rgba(255, 255, 255, 0.2);
}

/* 4. DESENGRASANTE (Rojo) */
.card-desengrasante {
    background: linear-gradient(135deg, #0a0a0a, #1a0505, #ff0000);
}
.card-desengrasante:hover {
    box-shadow: 0 20px 45px rgba(255, 0, 0, 0.3);
}

/* 5. LAVADO EN SECO (Verde Claro) */
.card-lavado-seco {
    background: linear-gradient(135deg, #0a0a0a, #0b140b, #39ff14);
}
.card-lavado-seco:hover {
    box-shadow: 0 20px 45px rgba(57, 255, 20, 0.25);
}

/* 6. RESTAURADOR DE PLÁSTICOS (Blanco y Rojo - Tricolor Degradado) */
.card-restaurador {
    background: linear-gradient(135deg, #0a0a0a, #2b036b, #d10606);
}
.card-restaurador:hover {
    box-shadow: 0 20px 45px rgba(230, 0, 0, 0.25);
}

/* 7. LIMPIADOR DE TAPIZ (Púrpura / Detailing Profundo) */
.card-limpia-tapiz {
    background: linear-gradient(135deg, #0a0a0a, #130a1c, #8a2be2);
}
.card-limpia-tapiz:hover {
    box-shadow: 0 20px 45px rgba(138, 43, 226, 0.3);
}

/* 8. CERA CARNAUBA (Naranjo) */
.card-carnauba {
    background: linear-gradient(135deg, #0a0a0a, #1a0f02, #ff7b00);
}
.card-carnauba:hover {
    box-shadow: 0 20px 45px rgba(255, 123, 0, 0.35);
}

/* Banners administrados en StockFlow (partes/banners_portada.php): cada uno
   trae sus 3 colores y su brillo en variables, en vez de una clase por banner. */
.uw-bn-card {
    background: linear-gradient(135deg, var(--bn-1, #0a0a0a), var(--bn-2, #161616), var(--bn-3, #0044ff));
}
.uw-bn-card:hover {
    box-shadow: 0 20px 45px var(--bn-brillo, rgba(0, 68, 255, 0.35));
}
video.banner-renovador-img {
    object-fit: cover;
}
.banner-renovador-inner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.banner-renovador-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .banner-renovador {
        max-width: 950px; /* ajusta entre 850 y 1100 */
    }
}

@media (max-width: 768px) {
    .banner-renovador {
        padding-left: 15px;
        padding-right: 15px;
    }
}





.banner-producto {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.banner-producto-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 6px;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Glow Izquierdo */
.banner-producto-card::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(
        circle,
        rgba(255,0,140,.35) 0%,
        rgba(255,0,140,.15) 40%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

/* Glow Derecho */
.banner-producto-card::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(
        circle,
        rgba(var(--uw-acento-rgb),.35) 0%,
        rgba(15,76,255,.18) 40%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

.banner-producto-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 20px 45px rgba(0,0,0,.2),
        0 0 30px rgba(255,0,140,.15),
        0 0 30px rgba(var(--uw-acento-rgb),.15);
}

.banner-producto-inner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
}

.banner-producto-img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width:768px){

    .banner-producto{
        padding-left:12px;
        padding-right:12px;
    }

    .banner-producto-card::before{
        width:140px;
        height:140px;
        left:-60px;
    }

    .banner-producto-card::after{
        width:140px;
        height:140px;
        right:-60px;
    }
}











/* ─── BOTONES FLOTANTES TIKTOK/INSTAGRAM/WHATSAPP (LEGACY?) ───
   Este bloque (hasta la sección de .banner-renovador-slider) parece
   anterior a FloatKit. Si FloatKit ya cubre estos botones flotantes,
   este bloque completo es candidato a eliminarse — confirmar antes. */
      .tiktok-container {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1000;
}

.button {
    display: flex;
    align-items: center;
    border-radius: 50px;
    padding: 15px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-family: Arial, sans-serif;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;
}

.button:hover {
    transform: scale(1.1);
}

.button img {
    width: 32px;
    height: 32px;
    transition: transform 0.5s;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.button span {
    font-size: 18px;
    margin-left: 10px;
    transition: opacity 0.5s, transform 0.5s, margin-right 0.5s;
    animation: text-entrance 1s ease-in-out;
}

@keyframes text-entrance {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hidden1 {
    opacity: 0;
    transform: translateX(50px);
    margin-right: -164px;
}

.hidden2 {
    opacity: 0;
    transform: translateX(50px);
    margin-right: -192px;
}

.shrink {
    padding: 15px;
}

.button::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 35%);
    animation: light-reflection 3s infinite;
}

@keyframes light-reflection {
    0% {
        transform: translate(-30%, -30%);
    }
    50% {
        transform: translate(30%, 30%);
    }
    100% {
        transform: translate(-30%, -30%);
    }
}

.button:focus, .button:active, .button:hover {
    outline: none;
    text-decoration: none;
    color: white;
}

.tiktok-button {
    background-color: #010101;
    color: white;
}

.instagram-button {
    background-color: #E1306C;
    color: white;
    
}

.tiktok-button.hidden1, .instagram-button.hidden2 {
    display: none;
}








  .whatsapp-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    background-color: #25D366;
    color: white;
    border-radius: 50px;
    padding: 15px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-family: Arial, sans-serif;
    z-index: 1000;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-button img {
    width: 32px;
    height: 32px;
    transition: transform 0.5s;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.whatsapp-text {
    font-size: 18px;
    margin-left: 10px;
    transition: opacity 0.5s, transform 0.5s, margin-right 0.5s;
    animation: text-entrance 1s ease-in-out;
}

@keyframes text-entrance {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hidden {
    opacity: 0;
    transform: translateX(50px);
    margin-right: -162px;
}

.shrink {
    padding: 15px;
}

.badge {
    position: absolute;
    top: -65px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 7px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: fadein 1s forwards, swing 1s ease-in-out infinite;
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.badge.hidden {
    display: none;
}









  .banner-renovador-slider {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
}

.banner-renovador-slider .swiper-slide {
    height: auto;
}

.banner-renovador-slider .banner-renovador {
    margin: 0;
    width: 100%;
}

/* Hace que el movimiento continuo sea realmente fluido */
.banner-renovador-slider .swiper-wrapper {
   
  transition-timing-function: linear !important;
}








/* =========================
   CONTENEDOR GENERAL
========================= */

.uw-showcase-section{
    position:relative;
    padding:40px 0;
}

.uw-showcase-header{
    text-align:center;
    margin-bottom:30px;
}

.uw-showcase-header h2{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    color:#fff;
}

.uw-showcase-header span{
    background:linear-gradient(90deg,#00d4ff,#1effc9);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* =========================
   BANNER BASE
========================= */

.uw-banner-link{
    display:block;
    text-decoration:none;
}

.uw-banner-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    transition:.5s ease;
    transform-style:preserve-3d;
}

.uw-banner-card img{
    width:100%;
    display:block;
    border-radius:24px;
    transition:.6s ease;
}

/* brillo animado */
.uw-banner-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transform:skewX(-20deg);
    transition:1s;
    z-index:2;
}

/* hover general */
.uw-banner-card:hover{
    transform:translateY(-8px);
}

.uw-banner-card:hover img{
    transform:scale(1.015);
}

.uw-banner-card:hover::before{
    left:150%;
}

/* =========================
   B2B
========================= */

.uw-b2b-card{
    box-shadow:
        0 0 25px rgba(0,170,255,.30),
        0 0 60px rgba(0,140,255,.25);
}

.uw-b2b-card::after{
    content:'';
    position:absolute;
    inset:-25px;
    border-radius:30px;
    z-index:-1;
    background:
        radial-gradient(
            circle,
            rgba(0,160,255,.45) 0%,
            transparent 70%
        );
    filter:blur(50px);
}

.uw-b2b-card:hover{
    box-shadow:
        0 0 40px rgba(0,180,255,.55),
        0 0 120px rgba(0,140,255,.45);
}

/* =========================
   BLOG
========================= */

.uw-blog-card{
    box-shadow:
        0 0 25px rgba(0,255,200,.20),
        0 0 60px rgba(0,180,255,.20);
}

.uw-blog-card::after{
    content:'';
    position:absolute;
    inset:-25px;
    border-radius:30px;
    z-index:-1;
    background:
        radial-gradient(
            circle,
            rgba(0,255,180,.35) 0%,
            transparent 70%
        );
    filter:blur(55px);
}

.uw-blog-card:hover{
    box-shadow:
        0 0 40px rgba(0,255,180,.45),
        0 0 120px rgba(0,180,255,.35);
}

/* =========================
   ÚLTIMAS NOVEDADES: tarjetas de artículos bajo el banner
   (las pone el script "Últimas novedades" de index.php)
========================= */

.uw-blog-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.75rem 1.5rem;
}

.uw-blog-header .section-sub{
    margin-top:.5rem;
}

.uw-blog-ver-todo{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--uw-green);
    font-weight:700;
    font-size:.9rem;
    text-decoration:none;
    white-space:nowrap;
}

.uw-blog-ver-todo i,
.uw-blog-post-mas i{
    transition:transform .2s ease;
}

.uw-blog-ver-todo:hover i,
.uw-blog-post:hover .uw-blog-post-mas i{
    transform:translateX(3px);
}

.uw-blog-posts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem;
    margin-top:1.75rem;
}

.uw-blog-post{
    display:flex;
    flex-direction:column;
    background:var(--theme-card);
    border:1px solid var(--theme-border);
    border-radius:18px;
    overflow:hidden;
    color:var(--theme-text);
    text-decoration:none;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.uw-blog-post:hover{
    transform:translateY(-4px);
    border-color:var(--uw-green);
    box-shadow:0 14px 34px rgba(0,0,0,.25);
}

.uw-blog-post:focus-visible{
    outline:2px solid var(--uw-green);
    outline-offset:3px;
}

.uw-blog-post-img{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--theme-surface);
    display:flex;
    align-items:center;
    justify-content:center;
}

.uw-blog-post-img img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.uw-blog-post:hover .uw-blog-post-img img{
    transform:scale(1.04);
}

/* Artículo sin foto */
.uw-blog-post-img > i{
    font-size:2rem;
    color:var(--uw-green);
    opacity:.6;
}

.uw-blog-post-body{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    padding:1.1rem 1.25rem 1.25rem;
    min-width:0;
}

.uw-blog-post-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    font-size:.72rem;
}

.uw-blog-post-tag{
    color:var(--uw-green);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.uw-blog-post-meta time{
    color:var(--uw-muted);
    white-space:nowrap;
}

.uw-blog-post-title{
    margin:0;
    font-family:var(--uw-font-display);
    font-size:1.02rem;
    font-weight:700;
    line-height:1.35;
    color:var(--theme-text);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.uw-blog-post-resumen{
    margin:0;
    color:var(--uw-muted);
    font-size:.85rem;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.uw-blog-post-mas{
    margin-top:auto;
    padding-top:.35rem;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--uw-green);
    font-size:.85rem;
    font-weight:700;
}

/* Mientras llegan los artículos */
.uw-blog-post.is-cargando{
    pointer-events:none;
}

.uw-blog-post.is-cargando .uw-blog-post-img,
.uw-blog-esq{
    background:linear-gradient(90deg, var(--theme-surface) 25%, rgba(var(--uw-acento-rgb),.10) 50%, var(--theme-surface) 75%);
    background-size:200% 100%;
    animation:uwBlogEsq 1.4s ease-in-out infinite;
}

.uw-blog-esq{
    display:block;
    width:100%;
    height:.8rem;
    border-radius:6px;
}

@keyframes uwBlogEsq{
    from{ background-position:200% 0; }
    to{ background-position:-200% 0; }
}

.uw-blog-vacio{
    grid-column:1 / -1;
    text-align:center;
    color:var(--uw-muted);
    padding:1rem;
}

.uw-blog-vacio a{
    color:var(--uw-green);
    font-weight:700;
}

/* Teléfono y tablet angosta: filas compactas con la foto a la izquierda */
@media(max-width:860px){

    .uw-blog-posts{
        grid-template-columns:1fr;
        gap:.85rem;
        margin-top:1.25rem;
    }

    .uw-blog-post{
        flex-direction:row;
    }

    .uw-blog-post-img{
        aspect-ratio:auto;
        width:160px;
        min-height:104px;
        flex-shrink:0;
    }

    .uw-blog-post-body{
        gap:.3rem;
        padding:.8rem .95rem;
    }

    .uw-blog-post-title{
        font-size:.95rem;
    }

    .uw-blog-post-mas{
        display:none;
    }

}

/* Teléfono: solo etiqueta, fecha y título */
@media(max-width:599px){

    .uw-blog-post-img{
        width:112px;
    }

    .uw-blog-post-resumen{
        display:none;
    }

}

@media(prefers-reduced-motion:reduce){

    .uw-blog-post,
    .uw-blog-post-img img{
        transition:none;
    }

    .uw-blog-post:hover,
    .uw-blog-post:hover .uw-blog-post-img img{
        transform:none;
    }

    .uw-blog-post.is-cargando .uw-blog-post-img,
    .uw-blog-esq{
        animation:none;
    }

}
/* =========================
   GLOW LATERAL DESKTOP
========================= */

@media(min-width:1200px){

    .uw-b2b-card::after{
        inset:-40px -120px;
        filter:blur(90px);
    }

    .uw-blog-card::after{
        inset:-40px -120px;
        filter:blur(90px);
    }

}

/* Glow dinámico */

.uw-banner-card{
    position:relative;
    overflow:hidden;
    transform-style:preserve-3d;

    --mouse-x:50%;
    --mouse-y:50%;
}

.uw-banner-card .uw-mouse-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;

    background:
        radial-gradient(
            500px circle at var(--mouse-x) var(--mouse-y),
            rgba(255,255,255,.12),
            transparent 45%
        );

    opacity:0;
    transition:opacity .3s ease;
}

.uw-banner-card:hover .uw-mouse-glow{
    opacity:1;
}

/* profundidad */

.uw-banner-card img{
    transform:translateZ(0);
    transition:
        transform .4s ease,
        filter .4s ease;
}

.uw-banner-card:hover img{
    filter:brightness(1.04);
}

.uw-banner-card::before{
    content:'';
    position:absolute;
    inset:-100%;
    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,255,255,.18) 50%,
            transparent 65%
        );

    transform:translateX(-100%);
    transition:transform .8s ease;
}

.uw-banner-card:hover::before{
    transform:translateX(100%);
}




/* ═══════════════════════════════════════════════
   HOVER EFFECTS & SLIDER CARDS CONFIG
═══════════════════════════════════════════════ */

/* Contenedor de imágenes/videos adaptado para Swiper en Card */
.product-img-slider {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.product-img-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.02);
}
.product-img-slider img, 
.product-img-slider video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Área de Precios y Acciones con "Aire" */
.product-footer {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column; /* Cambiado a columna para separar precio de botones */
  gap: 12px; /* Espaciado controlado o "aire" intermedio */
  width: 100%;
}

.product-price-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

/* Estado normal del footer y controles de cantidad ocultos */
.card-hover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px; /* Evita saltos de línea bruscos */
}

.card-qty-selector {
  display: none; /* Se activa en hover */
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  height: 38px;
}
[data-theme="light"] .card-qty-selector {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0,0,0,0.1);
}
.card-qty-btn {
  background: none;
  border: none;
  color: var(--text-color);
  padding: 0 12px;
  height: 100%;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.card-qty-btn:hover {
  background: rgba(var(--primary-rgb), 0.2);
}
.card-qty-val {
  padding: 0 4px;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  font-size: 0.9rem;
}

/* El botón de agregar ahora ocupa todo el ancho disponible si no hay cantidades */
.btn-add {
  flex: 1;
  height: 38px;
  white-space: nowrap;
}

/* Desglose de productos de un Pack */
.pack-items-preview {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="light"] .pack-items-preview {
  border-top-color: rgba(0,0,0,0.1);
}
.pack-subitem {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* INTERACTIVIDAD EN HOVER DE LA CARD
   (El hover de la tarjeta está arriba, en "EL BORDE VIVO DE LAS TARJETAS":
   acá había una segunda copia que lo pisaba —subía 4px y ponía una sombra
   negra plana— y por eso el hover se veía más pobre de lo que decía el
   código. Quedan solo las cosas que no están allá.) */
/* Activar selectores de cantidad en hover si el producto ya está en el carrito */
.product-card:hover .card-qty-selector.has-items {
  display: flex;
}
.product-card:hover .card-qty-selector.has-items + .btn-add {
  display: none; /* Oculta el botón simple si ya hay unidades controlables */
}

/* Ajuste de Swiper embebido para que no rompa el diseño */
.product-img-slider .swiper-button-next,
.product-img-slider .swiper-button-prev {
  scale: 0.6;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.product-card:hover .swiper-button-next,
.product-card:hover .swiper-button-prev {
  opacity: 0.8;
}
.product-img-slider .swiper-pagination-bullet-active {
  background: #fff !important;
}

/* Corrección de área de click en sugerencias */
.suggested-item button {
  position: relative;
  z-index: 2;
}




.btn-cta-products {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    padding: 18px 40px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    background: linear-gradient(90deg, var(--uw-green), var(--uw-green-menta));
    color: #000;

    box-shadow:
        0 10px 30px rgba(var(--uw-acento-rgb),.35),
        0 0 25px rgba(145, 248, 184, .25);

    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.btn-cta-products:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 18px 40px rgba(var(--uw-acento-rgb),.45),
        0 0 35px rgba(145, 248, 184, .35);
}

.btn-cta-products::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80px;
    height: 100%;
    background: rgba(255,255,255,.35);
    transform: skewX(-25deg);
    transition: .8s;
}

.btn-cta-products:hover::after {
    left: 140%;
}




/* ════════════════════════════════════════════════════════════
   CONTENEDORES RESPONSIVOS (De Scroll a Multi-línea)
════════════════════════════════════════════════════════════ */
.filter-bar-container,
.sub-filter-bar-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px;
  margin-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filter-bar-container::-webkit-scrollbar,
.sub-filter-bar-container::-webkit-scrollbar {
  display: none;
}

.sub-filter-bar-container {
  margin-top: -4px;
  margin-bottom: 24px;
  gap: 6px;
}

/* Media Query: Cuando la pantalla sea menor a 768px (Celulares y Tablets) */
@media (max-width: 768px) {
  .filter-bar-container,
  .sub-filter-bar-container {
    overflow-x: visible; /* Rompe el scroll horizontal */
    flex-wrap: wrap;     /* Permite que salten de línea hacia abajo */
    padding: 2px 0;
  }

  .filter-btn {
    font-size: 0.8rem;    /* Un toque más pequeños en celular */
    padding: 0.4rem 0.8rem;
  }

  .subfilter-btn {
    font-size: 0.7rem;    /* Un toque más pequeños en celular */
    padding: 0.25rem 0.65rem;
  }
}

/* ════════════════════════════════════════════════════════════
   BOTONES DE CATEGORÍA PRINCIPAL (Compactos)
════════════════════════════════════════════════════════════ */
.filter-btn {
  font-family: var(--uw-font-display);
  font-size: 0.85rem; /* Tamaño compacto */
  font-weight: 500;
  color: var(--uw-muted);
  background: var(--theme-card);
  border: 1px solid var(--theme-border);
  padding: 0.45rem 1rem;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap; /* Evita que el texto se parta en dos líneas */
  letter-spacing: .03em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-btn:hover {
  color: var(--theme-text);
  border-color: var(--uw-green);
  background: rgba(var(--uw-acento-rgb),0.05);
}

/* Estado Activo de Categoría Principal */
.filter-btn.active {
  color: var(--uw-white);
  background: var(--uw-green);
  border-color: var(--uw-green);
  box-shadow: 0 4px 12px var(--uw-green-glow);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   BOTONES DE SUBCATEGORÍA (Aún más pequeños y sutiles)
════════════════════════════════════════════════════════════ */
.subfilter-btn {
  font-family: var(--uw-font-body);
  font-size: 0.75rem; /* Ultra compacto */
  font-weight: 500;
  color: var(--uw-muted);
  background: transparent; /* Fondo transparente para diferenciarlo del principal */
  border: 1px solid var(--theme-border);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.subfilter-btn:hover {
  color: var(--theme-text);
  background: var(--theme-card);
}

/* Estado Activo de Subcategoría */
.subfilter-btn.active {
  color: var(--uw-green);
  background: var(--uw-green-glow); /* Efecto translúcido del color principal */
  border-color: var(--uw-green);
  font-weight: 700;
}




/* ── PANEL "MI CUENTA": contenido interno. El botón del navbar y la
   posición del panel están en navbar-mejoras.css. ── */
.dropdown-header-pestaña { background: var(--theme-card) !important; padding: 16px !important; border-bottom: 1px solid var(--theme-border) !important; }
.dropdown-saludo-pestaña { font-family: var(--uw-font-display) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--theme-text) !important; margin: 0 0 2px 0 !important; }
.tag-cliente-pestaña { font-size: 10px !important; font-weight: 700 !important; color: var(--uw-green) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.dropdown-body-pestaña { padding: 16px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; background: var(--theme-surface) !important; }
.perfil-dato-item-pestaña { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.dato-label-pestaña { font-size: 11px !important; font-weight: 600 !important; color: var(--uw-muted) !important; text-transform: uppercase !important; }
.dato-valor-pestaña { font-size: 13.5px !important; font-weight: 500 !important; color: var(--theme-text) !important; word-break: break-all !important; margin: 0 !important; }
.dropdown-footer-pestaña { border-top: 1px solid var(--theme-border) !important; padding: 12px 16px 16px 16px !important; background: var(--theme-card) !important; }
.btn-logout-pestaña { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; background: rgba(239, 68, 68, 0.08) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; padding: 10px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600; font-family: var(--uw-font-display) !important; cursor: pointer !important; }
.campo-grupo-pestaña { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 12px !important; }
.input-pestaña-mini { width: 100% !important; box-sizing: border-box !important; padding: 10px 12px !important; border: 1px solid var(--theme-border) !important; border-radius: 8px !important; font-size: 13px !important; background: var(--theme-card) !important; color: var(--theme-text) !important; }
.input-pestaña-mini:focus { outline: none !important; border-color: var(--uw-green) !important; box-shadow: 0 0 0 3px var(--uw-green-glow) !important; }
.btn-login-pestaña-submit { width: 100% !important; background: var(--uw-green) !important; color: var(--uw-black) !important; border: none !important; padding: 11px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; font-family: var(--uw-font-display) !important; cursor: pointer !important; }
.btn-login-pestaña-submit:disabled { background: var(--theme-border) !important; color: var(--uw-muted) !important; cursor: not-allowed !important; opacity: 0.5 !important; }
.enlace-login-completo-pestaña { font-size: 12px !important; color: var(--uw-muted) !important; text-decoration: none !important; }
.text-center-pestaña { text-align: center !important; }
.nav-mini-mensaje-pestaña { font-size: 11.5px !important; padding: 8px 10px !important; border-radius: 6px !important; margin-bottom: 12px !important; font-weight: 600 !important; }
.nav-mini-mensaje-pestaña.exito { background: rgba(46, 198, 162, 0.1) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; }
.nav-mini-mensaje-pestaña.error { background: rgba(239, 68, 68, 0.1) !important; color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2) !important; }






.product-slider-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff; /* Ajusta según el color de fondo de tus tarjetas */
    text-align: center;
    margin-bottom: 12px; /* Espacio para separar el título de la imagen */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}





/* ════════════════════════════════════════════════════════════
   SECCIÓN TESTIMONIOS (Diseño Centrado y Premium)
═════════════════════════════════════════════════════════════= */
#testimonios {
    background: rgba(255, 255, 255, 0.02);
    padding: 80px 20px;
    border-radius: 24px;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-content: center;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center; /* Centra todo el contenido de la tarjeta */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos internos en el eje horizontal */
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.testimonial-stars {
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.testimonial-card .feature-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #fff;
}

.testimonial-body {
    font-style: italic;
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.testimonial-divider {
    width: 50px;
    border: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    margin: 0 auto 20px auto;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author strong {
    color: #fff;
    font-size: 1rem;
}

.testimonial-author span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* Ajuste auxiliar para el párrafo introductorio */
.section-sub.mx-auto {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}











/* ============================================================
   SECCIÓN BUSCADOR (Efecto Protagonista y Blur)
   ============================================================ */
/* ============================================================
   SECCIÓN BUSCADOR (Efecto Protagonista y Blur con Variables)
   ============================================================ */
.search-section {
    position: relative;
    padding: 60px 20px;
    width: 100%;
    z-index: 10;
    transition: z-index 0.3s step-end;
}

/* Capa oscura y blur adaptada al fondo de la web */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 990;
}

.buscador-container {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 995;
}

/* ESTADO ACTIVO */
.search-section.search-active {
    z-index: 999;
}

.search-section.search-active .search-overlay {
    opacity: 1;
    pointer-events: auto;
}

.search-section.search-active .buscador-container {
    max-width: 680px; 
    transform: scale(1.03);
}

/* Envoltura del Input — Resplandor Animado en Foco */
.search-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 50px;
    padding: 14px 24px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-input-wrapper:focus-within {
    background: var(--theme-card);
    border-color: var(--uw-green);
    /* Inicia la animación de pulso usando tu color de brillo */
    animation: pulse-glow 2s infinite alternate ease-in-out;
}

.search-input-wrapper input {
    background: transparent;
    border: none;
    color: var(--theme-text);
    width: 100%;
    padding-left: 12px;
    font-size: 1rem;
    font-family: var(--uw-font-body);
}

.search-input-wrapper input:focus {
    outline: none;
}

.search-icon { 
    color: var(--uw-muted); 
    font-size: 1.1rem;
    transition: color 0.3s;
}
.search-input-wrapper:focus-within .search-icon {
    color: var(--uw-green);
}

#btn-limpiar-busqueda {
    background: transparent;
    border: none;
    color: var(--uw-muted);
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}
#btn-limpiar-busqueda:hover { color: var(--theme-text); }

/* Panel Flotante de Resultados */
.search-results-panel {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.search-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--uw-muted);
    font-family: var(--uw-font-display);
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

/* ============================================================
   TARJETA PRINCIPAL (Mejorada con Efecto Hover Completo)
   ============================================================ */
.search-card-main {
    display: flex;
    gap: 24px;
    background: var(--theme-card);
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--theme-border);
    margin-bottom: 25px;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* Efecto reactivo premium al pasar sobre la tarjeta */
.search-card-main:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--uw-acento-rgb),0.3); /* Un toque de tu verde en el borde */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--uw-acento-rgb),0.05);
}

.search-card-img-wrapper {
    position: relative;
    width: 120px; 
    height: 120px; 
    background: #141b2b; 
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden; 
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.search-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transform: scale(1.15); 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-card-main:hover .search-card-img-wrapper img {
    transform: scale(1.25); /* Tu excelente efecto de zoom un pelito más fluido */
}

.search-card-emoji {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.3rem;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    padding: 2px;
}

.search-card-info h3 { 
    font-size: 1.3rem; 
    margin-bottom: 4px; 
    color: var(--theme-text); 
    font-family: var(--uw-font-display); 
}
.search-card-cat { 
    font-size: 0.85rem; 
    color: var(--uw-muted); 
    margin-bottom: 8px; 
}
.search-card-price { 
    font-size: 1.2rem; 
    font-weight: bold; 
    color: var(--theme-text); 
    margin-bottom: 14px; 
}

.search-card-actions { display: flex; gap: 12px; }

.btn-search-details {
    padding: 9px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--theme-text);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-search-details:hover { 
    background: rgba(255, 255, 255, 0.12); 
    color: var(--uw-white);
}

/* ============================================================
   BOTÓN AÑADIR (Llamativo, Iluminación y Micro-Efecto Destello)
   ============================================================ */
.btn-search-cart {
    position: relative;
    padding: 9px 22px;
    border-radius: 30px;
    background: var(--uw-green-dim); 
    color: var(--uw-black); 
    font-weight: 600;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    overflow: hidden; /* Necesario para que el destello no se salga del botón */
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Capa de destello que cruza el botón cíclicamente */
.btn-search-cart::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: button-shine 4s infinite ease-in-out;
}

.btn-search-cart:hover { 
    background: var(--uw-green); 
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--uw-green-glow);
}

.btn-search-cart:active { 
    transform: translateY(1px) scale(0.97); 
}


/* ============================================================
   BLOQUE SUGERENCIAS
   ============================================================ */
.sugerencias-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-card-sug {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 16px; 
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.search-card-sug:hover { 
    background: var(--theme-card); 
    border-color: var(--theme-border);
}

.search-card-sug img { 
    width: 54px; 
    height: 54px; 
    object-fit: cover; 
    transform: scale(1.1); 
    background: #141b2b; 
    border-radius: 10px; 
    flex-shrink: 0;
}

.search-sug-info { 
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
    align-items: center; 
    gap: 15px; 
}
.search-sug-info h5 { 
    font-size: 1rem; 
    color: var(--theme-text); 
    margin: 0; 
    font-weight: 500; 
}
.search-sug-info p { 
    font-size: 0.95rem; 
    color: var(--uw-muted); 
    margin: 0; 
    font-weight: bold; 
    white-space: nowrap;
}
.link-sug-detail { 
    font-size: 0.9rem; 
    color: var(--uw-green); 
    text-decoration: none; 
    font-weight: 600; 
    transition: color 0.2s; 
}
.link-sug-detail:hover { color: var(--uw-white); }


/* ============================================================
   KEYFRAMES / ANIMACIONES
   ============================================================ */

/* Respiración/Pulso del resplandor exterior del input */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 12px rgba(var(--uw-acento-rgb),0.2);
    }
    100% {
        box-shadow: 0 0 28px rgba(var(--uw-acento-rgb),0.45);
    }
}

/* Destello sutil de luz que cruza de izquierda a derecha el botón añadir */
@keyframes button-shine {
    0% {
        left: -150%;
    }
    30% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}


/* ============================================================
   TEXTOS DEL BUSCADOR (SEO & UX)
   ============================================================ */
.search-header-seo {
    text-align: center;
    margin-bottom: 25px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.search-header-seo h2 {
    font-family: var(--uw-font-display);
    color: var(--theme-text);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.search-header-seo p {
    font-family: var(--uw-font-body);
    color: var(--uw-muted);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.4;
}

/* COMPORTAMIENTO INTERACTIVO: 
   Atenúa sutilmente los títulos cuando el buscador esté activo para dar prioridad a los resultados */
.search-section.search-active .search-header-seo {
    opacity: 0.85;
    transform: translateY(-2px);
}


/* ============================================================
   RESPONSIVE: OPTIMIZACIÓN PREMIUM PARA SMARTPHONES (<= 575px)
   ============================================================ */
@media (max-width: 575.98px) {
    /* Forzar que la tarjeta pase a diseño vertical */
    .search-card-main {
        flex-direction: column;
        align-items: stretch; /* Permite que el contenido use todo el ancho */
        gap: 16px;
        padding: 16px;
    }

    /* Centrar y agrandar el contenedor de la imagen en móviles */
    .search-card-img-wrapper {
        width: 100%;
        height: 160px; /* Un poco más alta para que destaque */
        margin: 0 auto;
    }

    /* Ajustar los textos alineándolos a la izquierda de forma limpia */
    .search-card-info {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .search-card-info h3 {
        font-size: 1.15rem; /* Un pelito más compacto para pantallas pequeñas */
    }
    
    /* Botones en bloque (uno al lado del otro o estirados) */
    .search-card-actions {
        width: 100%;
        margin-top: 5px;
    }

    /* Hacer los botones simétricos y fáciles de presionar en el celular */
    .btn-search-details, 
    .btn-search-cart {
        flex: 1; /* Se reparten el 50% de la tarjeta cada uno */
        text-align: center;
        padding: 11px 0; /* Un toque más altos para mejorar el "Fat Finger" */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }
}
/* ============================================================
   SISTEMA CORE DE COUNTDOWN & FOMO ENGINE
   ============================================================ */

.product-countdown {
    width: 100% !important;
    display: flex;              
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 8px 12px;          
    border-radius: 6px;         
    font-weight: 600;
    font-size: 0.9rem;          
    border: 1px solid transparent;
    transition: all 0.4s ease;  
    position: relative;
    overflow: hidden; 
    cursor: help;
}

.countdown-timer-value {
    letter-spacing: 0.5px;
    white-space: nowrap; /* Evita que el texto del reloj se divida en dos renglones */
}

/* ─── SÚPER TOOLTIP FLOTANTE ULTRA-RÁPIDO (CSS Puro) ─── */
.product-countdown::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: #11141a;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    width: 200px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 99;
}
.product-countdown::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #11141a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 99;
}
/* Activador instantáneo sin delays nativos */
.product-countdown:hover::after,
.product-countdown:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ─── PALETAS VISUALES DE SUBASTA EN VIVO ─── */

/* Neutral (+5 Días) */
.product-countdown.status-neutral {
    background-color: rgba(136, 136, 136, 0.08) !important;
    border-color: rgba(136, 136, 136, 0.15) !important;
    color: #777 !important; 
    font-size: 0.85rem; 
}

/* Descuento de una campaña (catalogo.js pone .cd-campana y --cp-color): lejos del
   término, el color de la campaña; en las últimas horas, los de urgencia de siempre. */
.product-countdown.cd-campana.status-neutral,
.product-countdown.cd-campana.status-llamativo {
    background-color: color-mix(in srgb, var(--cp-color) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--cp-color) 40%, transparent) !important;
    color: var(--cp-color) !important;
}

/* Llamativo (2 a 5 Días) */
.product-countdown.status-llamativo {
    background-color: rgba(52, 152, 219, 0.1) !important; 
    border-color: rgba(52, 152, 219, 0.3) !important;
    color: #2980b9 !important;
}

/* Urgente (Menos de 48h) */
.product-countdown.status-urgente {
    background-color: rgba(230, 126, 34, 0.1) !important; 
    border-color: rgba(230, 126, 34, 0.4) !important;
    color: #d35400 !important;
    box-shadow: 0 2px 4px rgba(230, 126, 34, 0.05);
}

/* Crítico (3 a 5 Horas) */
.product-countdown.status-critico {
    background-color: #e74c3c !important; 
    border-color: #c0392b !important;
    color: #ffffff !important;            
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.2);
    animation: pulseUrgenciaCritica 1s infinite alternate; 
}

/* Menos de 3 Horas (Efecto Barrido Eléctrico) */
.product-countdown.status-urgencia-3h {
    background: linear-gradient(135deg, #e67e22, #e74c3c) !important;
    border-color: #d35400 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(230, 126, 34, 0.5);
}
.product-countdown.status-urgencia-3h::after,
.product-countdown.status-urgencia-1h::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: shimmerEfecto 2s infinite;
}

/* Menos de 1 Hora (Brillo Cyber-Glow) */
.product-countdown.status-urgencia-1h {
    background: linear-gradient(135deg, #e74c3c, #8e44ad) !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
}
.product-card.card-status-urgencia-1h .btn-add {
    background: linear-gradient(135deg, #e74c3c, #8e44ad) !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Últimos 15 Minutos (FOMO Feroz) */
.product-countdown.status-ultimos-minutos {
    background: linear-gradient(135deg, #ff0000, #3a0007) !important;
    border-color: #ff4a4a !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
    animation: fomoAgresivo 0.6s infinite alternate; 
}
.product-card.card-status-ultimos-minutos {
    border-color: rgba(255, 0, 0, 0.4) !important;
}
.product-card.card-status-ultimos-minutos .btn-add {
    background: #ff0000 !important;
    color: #ffffff !important;
    font-weight: 800;
    text-transform: uppercase;
    animation: latidoBotonFomo 0.6s infinite alternate;
}

/* ─── 🚨 CONTROL DEFINITIVO: ÚLTIMOS 30 SEGUNDOS (SEGUNDOS NETOS) ─── */
.product-countdown.status-cuenta-regresiva {
    background: #000000 !important;
    border: 1px solid #ff3838 !important;
    color: #ff3838 !important;
    font-weight: 900;
    animation: sismoAlerta 0.15s infinite linear;
    box-shadow: 0 0 15px rgba(255, 56, 56, 0.6);
}
.product-card.card-status-cuenta-regresiva {
    border-color: #ff3838 !important;
    box-shadow: 0 0 25px rgba(255, 56, 56, 0.3);
    animation: pulseCardCritica 0.8s infinite alternate ease-in-out;
}
.product-card.card-status-cuenta-regresiva .btn-add {
    background: linear-gradient(90deg, #ff3838, #ff0000) !important;
    color: #ffffff !important;
    font-weight: 900;
    letter-spacing: 0.5px;
    animation: latidoBotonFomo 0.4s infinite alternate;
}

/* ─── ESTADO: EXPIRADO (Vuelta Rentable a la Normalidad) ─── */
.product-countdown.status-expirado {
    background-color: rgba(136, 136, 136, 0.1) !important;
    border-color: rgba(136, 136, 136, 0.2) !important;
    color: #888 !important;
    font-size: 0.85rem;
}
.product-card.card-status-expirado {
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
    animation: none !important;
}
.product-card.card-status-expirado .btn-add {
    background: #28a745 !important; /* Retorno a la normalidad comercial */
    color: #fff !important;
    opacity: 1;
    font-weight: normal;
    animation: none !important;
    box-shadow: none !important;
}

/* ============================================================
   RESPONSIVE DESIGN AUTOMÁTICO (MEDIA QUERIES)
   ============================================================ */

@media (max-width: 768px) {
    /* Reduce fuentes para que los textos largos de segundos no rompan filas */
    .product-countdown {
        padding: 6px 8px;
    }
    .product-countdown.status-cuenta-regresiva {
        font-size: 0.75rem !important; /* Encaje perfecto */
    }
    .product-countdown.status-ultimos-minutos {
        font-size: 0.85rem !important;
    }
    .countdown-timer-value {
        letter-spacing: 0px;
    }
    /* El tooltip en móviles se re-ajusta para no salirse de los lados de la pantalla */
    .product-countdown::after {
        width: 160px;
        font-size: 0.7rem;
    }
}

/* ============================================================
   ANIMACIONES CORE SYSTEM
   ============================================================ */
@keyframes pulseUrgenciaCritica {
    0% { transform: scale(1); box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2); }
    100% { transform: scale(1.02); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); background-color: #c0392b !important; }
}
@keyframes shimmerEfecto {
    0% { left: -150%; }
    50% { left: 150%; }
    100% { left: 150%; }
}
@keyframes fomoAgresivo {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.02); filter: brightness(1.25); }
}
@keyframes latidoBotonFomo {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.03); box-shadow: 0 0 14px rgba(255, 0, 0, 0.8); filter: brightness(1.2); }
}
@keyframes sismoAlerta {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0.4px, -0.4px); }
    50% { transform: translate(-0.4px, 0.4px); }
    75% { transform: translate(0.4px, 0.4px); }
    100% { transform: translate(0, 0); }
}
@keyframes pulseCardCritica {
    0% { transform: scale(1); }
    100% { transform: scale(1.01); }
}








/* ============================================================
   ESTILOS DE LA LUPITA EN EL NAV (Sutil y Adaptable)
   ============================================================ */
/* .nav-actions ya está definido en la sección NAV (gap:.75rem == 12px,
   mismo valor — no se repite acá para evitar el duplicado). */
.btn-search-nav {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde ultra sutil */
    color: var(--theme-text, #fff);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

/* Si usas emojis en vez de Bootstrap Icons, se adapta igual */
.btn-search-nav i {
    font-size: 0.9rem;
    color: var(--uw-muted, #888);
    transition: color 0.2s ease;
}

.btn-search-nav:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-search-nav:hover i {
    color: var(--uw-green, #2ec6cc); /* Destello sutil al pasar el mouse */
}

.btn-search-nav:active {
    transform: scale(0.96);
}

/* RESPONSIVE: Ajuste milimétrico para Smartphone */
@media (max-width: 575.98px) {
    .nav-actions {
        gap: 8px; /* Compactar espacio en celulares */
    }

    /* En el celular ocultamos el texto y dejamos solo la lupita redonda icónica */
    .btn-search-nav {
        padding: 8px;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 50%; /* Se vuelve un círculo sutil */
    }
    
    .btn-search-nav span {
        display: none; /* Oculta la palabra 'Buscar' */
    }
    
    .btn-search-nav i {
        font-size: 1rem;
        color: var(--theme-text, #fff); /* Más visible en móvil */
    }

    /* Opcional: Compactar el texto del carrito para asegurar espacio óptimo */
    .btn-text-cart {
        display: none; 
    }
}














/* ============================================================
   CARRITO DRAWER: CAPAS Y CONTROL DE CAPAS SOBRE TODO (z-index)
   ============================================================ */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2000; /* Por encima de buscadores y navs */
}
.cart-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -420px; /* Escondido por defecto */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--theme-surface, #111622);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2001; /* El rey de la pantalla */
}
.cart-drawer.open {
    transform: translateX(-420px);
}

/* Contenedores Internos con scroll independiente */
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
}

/* Miniaturas de imágenes en los items del carrito */
.cart-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--theme-border, rgba(255,255,255,0.06));
    align-items: flex-start;
}
.cart-item-img-wrapper {
    width: 64px;
    height: 64px;
    background: #141b2b;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.04);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-item-emoji-fallback {
    font-size: 1.5rem;
}

/* Alertas de Ahorros */
.cart-discount-savings {
    font-size: 0.78rem;
    color: #10f181;
    background: rgba(255, 74, 74, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
    font-weight: 500;
}

.cart-total-savings-summary {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #30f85b;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0 4px;
}

/* ============================================================
   NUEVA JERARQUÍA DE BOTONES (Pie del Carrito)
   ============================================================ */
.cart-foot {
    background: var(--theme-card, #171e2e);
    border-top: 1px solid var(--theme-border, rgba(255,255,255,0.08));
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botón Primario: Finalizar Compra */
.btn-checkout {
    width: 100%;
    padding: 14px;
    background: var(--uw-green, #2ec6cc);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.2s, background 0.2s;
}
.btn-checkout:hover {
    background: var(--uw-green-bright, #3be0e7);
    transform: translateY(-1px);
}

/* Botón Secundario: Seguir Comprando */
.btn-continue-shopping {
    width: 100%;
    padding: 11px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-text, #fff);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.btn-continue-shopping:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Botón Terciario Enlace: Vaciar Carrito (Sutil al fondo) */
.btn-clear-cart {
    background: transparent;
    border: none;
    color: var(--uw-muted, #888);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 4px;
    transition: color 0.2s;
    align-self: center;
}
.btn-clear-cart:hover {
    color: #ff4a4a;
}








/* Contenedor principal en dos columnas */
/* Nota: .checkout-large-box y .checkout-layout-container "reales" están
   consolidados más abajo, junto a "MÁRGENES, BOTONES SELECTORES AISLADOS" */
.checkout-form-column {
    flex: 1.2;
    max-height: 75vh;
    overflow-y: auto;
    padding-right: 10px;
}

.checkout-summary-column {
    flex: 0.8;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--theme-border, rgba(255,255,255,0.05));
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: max-content;
}

.checkout-section-title {
    font-size: 0.95rem;
    color: var(--uw-green);
    font-family: var(--uw-font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 6px;
}
.checkout-section-title:first-of-type { margin-top: 0; }

.checkout-summary-title {
    font-size: 1.1rem;
    color: var(--theme-text);
    font-family: var(--uw-font-display);
    margin-bottom: 15px;
}

/* Lista de productos revisados */
.checkout-review-items {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 5px;
}

/* Caja de desglose de precios */
.checkout-totals-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 14px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--uw-muted);
}
.total-row.discount { color: #ff4a4a; }
.total-row.final-total {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 8px;
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--theme-text);
}

/* Selector de métodos de pago Premium */
.payment-methods-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.payment-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--theme-border, rgba(255,255,255,0.06));
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.payment-option-card:hover {
    background: rgba(255, 255, 255, 0.04);
}
.payment-option-card.active {
    border-color: var(--uw-green);
    background: rgba(var(--uw-acento-rgb),0.04);
}
.payment-option-card input[type="radio"] {
    accent-color: var(--uw-green);
    transform: scale(1.15);
}
.pay-info { display: flex; align-items: center; gap: 12px; }
.pay-icon { font-size: 1.5rem; }
.pay-title { font-size: 0.9rem; font-weight: 600; color: var(--theme-text); }
.pay-desc { font-size: 0.78rem; color: var(--uw-muted); }

/* Módulo complementario de micro cross-selling */
.checkout-last-minute-suggestions h5 {
    font-size: 0.8rem;
    color: #ff9f43;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* RESPONSIVE: Adaptación total en smartphones */
@media (max-width: 820px) {
    .checkout-layout-container {
        flex-direction: column-reverse; /* El formulario queda arriba y el resumen abajo */
        gap: 20px;
    }
    .checkout-form-column {
        max-height: none;
        overflow: visible;
    }
}





/* ════════════════════════════════════════════════════════════
   PERSONALIZACIÓN DE SCROLLBARS INTERNOS DEL MODAL
   ════════════════════════════════════════════════════════════ */
.checkout-form-column::-webkit-scrollbar,
.checkout-review-items::-webkit-scrollbar {
    width: 6px;
}

.checkout-form-column::-webkit-scrollbar-track,
.checkout-review-items::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 10px;
}

.checkout-form-column::-webkit-scrollbar-thumb,
.checkout-review-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: background 0.2s;
}

.checkout-form-column::-webkit-scrollbar-thumb:hover,
.checkout-review-items::-webkit-scrollbar-thumb:hover {
    background: var(--uw-green, #2ec6cc);
}

/* Soporte nativo para Firefox */
.checkout-form-column,
.checkout-review-items {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.01);
}

/* ════════════════════════════════════════════════════════════
   MÁRGENES, BOTONES SELECTORES AISLADOS Y DISEÑO
   (única definición de .checkout-large-box / .checkout-layout-container)
   ════════════════════════════════════════════════════════════ */
.checkout-large-box {
    max-width: 1000px !important;
    width: 95%;
    padding: 24px !important;
}

.checkout-layout-container {
    display: flex;
    gap: 32px;
    margin-top: 20px;
}

/* Espaciado extra en los inputs del formulario */
.checkout-form-column .form-group {
    margin-bottom: 1.2rem;
}

/* Nuevos selectores en grupo tipo Píldora (Evita conflictos) */
.chk-toggle-group {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 6px;
}

.chk-toggle-btn {
    flex: 1;
    background: transparent;
    color: var(--uw-muted, #8a99ad);
    border: none;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 26px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chk-toggle-btn.chk-active {
    background: var(--uw-green, #2ec6cc);
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--uw-acento-rgb),0.25);
}

/* ════════════════════════════════════════════════════════════
   BOTÓN DE CONFIRMACIÓN ULTRA-PREMIUM (Glow + Interacción)
   ════════════════════════════════════════════════════════════ */
.chk-btn-submit-premium {
    width: 100%;
    background: linear-gradient(135deg, var(--uw-green) 0%, var(--uw-green-osc) 100%);
    color: #000000;
    border: none;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    margin-top: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--uw-acento-rgb),0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chk-btn-submit-premium:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--uw-green-claro) 0%, var(--uw-green) 100%);
    box-shadow: 0 6px 20px rgba(var(--uw-acento-rgb),0.4);
}

.chk-btn-submit-premium:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(var(--uw-acento-rgb),0.2);
}

/* ─── Migas de pan ("Inicio / Productos") ───
   Son un <nav> y heredaban el estilo del navbar (sticky, fondo
   difuminado): al bajar quedaban pegadas arriba tapando el menú. */
nav[aria-label="breadcrumb"]{
position:static;top:auto;z-index:auto;background:none;
backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;
}

/* ─── Título del catálogo ─── */
.catalogo-titulo{
font-family:var(--uw-font-display);font-weight:800;letter-spacing:-.02em;
font-size:clamp(1.9rem, 6vw, 2.8rem);line-height:1.1;margin-top:5px;
overflow-wrap:anywhere;
}

/* ─── AVISO DE OFERTA AL QUEDARSE QUIETO (2026-09-20) ───
   storage/js/oferta-momento.js. Tarjeta chica abajo a la IZQUIERDA (a la
   derecha vive el botón flotante de WhatsApp, #fk-root). No tapa la
   página, no bloquea nada y se va sola: la barrita de abajo dice cuánto
   le queda. En el teléfono va sobre el botón flotante, no encima. */
.uw-of{
position:fixed;left:18px;bottom:18px;z-index:9990;
width:min(340px,calc(100vw - 36px));
--uw-of-color:var(--uw-green);
background:var(--theme-card);border:1px solid var(--theme-border);border-radius:18px;
box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 0 1px rgba(var(--uw-acento-rgb),.06);
overflow:hidden;color:var(--theme-text);
opacity:0;transform:translateY(24px) scale(.96);
transition:opacity .38s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.uw-of.uw-of-dentro{opacity:1;transform:none}
.uw-of.uw-of-fuera{opacity:0;transform:translateY(16px) scale(.97);transition-duration:.3s}
.uw-of-x{
position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;padding:0;
border:0;border-radius:50%;cursor:pointer;line-height:1;font-size:1.15rem;
background:rgba(0,0,0,.35);color:#fff;opacity:.7;transition:opacity .2s,background .2s;
}
.uw-of-x:hover{opacity:1;background:rgba(0,0,0,.6)}
.uw-of-cuerpo{display:flex;gap:.85rem;padding:.9rem;text-decoration:none;color:inherit;align-items:flex-start}
.uw-of-cuerpo:hover{color:inherit}
.uw-of-foto{
flex:0 0 84px;width:84px;height:84px;border-radius:12px;overflow:hidden;background:#fff;
}
.uw-of-foto img{width:100%;height:100%;object-fit:contain;display:block}
.uw-of-texto{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.uw-of-etiqueta{
align-self:flex-start;font-family:var(--uw-font-display);font-weight:700;
font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
padding:.18rem .5rem;border-radius:99px;background:var(--uw-of-color);color:var(--uw-of-tinta,#04211f);
}
.uw-of-titulo{
font-family:var(--uw-font-display);font-weight:700;font-size:.95rem;line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.uw-of-bajada{
font-size:.8rem;line-height:1.4;color:var(--uw-muted);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.uw-of-precio{font-family:var(--uw-font-display);font-weight:800;color:var(--uw-green);font-size:1.05rem}
.uw-of-precio s{color:var(--uw-muted);font-weight:500;font-size:.8rem;margin-right:.3rem}
.uw-of-cuenta{font-size:.72rem;color:var(--uw-muted)}
.uw-of-cta{
margin-top:.25rem;font-family:var(--uw-font-display);font-weight:700;font-size:.82rem;
color:var(--uw-of-color);
}
.uw-of-cuerpo:hover .uw-of-cta{text-decoration:underline}
.uw-of-cupon{
display:flex;align-items:center;gap:.55rem;width:calc(100% - 1.8rem);margin:0 .9rem .9rem;
padding:.55rem .7rem;border-radius:12px;cursor:pointer;text-align:left;font:inherit;
background:rgba(var(--uw-acento-rgb),.06);border:1.5px dashed var(--uw-of-color);color:inherit;
}
.uw-of-cupon b{font-family:var(--uw-font-display);letter-spacing:.06em;color:var(--uw-of-color);font-size:.95rem}
.uw-of-cupon span{font-size:.75rem;color:var(--uw-muted);flex:1;min-width:0}
.uw-of-cupon i{
font-style:normal;font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:99px;
background:var(--uw-of-color);color:var(--uw-of-tinta,#04211f);flex-shrink:0;
}
.uw-of-cupon.uw-of-copiado{border-style:solid}
.uw-of-barra{height:3px;background:rgba(255,255,255,.06)}
.uw-of-barra i{
display:block;height:100%;background:var(--uw-of-color);opacity:.5;
transform-origin:left;transform:scaleX(1);
animation:uwOfBarra var(--uw-of-ms,22000ms) linear forwards;
}
@keyframes uwOfBarra{to{transform:scaleX(0)}}
.uw-of:hover .uw-of-barra i{animation-play-state:paused}

@media (max-width:640px){
/* Sobre el botón flotante (#fk-root: 20px de margen + 52px de botón). */
.uw-of{left:12px;right:12px;bottom:84px;width:auto}
.uw-of-foto{flex-basis:68px;width:68px;height:68px}
}
@media (prefers-reduced-motion:reduce){
.uw-of{transition:opacity .2s ease}
.uw-of,.uw-of.uw-of-fuera{transform:none}
.uw-of-barra i{animation:none;transform:scaleX(1)}
}

/* ─── Cliente mayorista (2026-09-26): precios en tarjetas, ficha y carrito (carrito.js) ─── */
.uw-may-precio{margin-top:.35rem;font-size:.8rem;color:var(--uw-muted,#94a3b8);line-height:1.35}
.uw-may-precio strong{color:var(--uw-green,#2ec6cc);font-weight:800;font-size:.95rem}
.uw-may-precio--ficha{margin-top:.6rem;padding:.55rem .8rem;border-radius:10px;border:1px solid rgba(var(--uw-acento-rgb,46,198,204),.4);background:rgba(var(--uw-acento-rgb,46,198,204),.08);font-size:.9rem;display:inline-block}
.uw-may-precio--ficha strong{font-size:1.15rem}
.uw-may-precio--ficha small{display:block;font-size:.76rem;margin-top:.15rem}
.uw-may-barra{padding:.85rem 1rem;border-radius:10px;margin-bottom:.75rem;background:rgba(var(--uw-acento-rgb,46,198,204),.08);border:1px solid rgba(var(--uw-acento-rgb,46,198,204),.35);font-size:.82rem;line-height:1.45;color:var(--theme-text,#fff)}
.uw-may-barra strong{display:block;margin-bottom:.2rem;font-size:.86rem}
.uw-may-barra span{color:var(--uw-muted,#94a3b8)}
.uw-may-barra.ok{background:rgba(46,213,115,.1);border-color:rgba(46,213,115,.45)}
.uw-may-riel{height:6px;border-radius:99px;background:rgba(127,127,127,.2);margin-top:.5rem;overflow:hidden}
.uw-may-riel div{height:100%;background:var(--uw-green,#2ec6cc);transition:width .3s ease}
.uw-may-linea{font-size:.74rem;font-weight:700;color:var(--uw-green,#2ec6cc);margin-top:2px}
.uw-may-linea.pendiente{color:var(--uw-muted,#94a3b8);font-weight:600}
.uw-may-sello{display:inline-block;margin-top:.3rem;font-size:.7rem;font-weight:700;color:#000;background:var(--uw-green,#2ec6cc);border-radius:99px;padding:.15rem .6rem}
.uw-es-mayorista .uw-cuenta-avatar{box-shadow:0 0 0 2px var(--uw-green,#2ec6cc)}
/* ─── Cliente mayorista, que se note (2026-09-30): precio grande en la tarjeta,
       franja bajo el menú y bienvenida la primera vez (carrito.js) ─── */
.uw-may-card{box-shadow:0 0 0 1px rgba(var(--uw-acento-rgb,46,198,204),.45),0 8px 24px -14px rgba(var(--uw-acento-rgb,46,198,204),.55)}
.uw-may-card .product-price-container{flex-direction:column;align-items:flex-start;gap:0}
.uw-may-etiqueta{font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--uw-green,#2ec6cc);line-height:1.2}
.uw-may-grande{font-family:var(--uw-font-display);font-size:1.45rem;font-weight:800;color:var(--uw-green,#2ec6cc);line-height:1.15}
.uw-may-card .product-price.uw-may-normal{font-size:.8rem!important;font-weight:600!important;color:var(--uw-muted,#94a3b8)!important;text-decoration:line-through;opacity:.85}
.uw-may-card .product-price.uw-may-normal::before{content:"Normal ";text-decoration:none;display:inline-block;margin-right:.2em}

.uw-may-franja{border-top:1px solid rgba(var(--uw-acento-rgb,46,198,204),.35);background:linear-gradient(90deg,rgba(var(--uw-acento-rgb,46,198,204),.22),rgba(var(--uw-acento-rgb,46,198,204),.08));color:var(--theme-text,#f8fafc);font-size:.8rem;line-height:1.3}
.uw-may-franja.ok{background:linear-gradient(90deg,rgba(46,213,115,.24),rgba(var(--uw-acento-rgb,46,198,204),.1))}
.uw-may-franja-in{max-width:1280px;margin:0 auto;padding:.4rem 1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.uw-may-franja-sello{flex:none;font-weight:800;font-size:.72rem;color:#000;background:var(--uw-green,#2ec6cc);border-radius:99px;padding:.18rem .65rem}
.uw-may-franja-txt{flex:1;min-width:0}
.uw-may-franja-txt strong{color:var(--uw-green,#2ec6cc)}
.uw-may-franja-btn{flex:none;background:none;border:1px solid var(--uw-green,#2ec6cc);color:var(--uw-green,#2ec6cc);border-radius:99px;padding:.2rem .7rem;font-size:.72rem;font-weight:700;cursor:pointer}
.uw-may-franja-btn:hover{background:var(--uw-green,#2ec6cc);color:#000}
.uw-may-franja-riel{height:3px;background:rgba(127,127,127,.2)}
.uw-may-franja-riel div{height:100%;background:var(--uw-green,#2ec6cc);transition:width .3s ease}
@media (max-width:560px){
.uw-may-franja-hola{display:none}
.uw-may-franja-in{padding:.35rem 16px;gap:.45rem;font-size:.74rem}
}

.uw-may-bv{position:fixed;inset:0;z-index:1000000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s ease}
.uw-may-bv.uw-may-bv-dentro{opacity:1}
.uw-may-bv.uw-may-bv-fuera{opacity:0}
.uw-may-bv-fondo{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(4px)}
.uw-may-bv-caja{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;background:var(--theme-surface,#111827);color:var(--theme-text,#f8fafc);border:1px solid rgba(var(--uw-acento-rgb,46,198,204),.5);border-radius:22px;padding:30px 26px 22px;text-align:center;box-shadow:0 30px 80px -20px rgba(var(--uw-acento-rgb,46,198,204),.55);transform:translateY(18px) scale(.97);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.uw-may-bv-dentro .uw-may-bv-caja{transform:none}
.uw-may-bv-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--uw-muted,#94a3b8);font-size:1.5rem;line-height:1;cursor:pointer}
.uw-may-bv-x:hover{color:var(--theme-text,#fff);background:rgba(127,127,127,.15)}
.uw-may-bv-sello{display:inline-block;font-weight:800;font-size:.8rem;color:#000;background:var(--uw-green,#2ec6cc);border-radius:99px;padding:.3rem .9rem;animation:uwMayPop .6s .15s both cubic-bezier(.2,.9,.3,1.4)}
.uw-may-bv-caja h2{font-family:var(--uw-font-display);font-size:1.7rem;font-weight:800;margin:.7rem 0 .4rem;line-height:1.15}
.uw-may-bv-intro{font-size:.95rem;line-height:1.55;color:var(--uw-muted,#94a3b8);margin:0 0 1.1rem}
.uw-may-bv-intro strong{color:var(--uw-green,#2ec6cc)}
.uw-may-bv-pasos{list-style:none;margin:0 0 1.3rem;padding:0;text-align:left;display:grid;gap:.6rem}
.uw-may-bv-pasos li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.45;background:rgba(var(--uw-acento-rgb,46,198,204),.07);border:1px solid rgba(var(--uw-acento-rgb,46,198,204),.2);border-radius:12px;padding:.65rem .8rem}
.uw-may-bv-pasos li>span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--uw-green,#2ec6cc);color:#000;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.uw-may-bv-pasos b{color:var(--theme-text,#fff)}
.uw-may-bv-ctas{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.uw-may-bv-btn{display:block;width:100%;background:var(--uw-green,#2ec6cc);color:#000;font-weight:800;border-radius:99px;padding:.85rem 1rem;text-decoration:none;font-size:1rem}
.uw-may-bv-btn:hover{filter:brightness(1.08)}
.uw-may-bv-link{color:var(--uw-green,#2ec6cc);font-weight:700;font-size:.88rem;text-decoration:none}
.uw-may-bv-pie{margin:1rem 0 0;font-size:.76rem;color:var(--uw-muted,#94a3b8)}
.uw-may-bv-chispas{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.uw-may-bv-chispas i{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;background:var(--uw-green,#2ec6cc);opacity:0;animation:uwMayChispa 2.4s ease-out forwards}
.uw-may-bv-chispas i:nth-child(3n){background:#91f8b8;width:6px;height:6px;border-radius:50%}
.uw-may-bv-chispas i:nth-child(4n){background:#fbbf24}
.uw-may-bv-chispas i:nth-child(1){left:6%;animation-delay:.1s}.uw-may-bv-chispas i:nth-child(2){left:14%;animation-delay:.35s}
.uw-may-bv-chispas i:nth-child(3){left:22%;animation-delay:.2s}.uw-may-bv-chispas i:nth-child(4){left:30%;animation-delay:.5s}
.uw-may-bv-chispas i:nth-child(5){left:38%;animation-delay:.05s}.uw-may-bv-chispas i:nth-child(6){left:46%;animation-delay:.4s}
.uw-may-bv-chispas i:nth-child(7){left:54%;animation-delay:.25s}.uw-may-bv-chispas i:nth-child(8){left:62%;animation-delay:.55s}
.uw-may-bv-chispas i:nth-child(9){left:70%;animation-delay:.15s}.uw-may-bv-chispas i:nth-child(10){left:78%;animation-delay:.45s}
.uw-may-bv-chispas i:nth-child(11){left:86%;animation-delay:.3s}.uw-may-bv-chispas i:nth-child(12){left:92%;animation-delay:.6s}
.uw-may-bv-chispas i:nth-child(13){left:50%;animation-delay:.7s}.uw-may-bv-chispas i:nth-child(14){left:18%;animation-delay:.75s}
@keyframes uwMayChispa{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(260px) rotate(320deg)}}
@keyframes uwMayPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
.uw-may-bv,.uw-may-bv-caja{transition:none}
.uw-may-bv-sello,.uw-may-bv-chispas i{animation:none}
}


/* ─── MÁS SOBRIO (2026-09-30) ───
   Pedido de Andrés: que la tienda se vea más orgánica. Menos brillo neón,
   menos mayúsculas, más aire y sin animación de entrada en cada bloque.
   La parte de arriba (título, vitrina, franja de 4 y cinta) queda como
   estaba: a Andrés le gusta así. */
.reveal,.reveal.visible{opacity:1;transform:none;transition:none}
.section{padding-top:6rem;padding-bottom:6rem}
@media (max-width:768px){.section{padding-top:3.5rem;padding-bottom:3.5rem}}
.pack-incluye-tit{text-transform:none;letter-spacing:.01em}
@media (hover:hover){
.product-card:hover,
.product-card:focus-within{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
}
.product-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-format{text-transform:none;letter-spacing:0}

/* ════════════════════════════════════════════════════════════
   CARRITO Y PAGO EN EL TELÉFONO (2026-10-02)
   - 100vh en Chrome del teléfono es más alto que lo visible: el botón
     "Finalizar Compra" quedaba bajo la barra del navegador. dvh = lo visible.
   - El cajón del carrito scrollea entero (antes la lista de productos
     quedaba en una franja de 70 px) y el pie con el total queda pegado abajo.
   - El pago ocupa toda la pantalla, con los datos PRIMERO: antes salía el
     resumen arriba y parecía que no había dónde poner los datos.
   - Ni el ticker ni los botones flotantes tapan el carrito o el pago.
   ════════════════════════════════════════════════════════════ */
.cart-drawer { height: 100vh; height: 100dvh; }
.modal-box { max-height: 90vh; max-height: 90dvh; }
body:has(.cart-drawer.open) .ticker--fixed,
body:has(.modal-overlay.open) .ticker--fixed,
body:has(.cart-drawer.open) #fk-root,
body:has(.modal-overlay.open) #fk-root { visibility: hidden; }
#inputCupon { min-width: 0; }

.chk-acceso {
    margin-bottom: 18px; padding: 14px; border-radius: 14px;
    background: rgba(var(--uw-acento-rgb), .06);
    border: 1px solid rgba(var(--uw-acento-rgb), .25);
}
.chk-acceso-titulo { margin: 0 0 10px; font-weight: 700; color: var(--theme-text); font-size: .95rem; }
.chk-acceso-o { margin: 10px 0 0; font-size: .82rem; color: var(--uw-muted); text-align: center; }
.chk-acceso .uwa-o, .chk-acceso .uwa-correo, .chk-acceso .uwa-enviar { display: none !important; }
.chk-acceso .uwa-google { display: flex; justify-content: center; }
.chk-acceso-ok { font-size: .92rem; color: var(--theme-text); }
.chk-acceso-ok strong { color: var(--uw-green); }
.chk-total-movil { display: none; }

@media (max-width: 820px) {
    /* Orden en el teléfono: datos, resumen con cupón y total, y al final
       la aceptación de términos y el botón (el form se "abre" con
       display:contents para poder intercalar el resumen; el botón sigue
       siendo del formulario). */
    .checkout-layout-container { flex-direction: column; gap: 0; }
    .checkout-layout-container > .checkout-form-column,
    .checkout-layout-container > .checkout-form-column > #checkoutForm { display: contents; }
    .checkout-summary-column { order: 1; margin-top: 1.5rem; }
    #checkoutForm > .form-group:has(#chk-privacidad),
    #checkoutForm > .chk-total-movil,
    #checkoutForm > #btnSubmit { order: 2; }
    .chk-total-movil {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-top: 1.25rem; font-size: .95rem; color: var(--uw-muted);
    }
    .chk-total-movil strong { font-family: var(--uw-font-display); font-size: 1.25rem; color: var(--theme-text); }
}

@media (max-width: 600px) {
    .cart-drawer { overflow-y: auto; overscroll-behavior: contain; }
    .cart-drawer > * { flex-shrink: 0; }
    .cart-items { flex: 0 0 auto; overflow: visible; }
    .cart-foot {
        position: sticky; bottom: 0; margin-top: auto; z-index: 20; gap: 8px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }
    .btn-continue-shopping { display: none; }

    .modal-overlay { padding: 0; align-items: stretch; }
    .checkout-large-box {
        width: 100%; max-width: none !important; height: 100vh; height: 100dvh; max-height: 100dvh;
        border-radius: 0; border: 0; overscroll-behavior: contain;
        padding: 0 14px calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .checkout-large-box .modal-head {
        position: sticky; top: 0; z-index: 3; background: var(--theme-surface);
        padding: 14px 2px 12px; align-items: center;
    }
    .checkout-layout-container { margin-top: 14px; }
    .checkout-form-column { padding-right: 0; }
    .checkout-summary-column { padding: 14px; }
}