/* ========================================================= BUILDING LIVES · capa de refinamiento --------------------------------------------------------- Se carga DESPUÉS de styles.css y solo añade: textura orgánica, transiciones de sección, escala tipográfica, micro-interacciones y los estilos que necesita motion.js. Quitar esta hoja devuelve el sitio a su estado anterior. ========================================================= */ :root{ --ease-suave: cubic-bezier(.22,.61,.36,1); --ease-salida: cubic-bezier(.16,1,.3,1); --grano: .035; } /* ========================================================= 1 · TEXTURA ORGÁNICA Un grano muy sutil sobre todo el sitio. Es lo que separa una superficie digital plana de algo que se siente físico. ========================================================= */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none; opacity:var(--grano);mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } @media print{ body::after{display:none} } /* ========================================================= 2 · TRANSICIONES ORGÁNICAS ENTRE SECCIONES Las secciones dejan de encontrarse en una línea recta. ========================================================= */ .onda{position:relative} .onda::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(40px,5vw,90px); pointer-events:none;z-index:2; background:inherit; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,40 C240,0 480,70 720,45 C960,20 1200,75 1440,35 L1440,100 Z' fill='%23000'/%3E%3C/svg%3E") top/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,40 C240,0 480,70 720,45 C960,20 1200,75 1440,35 L1440,100 Z' fill='%23000'/%3E%3C/svg%3E") top/100% 100% no-repeat; transform:translateY(-99%); } /* Halos difusos que dan profundidad sin pesar */ .aura{ position:relative;isolation:isolate; /* El halo sobresale por el costado a propósito. Sin recortarlo, el navegador lo cuenta como contenido y la página se podía arrastrar 184 px en horizontal. Se recorta SOLO en horizontal: la onda que corona la sección sobresale por arriba y tiene que seguir ahí. */ overflow-x:clip; overflow-y:visible; } /* Navegadores que no entienden `clip` (Safari 15 y anteriores): se recorta en los dos ejes, excepto donde eso borraría la onda. */ @supports not (overflow-x:clip){ .aura:not(.onda){overflow:hidden} } .aura::after{ content:"";position:absolute;z-index:-1;pointer-events:none; width:min(70vw,780px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(0,216,114,.1),transparent 68%); filter:blur(18px); } .aura--dr::after{right:-18%;bottom:-28%} .aura--ti::after{left:-20%;top:-18%} /* ========================================================= 3 · TIPOGRAFÍA CON MÁS PRESENCIA ========================================================= */ .hero h1{ font-size:clamp(2.3rem,5vw,4rem); letter-spacing:-.035em;line-height:1.03; } /* El titular vive en una columna, no en toda la pantalla: que escale con el ancho de su contenedor evita que se desborde en pantallas medias. */ .hero__grid > div:first-of-type{container-type:inline-size} @supports (font-size:1cqi){ .hero h1{font-size:clamp(2.3rem,9.6cqi,4.6rem)} } .section__head h2{ font-size:clamp(1.85rem,3.6vw,2.9rem); letter-spacing:-.032em;line-height:1.08; } .hero__lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.65;max-width:50ch} .section__head p{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.65} /* La etiqueta de sección con una línea que la ancla */ .mono-label{display:inline-flex;align-items:center;gap:.7rem} .mono-label::before{ content:"";width:clamp(18px,3vw,34px);height:1.5px;background:currentColor;opacity:.55; } /* ========================================================= 4 · REVELADO DE TEXTO POR PALABRAS (motion.js) ========================================================= */ .palabra{display:inline-block;overflow:hidden;vertical-align:top} /* El texto está visible por defecto. Solo se esconde cuando motion.js confirma que puede animarlo (clase en ), y un temporizador de seguridad lo revela pase lo que pase. Nunca puede quedar en blanco. */ html.motion-activo .palabra > span{ display:inline-block;transform:translateY(105%); transition:transform .85s var(--ease-salida); } html.motion-activo .palabra.vista > span{transform:none} /* ========================================================= 5 · BOTONES CON VIDA ========================================================= */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn::after{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%); transition:opacity .4s var(--ease-suave); } .btn:hover::after{opacity:1} .btn--iman{will-change:transform;transition:transform .35s var(--ease-salida),box-shadow .3s var(--ease-suave)} /* ========================================================= 6 · TARJETAS QUE RESPONDEN ========================================================= */ .feature, .progcard, .ccard, .el{ transition:transform .5s var(--ease-salida), box-shadow .5s var(--ease-suave), border-color .4s var(--ease-suave), background .4s var(--ease-suave); } .inclina{transform-style:preserve-3d;will-change:transform} .inclina > *{transform:translateZ(22px)} /* Brillo que sigue al cursor en las tarjetas oscuras */ .progcard{position:relative;overflow:hidden} .progcard::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,216,114,.16),transparent 62%); transition:opacity .45s var(--ease-suave); } .progcard:hover::after{opacity:1} /* ========================================================= 7 · FOCO QUE SIGUE AL CURSOR EN SECCIONES OSCURAS ========================================================= */ .foco{position:relative} .foco > .wrap{position:relative;z-index:2} .foco::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(520px circle at var(--fx,50%) var(--fy,50%),rgba(0,216,114,.09),transparent 65%); transition:opacity .6s var(--ease-suave); } .foco.activo::before{opacity:1} /* ========================================================= 8 · BARRA DE PROGRESO DE LECTURA ========================================================= */ .progreso{ position:fixed;top:0;left:0;height:2px;z-index:200;width:0; background:linear-gradient(90deg,var(--accent-600),var(--accent),var(--accent-300)); box-shadow:0 0 14px rgba(0,216,114,.65); transition:width .1s linear; } /* ========================================================= 9 · ENTRADA DEL SITIO ========================================================= */ .telon{ position:fixed;inset:0;z-index:9998;display:grid;place-items:center; background:linear-gradient(160deg,var(--brand-950),var(--brand-1000)); transition:opacity .7s var(--ease-suave),visibility .7s; } .telon .brand{opacity:0;transform:translateY(12px);animation:telonMarca 1.1s var(--ease-salida) forwards} @keyframes telonMarca{to{opacity:1;transform:none}} .telon.fuera{opacity:0;visibility:hidden} /* ========================================================= 10 · MÉTODO: LOS TRES EJES SE ENCADENAN ========================================================= */ .eje{position:relative;padding-left:0;transition:opacity .6s var(--ease-suave),transform .6s var(--ease-salida)} .eje:not(.vivo){opacity:.42} .eje.vivo .feature__ico{transform:scale(1.06);box-shadow:0 14px 34px -12px rgba(0,216,114,.55)} .feature__ico{transition:transform .5s var(--ease-salida),box-shadow .5s var(--ease-suave)} /* ========================================================= 11 · DETALLES ========================================================= */ /* Subrayado que se dibuja en los enlaces del texto */ .sub{background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .45s var(--ease-salida)} .sub:hover{background-size:100% 1.5px} /* Las fotos entran revelándose, no apareciendo de golpe */ .reveal .photo, .reveal.photo{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-salida)} .reveal.is-in .photo, .reveal.photo.is-in{clip-path:inset(0 0 0 0)} /* Ritmo vertical más generoso */ .section{padding-block:clamp(4.5rem,8.5vw,8rem)} /* ========================================================= 12 · RESPETO POR QUIEN PREFIERE MENOS MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion:reduce){ .palabra > span{transform:none;transition:none} .inclina{transform:none!important} .telon{display:none} .progreso{display:none} .eje:not(.vivo){opacity:1} .reveal .photo,.reveal.photo{clip-path:none} } /* ========================================================= 13 · LEGIBILIDAD EN PANTALLAS MEDIANAS Cuatro columnas por debajo de 1150px dejan líneas de 3-4 palabras: se lee a trompicones. Mejor dos columnas amplias. ========================================================= */ @media (max-width:1150px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-4.steps{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .grid-4{grid-template-columns:1fr} } /* Las tarjetas de valor respiran más */ .feature{padding:2.1rem 1.8rem} .feature p{font-size:.95rem;line-height:1.62}