/* ========================================================================== Reinals Soluciones - capa de movimiento Se carga DESPUES de styles.css y solo anade/ajusta efectos. Todo se desactiva con prefers-reduced-motion (al final del archivo). ========================================================================== */ :root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --header-h:72px; } /* El fondo pasa a para que el campo animado se vea a traves del body */ html{background:var(--bg)} body{background:transparent} /* ---------------------------------------------------------- entrada de pagina */ body{ animation:page-in .8s var(--ease-out) both; } @keyframes page-in{ from{opacity:0} to{opacity:1} } body.is-leaving{ opacity:0; transition:opacity .32s var(--ease-io); animation:none; } /* ------------------------------------------------------------ intro de marca */ .intro{ position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; gap:20px; grid-auto-flow:row; } .intro__mark{ width:46px;height:46px; border-radius:13px; background:var(--ink); color:#fff; display:grid;place-items:center; font-weight:700; font-size:20px; letter-spacing:-.02em; animation:intro-mark .9s var(--ease-out) both; } .intro__bar{ width:150px;height:1px; background:var(--line); overflow:hidden; position:relative; } .intro__bar::after{ content:""; position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; animation:intro-bar 1s var(--ease-io) both; } .intro.is-done{ clip-path:inset(0 0 100% 0); transition:clip-path .75s var(--ease-out); } @keyframes intro-mark{ from{opacity:0;transform:translateY(10px) scale(.9)} to{opacity:1;transform:none} } @keyframes intro-bar{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* ------------------------------------------------------- campo de fondo + grano */ .fx-field{ position:fixed; inset:0; z-index:-2; pointer-events:none; } .grain{ position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------ barra de progreso scroll */ .scroll-progress{ position:fixed; top:0;left:0;right:0; height:2px; z-index:90; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; will-change:transform; } /* --------------------------------------------------------------------- header */ .nav{transition:height .4s var(--ease-out)} .site-header.is-stuck .nav{height:78px} .site-header{ transition:border-color .3s var(--ease-out), background .3s var(--ease-out), transform .38s var(--ease-out); } .site-header.is-hidden{transform:translateY(-100%)} .site-header.is-stuck{background:rgba(255,255,255,.72)} .nav__links a{position:relative} .nav__links a::after{ content:""; position:absolute; left:0;right:0;bottom:-5px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ease-out); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:0 50%; } .brand__logo{ transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); } .brand:hover .brand__logo{ opacity:.72; transform:scale(1.02); } /* la cabecera encoge al hacer scroll: el logo la acompana */ .site-header.is-stuck .brand__logo{height:54px} @media (max-width:860px){ .nav__mobile{ position:absolute; top:100%; left:0;right:0; bottom:auto; inset-block-start:100%; } .nav__mobile a{ opacity:0; transform:translateY(-8px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); } .nav__mobile.is-open a{opacity:1;transform:none} .nav__mobile.is-open a:nth-child(1){transition-delay:.05s} .nav__mobile.is-open a:nth-child(2){transition-delay:.10s} .nav__mobile.is-open a:nth-child(3){transition-delay:.15s} .nav__mobile.is-open a:nth-child(4){transition-delay:.20s} } /* -------------------------------------------------------------------- eyebrow */ .eyebrow{position:relative} .eyebrow::before{ width:7px;height:7px; border-radius:50%; background:var(--brand); animation:pulse-dot 2.6s var(--ease-io) infinite; } .eyebrow::after{ content:""; width:26px;height:1px; background:var(--line-strong); margin-left:2px; } @keyframes pulse-dot{ 0%,100%{box-shadow:0 0 0 0 rgba(240,78,35,.32)} 55%{box-shadow:0 0 0 7px rgba(240,78,35,0)} } /* ----------------------------------------------------------- titulares por palabra */ .split-text .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; } .split-text .word__inner{ display:inline-block; transform:translateY(112%); opacity:0; transition:transform 1.05s var(--ease-out), opacity .75s var(--ease-out); transition-delay:var(--d,0ms); will-change:transform; } .split-text.is-revealed .word__inner{ transform:none; opacity:1; } /* ------------------------------------------------------------------- reveal */ .reveal{ opacity:0; transform:translateY(26px); filter:blur(7px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); } .reveal.is-visible{ opacity:1; transform:none; filter:blur(0); } /* Escalonado de hijos dentro de un contenedor revelado */ .reveal .card, .reveal .quote, .reveal .stat, .reveal .case{ opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); } .reveal.is-visible .card, .reveal.is-visible .quote, .reveal.is-visible .stat, .reveal.is-visible .case{ opacity:1; transform:none; } /* el hover de las tarjetas debe ganar al transform:none de arriba */ .reveal.is-visible .card:hover{transform:translateY(-4px)} .reveal.is-visible .quote:hover{transform:translateY(-4px)} .reveal.is-visible > :nth-child(1){transition-delay:.02s} .reveal.is-visible > :nth-child(2){transition-delay:.10s} .reveal.is-visible > :nth-child(3){transition-delay:.18s} .reveal.is-visible > :nth-child(4){transition-delay:.26s} .reveal.is-visible > :nth-child(5){transition-delay:.34s} .reveal.is-visible > :nth-child(6){transition-delay:.42s} /* --------------------------------------------------------------- hero parallax */ .hero__inner{ transform:translate3d(0, var(--py, 0px), 0); will-change:transform; } .hero__actions > *{ animation:rise-in .9s var(--ease-out) backwards; } .hero__actions > *:nth-child(1){animation-delay:.55s} .hero__actions > *:nth-child(2){animation-delay:.65s} .hero__note{animation:rise-in .9s var(--ease-out) .78s backwards} .hero .eyebrow{animation:rise-in .8s var(--ease-out) .1s backwards} .hero h1{animation:rise-in .9s var(--ease-out) .24s backwards} .hero .lead{animation:rise-in 1s var(--ease-out) .42s backwards} @keyframes rise-in{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } /* ------------------------------------------------------------------- marquesina */ .hero__marquee{ display:flex; align-items:center; gap:26px; flex-wrap:nowrap; overflow:hidden; } .marquee{ flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .marquee__track{ display:flex; align-items:center; gap:38px; width:max-content; animation:marquee 34s linear infinite; } .marquee__track span{white-space:nowrap} .marquee__track i{ font-style:normal; color:var(--line-strong); } .hero__marquee:hover .marquee__track{animation-play-state:paused} @keyframes marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-33.3333%,0,0)} } /* ---------------------------------------------------------------------- botones */ .btn{ position:relative; overflow:hidden; isolation:isolate; will-change:transform; } .btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.3) 50%,transparent 75%); transform:translateX(-130%); transition:transform .85s var(--ease-out); } .btn:hover::before{transform:translateX(130%)} /* cuando el JS activa el efecto iman, el transform lo controla el script */ .btn.is-magnetic{transition:transform .45s var(--ease-out), box-shadow .3s var(--ease-out)} .btn.is-magnetic:hover{transform:none} .btn.is-magnetic.is-pulling{transition:transform .12s linear} .btn--ghost::before{ background:linear-gradient(115deg,transparent 25%,rgba(10,10,10,.12) 50%,transparent 75%); } .btn--light::before{ background:linear-gradient(115deg,transparent 25%,rgba(10,10,10,.14) 50%,transparent 75%); } /* ----------------------------------------------------------- tarjetas con foco */ .card,.quote{ position:relative; isolation:isolate; } .card::before,.quote::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity .45s var(--ease-out); background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(10,10,10,.06), transparent 62%); } .card:hover::before,.quote:hover::before{opacity:1} .card::after,.quote::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .45s var(--ease-out); background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(10,10,10,.55), transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } .card:hover::after,.quote:hover::after{opacity:1} .card--dark::before{ background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 62%); } .card--dark::after{ background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 60%); } /* Rejilla tenue dentro de las tarjetas oscuras */ .card--dark{ position:relative; overflow:hidden; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:38px 38px; } .card__num{ position:relative; display:inline-flex; align-items:center; gap:9px; } .card__num::after{ content:""; width:0; height:1px; background:var(--line-strong); transition:width .55s var(--ease-out); } .card:hover .card__num::after{width:34px} .card--dark .card__num::after{background:#4a4a45} .card__list li{transition:transform .4s var(--ease-out)} .card:hover .card__list li{transform:translateX(3px)} .card:hover .card__list li:nth-child(2){transition-delay:.03s} .card:hover .card__list li:nth-child(3){transition-delay:.06s} .card:hover .card__list li:nth-child(4){transition-delay:.09s} .card:hover .card__list li:nth-child(5){transition-delay:.12s} .card__list li::before{transition:background .4s var(--ease-out), border-color .4s var(--ease-out)} .card:hover .card__list li::before{background:var(--ink);border-color:var(--ink)} .card--dark:hover .card__list li::before{background:#fff;border-color:#fff} /* ---------------------------------------------------------------------- cifras */ .stat{ position:relative; z-index:0; overflow:hidden; } .stat__value{ font-variant-numeric:tabular-nums; display:inline-block; } .stat::before{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease-out); } .stat.is-counted::before{transform:scaleX(1)} /* ----------------------------------------------------------------------- casos */ .case{ position:relative; z-index:0; transition:transform .5s var(--ease-out); } .case::before{ content:""; position:absolute; inset:0 -20px; z-index:-1; border-radius:14px; background:var(--bg-soft); opacity:0; transform:scale(.98); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); } .case:hover::before{opacity:1;transform:none} .case__sector{transition:letter-spacing .5s var(--ease-out), color .4s var(--ease-out)} .case:hover .case__sector{letter-spacing:.16em;color:var(--ink)} .case h3{transition:transform .5s var(--ease-out)} .case:hover h3{transform:translateX(5px)} .case__result{transition:transform .5s var(--ease-out)} .case:hover .case__result{transform:translateX(-4px)} /* ------------------------------------------------------------------------- faq */ .faq summary{transition:color .3s var(--ease-out), padding-left .45s var(--ease-out)} .faq summary:hover{padding-left:8px} .faq summary::after,.faq summary::before{transition:transform .45s var(--ease-out), opacity .35s var(--ease-out)} .faq details[open] summary{color:var(--muted)} .faq details[open] p{animation:faq-in .6s var(--ease-out) both} @keyframes faq-in{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} } /* ------------------------------------------------------------------------- cta */ .cta{ position:relative; isolation:isolate; overflow:hidden; } .cta::before{ content:""; position:absolute; inset:-45%; z-index:-2; background: radial-gradient(closest-side at 32% 38%, rgba(255,255,255,.20), transparent 72%), radial-gradient(closest-side at 68% 62%, rgba(255,255,255,.13), transparent 72%), radial-gradient(closest-side at 52% 88%, rgba(255,255,255,.10), transparent 72%); filter:blur(24px); animation:aurora 22s linear infinite; } .cta::after{ content:""; position:absolute; inset:0; z-index:-1; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse at center,#000 18%,transparent 74%); mask-image:radial-gradient(ellipse at center,#000 18%,transparent 74%); } @keyframes aurora{ 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.15)} 100%{transform:rotate(360deg) scale(1)} } /* -------------------------------------------------------------------- formulario */ .field input,.field textarea,.field select{ transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out); } .field{position:relative} .field label{ transition:color .3s var(--ease-out), transform .3s var(--ease-out); } .field:focus-within label{ color:var(--ink); transform:translateX(3px); } .form__status.is-visible{ animation:faq-in .5s var(--ease-out) both; } /* --------------------------------------------------------------------- footer */ .footer__col ul li{ transition:transform .4s var(--ease-out); } .footer__col ul li:hover{transform:translateX(4px)} /* ------------------------------------------------------------- accesibilidad */ @media (prefers-reduced-motion:reduce){ body{animation:none;opacity:1} .intro{display:none} .fx-field,.grain{display:none} .split-text .word__inner{transform:none;opacity:1;transition:none} .reveal, .reveal .card,.reveal .quote,.reveal .stat,.reveal .case{ opacity:1 !important; transform:none !important; filter:none !important; } .marquee__track{animation:none} .site-header.is-hidden{transform:none} /* sin animacion las copias se verian repetidas */ .clients .marquee__track [aria-hidden="true"]{display:none} .hero__inner{transform:none !important} .hero .eyebrow,.hero .lead,.hero__actions > *,.hero__note{animation:none;opacity:1} .cta::before{animation:none} .eyebrow::before{animation:none} } /* ------------------------------------------------- pieza grafica del hero */ .hero__art{animation:rise-in 1.1s var(--ease-out) .5s backwards} .art-ring{ transform-origin:50% 50%; animation:art-breathe 9s var(--ease-io) infinite; } .art-ring--2{animation-duration:11s;animation-direction:reverse} .art-chev{ transform-origin:50% 50%; animation:art-slide 6.5s var(--ease-io) infinite; } .art-chev--2{animation-delay:.22s} .art-chev--3{animation-delay:.44s} @keyframes art-breathe{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.035);opacity:.55} } @keyframes art-slide{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-13px)} } @media (prefers-reduced-motion:reduce){ .hero__art,.art-ring,.art-chev{animation:none} } /* En pantallas estrechas la etiqueta parte en dos lineas y la rayita final se descoloca: mejor quitarla y dejar solo el punto. */ @media (max-width:620px){ .eyebrow::after{display:none} .eyebrow{align-items:flex-start} .eyebrow::before{margin-top:.42em} }