/* Pulido responsive: conserva la secuencia y el lenguaje visual de Sactek. */
html{scroll-padding-top:32px}
body{overflow-wrap:break-word}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.saltar{position:fixed;top:12px;left:12px;z-index:40;background:#fff;color:#121212;padding:12px 20px;transform:translateY(-180%)}
.saltar:focus{transform:none}
a:focus-visible{outline:3px solid #b89a72;outline-offset:5px}
.site-nav{position:fixed;top:28px;right:5vw;z-index:20;display:flex;gap:4px;padding:5px;border:1px solid #ffffff38;border-radius:5px;background:#121212f2;color:#fff;box-shadow:0 5px 24px #0002}
.site-nav a{min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px;text-decoration:none;font-size:14px;font-weight:600;border-radius:2px}
.site-nav a:hover{background:#ffffff12}
.site-nav .site-nav__cta{background:var(--granate)}
.site-nav .site-nav__cta:hover{background:#a30d25}
.hero__hint{color:#cfc8ba}
.sector__contenido{position:absolute;left:5vw;bottom:14vh;z-index:3;width:min(650px,85vw);color:#fff}
.sector .sector__contenido h2{position:static;font-size:clamp(52px,8vw,130px);margin:14px 0 22px}
.sector__etiqueta{text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700}
.sector__descripcion{max-width:42ch;font-size:clamp(17px,1.4vw,21px);line-height:1.5;text-shadow:0 1px 12px #0008}
.sector__enlace{display:inline-flex;gap:18px;align-items:center;min-height:48px;margin-top:22px;padding:8px 0;border-bottom:1px solid #fff;text-decoration:none;font-weight:600}
.sector__enlace:hover{color:var(--crema)}
.sector__velo{background:linear-gradient(0deg,#000d, #0005 46%, #0000 80%)}
.contacto-directo{margin-top:24px;font-size:15px;color:var(--crema)}
.contacto-directo a{display:inline-block;min-height:44px;padding:10px 0;text-underline-offset:5px;overflow-wrap:anywhere}
.pie a{text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.detalle__collage{align-items:stretch}
.detalle__collage-item{display:flex;flex-direction:column}
.detalle__collage-item figcaption{display:flex;flex-direction:column;flex:1;min-height:0}
.detalle__collage-item figcaption h3{font-size:clamp(23px,2vw,31px);font-weight:700;line-height:1.13;letter-spacing:-.03em}
.detalle__collage-item .producto__consulta{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:16px;min-height:52px;color:var(--granate);font-weight:700;font-size:15px;text-underline-offset:5px}
.detalle__collage-item .producto__consulta span{display:inline;color:inherit;font-size:18px;margin:0;letter-spacing:0}
.detalle__acciones a:hover{background:#a30d25}
.detalle__hero h1{overflow-wrap:normal;word-break:normal}
.detalle__titulo-largo{font-size:clamp(28px,6.25vw,120px)!important;letter-spacing:-.05em!important}
.detalle__collage-item img[src$="sobre.webp"]{object-position:50% 65%}
.detalle__collage-item img[src$="sacos.webp"]{object-position:50% 58%}
@media(max-width:767px){
 html{scroll-padding-top:20px;scroll-padding-bottom:90px}
 .site-nav{top:auto;bottom:max(14px,env(safe-area-inset-bottom));left:20px;right:20px;padding:5px}
 .site-nav a{flex:1;padding:10px 12px;font-size:14px}
 .hero__pin{height:100svh}
 .hero__top{padding-top:28px}
 .hero__top .logo{height:42px}
 .hero__stage{bottom:10svh}
 .hero__copy{left:24px;right:24px;bottom:21svh;width:auto;text-align:center}
 .hero__copy .copy{width:100%;max-width:none;white-space:normal;font-size:clamp(22px,6vw,32px);line-height:1.15;text-wrap:balance}
 .hero__hint{bottom:91px;font-size:10px;gap:4px}
 .hero__hint i{height:18px}
 section.proceso{height:auto;margin-top:0;padding:0;z-index:2}
 .proceso__pin{position:relative;top:auto;height:auto;display:block;overflow:visible}
 .proceso__pin::before{display:none}
 .proceso__panels{height:auto;position:static;border:0}
 .proceso__panel{position:relative;inset:auto;width:100%;min-height:360px;padding:40px 26px 44px;border-left:0;border-top:1px solid #ffffff26;transform:none!important;will-change:auto;overflow:visible}
 .proceso__panel:nth-child(3){border-top-color:#ddd}
 .proceso__panel h2{font-size:clamp(23px,6.1vw,46px);letter-spacing:-.04em;white-space:normal;overflow-wrap:normal;word-break:normal;margin-top:30px}
 .proceso__numero{font-size:44px}
 .proceso__descripcion{font-size:16px;line-height:1.55;max-width:36ch;margin-top:20px}
 .proceso__enlace{margin-top:22px;min-height:44px;font-size:15px}
 .proceso__numero,.proceso__panel h2,.proceso__descripcion,.proceso__enlace{opacity:1;transform:none;transition:none}
 .proceso__siguiente{position:static;display:flex;justify-content:flex-end;padding:22px 26px;min-height:64px}
 section.sector,section.sector--agricultura{height:90svh;min-height:580px;margin-top:0;pointer-events:auto}
 .sector__pin{position:relative;top:auto;height:100%}
 .sector__contenido{left:26px;bottom:100px;width:calc(100% - 52px)}
 .sector .sector__contenido h2{font-size:clamp(44px,12vw,76px);margin:12px 0 18px}
 .sector__descripcion{font-size:17px;line-height:1.5;max-width:30ch}
 .sector__siguiente{right:26px;bottom:32px;min-height:44px;display:flex;align-items:center}
 .sector__enlace{margin-top:18px}
 section.cierre{margin-top:0;min-height:auto;padding:44px 0 110px}
 .cierre::before{display:none}
 .cierre__layout{padding:20px 0;gap:40px;min-height:0}
 .cierre__pasos{gap:10px;margin-top:30px}
 .cierre__pasos span{font-size:10px;overflow-wrap:normal;letter-spacing:-.035em}
 .pie{margin-top:48px}
 .detalle__cabecera{gap:16px}
 .detalle__cabecera .logo{height:32px}
 .detalle__cabecera a{font-size:14px}
 section.detalle__hero{padding-top:56px;padding-bottom:48px}
 .detalle__hero h1{font-size:clamp(30px,9.5vw,70px)}
 .detalle__hero .detalle__titulo-largo{font-size:clamp(26px,7.5vw,56px)!important}
 .detalle__hero p:last-child{margin-top:24px}
 .detalle__collage{gap:28px;margin-top:36px}
 .detalle__collage-item figcaption{padding:24px}
 .detalle__pie{padding:48px 24px}
 .detalle__acciones{flex-direction:column;gap:12px}
 .detalle__acciones a{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .hero__hint i,.cierre__pasos li,.cierre__linea span{animation:none}
 .cierre__pasos li{opacity:1}
 .proceso__numero,.proceso__panel h2,.proceso__descripcion,.proceso__enlace{transition:none}
}

/* Almacenamiento termina antes de entrar a Agricultura: sin solapamiento entre estas secciones. */
@media(min-width:768px){section.sector--agricultura{margin-top:0}}

/* Entrada a sangre: la portada y las etapas comparten el borde, sin bandas intermedias. */
@media(min-width:768px){
 .proceso__pin{align-items:stretch}
 .proceso__panels{height:100%;border-top:0}
 .proceso__pin::before{display:none}
 .proceso__panel{border-left-color:#ffffff26;box-shadow:-24px 0 64px #00000026}
 .proceso__panel:first-child{box-shadow:none}
 .proceso__siguiente{z-index:6;bottom:24px;padding:9px 16px;background:#121212;color:var(--crema);border:1px solid #ffffff38;border-radius:2px}
}

/* El cierre cubre hasta el final real de Agua; no deja reaparecer la escena debajo. */
@media(min-width:768px){section.cierre{margin-top:-100vh}}