/* BioPurity — capa cinematográfica. Se carga la ÚLTIMA (después de biopurity-parallax.css y biopurity-secciones.css). Todo lo que empieza oculto depende de la clase .cine en , que solo se pone si hay JavaScript y el usuario no ha pedido reducir el movimiento: sin ella, la página se ve completa y estática. */ @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap; src:url('../../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); } html,body{font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ---------- Estructura de la portada ---------- */ .hero{height:100vh;height:100svh;isolation:isolate} .camara{position:absolute;inset:0;z-index:0;transform-origin:50% 60%;will-change:transform} /* Variables que la intro y el scroll animan sin pisar las animaciones CSS originales (translate/rotate/scale se suman a transform en vez de sustituirlo). */ .leaf,.foreground-leaf,.ion,.cloud-bank,.pinwheel-assembly{--ex:0px;--ey:0px;--er:0deg;--es:1;--sy:0vh} .leaf,.foreground-leaf,.ion{translate:var(--ex) var(--ey);rotate:var(--er);scale:var(--es)} .cloud-bank,.pinwheel-assembly{translate:var(--ex) calc(var(--ey) + var(--sy));scale:var(--es)} .pinwheel-rotor{--rot:0deg;rotate:var(--rot)} /* Rayos de sol que giran muy despacio desde el horizonte */ .sol{position:absolute;z-index:4;left:9%;top:46%;width:0;height:0;pointer-events:none} .sol::before{content:"";position:absolute;width:70vmax;height:70vmax;left:-35vmax;top:-35vmax;border-radius:50%; background:radial-gradient(circle,rgba(255,244,214,.75) 0,rgba(255,226,160,.35) 12%,rgba(255,220,150,.08) 32%,transparent 55%); mix-blend-mode:screen} .rayos{position:absolute;width:150vmax;height:150vmax;left:-75vmax;top:-75vmax;opacity:.3;mix-blend-mode:screen; background:repeating-conic-gradient(from 0deg,rgba(255,246,220,0) 0deg 5deg,rgba(255,246,220,.55) 7deg,rgba(255,246,220,0) 10deg 17deg); -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 52%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 52%); animation:rayosGiro 140s linear infinite} @keyframes rayosGiro{to{transform:rotate(360deg)}} /* Lienzo de partículas de aire */ .aire{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none} /* Destello anamórfico (el "flare" horizontal azul del cine) y fantasmas de lente */ .destello{position:absolute;z-index:9;left:-20%;right:-20%;top:50%;height:2px;margin-top:-1px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent 0,rgba(90,190,255,.35) 20%,rgba(210,240,255,1) 50%,rgba(90,190,255,.35) 80%,transparent 100%); box-shadow:0 0 18px 3px rgba(120,200,255,.65),0 0 60px 12px rgba(60,160,255,.35);mix-blend-mode:screen} .flare{position:absolute;inset:0;z-index:8;pointer-events:none;mix-blend-mode:screen;overflow:hidden} .fantasma{position:absolute;left:0;top:0;border-radius:50%;will-change:transform} .fantasma.f1{width:90px;height:90px;margin:-45px;background:radial-gradient(circle,rgba(255,236,180,.28) 0,rgba(255,200,120,.12) 45%,transparent 70%)} .fantasma.f2{width:26px;height:26px;margin:-13px;background:rgba(140,220,255,.28);filter:blur(1px)} .fantasma.f3{width:150px;height:150px;margin:-75px;background:radial-gradient(circle,transparent 52%,rgba(120,255,200,.14) 60%,rgba(120,200,255,.1) 68%,transparent 72%)} .fantasma.f4{width:48px;height:48px;margin:-24px;background:radial-gradient(circle,rgba(190,160,255,.3) 0,transparent 70%)} .fantasma.f5{width:220px;height:220px;margin:-110px;background:radial-gradient(circle,rgba(120,210,255,.1) 0,rgba(120,210,255,.05) 40%,transparent 70%)} /* Niebla que sube al hacer scroll: la cámara "atraviesa" las nubes hacia la página */ /* Mide el doble que la portada: al subir, su mitad blanca acaba cubriéndola entera. */ .niebla{position:absolute;left:0;right:0;bottom:0;height:200%;z-index:18;pointer-events:none;opacity:0; background:linear-gradient(to top,#fff 0%,#fff 50%,rgba(255,255,255,.8) 66%,rgba(255,255,255,0) 100%)} /* Grano de película y viñeta */ .grano{position:absolute;inset:-50%;z-index:40;pointer-events:none;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grano .9s steps(6) infinite} @keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}} .vineta{position:absolute;inset:0;z-index:17;pointer-events:none; background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(3,28,60,.28) 100%)} /* ---------- Telón de la intro ---------- */ .telon{position:fixed;inset:0;z-index:90;pointer-events:none;display:none} .cine .telon{display:block;animation:telonSeguro .01s 8s forwards} /* red de seguridad si el JS fallase */ @keyframes telonSeguro{to{visibility:hidden}} .telon-sup,.telon-inf{position:absolute;left:0;right:0;height:50.5%;background:#02070f} .telon-sup{top:0;transform-origin:50% 0} .telon-inf{bottom:0;transform-origin:50% 100%} .linea-luz{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;transform:scaleX(0); background:linear-gradient(90deg,transparent,rgba(120,210,255,.9) 25%,#fff 50%,rgba(120,210,255,.9) 75%,transparent); box-shadow:0 0 24px 4px rgba(90,190,255,.8),0 0 80px 20px rgba(40,140,255,.35)} .saltar{position:fixed;z-index:95;right:max(20px,4vw);bottom:max(20px,env(safe-area-inset-bottom));display:none; font:inherit;font-size:11px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.75);background:none;border:1px solid rgba(255,255,255,.3); border-radius:999px;padding:9px 16px;cursor:pointer;opacity:0} .cine .saltar{display:block} .saltar:hover{color:#fff;border-color:#fff} /* ---------- Cabecera fija ---------- */ .topbar{position:fixed;left:0;right:0;top:0;padding:max(18px,env(safe-area-inset-top)) 4.7% 18px;transition:background .5s,box-shadow .5s,padding .5s,color .5s} .topbar.solida{background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 1px 0 rgba(10,55,97,.08),0 10px 30px -18px rgba(10,55,97,.35);padding-top:10px;padding-bottom:10px;text-shadow:none} .topbar.solida nav a{color:var(--azul-noche)} .topbar.solida nav a:hover,.topbar.solida nav a:focus-visible{border-color:var(--azul-noche)} .topbar.solida nav a.nav-cta{background:var(--azul-noche);color:#fff;box-shadow:none} .topbar.solida nav a.nav-cta:hover{background:var(--azul)} .corner-logo{transition:width .5s} .topbar.solida .corner-logo{width:132px;filter:none} /* ---------- Bloque central ---------- */ .brand{transform:none;translate:-50% -50%} .logo-cine{position:relative;width:min(100%,520px);margin:auto} .logo-cine .brand-logo{opacity:1;width:100%} .brillo{position:absolute;inset:0;pointer-events:none;--sheen:160%; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) var(--sheen) 0/260% 100% no-repeat; -webkit-mask:url('../../images/logo.png') center/100% 100% no-repeat;mask:url('../../images/logo.png') center/100% 100% no-repeat} .brand-tagline b{display:inline-block;font-weight:700} .brand-tagline span{display:inline-block} .hero-cta{transition:background .25s,box-shadow .25s} .hero-cta:hover,.hero-cta:focus-visible{transform:none;box-shadow:0 16px 36px -10px rgba(11,143,229,.8)} .boton:hover,.boton:focus-visible{transform:none} /* ---------- Secciones ---------- */ .pm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em} .pi{display:inline-block;will-change:transform} .eyebrow{display:flex;align-items:center;gap:14px} .eyebrow::before{content:"";width:34px;height:2px;border-radius:2px;background:currentColor} .tarjeta{position:relative;transform-style:preserve-3d;transition:border-color .5s,box-shadow .5s} .tarjeta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 42%)} .tarjeta:hover::after{opacity:1} .tarjeta .icono{transition:transform .6s cubic-bezier(.2,.9,.3,1.4),box-shadow .6s} .tarjeta:hover .icono{transform:translateZ(30px) scale(1.08)} /* Cinta de texto gigante entre secciones */ .cinta{overflow:hidden;background:#fff;padding:clamp(20px,4vw,48px) 0;border-block:1px solid var(--borde)} .cinta-pista{display:flex;width:max-content;gap:.5em;font-size:clamp(56px,11vw,168px);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap;will-change:transform} .cinta-pista span{color:transparent;-webkit-text-stroke:1.5px rgba(10,55,97,.22)} .cinta-pista span.llena{-webkit-text-stroke:0;background:linear-gradient(100deg,var(--verde),var(--cian) 45%,var(--azul) 70%,var(--azul-noche)); -webkit-background-clip:text;background-clip:text} .cinta-pista i{font-style:normal;color:var(--cian);-webkit-text-stroke:0;font-size:.4em;align-self:center} /* Tecnología en modo noche: el aire limpio brilla */ .content.oscura{position:relative;overflow:hidden;isolation:isolate;color:#d9ecfa; background:radial-gradient(1100px 600px at 85% -10%,rgba(11,143,229,.32),transparent 60%), radial-gradient(900px 520px at -5% 110%,rgba(53,173,44,.2),transparent 60%),#031529} .oscura .motas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none} .oscura h2{color:#fff} .oscura .lead{color:#9ec2df} .oscura .eyebrow{color:#3fd0ff!important} .oscura .tarjeta{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:none; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .oscura .tarjeta h3{color:#fff} .oscura .tarjeta p{color:#a9c6dd} .oscura .tarjeta::after{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(90,200,255,.16),transparent 45%)} .oscura .pasos .tarjeta::before{color:rgba(255,255,255,.07)} .oscura .tarjeta.activa{border-color:rgba(63,208,255,.55);box-shadow:0 0 0 1px rgba(63,208,255,.2),0 20px 60px -20px rgba(0,166,223,.55)} .oscura .tarjeta.activa .icono{box-shadow:0 0 30px rgba(63,208,255,.65)} .pasos-wrap{position:relative} .flujo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} .flujo path{fill:none;stroke-linecap:round} .flujo .base{stroke:rgba(255,255,255,.08);stroke-width:2} .flujo .luz{stroke:url(#gradFlujo);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(63,208,255,.9))} .flujo .cometa{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 8px #3fd0ff) drop-shadow(0 0 18px #0b8fe5);opacity:0} .pasos-wrap .tarjetas{position:relative;z-index:1} /* Contacto */ /* Sin transición sobre transform: GSAP anima la entrada y Safari se queda a medio camino si CSS también la interpola (las tarjetas quedaban cortadas en iPhone). */ .dato{transition:border-color .4s,box-shadow .4s} @media (hover:hover){.dato:hover{border-color:rgba(11,143,229,.4);box-shadow:0 12px 30px -20px rgba(10,55,97,.5)}} @media (max-width:800px){ .topbar{padding-left:20px;padding-right:20px} .topbar.solida .corner-logo{width:104px} .logo-cine{width:100%} .flujo{display:none} .fantasma{display:none} .rayos{opacity:.22} }