/* Plataforma Web Layout v0.8.41 — Responsive Core
   Capa obligatoria de seguridad responsive. Se carga despues del CSS de cada
   maqueta para garantizar que ninguna vertical dependa de anchos rigidos. */

html{max-width:100%;overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}

/* Contenedores y medios nunca pueden forzar el viewport. */
.ssh-home-shell,
.ssh-home,
.ssh-home *{min-width:0}
.ssh-home img,
.ssh-home picture,
.ssh-home video,
.ssh-home canvas,
.ssh-home svg,
.ssh-home iframe{max-width:100%}
.ssh-home img,.ssh-home video{height:auto}
.ssh-home iframe{width:100%}
.ssh-home input,
.ssh-home select,
.ssh-home textarea,
.ssh-home button{max-width:100%;min-width:0}
.ssh-home h1,
.ssh-home h2,
.ssh-home h3,
.ssh-home h4,
.ssh-home p,
.ssh-home a,
.ssh-home strong,
.ssh-home span{overflow-wrap:anywhere}

/* Los interiores principales siguen siendo legibles pero nunca mas anchos que
   el viewport. Esto protege tambien instalaciones con temas distintos a Blocksy. */
.ssh-home,
.ssh-fashion-utility-inner,
.ssh-fashion-header-inner,
.ssh-hardware-utility-inner,
.ssh-hardware-header-top,
.ssh-hardware-nav-row,
.ssh-logistics-utility-inner,
.ssh-logistics-header-inner,
.ssh-platform-header-inner{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Seguridad para hijos de grid/flex. */
.ssh-top-grid>* ,
.ssh-side-banners>* ,
.ssh-benefits>* ,
.ssh-promos>* ,
.ssh-cat-cards>* ,
.ssh-brands>* ,
.ssh-fashion-header-inner>* ,
.ssh-hardware-header-top>* ,
.ssh-hardware-nav-row>* ,
.ssh-logistics-header-inner>* ,
.ssh-platform-header-inner>* ,
.ssh-platform-hero>* ,
.ssh-platform-capabilities>* ,
.ssh-logistics-middle>* ,
.ssh-logistics-coverage>*{min-width:0}

/* Carruseles: nunca expanden la pagina; el desplazamiento queda contenido. */
.ssh-carousel,
.ssh-cat-cards,
.ssh-brands,
.ssh-side-banners,
.ssh-subcat-track{
  max-width:100%;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* Tablet: evitamos columnas laterales demasiado angostas y controles que se
   salgan del viewport, sin convertir aun la pagina en version movil. */
@media (max-width:1024px){
  .ssh-home{width:100%;max-width:100%;padding-left:clamp(14px,2.6vw,22px);padding-right:clamp(14px,2.6vw,22px)}
  .ssh-section-head{min-width:0;flex-wrap:wrap}
  .ssh-section-head h2{font-size:clamp(22px,3.1vw,28px)}
  .ssh-btn,.ssh-product-cart,.ssh-promo span{max-width:100%;white-space:normal;text-align:center;justify-content:center}
  .ssh-promos,.ssh-benefits{min-width:0}
  .ssh-product img,.ssh-product-img img{max-width:100%;height:auto}

  /* Headers de verticales: los campos centrales pueden encogerse realmente. */
  .ssh-fashion-header-inner,
  .ssh-hardware-header-top,
  .ssh-hardware-nav-row,
  .ssh-logistics-header-inner,
  .ssh-platform-header-inner{padding-left:clamp(14px,2.5vw,24px);padding-right:clamp(14px,2.5vw,24px)}
  .ssh-fashion-search,
  .ssh-hardware-search,
  .ssh-logistics-nav,
  .ssh-platform-nav{min-width:0}
}

/* Mobile: una experiencia tactil. No hay anchos fijos que puedan provocar
   scroll horizontal de pagina. */
@media (max-width:767px){
  .ssh-home-shell{width:100vw!important;max-width:100vw!important}
  .ssh-home{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .ssh-home h1{font-size:clamp(28px,9.5vw,40px);line-height:1.02}
  .ssh-home h2{font-size:clamp(22px,7vw,30px)}
  .ssh-home h3{font-size:clamp(18px,5vw,24px)}
  .ssh-home p{max-width:100%}

  .ssh-section-head{align-items:flex-start!important;gap:8px}
  .ssh-section-head h2{width:100%;max-width:100%}
  .ssh-section-head a{max-width:100%!important;text-align:left!important;white-space:normal!important}

  .ssh-btn,
  .ssh-product-cart,
  .ssh-promo span{min-height:42px}

  /* Formularios y buscadores comodos para tactil. */
  .ssh-home input[type="search"],
  .ssh-home input[type="text"],
  .ssh-home input[type="email"],
  .ssh-home input[type="tel"],
  .ssh-home select,
  .ssh-home textarea{width:100%;font-size:16px;box-sizing:border-box}

  /* Carruseles/categorias se desplazan dentro de su propia banda. */
  .ssh-carousel,
  .ssh-side-banners,
  .ssh-benefits,
  .ssh-cat-cards,
  .ssh-brands,
  .ssh-subcat-track{scroll-snap-type:x proximity;scrollbar-width:none}
  .ssh-carousel::-webkit-scrollbar,
  .ssh-side-banners::-webkit-scrollbar,
  .ssh-benefits::-webkit-scrollbar,
  .ssh-cat-cards::-webkit-scrollbar,
  .ssh-brands::-webkit-scrollbar,
  .ssh-subcat-track::-webkit-scrollbar{display:none}

  /* Banners no pueden quedar con copy fuera de pantalla. */
  .ssh-promo>div{max-width:min(78%,420px)}
  .ssh-promo h3{overflow-wrap:anywhere}

  /* Vertical Moda */
  body.ssh-template-fashion-modern .ssh-fashion-header-inner{width:100%;max-width:100%}
  body.ssh-template-fashion-modern .ssh-fashion-hero-stage .ssh-hero h1{font-size:clamp(34px,10.5vw,43px)!important;max-width:94%}
  body.ssh-template-fashion-modern .ssh-fashion-hero-stage .ssh-hero p{max-width:92%}
  body.ssh-template-fashion-modern .ssh-fashion-actions{max-width:42vw}

  /* Vertical Ferreteria */
  body.ssh-template-hardware-modern .ssh-hardware-header-top,
  body.ssh-template-hardware-modern .ssh-hardware-nav-row{width:100%;max-width:100%}
  body.ssh-template-hardware-modern .ssh-hardware-hero-stage .ssh-hero h1{font-size:clamp(33px,10vw,43px)!important;max-width:94%}
  body.ssh-template-hardware-modern .ssh-hardware-hero-stage .ssh-hero p{max-width:92%}
  body.ssh-template-hardware-modern .ssh-hardware-category-menu{max-width:calc(100vw - 24px)}

  /* Vertical Logistica */
  body.ssh-template-logistics-modern .ssh-logistics-header-inner{width:100%;max-width:100%}
  body.ssh-template-logistics-modern .ssh-logistics-hero-stage .ssh-hero h1{font-size:clamp(33px,9.8vw,39px)!important;max-width:96%}
  body.ssh-template-logistics-modern .ssh-logistics-hero-stage .ssh-hero p{max-width:94%}
  body.ssh-template-logistics-modern .ssh-logistics-final-cta>a{width:100%;justify-content:center}

  /* Vertical Plataforma Pro */
  body.ssh-template-platform-pro .ssh-platform-header-inner{width:100%;max-width:100%}
  body.ssh-template-platform-pro .ssh-platform-hero h1{font-size:clamp(35px,11vw,46px)!important}
  body.ssh-template-platform-pro .ssh-platform-hero{padding-left:14px!important;padding-right:14px!important}
  body.ssh-template-platform-pro .ssh-platform-device-stage{width:100%;max-width:100%}
  body.ssh-template-platform-pro .ssh-platform-dashboard-mock{width:100%;max-width:100%}

  /* Veterinaria */
  body.ssh-template-veterinary-modern .ssh-vet-hero-stage .ssh-hero h1{font-size:clamp(30px,9vw,34px)!important}

  /* Catalogos WooCommerce bajo nuestra capa. */
  .ssh-commerce-archive .ct-container,
  .ssh-product-search-results .ct-container{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important}
}

@media (max-width:420px){
  .ssh-home{padding-left:10px!important;padding-right:10px!important}
  .ssh-carousel{grid-auto-columns:min(84vw,300px)!important}
  .ssh-side-card,.ssh-benefit{max-width:88vw}
  .ssh-promo>div{max-width:86%}
  body.ssh-template-platform-pro .ssh-platform-phone{max-width:30vw}
  body.ssh-template-logistics-modern .ssh-logistics-request{max-width:46vw;white-space:normal;text-align:center;justify-content:center}
}

/* Accesibilidad: el layout responsive no depende de animaciones. */
@media (prefers-reduced-motion:reduce){
  .ssh-home *{scroll-behavior:auto!important}
}