/* =====================================================================
   FACCHIN BICYCLES - estilos propios (tema Toluca / Tiendanube)
   Archivo unico de CSS custom. Se carga desde layouts/layout.tpl con ?v=N.
   Reglas: prefijo fac- para todo lo nuevo, sin tocar los SCSS del tema.
   Indice:
     1. Tokens
     2. Heredado: tarjetas parejas, wallpaper de la home, Quienes Somos
     3. Heredado del campo CSS del admin: fotos cuadradas + SIN STOCK
     4. Sistema de aparicion (.fac-reveal)
     5. Global: barra de progreso, header, botones, tarjetas, titulos, footer
     6. Home
     7. Producto
     8. Categoria / busqueda
     9. Paginas institucionales
    10. Blog
    11. Movimiento reducido
    12. Fase 2: tarjetas del mismo tamano y columna de compra
    13. Home v2 - bandas (fondos por seccion, cabeceras, cintas, tarjetas
        con CTA, testimonios, producto principal, corredores, movimiento)
    14. Ficha de producto: galeria fija al scrollear
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap');

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root{
  --fac-orange:#ff6600;
  --fac-orange-dark:#e25400;
  --fac-black:#000;
  --fac-bg:#0d0d0d;
  --fac-ink:#141414;
  --fac-line:#ececec;
  --fac-display:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
  --fac-ease:cubic-bezier(.16,.68,.43,.99);
  --fac-shadow-dark:0 14px 30px rgba(0,0,0,.35);
  --fac-shadow-light:0 14px 30px rgba(0,0,0,.18);
  /* Fallback relativo (static/css -> static/images). layout.tpl declara la
     misma variable con la URL de static_url DESPUES de este archivo, asi
     que en la tienda gana esa; este valor solo cubre la vista previa. */
  --fac-wallpaper:url("../images/fondo-facchin.webp");
}

/* ---------------------------------------------------------------------
   2. Heredado (antes vivia en footer.tpl)
   --------------------------------------------------------------------- */

/* 2.1 Alineacion de productos: todas las tarjetas parejas y el bloque de
   precio + boton anclado al pie. */
.swiper-wrapper{ align-items:stretch; }
.swiper-slide{ height:auto; }
.js-item-product{ display:flex; height:100%; }
.js-item-product > .js-item-container{ display:flex; flex-direction:column; width:100%; height:100%; }
.js-item-product .item-image{ flex:0 0 auto; }
.js-item-product .item-name,
.js-item-product .js-item-name{ flex:1 0 auto; display:block; }
.js-item-product .item-price-container,
.js-item-product .js-price-display,
.js-item-product .item-button{ margin-top:auto; }
.js-item-product .item-price-container ~ .item-button,
.js-item-product .item-price-container ~ *{ margin-top:0; }
.js-masonry-grid > [class*="col-"],
.grid-row > [class*="col-"]{ display:flex; }
.js-masonry-grid > [class*="col-"] > .js-item-product,
.grid-row > [class*="col-"] > .js-item-product{ width:100%; }

/* 2.2 Wallpaper de fondo, solo en la portada */
body.template-home{
  background-color:var(--fac-bg);
  background-image:linear-gradient(rgba(0,0,0,.80), rgba(0,0,0,.80)), var(--fac-wallpaper);
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
}
@media (max-width:767px){
  body.template-home{ background-attachment:scroll; }
}
body.template-home header.js-head-main{ z-index:1040; }
body.template-home .js-home-sections-container,
body.template-home .js-home-sections-container > section,
body.template-home .section-featured-home,
body.template-home .section-video-home,
body.template-home .section-banners-home,
body.template-home .section-banners-featured-home,
body.template-home .section-brands-home,
body.template-home .section-informative-banners{ background-color:transparent; }
body.template-home .js-home-sections-container h1,
body.template-home .js-home-sections-container h2,
body.template-home .js-home-sections-container h3,
body.template-home .js-home-sections-container .section-title,
body.template-home .js-home-sections-container .title,
body.template-home .js-home-sections-container .h2,
body.template-home .js-home-sections-container .h3{ color:#fff; }
body.template-home .js-item-product > .js-item-container{ background-color:#fff; border-radius:8px; overflow:hidden; }
body.template-home .js-item-container h1,
body.template-home .js-item-container h2,
body.template-home .js-item-container h3,
body.template-home .js-item-container .title,
body.template-home .section-informative-banners h1,
body.template-home .section-informative-banners h2,
body.template-home .section-informative-banners h3,
body.template-home .section-informative-banners h4,
body.template-home .section-informative-banners .title,
body.template-home .section-informative-banners p,
body.template-home .section-informative-banners span,
body.template-home [class*="testimonial"] h1,
body.template-home [class*="testimonial"] h2,
body.template-home [class*="testimonial"] h3,
body.template-home [class*="testimonial"] .title{ color:var(--fac-ink); }

/* 2.3 Pagina "Quienes Somos" (acompana al HTML cargado en el admin) */
.fac-qs{
  --tinta:#14110f; --naranja:#ff5a00; --papel:#f4f1ec; --piedra:#6f6963; --panel:#141414;
  margin:0 0 3rem; background:var(--papel); color:var(--tinta); font-size:1.0625rem; line-height:1.7;
}
.fac-qs h2,
.fac-qs .fac-qs-hero-title{ font-family:var(--fac-display); font-weight:800; line-height:.95; letter-spacing:-.01em; margin:0; }
.fac-qs .fac-qs-texto h2,
.fac-qs .fac-qs-ficha h2{ color:var(--tinta); }
.fac-qs p{ color:var(--tinta); }
.fac-qs-hero{ position:relative; overflow:hidden; padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,3.5rem); background-color:var(--panel); color:var(--papel); }
.fac-qs-hero::before{
  content:""; position:absolute; inset:-4%; z-index:0; pointer-events:none;
  background-image:var(--fac-wallpaper); background-size:cover; background-position:center;
  animation:fac-rodar 26s ease-in-out infinite alternate;
}
.fac-qs-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(100deg, rgba(8,8,8,.90) 0%, rgba(8,8,8,.72) 55%, rgba(8,8,8,.55) 100%); }
@keyframes fac-rodar{ from{ transform:scale(1) translate3d(0,0,0); } to{ transform:scale(1.06) translate3d(-1.5%,0,0); } }
.fac-qs-hero > *{ position:relative; z-index:1; }
.fac-qs .fac-qs-hero-title{ font-size:clamp(2.6rem,8vw,5.2rem); text-transform:uppercase; color:#fff; max-width:15ch; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.fac-qs-hero p{ max-width:52ch; margin:1.3rem 0 0; color:#d6d1c9; font-size:clamp(1rem,2.4vw,1.18rem); line-height:1.6; }
.fac-qs-texto{ max-width:62ch; margin:0 auto; padding:clamp(2.2rem,5vw,3.2rem) 1.25rem 0; }
.fac-qs-texto h2{ font-size:clamp(1.6rem,4vw,2.2rem); text-transform:uppercase; margin-bottom:.9rem; }
.fac-qs-texto p{ margin:0 0 1.15rem; }
.fac-qs-texto p:last-child{ margin-bottom:0; }
.fac-qs-ficha{ max-width:62ch; margin:0 auto; padding:clamp(2.2rem,5vw,3.2rem) 1.25rem 0; }
.fac-qs-ficha h2{ font-size:clamp(1.4rem,3.4vw,1.85rem); text-transform:uppercase; padding-bottom:.6rem; border-bottom:3px solid var(--tinta); }
.fac-qs-ficha dl{ display:grid; grid-template-columns:minmax(7.5rem,11rem) 1fr; margin:0; }
.fac-qs-ficha dt,
.fac-qs-ficha dd{ margin:0; padding:.85rem 0; border-bottom:1px solid #ddd8d0; }
.fac-qs-ficha dt{ font-weight:700; color:var(--piedra); }
.fac-qs-ficha dd{ padding-left:1rem; color:var(--tinta); }
.fac-qs-cierre{ margin:clamp(2.2rem,5vw,3.2rem) 0 0; padding:clamp(1.8rem,4vw,2.6rem) 1.5rem; background:var(--panel); color:var(--papel); text-align:center; }
.fac-qs .fac-qs-cierre h2{ font-size:clamp(1.5rem,4vw,2rem); text-transform:uppercase; color:#fff; }
.fac-qs-cierre p{ max-width:46ch; margin:.8rem auto 1.5rem; color:#d6d1c9; }
.fac-qs-btn{ display:inline-block; padding:.85rem 2rem; background:var(--naranja); color:#fff; font-weight:700; font-size:1.05rem; text-decoration:none; border-radius:3px; transition:background-color .2s ease, transform .2s ease; }
.fac-qs-btn:hover,
.fac-qs-btn:focus{ background:#e04f00; color:#fff; text-decoration:none; transform:translateY(-2px); }
.fac-qs-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:no-preference){
  .fac-qs-hero-title,
  .fac-qs-hero p{ animation:fac-entrar .8s var(--fac-ease) both; }
  .fac-qs-hero p{ animation-delay:.15s; }
}
@keyframes fac-entrar{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@media (max-width:480px){
  .fac-qs-ficha dl{ grid-template-columns:1fr; }
  .fac-qs-ficha dt{ padding-bottom:0; border-bottom:0; }
  .fac-qs-ficha dd{ padding-left:0; padding-top:.2rem; }
}
/* Dentro de .fac-page el bloque se sale del ancho del texto y ocupa todo */
.fac-page__content .fac-qs{ font-size:1.0625rem; }

/* Credito de desarrollo (antes con style= inline en footer.tpl) */
.fac-credit{ padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }

/* ---------------------------------------------------------------------
   3. Heredado del campo "Edicion avanzada de CSS" del admin
   !important: gana al padding-bottom inline de .js-item-image-padding y al
   transform inline que lazysizes deja en img.js-item-image.
   --------------------------------------------------------------------- */
.js-item-product .product-item-image-container,
.js-item-product .js-item-image-padding{ aspect-ratio:1/1!important; height:auto!important; padding-bottom:0!important; }
.js-item-product img.js-item-image,
.js-item-product .product-item-image{ position:absolute!important; top:0!important; left:0!important; width:100%!important; height:100%!important; transform:none!important; object-fit:contain!important; object-position:center!important; }
/* El cartel va al final de la descripcion (columna flex) y ocupa el mismo
   alto que el bloque del boton COMPRAR (16 px de margen + 30 px): queda en su
   lugar, dentro de la tarjeta y sin cambiar el alto de la fila. */
.js-item-product .js-stock-label{ display:none!important; } /* la etiqueta del tema ocupa alto en la tarjeta: la reemplaza el cartel */
.js-item-product:has(.js-stock-label:not([style*="display"])) .js-item-description::after{ content:"SIN STOCK"; display:inline-block; align-self:flex-start; margin-top:16px; padding:0 16px; height:30px; line-height:30px; font-size:11px; font-weight:700; letter-spacing:.06em; color:#9a9a9a; background:#ececec; border-radius:3px; }

/* ---------------------------------------------------------------------
   4. Sistema de aparicion compartido
   El JS agrega .fac-reveal y luego .is-in. Si el JS no corre, nada lleva
   la clase y todo se ve. Si el observer nunca dispara, el JS revela todo
   a los 4 s.
   --------------------------------------------------------------------- */
.fac-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s var(--fac-ease);
  transition-delay:calc(var(--fac-i,0) * 70ms);
}
.fac-reveal-left{ transform:translateX(-24px); }
.fac-reveal-right{ transform:translateX(24px); }
.fac-reveal.is-in{ opacity:1; transform:none; }
html.no-js .fac-reveal{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------
   5. Global
   --------------------------------------------------------------------- */

/* 5.1 Barra de progreso de lectura */
.fac-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:1050;
  background:var(--fac-orange); transform-origin:0 50%; transform:scaleX(0);
  pointer-events:none; transition:opacity .3s ease;
}
body.fx-intro-open .fac-progress{ opacity:0; }

/* 5.2 Header: subrayado animado en el menu, foco naranja en el buscador,
   pulso del contador del carrito. !important: gana a .form-control:focus
   del tema. */
.nav-desktop .nav-list-link{ position:relative; }
.nav-desktop .nav-list-link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--fac-orange); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--fac-ease);
}
.nav-desktop .nav-list-link:hover::after,
.nav-desktop .nav-list-link:focus-visible::after,
.nav-desktop .nav-list-link.selected::after{ transform:scaleX(1); }
.js-search-input:focus,
.search-input:focus{ box-shadow:0 0 0 3px rgba(255,102,0,.35)!important; border-color:var(--fac-orange)!important; outline:none; }
.js-cart-widget-amount.fac-pulse{ animation:fac-badge .6s var(--fac-ease); }
@keyframes fac-badge{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); background:var(--fac-orange); } 100%{ transform:scale(1); } }

/* 5.3 Botones principales: brillo diagonal y levantada al pasar */
.btn-primary,
.btn-default,
.fac-qs-btn{ position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.btn-primary::after,
.btn-default::after,
.fac-qs-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform:translateX(-120%) skewX(-12deg); pointer-events:none;
}
.btn-primary:hover,
.btn-default:hover,
.fac-qs-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.btn-primary:hover::after,
.btn-default:hover::after,
.fac-qs-btn:hover::after{ transition:transform .55s ease; transform:translateX(400%) skewX(-12deg); }
.btn-primary:active,
.btn-default:active,
.fac-qs-btn:active{ transform:translateY(1px); box-shadow:none; }

/* 5.4 Tarjetas de producto. !important: gana al transform:none del bloque 3
   y a .btn-primary/.btn-default del tema en el boton COMPRAR. */
.js-item-product > .js-item-container{ transition:transform .3s var(--fac-ease), box-shadow .3s ease; border-radius:8px; }
.js-item-product:hover > .js-item-container{ transform:translateY(-4px); box-shadow:var(--fac-shadow-light); }
body.template-home .js-item-product:hover > .js-item-container{ box-shadow:var(--fac-shadow-dark); }
.js-item-product .item-image,
.js-item-product .product-item-image-container{ overflow:hidden; }
.js-item-product img.js-item-image,
.js-item-product .product-item-image{ transition:transform .5s var(--fac-ease)!important; }
.js-item-product:hover img.js-item-image,
.js-item-product:hover .product-item-image{ transform:scale(1.04)!important; }
.js-item-product .js-price-display{ font-weight:700; }
.js-item-product .js-addtocart.btn,
.js-item-product .btn-add-to-cart{ transition:background-color .18s ease, color .18s ease, border-color .18s ease; }
.js-item-product:hover .btn-add-to-cart,
.js-item-product:hover .js-item-submit-container .btn{ background-color:var(--fac-orange)!important; border-color:var(--fac-orange)!important; color:#fff!important; }

/* 5.5 Titulos de seccion: Barlow Condensed y barra naranja que crece */
.section-title,
.js-home-sections-container h2,
.page-header h1{
  font-family:var(--fac-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  position:relative; padding-bottom:12px;
}
.section-title::after,
.js-home-sections-container h2::after,
.page-header h1::after{
  content:""; display:block; width:48px; height:4px; margin-top:8px; border-radius:2px;
  background:var(--fac-orange); transform-origin:left; transform:scaleX(1);
  transition:transform .7s .25s var(--fac-ease);
}
.fac-reveal:not(.is-in)::after{ transform:scaleX(0); }
.text-center .section-title::after,
.text-center h2::after{ margin-left:auto; margin-right:auto; transform-origin:center; }
.section-title{ font-size:2rem; }
@media (min-width:768px){ .section-title{ font-size:2.4rem; } }
.page-header h1{ font-size:2.2rem; line-height:1.05; }
@media (min-width:768px){ .page-header h1{ font-size:2.8rem; } }
.template-product .page-header h1{ padding-bottom:4px; }
.template-product .page-header h1::after{ margin-top:6px; }

/* 5.6 Footer */
.js-footer .footer-menu-item a{ display:inline-block; position:relative; padding-left:0; transition:padding-left .2s ease, color .2s ease; }
.js-footer .footer-menu-item a::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--fac-orange); opacity:0; transition:opacity .2s ease; }
.js-footer .footer-menu-item a:hover{ padding-left:12px; }
.js-footer .footer-menu-item a:hover::before{ opacity:1; }
.js-footer .social-icon{ transition:transform .2s var(--fac-ease); }
.js-footer .social-icon:hover{ transform:scale(1.1); }
.js-footer .newsletter input:focus,
.section-newsletter-home .newsletter input:focus{ box-shadow:0 0 0 3px rgba(255,102,0,.35); border-color:var(--fac-orange); outline:none; }

/* 5.7 Boton flotante de WhatsApp: anillo suave cada 6 s */
.btn-whatsapp{ transition:bottom .3s var(--fac-ease); }
.btn-whatsapp::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(77,194,71,.6); animation:fac-ring 6s ease-out infinite;
  pointer-events:none;
}
@keyframes fac-ring{ 0%{ box-shadow:0 0 0 0 rgba(77,194,71,.6); } 12%{ box-shadow:0 0 0 14px rgba(77,194,71,0); } 100%{ box-shadow:0 0 0 0 rgba(77,194,71,0); } }
body.fac-sticky-on .btn-whatsapp{ bottom:calc(84px + var(--fac-bottom-offset, 0px)); }

/* ---------------------------------------------------------------------
   6. Home
   --------------------------------------------------------------------- */

/* 6.1 Hero: Ken Burns lento, flechas y puntos. !important: gana a
   .swiper-button-disabled y al margin inline de .swiper-pagination-bullet. */
/* Sin fundido inferior: los banners traen el texto y el boton pegados al
   borde de abajo y cualquier degradado los apaga. */
.section-slider-home .js-home-slider-container{ position:relative; }
.section-slider-home .swiper-slide{ overflow:hidden; }
.section-slider-home .swiper-slide-active .slider-image{ animation:fac-kenburns 8s ease-out forwards; }
@keyframes fac-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.section-slider-home .swiper-button-prev,
.section-slider-home .swiper-button-next,
.section-featured-home .swiper-button-prev,
.section-featured-home .swiper-button-next,
.section-main-product-home .swiper-button-prev,
.section-main-product-home .swiper-button-next{
  width:44px; height:44px; margin-top:-22px; border-radius:50%;
  background:var(--fac-orange); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease, transform .25s ease, background-color .2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.section-slider-home .swiper-button-prev svg,
.section-slider-home .swiper-button-next svg,
.section-featured-home .swiper-button-prev svg,
.section-featured-home .swiper-button-next svg,
.section-main-product-home .swiper-button-prev svg,
.section-main-product-home .swiper-button-next svg{ fill:#fff; width:18px; height:18px; }
.section-slider-home .section-slider:hover .swiper-button-prev,
.section-slider-home .section-slider:hover .swiper-button-next,
.section-featured-home .container:hover .swiper-button-prev,
.section-featured-home .container:hover .swiper-button-next,
.section-main-product-home:hover .swiper-button-prev,
.section-main-product-home:hover .swiper-button-next{ opacity:1; }
.section-slider-home .swiper-button-prev:hover,
.section-featured-home .swiper-button-prev:hover,
.section-slider-home .swiper-button-next:hover,
.section-featured-home .swiper-button-next:hover{ background:var(--fac-orange-dark); transform:scale(1.08); }
.section-slider-home .swiper-button-disabled,
.section-featured-home .swiper-button-disabled{ opacity:0!important; }
.section-slider-home .swiper-pagination-bullet{
  width:24px; height:3px; border-radius:2px; margin:0 4px!important; opacity:1;
  background:rgba(255,255,255,.35); transition:width .3s var(--fac-ease), background-color .3s ease;
}
.section-slider-home .swiper-pagination-bullet-active{ width:40px; background:var(--fac-orange); }

/* 6.2 Marcas: cinta continua. !important: gana al display inline que deja
   hideSwiperControls() del tema y al timing-function inline de Swiper. */
.section-brands-home{ background:transparent; }
.section-brands-home .js-swiper-brands-prev,
.section-brands-home .js-swiper-brands-next{ display:none!important; }
.section-brands-home .js-swiper-brands.fac-ribbon .swiper-wrapper{ transition-timing-function:linear!important; align-items:center; }
.section-brands-home .js-swiper-brands.fac-ribbon .swiper-slide{ width:auto; flex:0 0 auto; }
.section-brands-home .js-swiper-brands.fac-ribbon .swiper-wrapper.justify-content-center{ justify-content:flex-start!important; }
.section-brands-home .home-circle-image{ transition:transform .3s var(--fac-ease), box-shadow .3s ease; box-shadow:0 0 0 0 rgba(255,102,0,0); }
.section-brands-home a:hover .home-circle-image,
.section-brands-home .swiper-slide:hover .home-circle-image{ transform:scale(1.08); box-shadow:0 0 0 3px var(--fac-orange); }

/* 6.3 Banners de categoria y banners destacados: zoom + levantada.
   !important: gana a .textbanner-link:hover img.textbanner-image-effect. */
.section-banners-home .js-banner .textbanner,
.section-banners-featured-home .textbanner{
  border-radius:12px; overflow:hidden;
  transition:transform .35s var(--fac-ease), box-shadow .35s ease;
}
.section-banners-home .js-banner:hover .textbanner,
.section-banners-featured-home .col-grid:hover .textbanner{ transform:translateY(-4px); box-shadow:var(--fac-shadow-dark); }
.section-banners-home .textbanner-image,
.section-banners-featured-home .textbanner-image{ overflow:hidden; }
.section-banners-home .textbanner-image-effect,
.section-banners-featured-home .textbanner-image-effect{ transition:transform .6s var(--fac-ease)!important; }
.section-banners-home .js-banner:hover .textbanner-image-effect,
.section-banners-featured-home .col-grid:hover .textbanner-image-effect{ transform:scale(1.06)!important; }

/* 6.4 Banners informativos: icono en circulo naranja, tarjeta que levanta */
.section-informative-banners .card{ border-radius:12px; transition:transform .3s var(--fac-ease), box-shadow .3s ease; background:#fff; }
.section-informative-banners .swiper-slide:hover .card{ transform:translateY(-4px); box-shadow:var(--fac-shadow-dark); }
.section-informative-banners .home-circle-image{ background:var(--fac-orange); border-radius:50%; overflow:hidden; }
.section-informative-banners .home-circle-image img{ filter:brightness(0) invert(1); padding:12px; }

/* 6.5 Testimonios: comilla naranja grande. !important: gana a .card.p-3. */
.section-testimonials-home .card{ position:relative; border-radius:12px; padding-top:2.4rem!important; overflow:hidden; background:#fff; }
.section-testimonials-home .card::before{
  content:"\201C"; position:absolute; top:-6px; left:14px; font-family:var(--fac-display); font-weight:800;
  font-size:6rem; line-height:1; color:var(--fac-orange); opacity:.9; pointer-events:none;
}

/* 6.6 Video: si no llega el iframe, la seccion se colapsa desde JS
   (reversible). !important: gana al display de .section-video-home. */
.js-section-video.fac-hidden{ display:none!important; }

/* 6.7 Newsletter: borde superior naranja que se dibuja */
.section-newsletter-home .js-newsletter{ position:relative; padding-top:1.5rem; }
.section-newsletter-home .js-newsletter::before{
  content:""; position:absolute; top:0; left:50%; width:100%; max-width:320px; height:2px;
  background:var(--fac-orange); transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform .9s .2s var(--fac-ease);
}
.section-newsletter-home .js-newsletter.is-in::before{ transform:translateX(-50%) scaleX(1); }
.section-newsletter-home .newsletter input.form-control{ border-radius:4px; transition:box-shadow .2s ease, border-color .2s ease; }
.section-newsletter-home .newsletter .btn-primary{ background:var(--fac-orange); border-color:var(--fac-orange); }

/* ---------------------------------------------------------------------
   7. Pagina de producto (fondo blanco)
   --------------------------------------------------------------------- */

/* 7.1 Caja de compra como tarjeta. !important: gana a .px-md-3/.pt-md-3. */
.template-product .fac-buybox{
  background:#fff; border:1px solid var(--fac-line); border-radius:12px;
  padding:20px!important; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.template-product .fac-buybox .js-price-display{ font-size:2.2rem; font-family:var(--fac-display); font-weight:800; letter-spacing:.01em; }
@media (min-width:768px){ .template-product .fac-buybox .js-price-display{ font-size:2.6rem; } }
.fac-pill{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; vertical-align:middle;
  background:var(--fac-orange); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.04em; line-height:1.4;
}

/* 7.2 Bloque de llamadas a la accion (snipplet product-cta-facchin.tpl) */
.fac-cta{ margin:4px 0 18px; }
.fac-cta__row{ display:flex; flex-wrap:wrap; gap:10px; }
.fac-cta__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:8px 16px; border-radius:6px; border:2px solid var(--fac-orange);
  background:#fff; color:var(--fac-orange-dark); font-weight:700; font-size:.9rem; line-height:1.2;
  cursor:pointer; text-decoration:none; transition:background-color .18s ease, color .18s ease, transform .18s ease;
  flex:1 1 auto; text-align:center;
}
.fac-cta__btn:hover,
.fac-cta__btn:focus-visible{ background:var(--fac-orange); color:#fff; text-decoration:none; transform:translateY(-1px); }
.fac-cta__btn:active{ transform:translateY(1px); }
.fac-cta__wa{ flex-basis:100%; }
.fac-cta__ico{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
.fac-cta__ship,
.fac-cta__size{ display:none; }
.fac-cta__ship.is-on,
.fac-cta__size.is-on{ display:inline-flex; }
.fac-trust{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px dashed var(--fac-line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fac-trust li{ display:flex; align-items:center; gap:8px; font-size:.78rem; line-height:1.25; color:#555; }
.fac-trust__ico{ width:20px; height:20px; fill:var(--fac-orange); flex:0 0 auto; }
@media (max-width:480px){ .fac-trust{ grid-template-columns:1fr; gap:6px; } }

/* 7.3 Barra de compra fija (celular y tablet). Se apoya sobre el aviso de
   cookies fijo abajo: el JS mide su alto en --fac-bottom-offset. */
.fac-sticky{
  position:fixed; left:0; right:0; bottom:var(--fac-bottom-offset, 0px); z-index:900;
  display:none; align-items:center; gap:12px; padding:10px 14px;
  background:#fff; border-top:1px solid var(--fac-line); box-shadow:0 -8px 24px rgba(0,0,0,.12);
  transform:translateY(100%); transition:transform .35s var(--fac-ease);
}
@media (max-width:1024px){ .fac-sticky{ display:flex; } }
.fac-sticky.is-on{ transform:translateY(0); }
.fac-sticky__info{ flex:1 1 auto; min-width:0; }
.fac-sticky__name{ font-size:.8rem; font-weight:600; color:var(--fac-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-sticky__price{ font-family:var(--fac-display); font-weight:800; font-size:1.25rem; line-height:1.1; color:var(--fac-ink); }
.fac-sticky__btn{
  flex:0 0 auto; min-height:44px; padding:0 18px; border:0; border-radius:6px; cursor:pointer;
  background:var(--fac-orange); color:#fff; font-weight:700; font-size:.9rem; transition:background-color .18s ease;
}
.fac-sticky__btn:hover{ background:var(--fac-orange-dark); }
.fac-sticky__btn[disabled]{ opacity:.5; cursor:default; }

/* 7.4 Galeria: miniatura activa con borde naranja, zoom suave en la principal */
.template-product .product-thumb{ border:2px solid transparent; border-radius:6px; overflow:hidden; transition:border-color .2s ease, transform .2s ease; }
.template-product .product-thumb.selected,
.template-product .product-thumb:hover{ border-color:var(--fac-orange); }
.template-product .product-thumb:hover{ transform:translateY(-2px); }
.template-product .product-detail-slider .swiper-slide{ overflow:hidden; }
.template-product .product-detail-slider .product-slider-image{ transition:transform .5s var(--fac-ease); }
.template-product .product-detail-slider .swiper-slide:hover .product-slider-image{ transform:scale(1.03); }

/* ---------------------------------------------------------------------
   8. Categoria / busqueda
   !important: gana al fondo y color de .chip del tema.
   --------------------------------------------------------------------- */
.filters-sidebar .card{ border-radius:10px; transition:transform .25s var(--fac-ease), box-shadow .25s ease; }
.filters-sidebar .card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.chip,
.js-remove-filter.chip{ background:var(--fac-orange)!important; color:#fff!important; border-color:var(--fac-orange)!important; border-radius:999px; transition:background-color .18s ease; }
.chip:hover{ background:var(--fac-orange-dark)!important; }
.js-filters-badge{ background:var(--fac-orange); color:#fff; }

/* ---------------------------------------------------------------------
   9. Paginas institucionales (templates/page.tpl + about-facchin.tpl)
   --------------------------------------------------------------------- */
.fac-page__col{ max-width:1100px; margin:0 auto; }
.fac-page__content{ font-size:17px; line-height:1.7; color:#222; }
.fac-page__content > *{ max-width:100%; }
.fac-page__content h2,
.fac-page__content h3{ font-family:var(--fac-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--fac-ink); margin:1.6em 0 .6em; }
.fac-page__content h2{ font-size:2rem; }
.fac-page__content h3{ font-size:1.5rem; }
.fac-page__content h2:not(.fac-qs-hero-title)::after{ content:""; display:block; width:48px; height:4px; margin-top:8px; border-radius:2px; background:var(--fac-orange); }
.fac-page__content .fac-qs h2{ margin:0; }
.fac-page__content .fac-qs h2::after{ display:none; }
.fac-page__content .fac-qs-texto h2{ margin-bottom:.9rem; }
.fac-page__content p{ margin:0 0 1.1em; }
.fac-page__content ul:not(.fac-steps):not(.fac-trust){ padding-left:1.2em; }
.fac-page__content li::marker{ color:var(--fac-orange); }
.fac-page__content a:not(.fac-cta__btn):not(.fac-qs-btn):not(.fac-map):not(.fac-product){ color:var(--fac-orange-dark); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.fac-page__content a:not(.fac-cta__btn):not(.fac-qs-btn):not(.fac-map):not(.fac-product):hover{ border-bottom-color:var(--fac-orange-dark); }
.fac-page__content table{ width:100%; border-collapse:collapse; margin:0 0 1.2em; }
.fac-page__content th,
.fac-page__content td{ padding:.6em .8em; border-bottom:1px solid var(--fac-line); text-align:left; }
.fac-page__content tbody tr:nth-child(odd){ background:#f7f7f7; }
.fac-page__content img.user-page-logos{ display:inline-block; height:28px; width:auto; margin:4px 6px 4px 0; vertical-align:middle; }
/* El contenido pegado trae clases de layout ajenas: se neutralizan */
.fac-page__content .flex{ display:block; }
.fac-page__content [class*="pl-8"]{ padding-left:0; }
.fac-page__content p:empty,
.fac-page__content p.fac-empty{ display:none; }

/* 9.1 Acordeones (FAQ / Devoluciones) */
.fac-acc-tools{ display:flex; justify-content:flex-end; margin:0 0 12px; }
.fac-acc-toggle{
  background:transparent; border:1px solid var(--fac-line); border-radius:999px; padding:6px 14px;
  font-size:.8rem; font-weight:700; color:#444; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.fac-acc-toggle:hover{ border-color:var(--fac-orange); color:var(--fac-orange-dark); }
.fac-acc{ border:1px solid var(--fac-line); border-radius:10px; margin:0 0 10px; background:#fff; overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease; }
.fac-acc[open]{ border-color:rgba(255,102,0,.5); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.fac-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; font-family:var(--fac-display); font-weight:700; font-size:1.25rem; line-height:1.2; color:var(--fac-ink);
}
.fac-acc summary::-webkit-details-marker{ display:none; }
.fac-acc summary::after{ content:"+"; flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--fac-orange); font-size:1.2rem; font-weight:800; transition:transform .25s ease; }
.fac-acc[open] summary::after{ transform:rotate(45deg); }
.fac-acc summary:focus-visible{ outline:3px solid rgba(255,102,0,.5); outline-offset:-3px; }
.fac-acc__wrap{ overflow:hidden; transition:height .35s var(--fac-ease); }
.fac-acc__body{ padding:0 18px 16px; font-size:1rem; line-height:1.65; color:#333; }
.fac-acc__body > :last-child{ margin-bottom:0; }

/* 9.2 Pasos numerados (Como Comprar). !important: gana a las clases que el
   editor pego en el contenido (list-decimal, pl-8, mb-3, ...). */
.fac-steps{ list-style:none!important; counter-reset:fac-step; margin:1.2em 0 1.6em; padding:0!important; position:relative; display:block!important; }
.fac-steps::before{ content:""; position:absolute; left:23px; top:24px; bottom:24px; width:2px; background:linear-gradient(var(--fac-orange), rgba(255,102,0,.15)); }
.fac-steps > li{ position:relative; padding:6px 0 22px 68px!important; margin:0!important; counter-increment:fac-step; min-height:56px; list-style:none; }
.fac-steps > li::marker{ content:""; }
.fac-steps > li::before{
  content:counter(fac-step); position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background:var(--fac-orange); color:#fff; font-family:var(--fac-display); font-weight:800; font-size:1.5rem;
  display:grid; place-items:center; box-shadow:0 0 0 6px #fff;
}
.fac-steps > li strong{ display:block; font-family:var(--fac-display); font-weight:700; font-size:1.35rem; text-transform:uppercase; color:var(--fac-ink); margin-bottom:2px; }

/* 9.3 Tarjeta de contacto al final de FAQ / Devoluciones / Como comprar */
.fac-help{
  margin:28px 0 0; padding:24px; border-radius:12px; background:var(--fac-ink); color:#fff;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.fac-help__title{ font-family:var(--fac-display); font-weight:800; font-size:1.6rem; text-transform:uppercase; margin:0; line-height:1.05; color:#fff; }
.fac-help__text{ margin:4px 0 0; color:#cfcfcf; font-size:.95rem; }
.fac-help .fac-cta__btn{ flex:0 0 auto; background:var(--fac-orange); color:#fff; border-color:var(--fac-orange); }
.fac-help .fac-cta__btn:hover{ background:var(--fac-orange-dark); border-color:var(--fac-orange-dark); }

/* 9.4 Quienes Somos: bloques extra (snipplet about-facchin.tpl).
   !important: gana a .user-content a / ol del tema (subrayado y padding). */
.fac-about{ margin:0 0 3rem; }
.fac-about__title{ font-family:var(--fac-display); font-weight:800; font-size:2rem; text-transform:uppercase; letter-spacing:.02em; color:var(--fac-ink); margin:0 0 1.2rem; }
.fac-about__title::after{ content:""; display:block; width:48px; height:4px; margin-top:8px; border-radius:2px; background:var(--fac-orange); }

.fac-numbers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.fac-num{ background:var(--fac-ink); color:#fff; border-radius:12px; padding:22px 18px; text-align:center; }
.fac-num__value{ display:block; font-family:var(--fac-display); font-weight:800; font-size:clamp(2.6rem,6vw,4.2rem); line-height:1; color:var(--fac-orange); }
.fac-num__value--text{ font-size:clamp(1.6rem,3.6vw,2.4rem); }
.fac-num__label{ display:block; margin-top:6px; font-size:.9rem; color:#d6d1c9; }
@media (max-width:640px){ .fac-numbers{ grid-template-columns:1fr; } }

.fac-brands{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.fac-brands__item{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border-radius:50%; background:var(--fac-ink); padding:18px; transition:transform .3s var(--fac-ease), box-shadow .3s ease; }
.fac-brands__item:hover{ transform:scale(1.06); box-shadow:0 0 0 3px var(--fac-orange); }
.fac-brands__item img{ max-width:100%; max-height:100%; object-fit:contain; }

.fac-timeline{ list-style:none; margin:0; padding:0!important; position:relative; }
.fac-timeline::before{ content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--fac-line); }
.fac-timeline::after{ content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:var(--fac-orange); transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--fac-ease); }
.fac-timeline.is-drawn::after{ transform:scaleY(1); }
.fac-timeline__item{ position:relative; padding:0 0 22px 48px; list-style:none; }
.fac-timeline__item::before{ content:""; position:absolute; left:8px; top:6px; width:16px; height:16px; border-radius:50%; background:var(--fac-orange); box-shadow:0 0 0 4px #fff; transform:scale(0); transition:transform .4s var(--fac-ease); }
.fac-timeline.is-drawn .fac-timeline__item::before{ transform:scale(1); transition-delay:calc(var(--fac-i,0) * .3s); }
.fac-timeline__step{ display:block; font-family:var(--fac-display); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fac-orange-dark); }
.fac-timeline__text{ display:block; font-size:1.1rem; color:var(--fac-ink); }

.fac-products{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:767px){ .fac-products{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fac-product{ display:block; background:#fff; border:1px solid var(--fac-line); border-radius:12px; overflow:hidden; text-decoration:none!important; color:var(--fac-ink); transition:transform .3s var(--fac-ease), box-shadow .3s ease; }
.fac-product:hover{ transform:translateY(-4px); box-shadow:var(--fac-shadow-light); }
.fac-product__img{ aspect-ratio:1/1; overflow:hidden; background:#fff; }
.fac-product__img img{ width:100%; height:100%; object-fit:contain; transition:transform .5s var(--fac-ease); }
.fac-product:hover .fac-product__img img{ transform:scale(1.04); }
.fac-product__body{ padding:12px 14px 14px; }
.fac-product__name{ display:block; font-size:.9rem; line-height:1.3; margin-bottom:6px; color:var(--fac-ink); }
.fac-product__price{ display:block; font-weight:800; font-size:1.05rem; color:var(--fac-ink); }

.fac-map{
  display:flex; align-items:center; gap:18px; padding:22px; border-radius:12px;
  background:#fff; border:1px solid var(--fac-line); color:var(--fac-ink); text-decoration:none!important;
  transition:transform .3s var(--fac-ease), box-shadow .3s ease, border-color .3s ease;
}
.fac-map:hover{ transform:translateY(-3px); box-shadow:var(--fac-shadow-light); border-color:var(--fac-orange); }
.fac-map__ico{ flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--fac-orange); display:grid; place-items:center; }
.fac-map__ico svg{ width:26px; height:26px; fill:#fff; }
.fac-map__addr{ display:block; font-family:var(--fac-display); font-weight:800; font-size:1.6rem; line-height:1.05; text-transform:uppercase; color:var(--fac-ink); }
.fac-map__hint{ display:block; margin-top:4px; font-size:.9rem; color:#666; }

/* ---------------------------------------------------------------------
   10. Blog (Team Facchin)
   !important: gana al padding-bottom inline de .post-item-image-container,
   a .img-absolute/.fade-in del tema y al subrayado de .user-content a.
   --------------------------------------------------------------------- */
.fac-blog .post-item{ background:#fff; border:1px solid var(--fac-line); border-radius:12px; overflow:hidden; transition:transform .3s var(--fac-ease), box-shadow .3s ease; height:100%; }
.fac-blog .post-item:hover{ transform:translateY(-4px); box-shadow:var(--fac-shadow-light); }
.fac-blog .post-item-image-container{ position:relative; aspect-ratio:16/10; overflow:hidden; padding:0!important; height:auto!important; }
.fac-blog .post-item-image{ position:absolute!important; top:0; left:0; width:100%!important; height:100%!important; object-fit:cover; transform:none!important; transition:transform .6s var(--fac-ease)!important; }
.fac-blog .post-item:hover .post-item-image{ transform:scale(1.05)!important; }
.fac-blog .post-item-information{ padding:16px 18px 18px; }
.fac-blog .post-item-title{ font-family:var(--fac-display); font-weight:800; font-size:1.5rem; line-height:1.1; text-transform:uppercase; color:var(--fac-ink); }
.fac-blog .post-item-summary{ color:#555; }
.fac-blog .post-item-read-more{ display:inline-flex; align-items:center; gap:6px; color:var(--fac-orange-dark)!important; font-weight:700; }
.fac-blog .post-item-read-more::after{ content:"\2192"; display:inline-block; transition:transform .25s var(--fac-ease); }
.fac-blog .post-item:hover .post-item-read-more::after{ transform:translateX(4px); }

.fac-blog .post-date,
.fac-blog-post .post-date{ display:inline-block; padding:2px 10px; border-radius:999px; background:var(--fac-orange); color:#fff; font-size:.75rem; font-weight:700; }
.fac-post-hero{ position:relative; border-radius:14px; overflow:hidden; margin:0 0 28px; background:var(--fac-ink); }
.fac-post-hero img{ display:block; width:100%; height:auto; max-height:520px; object-fit:cover; margin:0!important; padding:0!important; opacity:1!important; }
.fac-post-hero::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%); }
.fac-post-hero__title{ position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:24px; color:#fff; font-family:var(--fac-display); font-weight:800; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.02; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.fac-blog-post .page-header.fac-hero-done h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fac-blog-post .blog-post-page{ max-width:760px; margin:0 auto; }
.fac-blog-post .post-content{ font-size:17px; line-height:1.75; color:#222; }
.fac-blog-post .post-content .flex{ display:block; }
.fac-blog-post .post-content ul,
.fac-blog-post .post-content ol{ padding-left:1.3em; }
.fac-blog-post .post-content li::marker{ color:var(--fac-orange); }
.fac-blog-post .post-content img{ max-width:100%; height:auto; border-radius:10px; }
.fac-post-footer{ margin:32px 0 0; padding-top:24px; border-top:1px solid var(--fac-line); }
.fac-post-footer .fac-help{ margin:0 0 18px; }
.fac-post-back{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--fac-ink); text-decoration:none!important; }
.fac-post-back::before{ content:"\2190"; transition:transform .25s var(--fac-ease); }
.fac-post-back:hover::before{ transform:translateX(-4px); }
.fac-post-back:hover{ color:var(--fac-orange-dark); }

/* ---------------------------------------------------------------------
   11. Movimiento reducido: todo visible, sin transiciones ni loops
   !important: gana a todas las reglas de movimiento de este archivo.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fac-reveal,
  .fac-reveal-left,
  .fac-reveal-right{ opacity:1!important; transform:none!important; transition:none!important; }
  .fac-reveal:not(.is-in)::after{ transform:none!important; }
  .section-title::after,
  .js-home-sections-container h2::after,
  .page-header h1::after,
  .fac-timeline::after,
  .fac-timeline__item::before,
  .section-newsletter-home .js-newsletter::before{ transition:none!important; }
  .fac-timeline::after{ transform:scaleY(1)!important; }
  .fac-timeline__item::before{ transform:scale(1)!important; }
  .section-newsletter-home .js-newsletter::before{ transform:translateX(-50%) scaleX(1)!important; }
  .section-slider-home .swiper-slide-active .slider-image,
  .btn-whatsapp::before,
  .fac-qs-hero::before,
  .js-cart-widget-amount.fac-pulse{ animation:none!important; }
  .fac-sticky,
  .btn-primary, .btn-default, .fac-qs-btn,
  .btn-primary::after, .btn-default::after, .fac-qs-btn::after,
  .js-item-product > .js-item-container,
  .js-item-product img.js-item-image,
  .fac-acc__wrap{ transition:none!important; }
  .section-brands-home .js-swiper-brands.fac-ribbon .swiper-wrapper{ transition:none!important; }
}

/* ---------------------------------------------------------------------
   12. Fase 2: tarjetas del mismo tamano y columna de compra
   --------------------------------------------------------------------- */

/* 12.1 Tarjetas parejas: el nombre ocupa siempre dos lineas, la foto es
   cuadrada (bloque 3) y precio + boton quedan anclados al pie. */
.js-item-product .js-item-description{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.js-item-product .js-item-name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  line-height:1.35; min-height:2.7em; flex:0 0 auto;
}
.js-item-product .js-item-description .item-price-container,
.js-item-product .js-item-description .js-price-container{ margin-top:auto; }
.js-item-product .js-item-description .item-price-container ~ *{ margin-top:0; }

/* 12.2 Cajas de pago bajo el precio: los nodos son los del tema, movidos por
   el JS; aca solo se los viste. !important: gana a las utilidades mt-*/mb-*. */
.fac-paybox{ border-radius:10px; padding:14px; margin:10px 0 0; }
.fac-paybox + .fac-paybox{ margin-top:8px; }
.fac-paybox--transfer{ background:rgba(255,102,0,.08); border-left:4px solid var(--fac-orange); }
.fac-paybox--inst{ background:#f4f4f4; border-left:4px solid #d9d9d9; }
.fac-paybox__label{ font-family:var(--fac-display); font-weight:700; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--fac-ink); }
.fac-paybox--transfer .js-payment-discount-price-product-container{ margin:2px 0 0!important; }
.fac-paybox--transfer .js-payment-discount-price-product{ display:inline-block; font-family:var(--fac-display); font-weight:800; font-size:1.9rem; line-height:1.05; color:var(--fac-ink); }
.fac-paybox--transfer .js-product-discount-container{ margin:4px 0 0!important; font-size:.8rem; color:#555; }
.fac-paybox--inst .js-product-payments-container{ margin:0!important; }
.fac-paybox--inst .js-max-installments-container{ margin:2px 0 4px!important; }
.fac-paybox__logos{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.fac-paybox__logos img{ height:20px; width:auto; border-radius:3px; background:#fff; }
.fac-freeship{ display:flex; align-items:center; gap:8px; }
.fac-freeship__ico{ width:20px; height:20px; fill:var(--fac-orange); flex:0 0 auto; }

/* ---------------------------------------------------------------------
   13. Home v2 - bandas
   Cada seccion de la portada es una banda de ancho completo con su propio
   fondo. Las secciones son hijas directas de .js-home-sections-container
   y ya miden el 100% del viewport, asi que el fondo va en la seccion
   misma: no hace falta el truco de -50vw y los anchos de Swiper quedan
   como estan. El wallpaper solo se ve en el hero, en los banners de
   categorias y en la banda "Atendida por corredores".
   !important: gana a las utilidades del tema (mt-2, mb-3, p-3, mx-4...),
   a .section-*-colors y a los estilos inline de la tabla pegada en la
   descripcion del producto principal.
   --------------------------------------------------------------------- */
body.template-home{ --fac-band-pad:64px; }
@media (max-width:767px){ body.template-home{ --fac-band-pad:40px; } }

/* 13.1 Bandas: fondo, respiro y una linea de 1 px entre bandas seguidas */
body.template-home .js-home-sections-container > .section-brands-home,
body.template-home .js-home-sections-container > .section-featured-home,
body.template-home .js-home-sections-container > .section-banners-home,
body.template-home .js-home-sections-container > .section-informative-banners,
body.template-home .js-home-sections-container .section-testimonials-home,
body.template-home .js-home-sections-container > .section-banners-featured-home,
body.template-home .js-home-sections-container > .section-main-product-home,
body.template-home .js-home-sections-container > .section-newsletter-home,
body.template-home .fac-corredores{
  position:relative; margin:0; padding:var(--fac-band-pad) 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.template-home .js-home-sections-container > .section-banners-home,
body.template-home .fac-corredores{ background:transparent; box-shadow:none; }
body.template-home .js-home-sections-container > .section-brands-home{ background:#000; }
body.template-home .js-home-sections-container > .section-featured-home{
  background-color:#141414;
  background-image:radial-gradient(600px 300px at 0 0, rgba(255,102,0,.18), transparent);
  border-top:3px solid var(--fac-orange);
}
body.template-home .js-home-sections-container > .js-section-products-sale{
  background-color:#0d0d0d;
  background-image:radial-gradient(600px 300px at 100% 100%, rgba(255,102,0,.18), transparent);
  border-top:0;
}
body.template-home .js-home-sections-container > .section-informative-banners{ background:#0d0d0d; }
body.template-home .js-home-sections-container > .section-video-home{ background:#000; }
body.template-home .js-home-sections-container .section-testimonials-home{ background:#0d0d0d; }
body.template-home .js-home-sections-container > .section-banners-featured-home{ background:#141414; }
body.template-home .js-home-sections-container > .section-main-product-home{ background:#141414; color:#fff; }
body.template-home .js-home-sections-container > .section-newsletter-home{ background:#000!important; border-top:3px solid var(--fac-orange); box-shadow:none; }

/* 13.2 Cabecera de seccion: el h2 del tema envuelto por el JS en una fila
   con el link "Ver todo" (solo donde la URL ya existe en la pagina). El
   titulo entra desde la izquierda y el link aparece despues. */
.fac-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 28px; }
.fac-sec-head > h2{ margin:0!important; font-size:2.2rem; line-height:1; }
@media (min-width:768px){ .fac-sec-head > h2{ font-size:2.6rem; } }
.fac-sec-head > h2.fac-reveal:not(.is-in){ transform:translateX(-24px); }
.fac-sec-head__link{
  flex:0 0 auto; white-space:nowrap; font-family:var(--fac-display); font-weight:700; font-size:1.05rem;
  letter-spacing:.06em; text-transform:uppercase; color:#fff!important; text-decoration:none!important;
  opacity:1; transition:opacity .5s .55s ease, color .2s ease;
}
.fac-sec-head > h2.fac-reveal:not(.is-in) ~ .fac-sec-head__link{ opacity:0; }
.fac-sec-head__link::after{ content:"\2192"; display:inline-block; margin-left:6px; transition:transform .25s var(--fac-ease); }
.fac-sec-head__link:hover{ color:var(--fac-orange)!important; }
.fac-sec-head__link:hover::after{ transform:translateX(4px); }

/* 13.3 Cinta de beneficios (fac-marquee): los titulos de los banners
   informativos leidos del DOM, en loop continuo; se frena al pasar el mouse.
   La pista son dos mitades identicas: al llegar a -50% arranca de nuevo. */
.fac-marquee{
  position:relative; height:44px; overflow:hidden; display:flex; align-items:center;
  background:var(--fac-orange); color:#000;
  font-family:var(--fac-display); font-weight:700; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
}
.fac-marquee__track{ display:flex; flex:0 0 auto; white-space:nowrap; will-change:transform; animation:fac-marquee var(--fac-marquee-dur, 30s) linear infinite; }
.fac-marquee:hover .fac-marquee__track{ animation-play-state:paused; }
.fac-marquee__seq{ display:flex; flex:0 0 auto; }
.fac-marquee__item{ display:inline-flex; align-items:center; padding:0 0 0 24px; }
.fac-marquee__item::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:24px; border-radius:50%; background:#000; }
@keyframes fac-marquee{ to{ transform:translateX(-50%); } }

/* 13.4 Marcas: cinta de 100vw con fundido en los bordes y logos de 96 px.
   El Swiper del tema se destruye desde el JS y la pista corre con una
   animacion CSS (dos mitades iguales, como la cinta de beneficios). */
body.template-home .section-brands-home .container{ max-width:none; padding:0; }
body.template-home .section-brands-home .container > .row{ margin:0; }
body.template-home .section-brands-home .container > .row > [class*="col-"]{ flex:0 0 100%; max-width:100%; padding:0; }
body.template-home .section-brands-home .js-swiper-brands{
  width:100%!important; margin:0!important; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.template-home .section-brands-home .js-swiper-brands.fac-ribbon .swiper-wrapper{
  display:flex; width:max-content; justify-content:flex-start!important;
  transform:none; transition:none!important; animation:fac-marquee var(--fac-ribbon-dur, 40s) linear infinite;
}
body.template-home .section-brands-home .js-swiper-brands.fac-ribbon:hover .swiper-wrapper{ animation-play-state:paused; }
.fac-ribbon__half{ display:flex; flex:0 0 auto; align-items:center; gap:48px; padding:0 24px; }
body.template-home .section-brands-home .js-swiper-brands.fac-ribbon .swiper-slide{ width:auto; flex:0 0 auto; margin:0!important; }
body.template-home .section-brands-home .home-circle-image{ width:96px; height:96px; }
@media (max-width:767px){ body.template-home .section-brands-home .home-circle-image{ width:72px; height:72px; } }

/* 13.5 Tarjetas de producto con CTA (grillas y carruseles de toda la tienda):
   precio grande, transferencia como pill naranja con el % calculado por el
   JS, cuotas como chip gris, boton que late mientras la tarjeta esta en hover. */
.js-item-product .js-price-display{ font-family:var(--fac-display); font-weight:800; font-size:22px; line-height:1.1; letter-spacing:.01em; }
.js-item-product .js-payment-discount-price-product-container{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px 5px; max-width:100%;
  margin:8px 0 0!important; padding:6px 10px; border-radius:999px;
  background:var(--fac-orange); color:#fff!important; font-weight:700; font-size:13px; line-height:1.2;
}
.js-item-product .js-payment-discount-price-product-container span{ color:#fff; }
/* El importe no se parte; "con Transferencia" va junto (el JS lo envuelve en
   .fac-pill__with) y solo puede bajar de linea como bloque */
.js-item-product .js-payment-discount-price-product{ font-weight:800; white-space:nowrap; }
.fac-pill__with{ white-space:nowrap; }
.fac-off{ display:inline-block; margin:0 2px 0 -3px; padding:1px 7px; border-radius:999px; background:#000; color:#fff; font-size:11px; line-height:1.4; font-weight:800; letter-spacing:.02em; }
/* Tarjetas angostas (< 220 px, clase puesta por el JS): el chip solo, arriba del importe */
.fac-pill--narrow .fac-off{ flex:0 0 100%; max-width:max-content; margin-left:0; }
.js-item-product .js-max-installments-container{
  display:inline-block; max-width:100%; margin:6px 0 0!important; padding:3px 10px; border-radius:999px;
  background:rgba(0,0,0,.06); color:#333!important; font-size:.78rem; line-height:1.4;
}
.js-item-product .js-max-installments-container .product-installments{ color:#333!important; }
/* Grillas donde la tarjeta es el item flex de la fila (categoria, busqueda):
   con el height:100% del bloque 2.1 la tarjeta no se estira a la fila y las
   pills que ocupan dos lineas la dejan mas alta; con auto se estira. */
.row-grid > .js-item-product,
.js-product-table > .js-item-product{ height:auto; }
.js-item-product:hover > .js-item-container{ box-shadow:0 0 0 1px var(--fac-orange), var(--fac-shadow-light); }
body.template-home .js-item-product:hover > .js-item-container{ box-shadow:0 0 0 1px var(--fac-orange), var(--fac-shadow-dark); }
.js-item-product:hover .btn-add-to-cart,
.js-item-product:hover .js-item-submit-container .btn{ animation:fac-cta-pulse 2.4s ease-out infinite; }
@keyframes fac-cta-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,102,0,.55); } 70%{ box-shadow:0 0 0 8px rgba(255,102,0,0); } 100%{ box-shadow:0 0 0 0 rgba(255,102,0,0); } }

/* 13.6 Banners informativos: cuatro tarjetas de vidrio oscuro */
body.template-home .section-informative-banners .card{
  height:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  transition:transform .3s var(--fac-ease), border-color .3s ease, box-shadow .3s ease;
}
body.template-home .section-informative-banners .swiper-slide:hover .card{ transform:translateY(-4px); border-color:var(--fac-orange); box-shadow:var(--fac-shadow-dark); }
body.template-home .section-informative-banners h3,
body.template-home .section-informative-banners h4,
body.template-home .section-informative-banners p,
body.template-home .section-informative-banners span{ color:#fff; }
body.template-home .section-informative-banners .home-circle-image{ background:var(--fac-orange); }
body.template-home .section-informative-banners .home-circle-image svg{ fill:#fff; }

/* 13.7 Testimonios: banda oscura, tarjetas con foto (si la hay), avatar de
   iniciales, nombre, marca "G", estrellas y texto recortado a 4 lineas. El
   JS solo reordena los nodos del tema dentro de cada tarjeta. */
body.template-home .section-testimonials-home .js-testimonial-title{ color:#fff; }
body.template-home .section-testimonials-home .card{
  height:100%; padding:20px!important; text-align:left!important; background:#151515; border:1px solid rgba(255,255,255,.08); border-radius:16px;
  transition:transform .3s var(--fac-ease), border-color .3s ease, box-shadow .3s ease;
}
body.template-home .section-testimonials-home .card > *{ text-align:left!important; }
body.template-home .section-testimonials-home .card::before{ content:none; }
body.template-home .section-testimonials-home .js-testimonial-slide:hover .card{ transform:translateY(-4px); border-color:var(--fac-orange); box-shadow:var(--fac-shadow-dark); }
body.template-home .section-testimonials-home .fac-testi__media{ width:100%; height:auto; aspect-ratio:16/10; margin:0 0 16px; border-radius:12px; overflow:hidden; }
body.template-home .section-testimonials-home .fac-testi__media img{ object-fit:cover; }
.fac-testi__head{ display:flex; align-items:center; gap:12px; }
.fac-testi__avatar{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--fac-orange); color:#fff; font-family:var(--fac-display); font-weight:800; font-size:1.15rem; letter-spacing:.04em;
  transform:scale(1); transition:transform .5s .15s var(--fac-ease);
}
body.template-home .section-testimonials-home .fac-reveal:not(.is-in) .fac-testi__avatar{ transform:scale(0); }
body.template-home .section-testimonials-home .fac-testi__name{
  flex:1 1 auto; min-width:0; margin:0!important; font-family:var(--fac-display); font-weight:700; font-size:1.2rem!important; line-height:1.1; color:#fff;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.fac-testi__g{ flex:0 0 auto; width:18px; height:18px; }
.fac-testi__stars{ margin:12px 0 8px; color:var(--fac-orange); font-size:1rem; letter-spacing:.12em; line-height:1; }
body.template-home .section-testimonials-home .fac-testi__text{
  margin:0!important; font-size:15px!important; line-height:1.55; color:rgba(255,255,255,.85);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
body.template-home .section-testimonials-home .fac-testi__text.is-open{ display:block; -webkit-line-clamp:unset; }
.fac-testi__more{ margin:8px 0 0; padding:0; border:0; background:transparent; color:var(--fac-orange); font-weight:700; font-size:.85rem; cursor:pointer; }
.fac-testi__more:hover{ text-decoration:underline; }
/* Gancho para el sello de puntuacion de Google cuando el cliente pase la
   cifra real (no se inventa): .fac-reviews-badge{ ... } */

/* 13.8 Banners destacados (BICICLETAS / SERVICIOS): los dos de la misma
   altura, foto entera sobre fondo naranja, sin recortes */
body.template-home .section-banners-featured-home .section-banners-home{ margin:0; padding:0; background:transparent; }
body.template-home .section-banners-featured-home .row-grid{ align-items:stretch; }
body.template-home .section-banners-featured-home .col-grid{ display:flex; }
body.template-home .section-banners-featured-home .textbanner{ flex:1 1 auto; width:100%; margin:0; background:var(--fac-orange); border-radius:16px; overflow:hidden; }
body.template-home .section-banners-featured-home .textbanner-link{ display:block; height:100%; }
body.template-home .section-banners-featured-home .textbanner-image{ height:100%; padding:0!important; }
/* cover, no contain: con contain el banner mas bajo (Servicios) dejaba dos
   franjas naranjas lisas arriba y abajo que no combinan con su degradado. El
   texto de los banners esta centrado, asi que recortar los bordes no pierde nada. */
body.template-home .section-banners-featured-home .textbanner-image img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:767px){
  body.template-home .section-banners-featured-home .col-grid + .col-grid{ margin-top:16px; }
  body.template-home .section-banners-featured-home .textbanner-image{ aspect-ratio:3/2; }
}

/* 13.9 Producto principal: todo dentro de una tarjeta oscura con brillo
   naranja detras de la foto; cajas de pago como en la pagina de producto;
   tabla de "Dimensiones" en oscuro (el JS esconde las filas vacias). */
body.template-home .section-main-product-home .col-md-11{
  position:relative; overflow:hidden; padding:28px; background:#181818;
  border:1px solid rgba(255,255,255,.08); border-radius:20px;
}
@media (max-width:767px){ body.template-home .section-main-product-home .col-md-11{ padding:16px; } }
body.template-home .section-main-product-home .col-md-11::before{
  content:""; position:absolute; left:-10%; top:-20%; width:55%; height:140%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,102,0,.22), transparent);
}
body.template-home .section-main-product-home .col-md-11 > .row{ position:relative; }
body.template-home .section-main-product-home,
body.template-home .section-main-product-home .js-product-container,
body.template-home .section-main-product-home label,
body.template-home .section-main-product-home .js-product-form{ color:#fff; }
body.template-home .section-main-product-home h2{ font-size:2rem; line-height:1.05; }
@media (min-width:768px){ body.template-home .section-main-product-home h2{ font-size:2.4rem; } }
body.template-home .section-main-product-home #price_display{ font-family:var(--fac-display); font-weight:800; font-size:2.6rem; line-height:1; color:#fff; }
body.template-home .section-main-product-home .js-compare-price-display{ color:#999; }
.fac-mp-pay{ border-radius:12px; padding:12px 16px; margin:12px 0 0; }
.fac-mp-pay--transfer{ background:var(--fac-orange); color:#fff; }
.fac-mp-pay--transfer,
.fac-mp-pay--transfer span,
.fac-mp-pay--transfer div{ color:#fff!important; }
.fac-mp-pay--transfer .js-payment-discount-price-product-container{ margin:0!important; }
.fac-mp-pay--transfer .js-payment-discount-price-product{ font-family:var(--fac-display); font-weight:800; font-size:1.9rem; line-height:1.05; }
.fac-mp-pay--transfer .js-product-discount-container{ margin:2px 0 0!important; font-size:.85rem; }
.fac-mp-pay--inst{ background:rgba(255,255,255,.08); }
.fac-mp-pay--inst .js-max-installments-container{ margin:0!important; }
.fac-mp-pay--inst .product-installments{ color:#fff!important; font-weight:700; }
body.template-home .section-main-product-home .js-product-form .row > .col-4,
body.template-home .section-main-product-home .js-product-form .row > .col-8{ flex:0 0 100%; max-width:100%; padding:0 15px!important; }
body.template-home .section-main-product-home .js-product-form .row > .col-8{ margin-top:12px; }
body.template-home .section-main-product-home .btn-add-to-cart{
  min-height:52px; background:var(--fac-orange); border-color:var(--fac-orange); color:#fff;
  font-family:var(--fac-display); font-weight:700; font-size:1.2rem; letter-spacing:.04em; text-transform:uppercase;
}
body.template-home .section-main-product-home .form-control,
body.template-home .section-main-product-home .form-select{ background:#111!important; color:#fff!important; border-color:rgba(255,255,255,.15)!important; }
body.template-home .section-main-product-home .form-quantity-icon svg{ fill:#fff; }
body.template-home .section-main-product-home .js-product-description{ color:#bbb; }
body.template-home .section-main-product-home .js-view-description .btn-link{ color:var(--fac-orange); }
body.template-home .section-main-product-home .js-product-description table{
  width:100%!important; margin:12px 0 0!important; background:transparent!important; color:#bbb!important;
  font-family:inherit!important; font-size:.85rem!important; border:0!important; border-top:1px solid rgba(255,255,255,.1)!important;
}
body.template-home .section-main-product-home .js-product-description th,
body.template-home .section-main-product-home .js-product-description td{
  background:transparent!important; color:#bbb!important; padding:6px 8px!important;
  border:0!important; border-bottom:1px solid rgba(255,255,255,.1)!important;
  font-style:normal!important; font-size:inherit!important; line-height:1.4!important; width:auto!important;
}
body.template-home .section-main-product-home .js-product-description th{ color:#fff!important; font-weight:700; white-space:nowrap; }
body.template-home .section-main-product-home .js-product-description td p{ margin:0!important; padding:0!important; font-size:inherit!important; }
/* Los links que trae la tabla pegada apuntan a otra tienda: quedan como texto */
body.template-home .section-main-product-home .js-product-description td a{ color:inherit!important; text-decoration:none!important; pointer-events:none; }
body.template-home .section-main-product-home .fac-hidden-row{ display:none!important; }

/* 13.10 Newsletter: input oscuro, boton naranja. La linea que dibujaba 6.7
   sobra: la banda ya trae el borde naranja arriba. */
body.template-home .section-newsletter-home .js-newsletter::before{ content:none; }
body.template-home .section-newsletter-home .js-newsletter{ padding-top:0; }
body.template-home .section-newsletter-home h2{ color:#fff; }
body.template-home .section-newsletter-home p{ color:#cfcfcf; }
body.template-home .section-newsletter-home .form-control{ min-height:46px; background:#141414!important; color:#fff!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:6px; }
body.template-home .section-newsletter-home .form-control::placeholder{ color:#888; }
body.template-home .section-newsletter-home .btn-primary{ min-height:46px; background:var(--fac-orange)!important; border-color:var(--fac-orange)!important; color:#fff!important; font-weight:700; }

/* 13.10b Mensaje de bienvenida del admin (section-welcome-home): estaba en
   negro sobre el wallpaper, invisible. Queda sobre el wallpaper, en blanco. */
body.template-home .js-home-sections-container .section-welcome-home{ padding:0 0 var(--fac-band-pad); color:#fff; }
body.template-home .js-home-sections-container .section-welcome-home p{ margin:0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); }

/* 13.11 Banda "Atendida por corredores" (snipplet home-corredores.tpl):
   sobre el wallpaper, titulo con barra, boton naranja y tres chips de datos */
.fac-corredores{ color:#fff; }
.fac-corredores__title{
  position:relative; margin:0 0 18px; padding-bottom:12px; color:#fff;
  font-family:var(--fac-display); font-weight:800; font-size:56px; line-height:.95; text-transform:uppercase; letter-spacing:.02em;
}
.fac-corredores__title::after{
  content:""; display:block; width:48px; height:4px; margin-top:8px; border-radius:2px;
  background:var(--fac-orange); transform-origin:left; transition:transform .7s .25s var(--fac-ease);
}
.fac-corredores__lead{ max-width:52ch; margin:0 0 24px; font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); }
.fac-corredores__btn{ min-height:48px; padding:12px 28px; background:var(--fac-orange); border-color:var(--fac-orange); color:#fff; font-weight:700; }
.fac-corredores__btn:hover{ background:var(--fac-orange-dark); border-color:var(--fac-orange-dark); color:#fff; }
.fac-corredores__facts{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fac-corredores__fact{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-family:var(--fac-display); font-weight:700; font-size:1.25rem; letter-spacing:.03em; text-transform:uppercase; color:#fff;
  transition:border-color .3s ease, transform .3s var(--fac-ease);
}
.fac-corredores__fact:hover{ border-color:var(--fac-orange); transform:translateY(-2px); }
.fac-corredores__num{ font-size:2.4rem; font-weight:800; line-height:1; color:var(--fac-orange); }
@media (max-width:767px){
  .fac-corredores__title{ font-size:40px; }
  .fac-corredores__facts{ margin-top:28px; }
}

/* 13.12 Movimiento: inclinacion de banners con el puntero (JS) y barra de
   progreso naranja en el punto activo del hero */
.fac-tilt{ transform-style:preserve-3d; transition:transform .12s linear!important; }
.fac-tilt.is-spring{ transition:transform .7s cubic-bezier(.2,1.3,.4,1)!important; }
.section-slider-home .swiper-pagination-bullet{ position:relative; overflow:hidden; }
.section-slider-home .swiper-pagination-bullet-active{ background:rgba(255,102,0,.35); }
.section-slider-home .swiper-pagination-bullet-active::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--fac-orange);
  transform-origin:left; transform:scaleX(0); animation:fac-bar-fill var(--fac-hero-delay, 5500ms) linear forwards;
}
@keyframes fac-bar-fill{ to{ transform:scaleX(1); } }

/* 13.13 Movimiento reducido para todo lo de esta seccion */
@media (prefers-reduced-motion:reduce){
  .fac-marquee__track,
  body.template-home .section-brands-home .js-swiper-brands.fac-ribbon .swiper-wrapper,
  .js-item-product:hover .btn-add-to-cart,
  .js-item-product:hover .js-item-submit-container .btn{ animation:none!important; }
  .section-slider-home .swiper-pagination-bullet-active::after{ animation:none!important; transform:scaleX(1)!important; }
  .fac-sec-head > h2.fac-reveal:not(.is-in) ~ .fac-sec-head__link{ opacity:1!important; }
  .fac-sec-head__link,
  .fac-testi__avatar,
  .fac-corredores__title::after,
  .fac-tilt{ transition:none!important; }
  .fac-tilt{ transform:none!important; }
  body.template-home .section-testimonials-home .fac-reveal:not(.is-in) .fac-testi__avatar{ transform:scale(1)!important; }
}

/* ---------------------------------------------------------------------
   14. Ficha de producto: galeria fija al scrollear
   La columna de fotos acompana el scroll mientras se lee la descripcion,
   en vez de quedar vacia al costado. Solo escritorio y pantallas de al
   menos 700px de alto: en una pantalla baja taparia las miniaturas.
   --fac-head-h lo mide facchin.js (header()) porque el header cambia de
   alto al achicarse; 159px es el alto medido si el JS no carga.
   --------------------------------------------------------------------- */
@media (min-width:992px) and (min-height:700px){
  #single-product > .container > .row{ align-items:flex-start; }
  #single-product > .container > .row > .col-md-7{
    position:sticky;
    top:calc(var(--fac-head-h, 159px) + 16px);
    align-self:flex-start;
    transition:top 220ms ease;
  }
}
@media (prefers-reduced-motion:reduce){
  #single-product > .container > .row > .col-md-7{ transition:none; }
}