/* ============================================================
   Leizer Tienda — TEMA "Playful Vibrante" (rediseño 2026)
   Se carga al final del <head> (después del <style> inline) para
   re-skinear todas las páginas: redefine los tokens que las páginas
   ya consumen vía var() + reestiliza componentes compartidos.
   Solo propiedades VISUALES (color, tipografía, radio, sombra, borde)
   — no toca layout/posicionamiento.
   ============================================================ */
/* Las fuentes ya NO se piden con @import: un @import dentro del CSS solo se
   descubre cuando theme.css terminó de bajar y parsear, encadenando dos viajes
   antes de que empiece a bajar la fuente. Ahora cada página trae
   <link rel="preload" as="style" data-font-swap> junto a sus preconnect, y
   js/site-chrome.js lo pasa a rel="stylesheet" al cargar. Sin JS, el
   <noscript> de cada página las carga igual. */

:root{
  /* Base — adiós beige, blanco cálido tenue */
  --bg:#fff6f0; --surf:#ffffff; --surf-2:#fff1f6;
  --surf-cream:#fff1e9; --surf-rose:#ffe4ef; --cream:#fff1e9;
  --border:rgba(34,26,43,.10); --border-strong:rgba(34,26,43,.20);
  --text:#221a2b; --text-soft:#4a4152; --muted:#6b6072; --dim:#9990a3;
  /* Marca + acentos vívidos */
  --orange:#f26b1f; --orange-l:#ff8a3d; --orange-d:#c1490c;
  --fresa:#ff3d81; --fresa-soft:#ffd9e6;
  --menta:#17c3b2; --menta-soft:#c9f4ee;
  --amarillo:#ffc23c; --lila:#8b5cf6;
  --green:#16a34a; --red:#ef4444;
  /* Radios más redondeados */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --radius:12px; --radius-lg:18px;
  /* Sombras suaves */
  --shadow-sm:0 6px 18px -10px rgba(34,26,43,.20);
  --shadow-md:0 16px 36px -18px rgba(34,26,43,.26);
  --shadow-lg:0 28px 54px -24px rgba(34,26,43,.32);
  /* Tipografía distintiva */
  --font-serif:'Baloo 2', system-ui, sans-serif;   /* display */
  --font-sans:'Onest', system-ui, -apple-system, sans-serif;

  /* ---- Override del sistema unificado leizer-brand.css (--lz-*) ----
     Algunas páginas (producto.php, diseno.php) usan estos tokens; los
     mapeamos al mismo look Playful Vibrante para consistencia total. */
  --lz-bg:#fff6f0; --lz-surf:#ffffff; --lz-surf-2:#fff1f6;
  --lz-surf-cream:#fff1e9; --lz-surf-rose:#ffe4ef; --lz-surf-mint:#c9f4ee; --lz-surf-lav:#efe9ff;
  --lz-border:rgba(34,26,43,.10); --lz-border-2:rgba(34,26,43,.06); --lz-border-strong:rgba(34,26,43,.20);
  --lz-border-focus:#f26b1f;
  --lz-text:#221a2b; --lz-text-soft:#4a4152; --lz-muted:#6b6072; --lz-dim:#9990a3;
  --lz-orange:#f26b1f; --lz-orange-l:#ff8a3d; --lz-orange-d:#c1490c; --lz-orange-soft:rgba(242,107,31,.10);
  --lz-blue:#ff3d81; --lz-blue-l:#ff6aa3; --lz-blue-d:#d81b60; --lz-blue-soft:rgba(255,61,129,.08);
  --lz-rose:#ff3d81; --lz-berry:#d81b60; --lz-green:#17c3b2; --lz-amber:#f6a800; --lz-red:#ef4444;
  --lz-font-display:'Baloo 2', system-ui, sans-serif;
  --lz-font-body:'Onest', system-ui, -apple-system, sans-serif;
}

/* Atmósfera del fondo (radiales suaves fresa/menta sobre blanco cálido) */
body{
  font-family:var(--font-sans);
  background:
    radial-gradient(1100px 560px at 92% -8%, rgba(255,61,129,.08), transparent 60%),
    radial-gradient(900px 480px at -8% 6%, rgba(23,195,178,.10), transparent 55%),
    linear-gradient(180deg,#ffffff 0%, var(--bg) 100%) !important;
  background-attachment:fixed;
}

/* Display: títulos con Baloo 2 */
h1,h2,h3,.hero h1,.section-title,.modal-title,.set-name,.brand{
  font-family:var(--font-serif);
  letter-spacing:-.01em;
}
h1,h2,.hero h1{font-weight:800}
h3,.set-name{font-weight:700}

/* ---------- Botones ---------- */
.btn-primary,.btn-checkout,.ped-order,.ped-wa{
  font-family:var(--font-serif);font-weight:700;border-radius:100px !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s !important;
}
.btn-primary,.btn-checkout{
  background:linear-gradient(135deg,var(--orange-l),var(--orange)) !important;
  color:#fff !important;box-shadow:0 16px 34px -16px rgba(242,107,31,.55) !important;border:none !important;
}
.btn-primary:hover,.btn-checkout:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(242,107,31,.65) !important}
.btn-secondary{
  border-radius:100px !important;font-family:var(--font-serif);font-weight:700;
  background:#fff !important;color:var(--text) !important;border:1.5px solid var(--border) !important;
  box-shadow:0 6px 16px -10px rgba(34,26,43,.25);transition:transform .16s,border-color .16s,color .16s;
}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--fresa) !important;color:var(--fresa) !important}

/* ---------- Header / marca ---------- */
.header,.top{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--border) !important;
}
.brand{font-weight:800;font-family:var(--font-serif);letter-spacing:-.02em}
.brand span,.brand b{color:var(--fresa)}
.nav a:hover,.nav-links a:hover{color:var(--orange-d)}
.cart-btn,.cart-btn:hover{border-radius:100px !important}
.cart-badge{background:var(--fresa) !important;font-family:var(--font-serif)}

/* ---------- Cards de sets (minichunches / plantillas) ---------- */
.set-card{border-radius:var(--r-md) !important;border:1px solid var(--border) !important;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s !important}
.set-card:hover{transform:translateY(-6px) !important;box-shadow:0 30px 50px -24px rgba(34,26,43,.42) !important;border-color:transparent !important}
.set-price,.set-price-val,.price{font-family:var(--font-serif);font-weight:800;color:var(--orange-d)}
.mc-kind{background:var(--menta-soft) !important;color:#0d8478 !important}

/* Corazón de favorito con color fresa (fav.js) */
.fav-btn.on{color:var(--fresa) !important;background:#fff !important;border-color:rgba(255,61,129,.4) !important}
.fav-btn:hover{color:var(--fresa) !important}

/* ---------- Tabs / chips ---------- */
.mc-tab.active,.pd-tab.active{color:var(--orange) !important;border-bottom-color:var(--orange) !important}
.sp-btn.cur{background:var(--text) !important;border-color:var(--text) !important}
.sp-btn:hover:not(:disabled){border-color:var(--fresa) !important;color:var(--fresa) !important}

/* ---------- Grid de galería (celdas) ---------- */
.cell{border-radius:var(--r-md) !important}
.cell:hover{border-color:var(--fresa) !important;box-shadow:var(--shadow-lg) !important}
.cell-model{color:var(--orange-d) !important}
.cell-new,.badge-new{background:var(--menta) !important}

/* ---------- Inputs ---------- */
input[type=text],input[type=search],input[type=email],.search input,.mc-search,.pd-search,.search-input{
  border-radius:100px !important;
}
input:focus,.mc-search:focus,.pd-search:focus,.search input:focus{
  border-color:var(--orange) !important;box-shadow:0 0 0 4px rgba(242,107,31,.10) !important;outline:none;
}

/* ---------- Footer ---------- */
/* Fondo oscuro: hay que recolorear TODO el texto interno. Las clases del
   footer traen colores para fondo claro (--text, --muted) que quedan casi
   invisibles sobre oscuro y ganan por especificidad. Los forzamos claros. */
.footer,footer{background:var(--text) !important;color:#fff}
.footer a,footer a{color:rgba(255,255,255,.7)}
.footer a:hover,footer a:hover{color:#fff}
.footer-brand,.footer-brand span{color:#fff !important}
.footer-brand span{color:var(--orange) !important}
.footer-desc{color:rgba(255,255,255,.72) !important}
.footer-col h4{color:#fff !important;opacity:.92}
.footer-col a{color:rgba(255,255,255,.72) !important}
.footer-col a:hover{color:var(--orange) !important}
.footer-bottom{color:rgba(255,255,255,.66) !important;border-top-color:rgba(255,255,255,.14) !important}
.footer-bottom a{color:rgba(255,255,255,.82) !important}
.footer-bottom a:hover{color:#fff !important}

/* ---------- Hero pills / feats ---------- */
.hero-feats span,.hero-feat{border-radius:100px !important}
.hero h1 em,.lead h1 em{color:var(--fresa);font-style:italic}

/* ============================================================
   Estela de diseños en el hero (mouse trail) — js/mousetrail.js
   Al mover el ratón por el hero van apareciendo thumbnails del
   catálogo siguiendo el cursor y se desvanecen. Solo capa visual;
   el contenido del hero (texto + collage) va SIEMPRE encima.
   ============================================================ */
/* z-index:3 → la estela pasa POR DELANTE del contenido del hero (texto + collage),
   como el efecto original. pointer-events:none: aunque quede encima, no bloquea
   los botones/CTA. Las imágenes son transitorias (se desvanecen en <1s). */
.hero-trail{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hero-trail-img{
  position:absolute;top:0;left:0;
  width:clamp(120px,12vw,172px);aspect-ratio:5/6;
  /* contain + fondo + padding → el diseño se ve COMPLETO con margen, sin recortar
     (mismo patrón cover→contain+padding del resto del rediseño). */
  object-fit:contain;background:#fff;padding:10px;
  border-radius:var(--r-md);border:4px solid #fff;
  box-shadow:0 18px 40px -16px rgba(34,26,43,.45);
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease;   /* ease-out-expo */
  will-change:transform,opacity;
}
.hero-trail-img[data-status='active']{transform:translate(-50%,-50%) scale(1);opacity:1}
/* El contenido del hero por encima de la estela (gana al z-index:1 del inline). */
.hero .hero-inner{position:relative;z-index:2}
/* Efecto de puntero: fuera en móvil/tablet y con "reducir movimiento". */
@media (hover:none),(pointer:coarse){.hero-trail{display:none}}
@media (prefers-reduced-motion:reduce){.hero-trail{display:none}}
