/* ============================================================ servicios.css — estilos exclusivos de public/servicios.php Cargada solo en esta vista vía $pageStyles (ver header.php). Antes estas reglas (.services-premium-section, .portfolio-grid, .portfolio-card y todo lo relacionado) vivían en style.css, pero solo las usa esta página — así que se mudaron acá completas. STACKING CARDS — sección "Tecnología diseñada para tu empresa". Usa position:sticky nativo (no JS simulando fixed/absolute). Esto funciona porque style.css fija `overflow-y:visible` explícito en junto al `overflow-x:hidden` que ya tenía — sin esa línea, el navegador promueve overflow-y a 'auto' automáticamente (regla real de la spec CSS) y eso rompe position:sticky en toda la página. Con el overflow-y explícito, sticky funciona nativamente: mejor rendimiento (lo mueve el compositor del navegador, no JS en cada frame) y scroll perfectamente fluido. Cada .portfolio-stack-row (fila de 2 tarjetas) es sticky al mismo `top`. Al hacer scroll, la tarjeta siguiente (con mayor z-index) se desliza desde abajo y tapa a la anterior — que se queda pineada exactamente en su sitio, sin fade ni escalado. Solo se le agrega, vía JS, una traslación vertical sutil (unos pocos px) y una sombra que se intensifica a medida que la siguiente la va cubriendo — la sensación de profundidad la dan las sombras, no cambios de tamaño u opacidad. Por eso el transform/box-shadow del hover original queda sin transition acá: JS ya actualiza esos mismos valores en cada frame de scroll, y una transición CSS de 400ms encima haría que el movimiento vaya "atrasado" respecto al scroll real, en vez de sentirse 1:1. La línea de progreso (.portfolio-progress) es una columna aparte, también sticky, con un track + relleno que crece con el scroll y un punto por servicio que se ilumina según cuál tarjeta está activa en cada momento (bloque "Stacking cards" en main.js). ============================================================ */ /* ---------- decoración de fondo de la sección ---------- */ /* IMPORTANTE: .services-premium-section NO puede tener overflow-x/y propio (ni siquiera "overflow-x:hidden; overflow-y:visible;" en conjunto) — por la regla de la spec CSS que empareja overflow-x/ overflow-y, cualquier valor no-visible en un eje promueve el otro a "auto" en el valor usado, sin importar que se declare visible explícito. Eso convierte a la sección en el contenedor de scroll de referencia para el position:sticky de las .portfolio-stack-row de más abajo, y rompe el efecto de apilado (se puso "tosco" al agregar ese overflow antes). Por eso los círculos van en un DIV propio (.services-bg-clip, absoluto, detrás de todo) que es el que lleva el overflow:hidden — la sección en sí queda con overflow visible (su valor por defecto), intacta para el sticky. */ .services-premium-section{position:relative;} .services-bg-clip{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .services-bg-clip::before, .services-bg-clip::after{ content:""; position:absolute; border-radius:50%; filter:blur(60px); } .services-bg-clip::before{ width:520px; height:520px; top:-180px; right:-140px; background:radial-gradient(circle, rgba(234,33,81,.07), transparent 70%); } .services-bg-clip::after{ width:460px; height:460px; bottom:-160px; left:-120px; background:radial-gradient(circle, rgba(30,44,81,.08), transparent 70%); } .services-premium-section > .wrap{position:relative; z-index:1;} /* ---------- layout general: línea de progreso + columna de tarjetas ---------- */ .portfolio-stack-wrap{ display:grid; grid-template-columns:40px 1fr; gap:40px; align-items:start; position:relative; } /* ---------- línea de progreso ---------- */ .portfolio-progress{ position:sticky; top:calc(50vh - 150px); height:300px; display:flex; justify-content:center; } .portfolio-progress-track{ position:relative; width:2px; height:100%; background:var(--line); border-radius:2px; } .portfolio-progress-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(180deg, var(--crimson), var(--crimson-dark)); border-radius:2px; } .portfolio-progress-dots{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; } .portfolio-progress-dot{ width:11px; height:11px; margin-left:-4.5px; border-radius:50%; background:#fff; border:2px solid var(--line); transition:background-color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .portfolio-progress-dot.is-active{ background:var(--crimson); border-color:var(--crimson); transform:scale(1.35); box-shadow:0 0 0 4px var(--crimson-tint); } /* ---------- tarjetas: base visual (fondo, imagen, overlay, texto) ---------- */ .portfolio-grid{ display:block; position:relative; } .portfolio-stack-row{ position:sticky; top:110px; display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; height:62vh; min-height:440px; max-height:600px; margin-bottom:24px; will-change:transform, box-shadow; } .portfolio-card{ position:relative; display:block; height:100%; border-radius:22px; overflow:hidden; background:var(--navy); box-shadow:0 2px 10px rgba(18,24,46,.08); } .portfolio-card:hover, .portfolio-card:focus-visible, .portfolio-card.is-active{ box-shadow:0 30px 50px -20px rgba(18,24,46,.35); } .portfolio-card-media{position:absolute; inset:0;} .portfolio-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 450ms cubic-bezier(.2,.8,.2,1); } .portfolio-card:hover .portfolio-card-media img{transform:scale(1.05);} .portfolio-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,24,46,.88) 0%, rgba(18,24,46,.15) 55%, transparent 75%); transition:background 400ms ease; } .portfolio-card:hover .portfolio-overlay, .portfolio-card:focus-visible .portfolio-overlay, .portfolio-card.is-active .portfolio-overlay{ background:linear-gradient(180deg, rgba(234,33,81,.5) 0%, rgba(18,24,46,.75) 100%); } .portfolio-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:40px 36px; } .portfolio-category{ display:inline-block; font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#ff8fa9; margin-bottom:12px; opacity:0; transform:translateY(8px); transition:opacity 350ms ease 60ms, transform 350ms ease 60ms; } .portfolio-card:hover .portfolio-category, .portfolio-card:focus-visible .portfolio-category, .portfolio-card.is-active .portfolio-category{opacity:1; transform:translateY(0);} .portfolio-title{ color:#fff; font-size:30px; line-height:1.2; margin-bottom:0; transition:margin-bottom 400ms cubic-bezier(.2,.8,.2,1); } .portfolio-card:hover .portfolio-title, .portfolio-card:focus-visible .portfolio-title, .portfolio-card.is-active .portfolio-title{margin-bottom:14px;} .portfolio-desc{ color:#E3E6F0; font-size:15px; line-height:1.6; max-width:440px; max-height:0; opacity:0; transform:translateY(10px); overflow:hidden; transition:max-height 400ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease 80ms, transform 400ms cubic-bezier(.2,.8,.2,1); } .portfolio-card:hover .portfolio-desc, .portfolio-card:focus-visible .portfolio-desc, .portfolio-card.is-active .portfolio-desc{ max-height:120px; opacity:1; transform:translateY(0); margin-bottom:22px; } .portfolio-cta{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); color:#fff; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:99px; opacity:0; transform:translateY(10px); transition:opacity 350ms ease 100ms, transform 400ms cubic-bezier(.2,.8,.2,1) 100ms, background-color 250ms ease; } .portfolio-cta svg{transition:transform 250ms ease;} .portfolio-card:hover .portfolio-cta, .portfolio-card:focus-visible .portfolio-cta, .portfolio-card.is-active .portfolio-cta{ opacity:1; transform:translateY(0); } .portfolio-card:hover .portfolio-cta:hover{background:var(--crimson);} .portfolio-card:hover .portfolio-cta:hover svg{transform:translateX(3px);} /* ---------- responsive ---------- */ @media (max-width:1080px){ .portfolio-stack-row{height:54vh; min-height:400px;} } @media (max-width:900px){ .portfolio-stack-wrap{grid-template-columns:1fr; gap:0;} .portfolio-progress{display:none;} .portfolio-stack-row{ position:static; height:auto; min-height:0; max-height:none; grid-template-columns:1fr; gap:16px; margin-bottom:20px; } .portfolio-card{aspect-ratio:4/3; height:auto;} .portfolio-card-content{padding:26px 22px;} .portfolio-title{font-size:22px;} .portfolio-desc{font-size:13.5px; max-width:none;} } @media (prefers-reduced-motion: reduce){ .portfolio-card-media img, .portfolio-overlay, .portfolio-category, .portfolio-title, .portfolio-desc, .portfolio-cta{transition:none;} }