/** Shopify CDN: Minification failed

Line 375:0 Unexpected "<"

**/
/* ============================================================
   HDN FIX: el ajuste global de degradado (--DT_Gradient) estaba corrupto
   (rojo -> carbón -> BLANCO -> marrón), lo que rompía el botón "Saber Más"
   y los desplegables de orden/paginación (#SortBy / #paginateBy).
   Lo forzamos a un degradado rojo limpio de marca.
   ============================================================ */
:root { --DT_Gradient: linear-gradient(135deg, #8d1d23 0%, #6b1419 100%) !important; }

/* ============================================================
   HDN UI FIX GLOBAL (todas las resoluciones)
   Hover rojo-sobre-rojo: la CTA "Ver ficha técnica" solo cambiaba
   el fondo en :hover; la regla genérica a:hover (#8d1d23) teñía el
   texto de rojo -> rojo sobre rojo ilegible. Forzamos texto blanco
   en hover/focus/active en TODA la web (rejilla, lista, recomendados,
   búsqueda, productos relacionados).
   ============================================================ */
.ft-ctas__btn--primary,
.ft-ctas__btn--primary:hover,
.ft-ctas__btn--primary:focus,
.ft-ctas__btn--primary:active {
  color: #fff !important;
}

/* HDN: mismo patrón rojo-sobre-rojo en el CTA "Descubrir máquinas" del megamenú de marcas */
.vrc-mega-brands__cta,
.vrc-mega-brands__cta:hover,
.vrc-mega-brands__cta:focus,
.vrc-mega-brands__cta:active {
  color: #fff !important;
}
.vrc-mega-brands__cta:hover svg { stroke: #fff !important; color: #fff !important; }

/* ============================================================
   HDN: página Ocasión — el contenido (hero, categorías, features, CTA)
   ocupaba TODO el ancho sin márgenes laterales (la clase .container del
   tema pisaba el max-width de cada sección). Lo centramos con max-width
   y damos padding lateral responsive para que respire en cualquier pantalla.
   ============================================================ */
.ocasion-hero__inner,
.ocasion-cta__inner,
.ocasion-cats > .container,
.ocasion-features > .container {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(18px, 5vw, 48px) !important;
  padding-right: clamp(18px, 5vw, 48px) !important;
  box-sizing: border-box !important;
}
.ocasion-hero__inner { max-width: 1040px !important; }
.ocasion-cta__inner  { max-width: 980px !important; }
.ocasion-cats > .container,
.ocasion-features > .container { max-width: 1240px !important; }

/* La rejilla de categorías "explotaba" (cada columna ~593px, recortada fuera del viewport):
   1fr = minmax(auto,1fr) no encoge el contenido. min-width:0 en los items lo arregla a cualquier nº de columnas. */
.ocasion-cats__grid { min-width: 0; }
.ocasion-cats__grid > * { min-width: 0 !important; }

/* En móvil/tablet los contenedores deben ceñirse al viewport (no quedarse anchos y recortados). */
@media (max-width: 990px) {
  .ocasion-hero__inner,
  .ocasion-cta__inner,
  .ocasion-cats > .container,
  .ocasion-features > .container { max-width: 100% !important; }
}

/* ============================================================
   HDN FIX: megamenú desktop se cortaba en pantallas estrechas.
   El tema lo ancla bajo el item del nav (a la izquierda) y lo centra
   con translateX(-50%), por lo que se salía ~450px por la izquierda y
   quedaba recortado. Lo fijamos centrado en el viewport con ancho
   limitado para que SIEMPRE quepa (a cualquier resolución de escritorio).
   Solo >=768px (en móvil el menú es un drawer acordeón aparte).
   ============================================================ */
@media (min-width: 768px) {
  /* SOLO los megamenús de tarjetas (Maquinaria, Marcas) — NO los dropdowns
     simples como Ocasión/Sectores, que son listas estrechas de 1 columna. */
  .dt-desktop-menu > li.has-mega-menu > .sub-menu-block {
    position: fixed !important;
    top: 77px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(940px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box;
  }
}

/* ============================================================
   HDN MOBILE RESPONSIVE FIX (2026-05-28)
   Arregla: hero overflow, menú móvil con scroll horizontal,
   tarjetas de blog con badge solapado, toggle filtros confuso.
   ============================================================ */
@media (max-width: 767px) {

  /* --- HERO SLIDER --- */
  .home-slideshow-section .dt-sc-swiper-slider .swiper-wrapper .slider-content [class*="slide_"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 18px 14px !important;
  }
  .home-slideshow-section .slide-heading,
  .home-slideshow-section .slide-sub-heading,
  .home-slideshow-section .slide-sub-heading-2,
  .home-slideshow-section .slide-text,
  .home-slideshow-section .multiple-buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-slideshow-section .slide-heading {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }
  /* Hero: imagen como fondo a pantalla completa del slide + texto encima con overlay degradado */
  .home-slideshow-section .dt-sc-swiper-slider.swiper-container .swiper-slide,
  .home-slideshow-section .dt-sc-swiper-slider.swiper-container .swiper-slide-active {
    min-height: 520px !important;
    position: relative;
    overflow: hidden;
  }
  .home-slideshow-section .dt-sc-swiper-slider .swiper-slide .slide-img.mobile-only {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    z-index: 0 !important;
  }
  .home-slideshow-section .dt-sc-swiper-slider .swiper-wrapper .slider-content {
    min-height: 520px !important;
    padding: 24px 14px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%) !important;
    position: relative;
    z-index: 1;
  }
  .home-slideshow-section .slide-text {
    font-size: 0.95rem !important;
    line-height: 1.45;
  }
  .home-slideshow-section .multiple-buttons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  .home-slideshow-section .slide-button.dt-sc-btn {
    width: auto !important;
    min-width: 140px;
    margin: 6px auto 0 !important;
  }

  /* --- MENÚ MÓVIL (off-canvas) --- */
  /* Drawer principal: ensanchar para que quepa todo */
  .mobile-menu.nav-is-visible,
  .mobile-menu {
    width: min(88vw, 360px) !important;
    max-width: 88vw !important;
    left: auto !important;
    right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  .dt-desktop-menu {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  /* Top-level items en columna */
  .dt-desktop-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #f0f0f0;
  }
  .dt-desktop-menu > li > a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Submenús COLAPSADOS por defecto en móvil; se despliegan cuando el <li> padre tiene .hdn-open.
     Reglas muy específicas para vencer estilos inline del tema. */
  .mobile-menu .dt-desktop-menu .sub-menu-block,
  .mobile-menu .dt-desktop-menu li ul.sub-menu,
  .dt-desktop-menu .maquinaria-megamenu .sub-menu-block,
  .dt-desktop-menu .brands-megamenu .sub-menu-block,
  .dt-desktop-menu .ocasion-megamenu .sub-menu-block,
  .dt-desktop-menu .sub-menu-block {
    display: none !important;
  }
  /* Cuando el <li> padre está abierto, mostrar y apilar el submenu */
  .mobile-menu .dt-desktop-menu > li.hdn-open > .sub-menu-block,
  .mobile-menu .dt-desktop-menu > li.hdn-open .sub-menu-block,
  .mobile-menu .dt-desktop-menu > li.hdn-open ul.sub-menu,
  .dt-desktop-menu > li.hdn-open > .sub-menu-block,
  .dt-desktop-menu > li.hdn-open .maquinaria-megamenu .sub-menu-block,
  .dt-desktop-menu > li.hdn-open .brands-megamenu .sub-menu-block,
  .dt-desktop-menu > li.hdn-open .ocasion-megamenu .sub-menu-block {
    display: block !important;
    position: static !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    padding: 8px 12px 16px !important;
    background: #fafafa !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Chevron visual en items con submenu */
  .mobile-menu .dt-desktop-menu > li.menu-item-has-children > a::after,
  .mobile-menu .dt-desktop-menu > li.has-mega-menu > a::after {
    content: "›";
    float: right;
    font-size: 1.5rem;
    line-height: 1;
    color: #999;
    transition: transform 0.2s;
    transform: rotate(90deg);
  }
  .mobile-menu .dt-desktop-menu > li.hdn-open > a::after {
    transform: rotate(-90deg);
    color: #8d1d23;
  }
  /* Contenedores internos del megamenu: ancho completo, sin offsets ni transforms */
  .mobile-menu .dt-desktop-menu .mm-maquinaria,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__container,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__grid,
  .mobile-menu .dt-desktop-menu .mm-ocasion,
  .mobile-menu .dt-desktop-menu .vrc-mega-brands,
  .mobile-menu .dt-desktop-menu .dt-sc-dropdown-menu {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  /* Tarjetas en columna única */
  .mobile-menu .dt-desktop-menu .mm-maquinaria__grid,
  .mobile-menu .dt-desktop-menu .vrc-mega-brands__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .mobile-menu .dt-desktop-menu .mm-maquinaria__card,
  .mobile-menu .dt-desktop-menu .vrc-mega-brands__item,
  .mobile-menu .dt-desktop-menu .mm-ocasion__item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* --- "Ver todo el catálogo" en megamenu Maquinaria: texto blanco sobre fondo rojo --- */
  .mobile-menu .mm-maquinaria__all-link,
  .mobile-menu .mm-maquinaria__all-link *,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__all-link,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__all-link strong,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__all-link span,
  .mobile-menu .dt-desktop-menu .mm-maquinaria__all-link svg {
    color: #fff !important;
    stroke: #fff !important;
  }

  /* --- BLOG CARDS: tag pill absoluto que tapa el título -> ponerlo estático debajo --- */
  .dt-sc-blog-tags {
    position: static !important;
    transform: none !important;
    margin: 8px 0 12px 0 !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
  }
  .dt-sc-blog-tags a {
    background: #f3f3f3 !important;
    padding: 4px 10px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }
  .dt-sc-blog-title { font-size: 1.05rem !important; line-height: 1.3 !important; }
  .dt-sc-blog-title a { font-size: 1.05rem !important; line-height: 1.3 !important; }
  /* Quitar overlay decorativo grande sobre la imagen en móvil */
  .dt-sc-blog-image.with-overlay-normal .blog-img-overlay,
  .dt-sc-blog-image .blog-overlay-text,
  .article__grid-image-wrapper .article__grid-overlay-text { display: none !important; }

  /* --- BOTÓN FILTRAR en móvil ---
     El tema oculta .toggleIcon (display:none global) y deja el sidebar de
     filtros fuera de pantalla, sin forma de abrirlo en móvil. Lo mostramos
     como un botón claro y ancho "Filtrar". */
  /* Reordenar para que el botón Filtrar quede ARRIBA de la rejilla (orden DOM: grid, btn, sidebar) */
  .template-collection #collection-template-query {
    display: flex !important;
    flex-direction: column !important;
  }
  .template-collection #collection-template-query .sidebar_btn { order: -1 !important; }
  .template-collection #collection-template-query .collection-grid { order: 0 !important; }
  .template-collection #collection-template-query .sidebar { order: 1 !important; }

  .template-collection .sidebar_btn {
    display: block !important;
    position: static !important;   /* el tema lo pone fixed top:0 left:0 y pisa el header */
    top: auto !important;
    left: auto !important;
    margin: 0 0 18px 0 !important;
    padding: 0 12px;
    text-align: center;
    z-index: auto !important;
  }
  .template-collection .sidebar_btn .dt-sc-btn.toggleIcon,
  .template-collection a.toggleIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 18px !important;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
  }
  /* Reemplazar el icono de flecha por una etiqueta clara */
  .template-collection .sidebar_btn .toggleIcon .fa { display: none !important; }
  .template-collection .sidebar_btn .toggleIcon::before {
    content: "\f0b0"; /* fa-filter */
    font-family: "FontAwesome", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    margin-right: 6px;
  }
  .template-collection .sidebar_btn .toggleIcon::after {
    content: "Filtrar";
  }
}
/* END HDN MOBILE RESPONSIVE FIX */

/* === HDN: estilos de los CTAs de tarjeta de producto (.ft-ctas), globales para secciones de destacados fuera de coleccion === */
</script>

<style>
  /* ==========================================================================
     FERROTALL - Colección con CTAs
     ========================================================================== */

  /* ===== CTAs BASE ===== */
  .ft-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }
.ft-ctas__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.25s ease;
    line-height: 1.2;
  }
.ft-ctas__btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
.ft-ctas__btn--primary {
    background: #cc1625;
    color: #fff !important;
  }
/* HDN FIX: el hover solo cambiaba el fondo; la regla genérica a:hover (#8d1d23)
     teñía el texto de rojo -> rojo sobre rojo ilegible. Forzamos texto blanco. */
  .ft-ctas__btn--primary:hover,
  .ft-ctas__btn--primary:focus,
  .ft-ctas__btn--primary:active {
    background: #a81220;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 22, 37, 0.3);
  }
.ft-ctas__btn--secondary {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
  }
.ft-ctas__btn--secondary:hover {
    background: #eee;
    color: #cc1625;
    border-color: #cc1625;
  }
.product-collection.product-list-style .ft-ctas {
      margin-top: 15px;
    }
.product-collection.product-list-style .ft-ctas__btn {
      padding: 12px 20px;
      font-size: 14px;
    }
/* CTAs en móvil */
    .product-collection .ft-ctas {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      margin-top: auto !important;
      padding-top: 8px !important;
      border-top: 1px solid #eee !important;
    }
.product-collection .ft-ctas__btn {
      padding: 8px 10px !important;
      font-size: 11px !important;
      width: 100% !important;
      text-align: center !important;
      border-radius: 5px !important;
    }
.product-collection .ft-ctas__btn svg {
      width: 12px !important;
      height: 12px !important;
    }
.product-collection .ft-ctas__btn--primary {
      background: #cc1625 !important;
      color: #fff !important;
    }
.product-collection .ft-ctas__btn--secondary {
      background: #f0f0f0 !important;
      color: #333 !important;
      font-size: 10px !important;
      padding: 6px 8px !important;
    }
.product-collection .ft-ctas {
      flex-direction: row !important;
    }
.product-collection .ft-ctas__btn {
      flex: 1 !important;
    }
@media (max-width: 767px) {
  .ft-ctas__btn { padding: 8px 10px !important; font-size: 11px !important; width: 100% !important; text-align: center !important; justify-content: center !important; }
  .ft-ctas__btn svg { width: 12px !important; height: 12px !important; }
}


/* HDN: banner ocasion de la home sin imagen -> contenido a ancho completo */
#shopify-section-template--25530657636696__163221575460b474e8.home-grid-banner .dt-sc-grid-banner-section .dt-sc-grid-banner.list-style .dt-sc-grid-banner-content {
  width: 100% !important;
}