/* =========================================================================== ASTRA TELECOM — Capa inmersiva (Nivel 1) Scrollytelling + parallax por capas + profundidad 3D en CSS. SEO-safe: no toca el texto indexable. Respeta prefers-reduced-motion. Se activa con . =========================================================================== */ /* ---------- Base de scroll-driven (cuando el navegador lo soporta) ---------- */ @media (prefers-reduced-motion: no-preference) { /* ====== HERO: profundidad dirigida por scroll ====== */ /* La imagen se aleja y oscurece; el texto sube y se desvanece. */ body[data-immersive="on"] .hero { perspective: 1200px; } body[data-immersive="on"] .hero__text { animation: heroTextOut linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; } @keyframes heroTextOut { to { transform: translateY(-60px); opacity: .15; filter: blur(2px); } } /* La media del hero gana profundidad al entrar la siguiente sección */ body[data-immersive="on"] .hero__media { animation: heroMediaZoom linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } @keyframes heroMediaZoom { from { transform: scale(1.08); } to { transform: scale(1.22); } } /* ====== Aparición por capas (stagger) en grids ====== */ body[data-immersive="on"] .svc, body[data-immersive="on"] .brandcard, body[data-immersive="on"] .value, body[data-immersive="on"] .proc { animation: layerIn linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; } @keyframes layerIn { from { opacity: 0; transform: translateY(38px) scale(.985); } to { opacity: 1; transform: none; } } /* ====== Parallax por capas: títulos de sección ====== */ body[data-immersive="on"] .sec-head { animation: secHeadRise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } @keyframes secHeadRise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } } /* ====== Proceso: tarjetas con profundidad escalonada ====== */ body[data-immersive="on"] .proc__grid { perspective: 1400px; } /* ====== Bandas oscuras: leve "rise" de profundidad ====== */ body[data-immersive="on"] .cta-band__inner { animation: bandRise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } @keyframes bandRise { from { opacity: .3; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } } /* ====== Cobertura: la lista de zonas entra desde la derecha ====== */ body[data-immersive="on"] .coverage__zones .zone { animation: zoneIn linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } @keyframes zoneIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } } /* ---------- Profundidad 3D en hover (tilt) — JS añade --rx/--ry ---------- */ .tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; } .tilt__layer { transform: translateZ(40px); transition: transform .5s var(--ease); } /* ---------- Scrollytelling: bloque "Cómo trabajamos" sticky ---------- */ .story { background: var(--dark); color: var(--on-dark); position: relative; } .story__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .story__media { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; margin: 0 calc(-1 * var(--gutter)) 0 0; } .story__stage { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .story__stage image-slot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); transform: scale(1.06); } .story__stage image-slot.is-active { opacity: 1; transform: scale(1); } .story__stage .story__badge { position: absolute; left: 18px; bottom: 16px; z-index: 5; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(20,17,14,.55); backdrop-filter: blur(6px); padding: .5em .85em; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); } .story__steps { padding-block: 14vh; } .story__step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .5s var(--ease); } .story__step.is-active { opacity: 1; } .story__step .num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; color: var(--accent); } .story__step h3 { font-family: var(--font-display); color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); margin: .8rem 0 0; letter-spacing: -.02em; } .story__step p { color: var(--on-dark-muted); font-size: clamp(1.02rem, 1rem + .4vw, 1.2rem); line-height: 1.55; margin-top: 1rem; max-width: 42ch; } .story__step .meta { margin-top: 1.3rem; display: flex; gap: 1.6rem; } .story__step .meta .n { font-family: var(--font-display); color: #fff; font-size: 1.5rem; font-weight: 600; } .story__step .meta .l { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: .2rem; } .story .eyebrow { color: var(--accent); } .story__intro { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: 0; } .story__intro h2 { font-family: var(--font-display); color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.02em; max-width: 18ch; margin-top: 1rem; } @media (prefers-reduced-motion: reduce) { .story__step { opacity: 1; min-height: auto; padding-block: 3vh; } .story__media { position: static; height: auto; margin: 2rem 0 0; } .story__stage image-slot { position: relative; opacity: 1; transform: none; } .story__stage image-slot:not(.is-first) { display: none; } .tilt { transform: none !important; } } @media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } .story__media { position: sticky; top: 60px; height: 52svh; margin: 0 0 1rem; } .story__steps { padding-block: 6vh; } .story__step { min-height: 64vh; } } /* Si el navegador NO soporta animation-timeline, el JS añade .reveal-fallback */ .immersive-fallback .reveal { opacity: 0; transform: translateY(18px); } .immersive-fallback .reveal.in { opacity: 1; transform: none; } /* =========================================================================== BANNER FULL-BLEED con parallax (imagen ancha entre secciones) =========================================================================== */ .imageband { position: relative; height: clamp(360px, 56vh, 620px); overflow: hidden; background: var(--dark); } .imageband image-slot { position: absolute; inset: -8% 0; width: 100%; height: 116%; } .imageband__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(20,17,14,.74) 0%, rgba(20,17,14,.34) 46%, rgba(20,17,14,.12) 100%); } .imageband__inner { position: absolute; z-index: 3; inset: auto 0 0 0; padding: 0 0 clamp(2rem,5vw,3.5rem); } .imageband__inner .eyebrow { color: #fff; } .imageband__inner .eyebrow::before { background: rgba(255,255,255,.7); } .imageband h2 { font-family: var(--font-display); color: #fff; font-size: clamp(1.7rem,1.2rem+2vw,2.9rem); letter-spacing: -.02em; max-width: 20ch; margin-top: .9rem; text-wrap: balance; } .imageband__cta { margin-top: 1.5rem; } @media (prefers-reduced-motion: no-preference) { body[data-immersive="on"] .imageband image-slot { animation: bandParallax linear both; animation-timeline: view(); animation-range: cover; } @keyframes bandParallax { from { transform: translateY(-5%); } to { transform: translateY(5%); } } } /* =========================================================================== GALERÍA de instalaciones (3-up, alturas variadas) =========================================================================== */ .gallery { background: var(--bg); border-top: 1px solid var(--line); } .gallery__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem,3vw,2.6rem); } .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem,1.8vw,1.4rem); } .gallery__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); } .gallery__item image-slot { width: 100%; height: 100%; } .gallery__item.tall { aspect-ratio: 3/4; } .gallery__item.wide { aspect-ratio: 4/3; } .gallery__item .cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(20,17,14,.5); backdrop-filter: blur(6px); padding: .45em .75em; border-radius: 999px; pointer-events: none; } .gallery__col { display: grid; gap: clamp(.9rem,1.8vw,1.4rem); align-content: start; } @media (max-width: 760px) { .gallery__grid { grid-template-columns: 1fr 1fr; } .gallery__item.tall, .gallery__item.wide { aspect-ratio: 1/1; } } @media (max-width: 480px) { .gallery__grid { grid-template-columns: 1fr; } }