/* ============================================================ cx: cambio de color por scroll en "Tres areas de especializacion" Solo lo carga index.html. No toca style.css. Estado inicial (claro, como la seccion "Metodo") -> estado final (el diseno actual en navy). Se activa cuando cx.js pone .cx-on en ; sin JS o con reduced-motion la seccion queda en su estado final, a 100svh, en flujo normal. ============================================================ */ .cx-wrap{ --dark:0; --cx-cue:.30; /* umbral (informativo; el real es CUE en cx.js) */ --cx-dur:.6s; --cx-ease:cubic-bezier(.22,1,.36,1); --cx-final-bg:#14407F; /* color de fondo del estado final; por pagina */ --cx-topo-light:.7; /* opacidad de la trama en el estado inicial */ position:relative; } .cx-wrap.is-dark{--dark:1;} /* ---------- 100% del alto, con o sin JS ---------- */ .cx-scene{ height:100vh; height:100svh; width:100% !important; margin-left:0 !important; margin-right:0 !important; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(24px,6svh,120px) !important; padding-bottom:clamp(24px,6svh,80px) !important; overflow:hidden; } .cx-scene > *{position:relative;} .cx-topo{ position:absolute; inset:0; background-image:url('../img/bg_topo_lineas.png'); background-size:cover; background-position:center; opacity:0; pointer-events:none; } .cx-topo-dark{mix-blend-mode:multiply;} .cx-anchor{position:absolute;left:0;top:100vh;top:100svh;width:1px;height:1px;pointer-events:none;} .cx-on .cx-anchor{top:calc(100% - 100vh);top:calc(100% - 100svh);} /* Escalado para alturas pequenas: en pantallas normales clamp() devuelve los valores que ya tenia la seccion, asi que no cambia nada visible. */ .cx-scene .cx-head{margin-bottom:clamp(14px,4svh,44px) !important;} .cx-scene .cx-eyebrow{margin-bottom:clamp(6px,1.2svh,10px) !important;} .cx-scene .cx-title{font-size:clamp(26px,4.4svh,40px) !important;} .cx-scene .cx-bars{margin-bottom:clamp(14px,4.5svh,48px) !important;} .cx-scene .cx-card{padding:clamp(18px,3.5svh,36px) clamp(20px,2.4vw,32px) !important;} .cx-scene .cx-card > img{height:clamp(40px,7svh,64px) !important;margin-bottom:clamp(8px,1.8svh,16px) !important;} .cx-scene .cx-card h3{margin-bottom:clamp(8px,1.6svh,14px) !important;} .cx-scene .cx-card p{font-size:clamp(13px,1.9svh,15px) !important;line-height:1.55 !important;margin-bottom:clamp(12px,2.6svh,24px) !important;} /* ---------- efecto (solo con JS: html.cx-on) ---------- */ .cx-on .cx-wrap{height:150vh;height:150svh;} .cx-on .cx-scene{ position:-webkit-sticky !important; position:sticky !important; top:0; background-color:#fff !important; background-image:none !important; box-shadow:none; transition:background-color var(--cx-dur) var(--cx-ease),box-shadow var(--cx-dur) var(--cx-ease); } .cx-on .is-dark .cx-scene{ background-color:var(--cx-final-bg) !important; box-shadow:inset 0 48px 48px -48px rgba(0,0,0,0.28),inset 0 -48px 48px -48px rgba(0,0,0,0.28); } /* trama: dos capas con crossfade (la version clara de la seccion de referencia y la multiply del color final). --cx-topo-light varia segun cuanto se vea la trama en la seccion de referencia que se imita (0.7 en "Metodo", 0.4 en "Ambitos de actuacion") */ .cx-on .cx-topo{transition:opacity var(--cx-dur) var(--cx-ease);} .cx-on .cx-topo-light{opacity:var(--cx-topo-light);} .cx-on .cx-topo-dark{opacity:0;} .cx-on .is-dark .cx-topo-light{opacity:0;} .cx-on .is-dark .cx-topo-dark{opacity:1;} /* eyebrow, titulo y barras: azul corporativo -> blanco */ .cx-on .cx-eyebrow,.cx-on .cx-title,.cx-on .cx-bars{ color:#14407F !important; transition:color var(--cx-dur) var(--cx-ease); } .cx-on .is-dark .cx-eyebrow,.cx-on .is-dark .cx-title,.cx-on .is-dark .cx-bars{color:#fff !important;} /* tarjetas: en el estado inicial (blanco), marco azul (borde + una unica linea vertical junto al borde izquierdo, de arriba a abajo, via pseudo-elemento) + sombra suave. Todo se desvanece al pasar al estado final. Entrada escalonada al activarse. */ .cx-on .cx-card{ position:relative; box-shadow:0 10px 30px -12px rgba(20,64,127,0.22); border:1px solid rgba(20,64,127,0.4); transform:translateY(16px); opacity:1; transition:box-shadow var(--cx-dur) var(--cx-ease),border-color var(--cx-dur) var(--cx-ease),transform var(--cx-dur) var(--cx-ease); } .cx-on .cx-card::before{ content:''; position:absolute; top:0; bottom:0; left:8px; width:1px; background:rgba(20,64,127,0.4); transition:background var(--cx-dur) var(--cx-ease); pointer-events:none; } .cx-on .cx-card:nth-child(2){transition-delay:80ms;} .cx-on .cx-card:nth-child(3){transition-delay:160ms;} .cx-on .is-dark .cx-card{box-shadow:none;border-color:transparent;transform:none;} .cx-on .is-dark .cx-card::before{background:transparent;} /* acento decorativo circular (opcional): entra deslizandose desde la derecha al mismo tiempo que las tarjetas, al pasar al estado final. Solo se aplica donde el HTML le ponga la clase, asi que no afecta a paginas que no la usen. Opacidad base (sin .cx-on, o sea sin JS / reduced-motion): visible de inmediato en su posicion final, sin animacion. */ .cx-accent{opacity:0.9;} .cx-on .cx-accent{ opacity:0; transform:translateX(70px); transition:opacity var(--cx-dur) var(--cx-ease),transform var(--cx-dur) var(--cx-ease); } .cx-on .is-dark .cx-accent{opacity:0.9;transform:translateX(0);} /* will-change solo mientras dura la transicion (cx.js pone y quita .cx-anim) */ .cx-on .cx-wrap.cx-anim .cx-scene{will-change:background-color;} .cx-on .cx-wrap.cx-anim .cx-topo{will-change:opacity;} .cx-on .cx-wrap.cx-anim .cx-card{will-change:transform,box-shadow;} .cx-on .cx-wrap.cx-anim .cx-accent{will-change:transform,opacity;} /* ---------- movil: carrusel horizontal para que quepa en 100svh ---------- */ @media (max-width:900px){ .cx-on .cx-wrap{height:130vh;height:130svh;} .cx-scene .cx-cards{ flex-direction:row !important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:16px !important; margin:0 -24px; padding:4px 24px 8px; scrollbar-width:none; } .cx-scene .cx-cards::-webkit-scrollbar{display:none;} .cx-scene .cx-card{flex:0 0 85vw !important;scroll-snap-align:start;} .cx-scene .cx-accent{width:clamp(70px,20vw,110px) !important;top:20px !important;right:20px !important;} } /* ---------- reduced motion: directamente el estado final ---------- */ @media (prefers-reduced-motion:reduce){ .cx-on .cx-wrap{height:auto;} .cx-on .cx-scene{position:static;background-color:var(--cx-final-bg) !important;transition:none; box-shadow:inset 0 48px 48px -48px rgba(0,0,0,0.28),inset 0 -48px 48px -48px rgba(0,0,0,0.28);} .cx-on .cx-topo{transition:none;} .cx-on .cx-topo-light{opacity:0;} .cx-on .cx-topo-dark{opacity:1;} .cx-on .cx-eyebrow,.cx-on .cx-title,.cx-on .cx-bars{color:#fff !important;transition:none;} .cx-on .cx-card{box-shadow:none;border-color:transparent;transform:none;transition:none;} }