/* ============================================================ blur: transicion de scroll entre el hero y la seccion siguiente. Compartido entre paginas que lo usen. No toca style.css. El efecto se activa cuando blur.js pone .blur-on en . Sin JS (o con reduced-motion) las dos pantallas van en flujo, cada una a 100svh. ============================================================ */ .blur-runway{ --p:0; --scale-d:.35; --soft-a:.05; --soft-d:.20; --chrome-a:.10; --chrome-d:.18; --hero-a:.30; --hero-d:.18; --next-a:.38; --stagger:.04; --ease:cubic-bezier(.22,1,.36,1); position:relative; } /* ---------- pantallas: siempre 100% del alto de la ventana ---------- */ .blur-stage{ position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; } .blur-anchor{position:absolute;left:0;width:1px;height:1px;top:100vh;top:100svh;pointer-events:none;} /* Hero: dentro del stage ya no necesita el full-bleed propio ni los 820px */ .blur-stage-hero .civ-hero{ height:100% !important; min-height:0 !important; padding:0 !important; width:100% !important; margin:0 !important; } .blur-stage-hero .civ-hero-inner{height:100% !important;} .blur-bg{position:absolute;inset:0;overflow:hidden;} .blur-bg img,.blur-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;box-shadow:none !important;} .blur-bg-soft{opacity:0;} /* Pantalla 02: fondo blanco a toda la pantalla, contenido centrado y escalado con svh */ .blur-stage-next{background:#fff;} .blur-next-wrap{max-width:1440px;margin:0 auto;height:100%;display:flex;align-items:center;} .blur-next-wrap > div{width:100%;height:100%;} .blur-stage-next .civ-2col{height:100%;align-items:stretch;} .blur-stage-next .civ-2col > div:first-child{display:flex;align-items:center;} .blur-stage-next .civ-2col img.blur-photo{ height:100% !important; max-height:min(70svh,100%); object-fit:cover; } /* variante a altura original, sin escalar a la pantalla (index, bloque Metodo): la foto y el texto no se estiran al alto de la pantalla 02, se quedan en su tamano de siempre y el conjunto se centra en la pantalla. La tarjeta 100% RIGOR entra en el mismo wrap, con el margen negativo clasico del diseno original para solaparse con la foto. */ .blur-next-wrap > .civ-metodo-wrap{height:auto !important;} .blur-stage-next .civ-2col-orig{height:auto !important;} .blur-stage-next .civ-2col-orig img.blur-photo{height:clamp(260px,58svh,560px) !important;max-height:none !important;} .blur-stage-next .civ-tarjeta{ width:clamp(260px,32vw,420px) !important; margin-top:clamp(-96px,-11svh,-56px) !important; padding:clamp(20px,4svh,44px) clamp(22px,4vw,48px) !important; } .blur-stage-next .civ-tarjeta > div > div:first-child{font-size:clamp(32px,7svh,60px) !important;} .blur-stage-next .civ-tarjeta > div > div:last-child{font-size:clamp(13px,2svh,20px) !important;} .blur-stage-next .civ-2col > .civ-pad-64{ padding:clamp(16px,4svh,64px) clamp(24px,4vw,64px) !important; justify-content:center; } .blur-stage-next .blur-icon{height:clamp(36px,7svh,64px) !important;margin-bottom:clamp(10px,2.4svh,22px) !important;} .blur-stage-next h2{font-size:clamp(20px,3.6svh,32px) !important;margin-bottom:clamp(10px,2.4svh,22px) !important;} .blur-stage-next .blur-lead{font-size:clamp(13px,2svh,16px) !important;line-height:1.6 !important;margin-bottom:clamp(12px,2.8svh,28px) !important;} .blur-stage-next .blur-list{gap:clamp(8px,1.8svh,16px) !important;} .blur-stage-next .blur-list span:last-child{font-size:clamp(13px,1.9svh,15px) !important;} /* variante sin lista de items: bloques h3+p (estudios-y-proyectos, "De los estudios tecnicos al proyecto"). span:last-child no aplica aqui, hace falta su propio par */ .blur-stage-next .blur-list h3{font-size:clamp(15px,2.4svh,19px) !important;margin-bottom:clamp(4px,1svh,8px) !important;} .blur-stage-next .blur-list p{font-size:clamp(12px,1.8svh,15px) !important;line-height:1.5 !important;} /* variante "cabecera de texto + lista numerada, sin foto" (asistencia-tecnica, "Servicios de asistencia tecnica"). El primer hijo de .civ-2col ya no es un wrapper de imagen: es un bloque de texto (eyebrow+dashes+h2), asi que necesita apilarse en columna y centrarse verticalmente, no la regla generica pensada para fotos. */ .blur-stage-next .civ-2col > .blur-head{ display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; } .blur-stage-next .civ-2col > .blur-list{justify-content:center !important;} .blur-stage-next .civ-pad-120{padding:clamp(40px,8svh,120px) clamp(24px,4vw,64px) !important;} .blur-stage-next .blur-list .blur-item-title{font-size:clamp(15px,2.4svh,19px) !important;margin-bottom:clamp(4px,1svh,8px) !important;} @media (max-width:768px){ /* index (Metodo a altura original): en movil el texto completo mas la tarjeta solapada no caben en una pantalla; se recorta el parrafo a 3 lineas para que quepa sin desbordar (mismo motivo que el patron combo). */ .blur-stage-next .civ-metodo-wrap .blur-lead{ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .blur-stage-next .civ-tarjeta{ width:calc(100% - 48px) !important; margin-top:-60px !important; padding:28px 28px !important; } .blur-stage-next .civ-tarjeta > div > div:first-child{font-size:38px !important;} .blur-stage-next .civ-2col{flex-direction:column !important;} .blur-stage-next .civ-2col > div:first-child{flex:none !important;display:block;} .blur-stage-next .civ-2col img.blur-photo{height:min(32svh,280px) !important;max-height:none;} .blur-stage-next .civ-2col > .civ-pad-64{flex:1 !important;padding:clamp(12px,2.5svh,24px) 24px !important;justify-content:flex-start !important;} .blur-stage-next .blur-icon{height:clamp(30px,5svh,48px) !important;margin-bottom:clamp(8px,1.6svh,16px) !important;} .blur-stage-next h2{font-size:clamp(19px,3svh,26px) !important;margin-bottom:clamp(8px,1.6svh,16px) !important;} .blur-stage-next .blur-lead{font-size:clamp(12px,1.8svh,15px) !important;line-height:1.5 !important;margin-bottom:clamp(8px,2svh,20px) !important;} .blur-stage-next .blur-list{gap:clamp(6px,1.3svh,12px) !important;} .blur-stage-next .blur-list span:last-child{font-size:clamp(12px,1.7svh,14px) !important;line-height:1.4 !important;} .blur-stage-next .blur-list h3{font-size:clamp(14px,2svh,17px) !important;margin-bottom:clamp(3px,0.8svh,6px) !important;} .blur-stage-next .blur-list p{font-size:clamp(11.5px,1.6svh,14px) !important;line-height:1.45 !important;} .blur-stage-next .blur-list .blur-item-title{font-size:clamp(14px,2svh,17px) !important;margin-bottom:clamp(3px,0.8svh,6px) !important;} .blur-stage-next .civ-pad-120{padding:clamp(24px,4svh,120px) 24px !important;} /* en columna, la lista crece con flex:1 (heredado del inline) para llenar el resto del alto; centrarla ahi deja un hueco grande antes del primer item */ .blur-stage-next .civ-2col > .blur-list{justify-content:flex-start !important;} } /* ---------- efecto (solo con JS: html.blur-on) ---------- */ .blur-on .blur-runway{height:220vh;height:220svh;} .blur-on .blur-anchor{top:calc(100% - 100vh);top:calc(100% - 100svh);} .blur-on .blur-frame{ position:-webkit-sticky; position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; } .blur-on .blur-stage{position:absolute;inset:0;height:100%;} .blur-on .blur-stage-hero{z-index:2;} .blur-on .blur-stage-next{z-index:1;} /* a) zoom del fondo */ .blur-on .blur-bg img,.blur-on .blur-bg video{ transform:scale(calc(1 + .05 * clamp(0, calc(var(--p) / var(--scale-d)), 1))); will-change:transform; } /* b) difuminado: capa pregenerada, solo se anima su opacidad */ .blur-on .blur-bg-soft{ opacity:clamp(0, calc((var(--p) - var(--soft-a)) / var(--soft-d)), 1); will-change:opacity,transform; } /* c) textos del hero */ .blur-on .blur-chrome{ --r:clamp(0, calc((var(--p) - var(--chrome-a)) / var(--chrome-d)), 1); opacity:calc(1 - var(--r)); transform:translateY(calc(var(--r) * -24px)); will-change:opacity,transform; } /* d) capa hero completa */ .blur-on .blur-stage-hero{ opacity:calc(1 - clamp(0, calc((var(--p) - var(--hero-a)) / var(--hero-d)), 1)); will-change:opacity; } .blur-on .blur-hero-off .blur-stage-hero{pointer-events:none;} /* e) entrada escalonada de la pantalla 02 */ .blur-on .blur-in{ --w:clamp(0, calc((var(--p) - var(--next-a) - var(--i, 0) * var(--stagger)) / .12), 1); opacity:var(--w); transform:translateY(calc((1 - var(--w)) * 28px)); will-change:opacity,transform; } .blur-on .blur-in.blur-photo{ transform:translateY(calc((1 - var(--w)) * 28px)) scale(calc(1.04 - .04 * var(--w))); } @media (max-width:768px){ .blur-on .blur-runway{height:170vh;height:170svh;} } /* ---------- reduced motion: todo desactivado ---------- */ @media (prefers-reduced-motion:reduce){ .blur-on .blur-runway{height:auto;} .blur-on .blur-anchor{top:100vh;top:100svh;} .blur-on .blur-frame{position:static;height:auto;overflow:visible;} .blur-on .blur-stage{position:relative;inset:auto;height:100vh;height:100svh;} .blur-on .blur-bg img,.blur-on .blur-bg video,.blur-on .blur-chrome,.blur-on .blur-stage-hero,.blur-on .blur-in,.blur-on .blur-in.blur-photo{ opacity:1;transform:none;will-change:auto; } .blur-on .blur-bg-soft{display:none;} .blur-on .blur-hero-off .blur-stage-hero{pointer-events:auto;} }