@import url("../css/styles.css"); /* Aire de los titulares. 1 = como venía; por debajo de 1 se abren. Está en un solo sitio a propósito: los nueve titulares de la página tienen tracking distinto, así que ajustarlos a mano era tocar nueve valores cada vez que quisieras un poco más de aire. */ :root{ --oxigeno-titulares:.90; } /* ========================================================== ILUMINIA QUANTUM · PARTICULARES DEV Una única pantalla. Seis planos de profundidad. ========================================================== */ :root{ --depth-nav-h:84px; --depth-ease:cubic-bezier(.2,.75,.2,1); } html{ background:#eef5f5; } body.quantum-depth{ min-height:100vh; overflow-x:hidden; background:#edf5f4; } body.quantum-depth:before{ z-index:0; opacity:.65; } .quantum-nav{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:1000; margin:0; background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); box-shadow:0 18px 60px rgba(6,23,47,.11); } .quantum-space{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background: radial-gradient(circle at 77% 28%,rgba(89,209,202,.19),transparent 28%), radial-gradient(circle at 18% 72%,rgba(168,242,53,.10),transparent 28%), linear-gradient(145deg,#f9fcfc 0%,#edf5f4 48%,#f8fbfb 100%); } .quantum-space:before{ content:""; position:absolute; inset:-10%; background-image: linear-gradient(rgba(6,23,47,.026) 1px,transparent 1px), linear-gradient(90deg,rgba(6,23,47,.026) 1px,transparent 1px); background-size:76px 76px; transform: perspective(900px) rotateX(62deg) translateY(31%); transform-origin:center bottom; mask-image:linear-gradient(to top,#000,transparent 72%); } .quantum-orbit{ position:absolute; border:1px solid rgba(22,122,118,.09); border-radius:50%; transform:translate(-50%,-50%); } .quantum-orbit--one{ width:76vw; aspect-ratio:1; left:50%; top:56%; } .quantum-orbit--two{ width:52vw; aspect-ratio:1; left:50%; top:56%; } .quantum-glow{ position:absolute; width:38vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.16; } .quantum-glow--lime{ background:var(--lime); left:-12vw; bottom:-20vw; } .quantum-glow--cyan{ background:var(--cyan); right:-14vw; top:-18vw; } /* ---------- La cámara ---------- * * Por defecto esto es una página normal: secciones una debajo de otra, * legibles, sin efectos. La profundidad se activa solo cuando el script * confirma estar vivo (clase .depth-activo en el , que pone él). * * El orden importa y no es un detalle: si la profundidad fuera lo de * serie y lo llano la excepción, un fallo del JavaScript dejaría la * página COMPLETAMENTE EN BLANCO. Que es exactamente lo que hacía la * versión anterior. * * De regalo, el móvil y el modo de movimiento reducido dejan de * necesitar reglas propias llenas de !important: son este mismo estado. */ .depth-viewport{ position:relative; padding-top:calc(var(--depth-nav-h) + 24px); } .depth-plane{ position:relative; display:block; padding:18px 12px 48px; } .depth-plane__inner{ width:min(1180px,calc(100vw - 40px)); margin:auto; } .depth-scroll-rail, .depth-hint{ display:none; } html:not(.depth-activo) .depth-meter{ display:none; } /* ---------- Modo profundidad ---------- */ .depth-activo .depth-viewport{ position:fixed; inset:0; z-index:5; overflow:hidden; perspective:1600px; perspective-origin:50% 48%; pointer-events:none; padding-top:0; } .depth-activo .depth-plane{ position:absolute; inset:0; display:grid; place-items:center; padding:calc(var(--depth-nav-h) + 28px) 20px 28px; visibility:hidden; pointer-events:none; --plane-scale:.86; --plane-y:38px; --plane-opacity:0; --plane-blur:14px; --plane-z:-240px; --flow:0; transform: translate3d(0,var(--plane-y),var(--plane-z)) scale(var(--plane-scale)); filter:blur(var(--plane-blur)); opacity:var(--plane-opacity); will-change:transform,opacity,filter; transform-style:preserve-3d; } .depth-activo .depth-plane.is-visible{ visibility:visible; } .depth-activo .depth-plane.is-active{ pointer-events:auto; } .depth-activo .depth-hint{ display:block; } .depth-activo .depth-plane__inner{ max-height:calc(100vh - var(--depth-nav-h) - 45px); transform-style:preserve-3d; } /* El raíl: la altura que se recorre. * * Ya no es un número escrito a mano. El script crea un tramo por escena * y cada tramo mide --paso-vh pantallas, así que la altura sale sola del * número de secciones. Antes eran 825vh fijos: al añadir una sección, la * última quedaba inalcanzable — y eso hace imposible reutilizar esto en * el resto de páginas, que tienen otro número de bloques. */ .depth-activo .depth-scroll-rail{ display:block; position:relative; z-index:1; pointer-events:none; } .depth-activo .depth-rail-step{ height:calc(var(--paso-vh,1.15) * 100vh); scroll-snap-align:start; } /* El imán, y aquí está la clave de que se sienta bien: "proximity", no * "mandatory". Atrae cuando sueltas cerca de una escena, pero jamás te * agarra mientras te estás moviendo. Es la diferencia entre una página * que te acompaña y una que forcejea contigo. */ .depth-activo{ scroll-snap-type:y proximity; } /* ---------- Medidor ---------- */ .depth-meter{ position:fixed; right:25px; top:50%; z-index:900; transform:translateY(-50%); width:34px; display:grid; justify-items:center; gap:10px; color:rgba(6,23,47,.45); pointer-events:none; } .depth-meter__label{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:9px; font-weight:900; letter-spacing:.18em; } .depth-meter__line{ position:relative; width:1px; height:116px; background:rgba(6,23,47,.12); overflow:hidden; } .depth-meter__line i{ position:absolute; left:0; top:0; width:100%; height:var(--meter-progress,0%); background:var(--teal); } .depth-meter__count{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; letter-spacing:.08em; } .depth-meter__count b{ color:var(--navy); } /* ========================================================== 01 · HERO A SANGRE COMPLETA, CON FOTO REAL ========================================================== */ /* La escena entera pierde el recuadro y el margen de 1180px: la foto cubre el viewport de lado a lado, como pedía el brief de Daniel ("banners hero a full width"). --plane-* lo sigue poniendo el motor de scroll de siempre: esto solo cambia qué hay DENTRO de la escena. */ .depth-plane--foto .depth-plane__inner{ padding:0; } .depth-plane__inner--ancho{ width:min(760px,calc(100vw - 80px)); justify-self:start; margin-left:8vw; } .depth-plane__foto{ position:absolute; inset:0; z-index:0; } .depth-plane__foto img{ width:100%; height:100%; object-fit:cover; object-position:60% 32%; } .depth-plane__foto:after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(6,23,47,.96) 0%, rgba(6,23,47,.88) 34%, rgba(6,23,47,.48) 62%, rgba(6,23,47,.12) 88%), linear-gradient(0deg, rgba(6,23,47,.5), transparent 42%); } .hero-foto-copy{ position:relative; z-index:2; color:#fff; } .kicker--oscuro{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:var(--mint); } .kicker--oscuro:before{ background:var(--lime); } .hero-foto-copy h1{ color:#fff; } .hero-foto-copy h1 span{ color:var(--lime); } .lead--oscuro{ color:rgba(255,255,255,.82); } .philosophy--oscuro{ background:rgba(255,255,255,.08); border-left-color:var(--lime); color:rgba(255,255,255,.86); backdrop-filter:blur(6px); } .btn-ghost-oscuro{ display:inline-flex;align-items:center;justify-content:center;gap:10px; border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:14px 20px; font-weight:850;background:rgba(255,255,255,.08);color:#fff; } .btn-ghost-oscuro:hover{ background:rgba(255,255,255,.16); } .depth-plane--foto .hero-chips{ position:relative; inset:auto; z-index:2; margin-top:28px; max-width:none; } /* ========================================================== HERO ANTIGUO — ya sin uso, se conserva por si hace falta volver ========================================================== */ .quantum-hero{ position:relative; overflow:hidden; border-radius:38px; padding:24px; background:rgba(255,255,255,.79); border:1px solid rgba(255,255,255,.94); box-shadow:0 34px 100px rgba(6,23,47,.14); backdrop-filter:blur(18px); } .quantum-hero:before{ content:""; position:absolute; width:560px; height:560px; right:-190px; top:-210px; background:url("../assets/brand/recurso-grafico-iluminia.png") center/contain no-repeat; opacity:.08; } .quantum-hero .hero-grid{ min-height:min(620px,calc(100vh - 160px)); gap:24px; } .quantum-hero .hero-copy{ padding:20px 2px 20px 20px; transform: translate3d( calc((.5 - var(--mx, .5)) * 12px), calc((.5 - var(--my, .5)) * 8px), 50px ); } .quantum-hero h1{ margin:18px 0; max-width:690px; font-size:clamp(54px,6.5vw,92px); line-height:.87; letter-spacing:calc(-.075em * var(--oxigeno-titulares,1)); } .quantum-hero h1 span{ display:block; color:var(--teal); } .quantum-hero .lead{ max-width:620px; font-size:clamp(19px,1.7vw,23px); } .quantum-hero .philosophy{ max-width:660px; padding:16px 19px; font-size:16px; } .quantum-hero-media{ min-height:0; height:auto; transform: translate3d( calc((var(--mx, .5) - .5) * 15px), calc((var(--my, .5) - .5) * 11px), 0 ) scale(calc(1 + var(--flow) * .035)); } .quantum-hero-media:after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,transparent 24%,rgba(6,23,47,.19) 64%,rgba(6,23,47,.64) 100%); } /* Las pastillas del hero. Sustituyen al círculo centrado con el logo repetido: no aportaba nada que el propio logo de la barra de navegación no dijera ya. En su lugar, cuatro hechos concretos del servicio, flotando sobre la foto, cada una con su propia inclinación fija — el descaro está en el giro, no en cómo aparecen. */ .hero-chips{ position:absolute; inset:24px 22px auto; z-index:3; display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; max-width:78%; } .hero-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:rgba(6,23,47,.32); border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(10px); color:#fff; font-size:13px; font-weight:800; letter-spacing:.01em; white-space:nowrap; box-shadow:0 18px 40px rgba(6,23,47,.22); } .hero-chip:before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; } .hero-chip--lime:before{ background:var(--lime); box-shadow:0 0 0 5px rgba(168,242,53,.22); } .hero-chip--cyan:before{ background:var(--cyan); box-shadow:0 0 0 5px rgba(89,209,202,.22); } .hero-chip--mint:before{ background:var(--mint); box-shadow:0 0 0 5px rgba(191,231,196,.22); } /* Cada pastilla vuelca un poco hacia un lado (--tilt, fijo, ese es el descaro) y aparece en cascada con el resto del grupo (--show, animado por JS: sube un poco y se desvanece hacia dentro). Por eso no hereda el transform genérico de [data-cascada] > * — necesita sumarle su propio giro. */ .depth-activo [data-cascada] > .hero-chip{ transform: translateY(calc((1 - var(--show,1)) * 16px)) rotate(var(--tilt,0deg)); opacity:var(--show,1); } .quantum-hero .media-panel{ z-index:4; } .depth-hint{ position:absolute; left:50%; bottom:15px; transform:translateX(-50%); margin:0; color:rgba(6,23,47,.48); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .depth-hint:after{ content:""; display:block; width:1px; height:26px; margin:9px auto 0; background:linear-gradient(var(--teal),transparent); } /* ========================================================== 02 · FACTURA ========================================================== */ .quantum-heading{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.65fr); gap:30px; align-items:end; margin-bottom:24px; } .quantum-heading .kicker{ grid-column:1/-1; justify-self:start; } .quantum-heading h2{ margin:0; color:var(--navy); font-size:clamp(48px,6vw,82px); line-height:.9; letter-spacing:calc(-.07em * var(--oxigeno-titulares,1)); } .quantum-heading p{ margin:0 0 4px; color:var(--muted); font-size:17px; line-height:1.5; } .invoice-lab{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:22px; align-items:stretch; } .invoice-paper{ position:relative; overflow:hidden; padding:18px; border-radius:30px; background:rgba(255,255,255,.84); border:1px solid rgba(255,255,255,.96); box-shadow:0 32px 90px rgba(6,23,47,.13); backdrop-filter:blur(18px); } .invoice-paper:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(22,122,118,.025) 1px,transparent 1px), linear-gradient(rgba(22,122,118,.025) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; } .invoice-paper__top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:2px 8px 14px; color:#6a7b91; font-size:10px; letter-spacing:.15em; font-weight:900; } .invoice-paper__top strong{ color:var(--navy); font-size:22px; letter-spacing:calc(-.04em * var(--oxigeno-titulares,1)); } .invoice-row{ position:relative; z-index:2; display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; min-height:86px; padding:14px 16px; margin-top:8px; border-radius:20px; border:1px solid rgba(6,23,47,.07); background:rgba(249,252,252,.83); box-shadow:0 10px 30px rgba(6,23,47,.045); transform: translate3d( calc((1 - var(--row-show,1)) * 45px), 0, calc((1 - var(--row-show,1)) * -130px) ) scale(calc(.94 + var(--row-show,1) * .06)); opacity:var(--row-show,1); } .invoice-row__index{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:10px; font-weight:900; } .invoice-row small{ display:block; color:var(--teal); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.14em; } .invoice-row strong{ display:block; color:var(--navy); margin:2px 0 3px; font-size:17px; } .invoice-row p{ margin:0; color:#64768a; font-size:12px; line-height:1.35; } .invoice-row__value{ color:var(--navy); font-size:15px; font-weight:900; white-space:nowrap; } .invoice-caption{ display:flex; flex-direction:column; justify-content:flex-end; padding:28px; border-radius:30px; color:#fff; background: linear-gradient(145deg,rgba(6,23,47,.97),rgba(10,36,72,.95)); box-shadow:0 28px 80px rgba(6,23,47,.2); } .invoice-caption__number{ font-size:clamp(38px,4.5vw,62px); font-weight:900; letter-spacing:calc(-.07em * var(--oxigeno-titulares,1)); color:var(--lime); } .invoice-caption p{ margin:15px 0 0; color:rgba(255,255,255,.72); line-height:1.5; font-size:15px; } /* ========================================================== 03 · DECISIÓN ========================================================== */ .decision-core{ position:relative; overflow:hidden; min-height:min(620px,calc(100vh - 155px)); display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,6vw,74px); border-radius:40px; color:#fff; background: radial-gradient(circle at 78% 34%,rgba(89,209,202,.16),transparent 28%), linear-gradient(135deg,#06172f 0%,#0a2448 100%); box-shadow:0 42px 120px rgba(6,23,47,.3); } .decision-core__graphic{ position:absolute; right:-14%; top:50%; transform: translateY(-50%) rotate(calc(-14deg + var(--flow) * 9deg)) scale(calc(.82 + var(--flow) * .15)); width:min(60vw,760px); opacity:.10; } .decision-core .kicker{ position:relative; z-index:2; align-self:flex-start; } .decision-core h2{ position:relative; z-index:2; max-width:850px; margin:24px 0 18px; color:#fff; font-size:clamp(66px,8vw,112px); line-height:.82; letter-spacing:calc(-.08em * var(--oxigeno-titulares,1)); } .decision-core h2 span{ display:block; color:var(--lime); } .decision-core > p{ position:relative; z-index:2; max-width:650px; margin:0; color:rgba(255,255,255,.72); font-size:clamp(17px,1.6vw,22px); line-height:1.45; } .decision-checks{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; } .decision-checks > div{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center; min-height:78px; padding:16px; border-radius:18px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(10px); } .decision-checks b{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--navy); font-size:10px; } .decision-checks span{ color:rgba(255,255,255,.82); font-size:13px; line-height:1.35; } /* ========================================================== 04 · FOTO ========================================================== */ .depth-plane--photo{ padding:calc(var(--depth-nav-h) + 18px) 18px 18px; } .depth-photo{ position:absolute; inset:calc(var(--depth-nav-h) + 12px) 18px 18px; overflow:hidden; border-radius:38px; background:#06172f; box-shadow:0 40px 120px rgba(6,23,47,.28); } .depth-photo > img{ width:100%; height:100%; object-fit:cover; transform: scale(calc(1.13 - var(--flow) * .045)) translate3d( calc((var(--mx,.5) - .5) * -14px), calc((var(--my,.5) - .5) * -9px), 0 ); filter:saturate(.9) contrast(1.02); } .depth-photo__veil{ position:absolute; inset:0; background: radial-gradient(circle at 70% 32%,transparent 0,rgba(6,23,47,.12) 34%,rgba(6,23,47,.55) 82%), linear-gradient(90deg,rgba(6,23,47,.86) 0%,rgba(6,23,47,.48) 42%,rgba(6,23,47,.12) 74%); } .depth-photo__content{ position:absolute; z-index:2; left:clamp(34px,6vw,90px); bottom:clamp(38px,8vh,92px); max-width:760px; color:#fff; transform:translateZ(90px); } .depth-photo__content h2{ margin:18px 0; max-width:820px; color:#fff; font-size:clamp(58px,7.4vw,104px); line-height:.84; letter-spacing:calc(-.08em * var(--oxigeno-titulares,1)); } .depth-photo__content h2 span{ display:block; color:var(--lime); } .depth-photo__content p{ max-width:610px; margin:0; color:rgba(255,255,255,.75); font-size:18px; line-height:1.48; } .depth-photo__facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; } .depth-photo__facts span{ padding:10px 13px; border-radius:999px; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(10px); font-size:11px; font-weight:800; } /* ========================================================== 05 · PROCESO ========================================================== */ .quantum-heading--center{ display:block; text-align:center; margin:0 auto 34px; } .quantum-heading--center .kicker{ justify-self:auto; } .quantum-heading--center h2{ max-width:900px; margin:16px auto 0; } .process-orbit{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:center; min-height:360px; } .process-line{ position:absolute; left:9%; right:9%; top:50%; height:1px; background: linear-gradient(90deg,transparent,rgba(22,122,118,.27) 10%,rgba(22,122,118,.27) 90%,transparent); } .process-node{ position:relative; z-index:2; min-height:245px; padding:24px; border-radius:28px; background:rgba(255,255,255,.83); border:1px solid rgba(255,255,255,.97); box-shadow:0 26px 70px rgba(6,23,47,.10); backdrop-filter:blur(16px); transform: translate3d( 0, calc((1 - var(--node-show,1)) * 70px), calc((1 - var(--node-show,1)) * -180px) ) scale(calc(.86 + var(--node-show,1) * .14)); opacity:var(--node-show,1); } .process-node b{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; box-shadow:0 0 0 8px rgba(168,242,53,.13); } .process-node h3{ margin:34px 0 8px; font-size:30px; letter-spacing:calc(-.055em * var(--oxigeno-titulares,1)); color:var(--navy); } .process-node p{ margin:0; color:var(--muted); line-height:1.45; font-size:14px; } /* ========================================================== 06 · CIERRE ========================================================== */ .quantum-end{ position:relative; overflow:hidden; min-height:min(650px,calc(100vh - 150px)); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(38px,6vw,76px); border-radius:42px; color:#fff; background: radial-gradient(circle at 85% 25%,rgba(89,209,202,.18),transparent 26%), radial-gradient(circle at 80% 80%,rgba(168,242,53,.11),transparent 30%), linear-gradient(135deg,#06172f,#0a2448); box-shadow:0 42px 120px rgba(6,23,47,.32); } .quantum-end:after{ content:""; position:absolute; right:-8%; top:50%; transform:translateY(-50%) rotate(-13deg); width:min(52vw,700px); aspect-ratio:1; background:url("../assets/brand/recurso-grafico-iluminia.png") center/contain no-repeat; opacity:.11; } .quantum-end__logo{ position:relative; z-index:2; width:auto; height:40px; filter:brightness(0) invert(1); margin-bottom:34px; } .quantum-end__eyebrow{ position:relative; z-index:2; color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } .quantum-end h2{ position:relative; z-index:2; max-width:900px; margin:18px 0; color:#fff; font-size:clamp(72px,9vw,130px); line-height:.78; letter-spacing:calc(-.085em * var(--oxigeno-titulares,1)); } .quantum-end h2 span{ display:block; color:var(--lime); } .quantum-end > p{ position:relative; z-index:2; max-width:590px; margin:6px 0 26px; color:rgba(255,255,255,.7); font-size:18px; line-height:1.45; } .quantum-end__actions{ position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; } .quantum-end .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.07); } .quantum-end__footer{ position:absolute; z-index:2; left:clamp(38px,6vw,76px); right:clamp(38px,6vw,76px); bottom:24px; display:flex; justify-content:space-between; gap:20px; padding-top:15px; border-top:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.43); font-size:11px; } /* ========================================================== Puntero / profundidad ambiental ========================================================== */ @media (pointer:fine){ .depth-plane.is-active .quantum-hero, .depth-plane.is-active .invoice-paper, .depth-plane.is-active .decision-core, .depth-plane.is-active .process-node, .depth-plane.is-active .quantum-end{ transition:box-shadow .25s ease; } } /* ========================================================== PANTALLAS INTERMEDIAS ========================================================== */ @media (max-height:760px) and (min-width:901px){ :root{--depth-nav-h:78px} .quantum-hero .hero-grid{ min-height:540px; } .quantum-hero h1{ font-size:clamp(50px,6vw,76px); } .quantum-heading{ margin-bottom:14px; } .quantum-heading h2{ font-size:clamp(42px,5.2vw,68px); } .invoice-row{ min-height:72px; padding:10px 14px; } .decision-core{ min-height:540px; } .decision-core h2{ font-size:clamp(58px,7vw,88px); } .process-orbit{ min-height:300px; } .process-node{ min-height:210px; } .process-node h3{ margin-top:24px; } .quantum-end{ min-height:540px; } .quantum-end h2{ font-size:clamp(64px,8vw,100px); } } /* ========================================================== MÓVIL / TABLET Aquí la web vuelve al scroll normal. ========================================================== */ @media (max-width:900px){ body.quantum-depth{ overflow:auto; } .quantum-space{ position:fixed; } .quantum-nav{ top:10px; } /* Ya no hace falta desmontar la profundidad aquí a base de !important: el móvil nunca la monta, porque el modo llano es lo de serie. Solo quedan los ajustes de tamaño propios de pantalla pequeña. */ .depth-viewport{ padding-top:92px; } /* El hero a sangre completa está pensado para escritorio, donde hay sitio de sobra a la derecha de la columna de texto. En móvil no hay "derecha" — sin esto el texto llega justo hasta el borde de la pantalla sin respiro, aunque técnicamente no desborde. */ .depth-plane__inner--ancho{ width:100%; justify-self:stretch; margin-left:0; padding:0 18px; box-sizing:border-box; } .depth-plane__foto:after{ background: linear-gradient(180deg, rgba(6,23,47,.55) 0%, rgba(6,23,47,.80) 55%, rgba(6,23,47,.94) 100%); } .depth-plane__inner{ width:100%; } .quantum-hero{ border-radius:30px; padding:17px; } .quantum-hero .hero-grid{ min-height:0; } .quantum-hero .hero-copy, .quantum-hero-media, .depth-photo > img, .decision-core__graphic{ transform:none !important; } /* Sin esto, las 4 pastillas se apilan en columna en pantalla estrecha y se comen la altura de la foto, invadiendo el panel de abajo. */ .hero-chips{ inset:14px 14px auto; width:calc(100% - 28px); max-width:none; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .hero-chips::-webkit-scrollbar{ display:none; } .hero-chip{ padding:8px 13px; font-size:12px; flex:none; } .quantum-hero h1{ font-size:clamp(48px,14vw,68px); } .quantum-heading{ display:block; } .quantum-heading h2{ margin:15px 0; font-size:clamp(42px,12vw,62px); } .invoice-lab{ grid-template-columns:1fr; } .invoice-caption{ min-height:220px; } .invoice-row{ grid-template-columns:38px 1fr; transform:none !important; opacity:1 !important; } .invoice-row__value{ grid-column:2; justify-self:start; } .decision-core{ min-height:auto; padding:34px 24px 38px; } .decision-core h2{ font-size:clamp(52px,14vw,76px); } .decision-checks{ grid-template-columns:1fr; } .depth-plane--photo{ padding:18px 12px 48px; } .depth-photo{ position:relative; inset:auto; min-height:680px; border-radius:30px; } .depth-photo__content{ left:24px; right:24px; bottom:34px; } .depth-photo__content h2{ font-size:clamp(50px,13vw,72px); } .process-orbit{ grid-template-columns:1fr; min-height:0; } .process-line{ display:none; } .process-node{ min-height:0; transform:none !important; opacity:1 !important; } .process-node h3{ margin:18px 0 7px; } .quantum-end{ min-height:680px; padding:34px 24px 90px; } .quantum-end h2{ font-size:clamp(62px,16vw,88px); } .quantum-end__actions{ width:100%; } .quantum-end__actions .btn{ width:100%; } .quantum-end__footer{ left:24px; right:24px; display:grid; gap:5px; } } /* ========================================================== REDUCIR MOVIMIENTO ========================================================== */ @media (prefers-reduced-motion:reduce){ .depth-plane, .invoice-row, .process-node, .quantum-hero .hero-copy, .quantum-hero-media, .depth-photo > img{ transition:none !important; } } /* ========================================================== LOS TRES PLANOS Y LA CASCADA ========================================================== Tres profundidades declaradas en el HTML con data-plano: "fondo", "medio" y "frente". El JavaScript les da la Z y un desplazamiento distinto a cada una según avanza la cámara. Lo importante: esto ocurre dentro de la zona nítida. En el punto clave de cada escena los elementos siguen moviéndose unos respecto de otros, pero enfocados. Antes, "quieto" y "nítido" eran lo mismo; ahora no. Nada de esto se aplica sin .depth-activo, así que en móvil y sin JavaScript el contenido queda plano y legible. ========================================================== */ .depth-activo [data-plano]{ transform: translate3d(0,var(--plano-y,0),var(--plano-z,0)) rotate(var(--giro,0deg)); transform-style:preserve-3d; will-change:transform; } /* Cascada: el contenido de un grupo aparece uno detrás de otro, subiendo un poco y desvaneciéndose hacia dentro (--show, animado por JS). Sin volteos ni perspectiva propia — solo orden. La factura, el proceso y las pastillas quedan fuera a propósito: cada uno tiene su propia regla de transform (--row-show / --node-show / el giro fijo de .hero-chip). Un :not() suma especificidad de verdad — sin excluirlos aquí explícitamente, esta regla genérica pesaría MÁS que la suya y se la comería en silencio, tal como pasó la primera vez con las pastillas antes de añadir este exacto aviso. */ .depth-activo [data-cascada] > *:not(.invoice-row):not(.process-node):not(.hero-chip){ transform:translateY(calc((1 - var(--show,1)) * 22px)); opacity:var(--show,1); will-change:transform,opacity; } /* Enlace de privacidad, siempre alcanzable. El depth-viewport es fixed a pantalla completa mientras dura la experiencia: un footer normal después del scroll-rail no llegaría a verse nunca, quedaría tapado para siempre. En vez de fingir que hay un footer, un enlace fijo y discreto en la esquina — mismo principio que el resto del sitio (privacidad enlazada desde cualquier página), adaptado a que esta página no tiene "final del documento" en el sentido normal. */ .depth-legal{ position:fixed; left:18px; bottom:14px; z-index:900; font-size:11px; font-weight:700; color:rgba(6,23,47,.4); text-decoration:underline; text-underline-offset:2px; } .depth-legal:hover{ color:rgba(6,23,47,.7); } @media (max-width:900px){ .depth-legal{ position:static; display:block; text-align:center; margin:18px 0 34px; color:var(--muted); } } /* ========================================================== ESCENAS OSCURAS A SANGRE COMPLETA — decisión, proceso, cierre ========================================================== Mismo truco que el hero: un hijo position:absolute;inset:0 rompe el ancho de 1180px de .depth-plane__inner porque su bloque contenedor real es .depth-plane (que sí está posicionado), no .depth-plane__inner (que es solo una celda de grid, no posicionada). decision-core y quantum-end YA eran oscuros — solo vivían dentro de una tarjeta con esquinas redondeadas; aquí se les quita la tarjeta, no el color. process-orbit no tenía fondo propio: aquí se le da uno igual, para mantener la alternancia oscuro-claro-oscuro-claro- oscuro-oscuro de las 6 escenas. */ .depth-plane--decision .depth-plane__inner, .depth-plane--process .depth-plane__inner, .depth-plane--end .depth-plane__inner{ padding:0; max-height:none; /* transform-style:preserve-3d (heredado de .depth-activo .depth-plane__inner) convierte a este elemento en bloque contenedor para sus descendientes position:absolute, aunque él mismo sea position:static — por eso decision-core/quantum-end no llegaban a los bordes del viewport. Aquí no hace falta el 3D. */ transform-style:flat; } .decision-core, .depth-plane--process .quantum-heading--center, .depth-plane--process .process-orbit, .quantum-end{ border-radius:0 !important; box-shadow:none !important; } .decision-core, .quantum-end{ position:absolute; inset:0; padding:0 8vw !important; } .depth-plane--process{ background: radial-gradient(circle at 18% 20%,rgba(168,242,53,.14),transparent 32%), radial-gradient(circle at 88% 82%,rgba(89,209,202,.13),transparent 34%), linear-gradient(135deg,#06172f,#0a2448); } .depth-plane--process .depth-plane__inner{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 6vw !important; gap:clamp(28px,4vw,48px); } .depth-plane--process .quantum-heading--center .kicker{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:var(--mint); } .depth-plane--process .quantum-heading--center .kicker:before{ background:var(--lime); } .depth-plane--process .quantum-heading--center h2{ color:#fff; } .depth-plane--process .process-line{ background:rgba(255,255,255,.18); } .depth-plane--process .process-node{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); } .depth-plane--process .process-node b{ color:var(--lime); } .depth-plane--process .process-node h3{ color:#fff; } .depth-plane--process .process-node p{ color:rgba(255,255,255,.68); } @media (max-width:900px){ .decision-core, .quantum-end{ position:relative; inset:auto; padding:34px 20px !important; } .depth-plane--process .depth-plane__inner{ padding:34px 20px !important; } } /* ========================================================== MODO ESTÁTICO — sin el motor de scroll (depth.js ya no se carga). ========================================================== .decision-core, .quantum-end y .depth-photo eran position:absolute porque el motor JS colocaba cada escena con transform/opacity. Sin ese motor, .depth-plane (su padre) no tiene ningún hijo en flujo normal que le dé altura, y la escena colapsa al padding mínimo — por eso hasta ahora solo se veía bien en el hueco <900px, donde ya existía este mismo arreglo para el modo llano de móvil. Aquí se aplica siempre, en cualquier ancho: la página entera se lee de arriba abajo con scroll nativo del navegador, sin JS. */ .decision-core, .quantum-end{ position:relative; inset:auto; padding:90px 8vw !important; } .depth-plane--process .depth-plane__inner{ padding:90px 6vw !important; } .depth-photo{ position:relative; inset:auto; min-height:560px; border-radius:30px; }