/* ==========================================================================
   TEMA BLACK FRIDAY 2026 (TEMPORAL) — Mega Mayorista, sitio publico
   --------------------------------------------------------------------------
   Sale del paquete de diseno "megamayorista-blackfriday-web" (LEEME.txt).
   Se trajo SOLO lo de la tematica: la portada del dragon, sus ajustes, las
   animaciones, el hover y el aspecto de "La zona roja". El header, las
   tarjetas, el carrito, el login y los productos siguen siendo los del sitio.

   Encender / apagar: son 3 lineas en web/index.html (la fuente Archivo,
   esta hoja y js/ui/tema-blackfriday.js). Sin ellas el sitio vuelve a su
   banner de siempre: los archivos del sitio solo tienen ganchos genericos.

   Fechas del evento: en js/ui/tema-blackfriday.js (INICIO / FIN).
   ========================================================================== */

:root{
  --bf-black:#0B0607;
  --bf-hot:#E3141B;
  --bf-gold:#FFC81E;
  --bf-gold-ink:#1A0F00;
  --bf-display:"Archivo","Arial Black",Impact,sans-serif;
  --mm-radius:14px;
}

/* El dragon le gana a la regla de banners del sitio (cover + 38 %). */
.mm-hero-track .bf-slide .bf-art img{object-position:50% 50%}
/* La altura de la portada (--h) le gana al "height:auto" que mm-home.css
   pone a los banners desde 1024 px. En celular el paquete la quiere en auto,
   asi que la regla solo vale desde 861 px. */
@media (min-width:861px){.mm-hero-track .hero-slide.bf-slide{height:var(--h)}}
/* Tarjetas de valor: las tres a todo el ancho como en el paquete (el sitio
   topa cada columna en 380 px desde 1024). En celular el paquete las pone en
   tira horizontal; esa regla viene en los ajustes de la portada. */
@media (min-width:861px){.mm-valor-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-left:auto;margin-right:auto}}
/* En la tarjeta compacta el icono y el texto van sin los margenes que les da
   mm-home.css (24 px), que inflaban las filas. El boton conserva los 44 px de
   alto del sitio (el paquete lo baja a 40): es el minimo comodo para el dedo. */
.mm-valor-card .mm-valor-icon,.mm-valor-card .mm-valor-copy{margin:0}
/* Titulo y texto a la izquierda, junto al icono: mm-home.css los centra en
   su propia regla y le ganaba al text-align de la tarjeta. Se notaba en
   "Productos importados de calidad verificada", que ocupa dos lineas. */
.mm-valor-card .mm-valor-title,.mm-valor-card .mm-valor-copy{text-align:left}
/* En celular las tarjetas son una tira horizontal. mm-home.css centra la
   grilla (justify-content:center) y con contenido mas ancho que la pantalla
   eso empuja la primera tarjeta fuera por la izquierda, donde el scroll no
   llega: "Ingresa a tu cuenta" quedaba inalcanzable. */
@media (max-width:860px){.mm-valor-grid{justify-content:start}}

/* ── CONTENEDOR DE LA PORTADA ────────────────────────────────────────────── */
.mm-hero{position:relative}

/* ── LA ZONA ROJA (franja rayada, barrido de luz y etiqueta BLACK FRIDAY) ── */

.mm-zona{position:relative;color:#fff;overflow:hidden;
  background:
    repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 18px,transparent 18px 36px),
    linear-gradient(120deg,#7A1015 0%,#A81E22 45%,#D0232A 100%)}
.mm-zona::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%) 0 0/250% 100% no-repeat;animation:mm-sweep 6s ease-in-out infinite}
.mm-zona>*{position:relative;z-index:1}
.mm-zona-title{margin:0;font-family:var(--bf-display);font-style:italic;font-weight:900;font-size:clamp(25px,2.5vw,34px);line-height:1.05;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.mm-zona-badge{display:inline-block;padding:5px 11px 4px;border-radius:7px;background:var(--bf-black);color:var(--bf-gold);font-size:.48em;letter-spacing:.12em}
.mm-ver-todo-claro{color:#fff}
.mm-zona .mm-rail-arrow{border-color:transparent}



/* ══ PORTADA Y AJUSTES (paquete: css/styles.css) ══ */

/* 3. PORTADA ---------------------------------------------------------------- */
/* Escenario claro (gris estudio) como el arte de campaña. En PC todo se escala
   con la altura del slide (--h); en móvil se apila. */
.hero-carousel-root{position:relative;background:#D6D6D6}
.mm-hero-track .hero-slide.bf-slide,
#heroCarousel .hero-slide.bf-slide{aspect-ratio:auto;min-height:0;max-height:none}
.mm-hero-legal{color:var(--mm-text-faint)}

.bf-slide{
  --h:clamp(470px,44vw,700px);
  --bf-ink:#141414;
  --bf-red:#E3141B;
  --bf-red-deep:#8F0B10;
  position:relative;overflow:hidden;isolation:isolate;height:var(--h);
  color:var(--bf-ink);font-family:Poppins,Montserrat,system-ui,sans-serif;
  background:
    radial-gradient(70% 90% at 30% 45%,#DEDEDE 0%,rgba(222,222,222,0) 70%),
    linear-gradient(180deg,#D0CFCF 0%,#D8D8D8 45%,#D2D0D0 100%);
}
.bf-slide *{box-sizing:border-box}

/* Marca de agua "MEGA OFERTAS" en movimiento lento */
.bf-wm{position:absolute;inset:-10% -10% auto -10%;z-index:0;transform:rotate(-6deg);pointer-events:none;display:grid;gap:calc(var(--h)*.01);opacity:.55}
.bf-wm-row{display:flex;width:max-content;white-space:nowrap;font-family:var(--bf-display);font-weight:900;font-style:italic;font-stretch:120%;font-size:calc(var(--h)*.105);line-height:1.05;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);animation:bf-wm 60s linear infinite}
.bf-wm-rev{animation-direction:reverse;-webkit-text-stroke-color:rgba(255,255,255,.55)}
@keyframes bf-wm{to{transform:translateX(-50%)}}

/* Arte: dragón + cajas, pegado a la derecha y abajo */
.bf-art{position:absolute;z-index:1;right:0;bottom:0;height:100%;aspect-ratio:1202/941;animation:bf-art-in 1s .25s cubic-bezier(.2,.9,.3,1) both}
.mm-hero-track .bf-slide .bf-art img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;background:none}
.bf-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bf-lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:bf-blink 5.2s 2.2s infinite}
@keyframes bf-blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.bf-star{transform-box:fill-box;transform-origin:center;opacity:0;animation:bf-twinkle 3.2s var(--d) ease-in-out infinite}
@keyframes bf-twinkle{0%,100%{opacity:0;scale:.3}45%{opacity:1;scale:1}60%{opacity:.9;scale:.9}}

/* Columna de texto */
.bf-copy{position:relative;z-index:3;height:100%;max-width:1600px;margin:0 auto;padding:0 max(16px,3.8vw);display:flex;flex-direction:column;justify-content:center;gap:0}
.bf-copy>*{max-width:calc(var(--h)*1.02)}
.bf-tilt{transform:rotate(-4deg);transform-origin:0 50%}
.bf-eyebrow{margin:0 0 calc(var(--h)*.012) calc(var(--h)*.01);font-weight:500;font-size:calc(var(--h)*.03);letter-spacing:.42em;text-transform:uppercase;color:var(--bf-ink);animation:bf-rise .6s .1s both}
.bf-title{margin:0;font-family:var(--bf-display);font-style:italic;font-weight:900;font-stretch:118%;line-height:.84;letter-spacing:-.025em;text-transform:uppercase}
.bf-black{position:relative;display:table;font-size:calc(var(--h)*.215);color:var(--bf-ink);
  text-shadow:-1px 1px 0 #3b3b3b,-2px 2px 0 #333,-3px 3px 0 #2b2b2b,-4px 4px 0 #222,-8px 12px 18px rgba(0,0,0,.28);
  animation:bf-slide-l .75s .2s cubic-bezier(.2,.9,.25,1.15) both}
.bf-friday{position:relative;display:inline-block;margin-left:-.06em;font-size:calc(var(--h)*.215);color:var(--bf-red);
  background:linear-gradient(180deg,#FF3A40 0%,#E3141B 55%,#C10E14 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(-4px 4px 0 var(--bf-red-deep)) drop-shadow(-8px 12px 14px rgba(120,0,0,.25));
  animation:bf-slam .7s .5s cubic-bezier(.2,1.4,.4,1) both}
/* rayitas rojas junto a BLACK, como en el arte */
.bf-dash{position:absolute;display:block;width:.16em;height:.05em;border-radius:.03em;background:var(--bf-red);animation:bf-dash 2.4s ease-in-out infinite}
.bf-dash-1{right:-.22em;top:-.02em;transform:rotate(-55deg)}
.bf-dash-2{right:-.33em;top:.2em;transform:rotate(-18deg);animation-delay:.3s}
.bf-dash-3{right:-.12em;top:-.16em;width:.1em;transform:rotate(-80deg);animation-delay:.6s}
@keyframes bf-dash{0%,100%{opacity:1;scale:1}50%{opacity:.35;scale:.7}}
/* etiqueta % colgando de la Y */
.bf-tag{position:absolute;right:-.5em;top:.06em;width:.42em;transform-origin:12% 4%;-webkit-text-fill-color:initial;animation:bf-swing 2.8s 1.2s ease-in-out infinite}
.bf-tag svg{display:block;width:100%;height:auto;filter:drop-shadow(-3px 6px 6px rgba(0,0,0,.28))}
.bf-sub{margin:calc(var(--h)*.03) 0 0 calc(var(--h)*.03);font-weight:600;font-size:calc(var(--h)*.043);letter-spacing:.12em;line-height:1.15;text-transform:uppercase;color:var(--bf-ink);animation:bf-rise .6s .8s both}
.bf-sub b{color:var(--bf-red);font-weight:800;font-style:italic}

/* CTA + contador */
.bf-actions{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--h)*.03);margin-top:calc(var(--h)*.065);animation:bf-rise .6s .95s both}
.bf-cta{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:calc(var(--h)*.05);height:calc(var(--h)*.112);padding:0 calc(var(--h)*.012) 0 calc(var(--h)*.06);border-radius:999px;background:linear-gradient(180deg,#FFD83A,#FFC400);color:#111;font-weight:800;font-size:calc(var(--h)*.036);letter-spacing:.01em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 24px rgba(160,110,0,.28),inset 0 -3px 0 rgba(0,0,0,.08);overflow:hidden;transition:transform .2s;animation:bf-pulse 2.6s 2s ease-in-out infinite}
.bf-cta:hover{transform:translateY(-2px)}
.bf-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:bf-shine 3.8s 2s ease-in-out infinite}
.bf-cta-arrow{flex:none;width:calc(var(--h)*.086);height:calc(var(--h)*.086);border-radius:50%;background:#111;display:grid;place-items:center;transition:transform .25s}
.bf-cta-arrow svg{width:45%;height:45%}
.bf-cta:hover .bf-cta-arrow{transform:translateX(4px)}
.bf-clock{display:flex;align-items:center;gap:10px;min-height:calc(var(--h)*.112);padding:6px 14px;border-radius:14px;background:#141414;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.bf-clock-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFC81E;line-height:1.2;max-width:5.5em}
.bf-clock-units{display:flex;gap:5px}
.bf-u{min-width:40px;text-align:center;border-radius:8px;background:#262626;padding:4px 3px 3px}
.bf-u strong{display:block;font-family:var(--bf-display);font-style:italic;font-weight:900;font-size:19px;line-height:1;font-variant-numeric:tabular-nums}
.bf-u small{display:block;font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd;margin-top:2px}
.bf-u strong.bf-flip{animation:bf-flip .35s ease}

/* Fechas y envío */
.bf-info{list-style:none;margin:calc(var(--h)*.04) 0 0;padding:0 0 0 calc(var(--h)*.012);display:grid;gap:calc(var(--h)*.018);font-size:calc(var(--h)*.031);letter-spacing:.04em;color:var(--bf-ink);animation:bf-rise .6s 1.1s both}
.bf-info li{display:flex;align-items:center;gap:calc(var(--h)*.022)}
.bf-info svg{flex:none;width:calc(var(--h)*.05);height:auto;color:var(--bf-ink)}
.bf-info li:first-child span{text-transform:uppercase;font-weight:500}
.bf-info b{color:var(--bf-red);font-weight:800}

@keyframes bf-slide-l{from{transform:translateX(-50px);opacity:0}to{transform:none;opacity:1}}
@keyframes bf-slam{0%{transform:scale(1.4);opacity:0}70%{transform:scale(.97);opacity:1}100%{transform:none;opacity:1}}
@keyframes bf-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes bf-swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}
@keyframes bf-pulse{0%,100%{box-shadow:0 10px 24px rgba(160,110,0,.28),0 0 0 0 rgba(255,196,0,.5)}50%{box-shadow:0 10px 24px rgba(160,110,0,.32),0 0 0 12px rgba(255,196,0,0)}}
@keyframes bf-shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes bf-flip{from{transform:translateY(-35%);opacity:.2}to{transform:none;opacity:1}}
@keyframes bf-art-in{from{transform:translateX(50px);opacity:0}to{transform:none;opacity:1}}
@keyframes bf-underline{to{transform:rotate(-3deg) scaleX(1)}}

/* Barrido de luz sobre BLACK FRIDAY (lo dispara el JS cada 6 s, alternado con el confeti) */
.bf-black::after,.bf-friday::after{content:attr(data-text);position:absolute;left:0;right:0;top:0;pointer-events:none;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  background:linear-gradient(110deg,transparent 0%,transparent 38%,rgba(255,255,255,.15) 44%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.15) 56%,transparent 62%,transparent 100%) 0 0/300% 100% no-repeat;
  background-position:120% 0;-webkit-background-clip:text;background-clip:text}
.bf-sheen .bf-black::after{animation:bf-sheen 1.25s cubic-bezier(.45,0,.25,1) both}
.bf-sheen .bf-friday::after{animation:bf-sheen 1.25s .18s cubic-bezier(.45,0,.25,1) both}
@keyframes bf-sheen{from{background-position:120% 0}to{background-position:-20% 0}}
/* Confeti (canvas que crea el JS) */
.bf-confetti{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* Tablet: el arte se corre un poco para dejar aire al texto */
@media (max-width:1180px) and (min-width:861px){
  .bf-art{right:-9%}
  .bf-copy>*{max-width:52vw}
}

/* Móvil: título → arte → botón → contador → fechas/envío */
@media (max-width:860px){
  .bf-slide{--h:min(560px,128vw);height:auto;padding:22px 0 26px}
  .bf-wm{inset:-4% -30% auto -30%}
  .bf-copy{height:auto;display:grid;gap:14px;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px))}
  .bf-copy>*{max-width:none}
  .bf-tilt{transform:rotate(-4deg);transform-origin:50% 50%;text-align:center}
  .bf-eyebrow{font-size:11.5px;letter-spacing:.32em;margin:0 0 6px}
  .bf-black,.bf-friday{font-size:clamp(56px,18.5vw,110px)}
  .bf-black{margin:0 auto}
  .bf-friday{margin-right:.35em}
  .bf-sub{margin:10px 0 0;font-size:clamp(14px,4.2vw,20px)}
  .bf-art{position:relative;right:auto;bottom:auto;height:auto;width:110%;margin:-10px 0 -14px -6%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
  .bf-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:0}
  .bf-cta{height:58px;font-size:17px;padding:0 6px 0 26px}
  .bf-cta-arrow{width:46px;height:46px}
  .bf-clock{justify-content:space-between}
  .bf-u{flex:1;min-width:0}
  .bf-info{font-size:14px;gap:10px;justify-items:center;margin:0;padding:0}
  .bf-info svg{width:24px}
  /* el arte va entre el título y el botón */
  .bf-slide{display:flex;flex-direction:column;gap:14px}
  .bf-slide>.bf-copy{display:contents}
  .bf-slide>.bf-copy>.bf-tilt{order:1;padding:0 16px}
  .bf-slide>.bf-art{order:2}
  @media (min-width:600px){.bf-slide>.bf-art{width:min(110%,680px);margin-left:auto;margin-right:auto}}
  .bf-slide>.bf-copy>.bf-actions{order:3;padding:0 16px}
  .bf-slide>.bf-copy>.bf-info{order:4;padding:4px 16px 0}
}
@media (max-width:380px){
  .bf-clock{flex-direction:column;align-items:stretch;gap:6px}
  .bf-clock-label{max-width:none;text-align:center}
}


/* ── AJUSTES: portada más compacta, CTA con WhatsApp y videollamada,
      tarjetas de valor subidas para verse en la primera pantalla ── */

/* Portada más baja en PC */
.bf-slide{--h:clamp(400px,34.5vw,540px)}
.bf-copy{padding-bottom:calc(var(--h)*.07)}
.bf-copy>*{max-width:min(calc(var(--h)*1.25),calc(100vw - var(--h)*1.25 - 7vw))}
.bf-sub{margin-top:calc(var(--h)*.025)}
.bf-actions{margin-top:calc(var(--h)*.055);gap:calc(var(--h)*.025)}
.bf-cta{height:calc(var(--h)*.12)}
.bf-cta-arrow{width:calc(var(--h)*.092);height:calc(var(--h)*.092)}


/* Contador + fechas en una fila */
.bf-when{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--h)*.03);margin-top:calc(var(--h)*.04);animation:bf-rise .6s 1.1s both}
.bf-clock{min-height:0;padding:7px 12px}
.bf-dates{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(13px,calc(var(--h)*.028),16px);line-height:1.25;text-transform:uppercase;font-weight:500;color:var(--bf-ink)}
.bf-dates svg{flex:none;width:clamp(20px,calc(var(--h)*.048),26px);height:auto}
.bf-dates b{color:var(--bf-red);font-weight:800}

/* Tarjetas de valor: compactas y montadas sobre la portada */
.mm-hero-legal{bottom:auto;top:10px}
.mm-valor{position:relative;z-index:5;margin-top:-34px;padding-top:0}
.mm-valor-grid{max-width:1320px;gap:18px}
.mm-valor-card{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"ic t" "ic c" "b b";align-items:center;text-align:left;gap:2px 16px;padding:18px 20px;border-radius:16px;box-shadow:0 14px 34px rgba(20,20,20,.12)}
.mm-valor-icon{grid-area:ic;width:72px;height:72px}
.mm-valor-icon svg{width:36px;height:36px}
.mm-valor-title{grid-area:t;min-height:0;font-size:16px;align-self:end}
.mm-valor-copy{grid-area:c;min-height:0;font-size:13px;align-self:start}
.mm-valor-card .mm-btn{grid-area:b;height:40px;margin-top:12px;font-size:14px}

/* Tablet horizontal */
@media (max-width:1180px) and (min-width:861px){
  .bf-copy>*{max-width:56vw}
}
@media (max-width:1023px){
  .mm-valor-grid{gap:12px}
  .mm-valor-card{padding:16px}
}

/* Móvil y tablet vertical: portada compacta */
@media (max-width:860px){
  .bf-slide{padding:12px 0 42px;gap:10px}
  .bf-copy{padding-bottom:0}
  .bf-copy>*{max-width:none}
  .bf-eyebrow{font-size:10.5px;margin-bottom:4px}
  .bf-black,.bf-friday{font-size:clamp(46px,13.6vw,92px)}
  .bf-sub{margin-top:6px;font-size:clamp(13px,3.7vw,18px)}
  .bf-slide>.bf-art{width:min(66%,420px);margin:-4px auto -8px}
  .bf-actions{display:block}
  .bf-buy{display:block}
  .bf-cta{width:100%;justify-content:space-between}
  .bf-menu{left:0;right:0;width:auto}
  .bf-cta{height:54px;font-size:16px}
  .bf-cta-arrow{width:42px;height:42px}
  .bf-slide>.bf-copy>.bf-when{order:4;padding:0 16px;margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .bf-clock{justify-content:space-between;gap:8px;padding:6px 10px}
  .bf-clock-label{font-size:9px;max-width:5em}
  .bf-u{min-width:34px}
  .bf-u strong{font-size:16px}
  .bf-u small{font-size:7.5px}
  .bf-dates{font-size:11.5px;gap:6px}
  .bf-dates svg{width:20px}
  .mm-hero-legal{top:auto;bottom:30px;left:0;right:0;text-align:center;font-size:8.5px}
  .mm-valor{margin-top:-30px}
  .mm-valor-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,340px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:none;padding:2px 2px 10px;margin:0 -2px}
  .mm-valor-grid::-webkit-scrollbar{display:none}
  .mm-valor-card{scroll-snap-align:start;grid-template-columns:56px minmax(0,1fr);padding:14px;gap:2px 12px}
  .mm-valor-icon{width:56px;height:56px}
  .mm-valor-icon svg{width:28px;height:28px}
  .mm-valor-title{font-size:14.5px}
  .mm-valor-copy{font-size:12px}
  .mm-valor-card .mm-btn{height:38px;margin-top:10px;font-size:13px}
}
@media (max-width:380px){
  .bf-clock{flex-direction:row;align-items:center;padding:6px 8px}
  .bf-clock-label{display:none}
  .bf-dates{font-size:10px}
  .bf-cta{height:50px}
}

/* Atributo hidden siempre gana (contadores en 0) */
[hidden]{display:none!important}
/* En celular el botón de ayuda aparece al bajar, para no tapar la portada */
@media (max-width:860px){
  .floating-root{transition:opacity .25s,transform .25s}
  .floating-root.is-away{opacity:0;transform:translateY(20px);pointer-events:none}
}
@media (max-width:860px){
  .bf-cta{white-space:nowrap;gap:10px;padding:0 5px 0 20px;font-size:clamp(14px,4vw,17px)}
}
@media (max-width:430px){
  .bf-dates svg{display:none}
  .bf-dates{font-size:10.5px;justify-content:flex-start}
  .bf-clock-label{font-size:8.5px;max-width:4.6em;letter-spacing:.1em}
  .bf-clock-units{gap:4px}
  .bf-u{min-width:31px;padding:3px 2px}
  .bf-u strong{font-size:15px}
}

/* ── Comprar ahora: menú desplegable (WhatsApp / Videollamada) ── */
.bf-buy{position:relative;display:inline-block}
.bf-cta{border:0;cursor:pointer;font-family:inherit}
.bf-cta-arrow svg{transition:transform .25s}
.bf-cta[aria-expanded="true"] .bf-cta-arrow svg{transform:rotate(-90deg)}
.bf-cta[aria-expanded="true"]{animation:none}
.bf-menu{position:absolute;left:0;bottom:calc(100% + 10px);z-index:20;width:max(100%,320px);padding:10px;border-radius:18px;background:#fff;box-shadow:0 22px 50px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:20% 100%;transition:opacity .2s,transform .2s,visibility 0s .2s}
.bf-menu::after{content:"";position:absolute;left:34px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:3px 3px 4px rgba(0,0,0,.05)}
.bf-buy.is-open .bf-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s cubic-bezier(.2,1.2,.4,1)}
.bf-menu-t{margin:2px 8px 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a7072}
.bf-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:12px;background:none;text-align:left;color:#141414;font-family:inherit;cursor:pointer;text-decoration:none;transition:background .15s}
.bf-opt+.bf-opt{margin-top:4px}
.bf-opt:hover,.bf-opt:focus-visible{background:#F4F2F2}
.bf-opt-ic{position:relative;flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center}
.bf-opt-wa .bf-opt-ic{background:#25D366;color:#fff}
.bf-opt-video .bf-opt-ic{background:#141414;color:#fff}
.bf-opt-tx{flex:1;min-width:0}
.bf-opt-tx strong{display:block;font-size:15px;font-weight:700}
.bf-opt-tx small{display:block;font-size:12.5px;color:#6b6264;line-height:1.3}
.bf-opt-go{flex:none;font-size:24px;line-height:1;color:#b0a8a9;transition:transform .2s,color .2s}
.bf-opt:hover .bf-opt-go{transform:translateX(3px);color:#E3141B}
.bf-live{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#E3141B;border:2px solid #fff;animation:bf-live 1.6s infinite}
@keyframes bf-live{0%{box-shadow:0 0 0 0 rgba(227,20,27,.6)}70%{box-shadow:0 0 0 7px rgba(227,20,27,0)}100%{box-shadow:0 0 0 0 rgba(227,20,27,0)}}
/* el menú no debe recortarse */
.bf-slide{overflow:visible}
.hero-carousel-root,.mm-hero{overflow-x:clip}
.bf-slide{clip-path:inset(-400px 0 0 0)}

/* Dragón un poco más a la izquierda */
@media (min-width:1181px){
  .bf-art{right:clamp(0px,3.2vw,64px)}
  .bf-copy>*{max-width:min(calc(var(--h)*1.25),calc(100vw - var(--h)*1.25 - 3.2vw - 7vw))}
}
@media (max-width:1180px) and (min-width:861px){
  .bf-art{right:-5%}
}
@media (max-width:860px){
  .bf-slide>.bf-art{margin-left:auto;margin-right:auto;transform:translateX(-3%)}
}
.bf-actions{position:relative;z-index:8}
@media (max-width:860px){ .bf-slide>.bf-copy>.bf-actions{align-self:stretch;width:100%} .bf-buy{display:block} .bf-menu{width:100%} .bf-menu::after{left:auto;right:26px} }
/* El arte se funde con el fondo en sus bordes (sin franjas) */
@media (min-width:861px){
  .mm-hero-track .bf-slide .bf-art img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 100%);mask-composite:intersect}
}

/* ── CELULAR: dragón protagonista sobre escenario rojo ── */
.bf-stage{display:none}
.bf-art picture{display:block}
@media (max-width:860px){
  .bf-slide>.bf-art{position:relative;width:min(92%,500px);margin:-4px auto -30px;transform:none;-webkit-mask-image:none;mask-image:none;isolation:isolate}
  .bf-slide>.bf-art::before{display:none}
  .bf-art .bf-fx .bf-lid{display:none}
  .mm-hero-track .bf-slide .bf-art img{position:relative;z-index:2;filter:drop-shadow(0 14px 18px rgba(80,0,0,.28))}
  .bf-stage{display:block;position:absolute;z-index:1;left:50%;top:2%;width:90%;aspect-ratio:1;transform:translateX(-52%);border-radius:50%;
    background:
      radial-gradient(circle at 50% 42%,#FF4A4F 0%,#E3141B 42%,#A50D13 72%,#7A0A0E 100%);
    box-shadow:0 0 0 8px rgba(255,255,255,.55),0 0 0 9px rgba(227,20,27,.25),0 24px 60px rgba(160,10,16,.35);
    animation:bf-stage-in .9s .2s cubic-bezier(.2,1.2,.4,1) both}
  .bf-stage::before{content:"";position:absolute;inset:-14%;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,200,30,.22) 0 6deg,transparent 6deg 18deg);
    -webkit-mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);
    animation:bf-rays 30s linear infinite}
  .bf-stage::after{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-60%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
  .bf-slide>.bf-copy>.bf-actions{position:relative;z-index:9}
}
@keyframes bf-stage-in{from{transform:translateX(-52%) scale(.6);opacity:0}to{transform:translateX(-52%) scale(1);opacity:1}}
@keyframes bf-rays{to{transform:rotate(360deg)}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.bf-stage,.bf-stage::before{animation:none}}

/* ── Tarjetas de valor: separadas de la portada y de tamaño uniforme ── */
.mm-valor{margin-top:0;padding-top:clamp(22px,2.4vw,34px)}
.mm-valor-grid{align-items:stretch}
.mm-valor-card{grid-template-rows:auto 1fr auto;min-height:0;box-shadow:var(--mm-sh-card)}
.mm-valor-title{min-height:2.6em;align-self:end;display:flex;align-items:flex-end}
.mm-valor-copy{align-self:start}
@media (max-width:860px){
  .bf-slide{padding-bottom:22px}
  .mm-valor{margin-top:0;padding-top:20px}
  .mm-valor-grid{grid-auto-columns:min(86%,340px);gap:12px;padding:4px 2px 14px}
  .mm-valor-card{padding:16px;gap:4px 14px}
  .mm-valor-title{min-height:2.5em;font-size:15px}
  .mm-valor-copy{font-size:12.5px;min-height:2.7em}
  .mm-valor-card .mm-btn{height:42px;margin-top:12px}
}


/* ══ animaciones-dragon.css (paquete: extras/css; de las reglas base solo se toma el movimiento) ══ */

/* ANIMACIONES DEL DRAGÓN · entrada, flotación, parpadeo, destellos, escenario rojo (celular), dragón de Nosotros */
/* Extraído de css/styles.css del sitio. Cárgalo DESPUÉS de styles.css o úsalo como referencia. */
.mm-nosotros-media::before{content:"";position:absolute;width:min(100%,380px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 200deg,var(--bf-hot),var(--bf-gold),var(--bf-hot));animation:mm-spin 12s linear infinite}
.mm-nosotros-mascota{position:relative;width:calc(min(100%,380px) - 16px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.18);animation:mm-float 5.5s ease-in-out infinite}
@media (max-width:860px){
  .bf-stage{display:block;position:absolute;z-index:1;left:50%;top:2%;width:90%;aspect-ratio:1;transform:translateX(-52%);border-radius:50%;
    background:
      radial-gradient(circle at 50% 42%,#FF4A4F 0%,#E3141B 42%,#A50D13 72%,#7A0A0E 100%);
    box-shadow:0 0 0 8px rgba(255,255,255,.55),0 0 0 9px rgba(227,20,27,.25),0 24px 60px rgba(160,10,16,.35);
    animation:bf-stage-in .9s .2s cubic-bezier(.2,1.2,.4,1) both}
  .bf-stage::before{content:"";position:absolute;inset:-14%;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,200,30,.22) 0 6deg,transparent 6deg 18deg);
    -webkit-mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);
    animation:bf-rays 30s linear infinite}
}
/* Keyframes usados */
@keyframes mm-spin{to{transform:rotate(360deg)}}
@keyframes mm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}


/* ══ animaciones-pagina.css (paquete: extras/css; de las reglas base solo se toma el movimiento) ══ */

/* ANIMACIONES DE LA PÁGINA · título, brillo, confeti, contador, botones, header, La zona roja, marca de agua */
/* Extraído de css/styles.css del sitio. Cárgalo DESPUÉS de styles.css o úsalo como referencia. */
.mm-header{animation:mm-sweep 7s ease-in-out infinite}
.mm-cat-btn{transition:background .2s}
.mm-search input{transition:background .2s,border-color .2s}
.mm-envio-suc{transition:background .2s}
.mm-act svg{transition:transform .2s}
.mm-badge.bump{animation:mm-bump .4s ease}
.mm-btn{transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.mm-ver-todo-flecha{transition:transform .2s}
.mm-valor-card{transition:transform .25s,box-shadow .25s,border-color .25s}
.mm-valor-icon{transition:box-shadow .3s,transform .3s}
.mm-new-sticker{animation:mm-new 2.4s ease-in-out infinite}
.mm-rail-arrow{transition:background .2s,color .2s,opacity .2s,transform .2s}
.mm-card{transition:transform .25s,box-shadow .25s,border-color .25s}
.mm-card-media svg{transition:transform .35s}
.mm-card-fav{transition:background .2s,color .2s,transform .2s}
.mm-card-quick{transition:opacity .2s,transform .2s}
.mm-card-afiliado{transition:background .2s}
.mm-cat-tile{transition:transform .25s,border-color .25s,box-shadow .25s}
.mm-cat-tile-mono{transition:background .25s}
.mmc-contacto-cta{transition:background .2s,color .2s,transform .2s}
.mmc-contacto-item{transition:background .2s,border-color .2s}
.mm-footer-list a{transition:opacity .2s,color .2s}
.mm-footer-social a{transition:background .2s,color .2s,transform .2s}
.fab{transition:transform .25s,opacity .25s,background .2s}
.floating-root.is-open .fab-opt:nth-child(3){transition-delay:.04s}
.floating-root.is-open .fab-opt:nth-child(4){transition-delay:.08s}
.fab-tip{transition:opacity .2s}
.mm-totop{transition:opacity .25s,transform .25s}
.mm-overlay{transition:opacity .25s}
.mm-drawer{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mm-modal-box{transition:opacity .25s,transform .25s}
.mm-suc{transition:border-color .2s,transform .2s,box-shadow .2s}
.mm-toast{transition:opacity .25s,transform .25s}
@media (max-width:1023px){
  .mm-mnav{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--mm-ink);box-shadow:0 20px 40px rgba(0,0,0,.2);max-height:0;overflow:hidden;transition:max-height .3s ease}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:860px){
  .floating-root{transition:opacity .25s,transform .25s}
}
/* Keyframes usados */
@keyframes mm-sweep{0%,60%{background-position:120% 0,0 0}100%{background-position:-120% 0,0 0}}
@keyframes mm-bump{50%{transform:scale(1.35)}}
@keyframes mm-new{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) scale(1.04)}}


/* ══ hover.css (paquete: extras/css) ══ */

/* HOVER · efectos al pasar el mouse */
/* Extraído de css/styles.css del sitio. Cárgalo DESPUÉS de styles.css o úsalo como referencia. */
.mm-cat-btn:hover,.mm-cat-btn[aria-expanded="true"]{background:rgba(0,0,0,.6)}
.mm-cat-menu a:hover{background:var(--mm-red-tint);color:var(--mm-red)}
.mm-search-btn:hover{background:rgba(255,255,255,.12)}
.mm-envio-suc:hover{background:rgba(0,0,0,.8)}
.mm-nav a:hover{opacity:1}
.mm-act:hover svg{transform:translateY(-1px)}
.mm-btn-primary:hover{background:var(--mm-red-hover);transform:translateY(-1px);box-shadow:0 8px 18px rgba(168,30,34,.25)}
.mm-btn-ghost:hover{border-color:var(--mm-ink);background:var(--mm-ink);color:#fff}
.mm-ver-todo:hover .mm-ver-todo-flecha{transform:translateX(4px)}
.mm-valor-card:hover{transform:translateY(-4px);box-shadow:var(--mm-sh-hover);border-color:rgba(255,200,30,.6)}
.mm-valor-card:hover .mm-valor-icon{box-shadow:0 0 0 10px rgba(255,200,30,.18);transform:scale(1.03)}
.mm-rail-arrow:hover{background:var(--bf-gold);color:var(--bf-gold-ink);border-color:var(--bf-gold)}
@media (hover:hover){
  .mm-card:hover{transform:translateY(-4px);box-shadow:var(--mm-sh-hover);border-color:rgba(255,200,30,.7)}
}
.mm-card:hover .mm-card-media svg{transform:scale(1.06)}
.mm-card-fav:hover{transform:scale(1.06)}
.mm-card:hover .mm-card-quick,.mm-card-quick:focus-visible{opacity:1;transform:none}
.mmq-btn:hover{background:var(--mm-surface-2)}
.mm-card-afiliado:hover{background:rgba(227,20,27,.14)}
.mm-cat-tile:hover{transform:translateY(-3px);border-color:rgba(255,200,30,.7);box-shadow:var(--mm-sh-hover)}
.mm-cat-tile:hover .mm-cat-tile-mono{background:#FFF4CC}
.mmc-contacto-cta:hover{background:var(--mm-wa);color:#0F2E1C;transform:translateY(-1px)}
a.mmc-contacto-item:hover{background:rgba(255,255,255,.14);border-color:rgba(255,200,30,.6)}
.mm-footer-list a:hover{opacity:1;color:var(--bf-gold)}
.mm-footer-all:hover{color:var(--bf-gold)}
.mm-footer-social a:hover{transform:translateY(-2px)}
#pieRedTiktok:hover{background:#25F4EE;color:#111}
#pieRedFacebook:hover{background:#1877F2}
#pieRedInstagram:hover{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.fab:hover{transform:scale(1.06)}
.fab-opt:hover .fab-tip{opacity:1}
.mm-x:hover{background:var(--mm-line)}
.mm-btn-wa:hover{background:#1FB957}
.mm-btn-light:hover{background:var(--mm-line)}
.mm-suc:hover{border-color:var(--mm-red);transform:translateY(-2px);box-shadow:var(--mm-sh-hover)}
.mm-btn-fb:hover{background:#166FE0}
@media (max-width:1023px){
  .mm-hd-burger:hover{background:rgba(0,0,0,.2)}
  .mm-mnav li a:hover,.mm-mnav li button:hover{background:var(--mm-surface-2)}
}
/* Keyframes usados */


/* ══ NOSOTROS (paquete: css/styles.css, seccion Nosotros) ══
   El dragon reemplaza a la mascota dentro de un contenedor con el aro
   rojo/dorado girando (el JS lo arma: el componente del sitio no lo tiene). */
.mm-nosotros-media{position:relative;display:grid;place-items:center;justify-self:center;width:100%}
.mm-nosotros-media .mm-nosotros-mascota{max-width:none;justify-self:center}
.mm-nosotros-stat-num{font-family:var(--bf-display);font-style:italic;font-weight:900;color:var(--bf-hot);font-variant-numeric:tabular-nums}



/* ══ AJUSTES SOBRE EL SITIO REAL (31-oct-2026, revision de Cristian) ══
   Van al final para ganarle a las reglas del paquete, que estan escritas
   para su replica del sitio y no siempre calzan con el real. */

/* Selector "Envios gratis / A todo Ibarra": el paquete lo oscurece al 80 %
   (en su replica esa caja era oscura); en el sitio es blanca y quedaba casi
   negra. Un tinte rojo suave, con el texto rojo que ya pone el sitio. */
.mm-envio-suc:hover{background:#FCE9EA}

/* "Gana con nosotros": el sitio pone texto blanco al pasar el mouse sobre
   fondo rojo; el paquete solo cambiaba el fondo a rosado claro y el texto
   blanco no se leia. Vuelve al rojo con texto blanco del sitio. */
.mm-card-afiliado:hover{background:var(--mm-red);border-color:var(--mm-red);color:#fff}

/* PC: el dragon sobre el mismo escenario rojo del celular (circulo, anillo
   de rayos dorados girando y entrada con rebote). Usa el recorte SIN fondo
   (bf-arte-recorte.webp, 1074 px) en lugar del arte con fondo gris, asi que
   sobran la mascara que fundia ese fondo y el parpadeo, que estaba calibrado
   sobre el otro arte (el celular tambien lo apaga). */
@media (min-width:861px){
  .bf-slide>.bf-art{isolation:isolate}
  /* El recorte no tiene la proporcion de la caja del arte (el arte con fondo
     si): sin alto en el <picture>, la imagen tomaba su alto natural y se
     comia el borde de abajo, con los productos. */
  .bf-slide .bf-art picture{height:100%}
  .mm-hero-track .bf-slide .bf-art img{-webkit-mask-image:none;mask-image:none;position:relative;z-index:2;filter:drop-shadow(0 18px 22px rgba(80,0,0,.28))}
  .bf-art .bf-fx{z-index:3}
  .bf-art .bf-fx .bf-lid{display:none}
  .bf-stage{display:block;position:absolute;z-index:1;left:50%;top:3%;width:calc(var(--h) * .9);height:auto;aspect-ratio:1;transform:translateX(-52%);border-radius:50%;
    background:radial-gradient(circle at 50% 42%,#FF4A4F 0%,#E3141B 42%,#A50D13 72%,#7A0A0E 100%);
    box-shadow:0 0 0 8px rgba(255,255,255,.55),0 0 0 9px rgba(227,20,27,.25),0 24px 60px rgba(160,10,16,.35);
    animation:bf-stage-in .9s .2s cubic-bezier(.2,1.2,.4,1) both}
  .bf-stage::before{content:"";position:absolute;inset:-14%;border-radius:50%;
    background:repeating-conic-gradient(from 0deg,rgba(255,200,30,.22) 0 6deg,transparent 6deg 18deg);
    -webkit-mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);mask-image:radial-gradient(circle,transparent 52%,#000 53%,#000 66%,transparent 70%);
    animation:bf-rays 30s linear infinite}
  .bf-stage::after{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-60%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
}

/* Nosotros: el aro rojo/dorado con los bordes iluminados (brillo dorado y
   rojo que late suave mientras el aro gira). */
.mm-nosotros-media::before{animation:mm-spin 12s linear infinite,bf-aro-luz 3.2s ease-in-out infinite}
@keyframes bf-aro-luz{
  0%,100%{box-shadow:0 0 0 3px rgba(255,200,30,.35),0 0 22px 4px rgba(255,200,30,.45),0 0 48px 10px rgba(227,20,27,.25)}
  50%{box-shadow:0 0 0 4px rgba(255,200,30,.55),0 0 34px 8px rgba(255,200,30,.7),0 0 70px 16px rgba(227,20,27,.4)}
}

@media (prefers-reduced-motion:reduce){
  .bf-stage,.bf-stage::before,.mm-nosotros-media::before,.mm-nosotros-mascota{animation:none}
}