/* ===== Adaptación a todas las pantallas (se carga al final en cada página) ===== */
/* 1) Escala fluida: en monitores grandes todo crece de forma proporcional (con tope) */
html{font-size:clamp(16px,calc(16px + (100vw - 1366px)*.0042),22px);scroll-padding-top:6rem}
body{overflow-x:hidden}
.wrap{width:min(100% - 3rem,80rem)}
.nav{height:5rem}header.scrolled .nav{height:4.25rem}
.logo img{height:3.9rem}header.scrolled .logo img{height:3.25rem}
.wa{width:3.9rem;height:3.9rem}
.slide{min-height:clamp(34rem,88vh,56rem);padding:8rem 0 7.5rem}
.qh,.phero{padding:8rem 0 4rem}
.hero{padding-top:9.5rem}
.eq{height:13rem}
.sc{height:9.5rem}
.sf svg{width:2.6rem;height:2.6rem}
.hbg::after{background:linear-gradient(90deg,var(--bk) 0,rgba(10,10,10,.5) 24%,transparent 60%),linear-gradient(0deg,var(--bk),transparent 16%)}
.hbg img{min-width:100%}

/* 2) Carrusel de Inicio: 4 tarjetas en computadora, 3 en laptop chica, 2 en tablet, 1 en celular */
.eq{flex:0 0 calc((100% - 3rem)/4)}
@media (max-width:1100px){.eq{flex-basis:calc((100% - 2rem)/3)}}
@media (max-width:820px){.eq{flex-basis:calc((100% - 1rem)/2)}}
@media (max-width:560px){.eq{flex-basis:100%;height:15rem}.sc{height:9rem}}
@media (max-width:700px){.arr{display:grid}}

/* 3) Carrusel de Productos: 3 (4 en pantallas muy grandes) / 2 en tablet / 1 en celular; flechas dentro del contenedor */
.parr{top:40%}#pprev{left:.5rem}#pnext{right:.5rem}
@media (min-width:1800px){.ptrack .pc{flex-basis:calc((100% - 3rem)/4)}.pgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.ptrack .pc{flex-basis:calc((100% - 1rem)/2)}}
@media (max-width:620px){.ptrack .pc{flex-basis:100%}.parr{display:grid}.parr[hidden]{display:none}}

/* 4) Portadas: en tablet y celular la foto se ve completa arriba y el texto debajo (sin capas oscuras encima) */
@media (max-width:980px){
.slide{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:5rem 0 5.5rem}
.hbg,.qh .hbg,.phero .hbg{position:relative;inset:auto;width:100%;height:clamp(14rem,54vw,26rem);order:-1;opacity:1;transform:none;margin-bottom:-1.2rem;animation:none}
.hbg::before{display:none}
.hbg::after,.qh .hbg::after,.phero .hbg::after{background:linear-gradient(0deg,var(--bk) 0,transparent 60%)}
.qh,.phero{display:flex;flex-direction:column;padding:5rem 0 2.5rem}
.hero{padding-top:5rem}
.photo-wrap{position:relative;width:100%;height:clamp(14rem,54vw,26rem)}
.photo-wrap::before{background:linear-gradient(0deg,var(--bk) 0,transparent 60%)}
.hero .wrap{margin-top:-1rem}
.hctrl{bottom:1rem}
}
@media (max-width:620px){
.hero2 .t,.qh h1,.phero h1{font-size:clamp(2.2rem,10vw,3rem)}
.cmp .tx{padding:2rem 1.5rem}
}
@media (max-width:360px){
.wrap{width:calc(100% - 2rem)}
.btn,.btn-o{padding-inline:1.1rem}
.menu a:not(.btn-line){font-size:1.3rem}
}

/* 5) Seguridad contra desbordes horizontales */
main,footer{overflow-x:clip}
.strip .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
.strip.s5 .wrap{grid-template-columns:repeat(5,minmax(0,1fr))}
.sf{overflow-wrap:anywhere}
@media (max-width:980px){.strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.strip.s5 .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.strip.s5 .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.sf{padding:.4rem .5rem;font-size:.9rem}}

/* 6) Ajustes finos */
.eyebrow{line-height:1.5}
@media (max-width:620px){.hb{display:none}.hctrl{bottom:.4rem}}
.hero2 .in-c,.qh .in-c,.phero .in-c{max-width:36rem}
.hctrl .wrap{justify-content:flex-start;gap:1.6rem}
.items .v,.items small,.items b,.cinfo,.mcard span{overflow-wrap:anywhere;min-width:0}
.items li>div{min-width:0}
@media (max-width:620px){
.pcar{padding-bottom:3.6rem}
.parr{top:auto;bottom:0}
#pprev{left:calc(50% - 3.6rem)}#pnext{right:calc(50% - 3.6rem)}
#pdots{margin-top:.2rem}
}

/* 7) Menú móvil opaco y sin el botón de WhatsApp encima */
@media (max-width:820px){.menu{background:#0a0a0a}}
.menu-open .wa{opacity:0;pointer-events:none}