:root{--papel:#090c12;--panel:#10151e;--tinta:#f2f4f8;--tinta-2:#aeb9c9;--tinta-3:#9caac0;--linea:#26303e;--oro:#d4af6a;--teal:#45cfc0;--indigo:#38b878}
body::before{background:radial-gradient(ellipse at 80% 20%,#9279dd09,transparent 60%)}
.aviso-preview{position:relative;z-index:4;padding:10px 5%;display:flex;justify-content:space-between;gap:15px;background:#192030;color:#d9e2f1;font-size:13px}.aviso-preview a{color:inherit}
.marco{max-width:1320px}.cabecera{padding-top:28px;padding-bottom:24px}.logotipo .nombre{color:var(--tinta);letter-spacing:.18em}.tres{background:linear-gradient(90deg,#d4af6a 25%,#45cfc0 25% 50%,#38b878 50% 75%,#9279dd 75%)}
.apertura{padding:110px 0 70px;isolation:isolate;overflow:hidden}.apertura h1{max-width:950px;font-size:clamp(3rem,6.6vw,6.8rem);line-height:1.04;letter-spacing:-.055em;position:relative;z-index:1}.sello{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.15em;color:var(--teal);margin:0 0 30px}.destello{background:linear-gradient(100deg,#ecd4a1,#74ddd0 55%,#b39af0);background-clip:text;color:transparent}.entrada{position:relative;max-width:630px;font-size:18px;line-height:1.7}.acciones-casa{position:relative}.boton-casa{border-radius:8px}.nota-casa{position:relative}.abajo{margin-top:35px}
.hero-luz{position:absolute;inset:-100px -200px -100px 30%;z-index:-1;opacity:.5;pointer-events:none;filter:blur(24px);transform:rotate(-28deg);mask-image:linear-gradient(90deg,transparent,#000 40%)}.hero-luz i{position:absolute;inset:15% -20%;border:30px solid #d4af6a;border-radius:48%;transform:rotate(-18deg) scaleY(.45);animation:flujo 17s ease-in-out infinite alternate}.hero-luz i:nth-child(2){border-color:#45cfc0;inset:29% -30%;animation-delay:-5s}.hero-luz i:nth-child(3){border-color:#38b878;inset:44% -10%;animation-delay:-10s}.hero-luz i:nth-child(4){border-color:#9279dd;inset:60% -20%;animation-delay:-14s}@keyframes flujo{to{transform:translate(45px,-55px) rotate(14deg) scaleY(.65)}}
.titulo-productos{padding:45px 0 35px;border-top:1px solid var(--linea)}.titulo-productos>span{color:var(--teal);font:13px 'IBM Plex Mono',monospace;letter-spacing:.15em}.titulo-productos h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.04em;margin:22px 0 16px}.titulo-productos p{color:var(--tinta-2)}
.productos-casa{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}.producto-casa{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--linea);border-radius:20px;padding:30px;min-height:240px;transition:border-color .25s,transform .25s;box-shadow:inset 0 1px #ffffff06}.producto-casa::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acento),transparent 84%),transparent 75%)}.producto-casa:hover::before,.producto-casa:focus-visible::before{opacity:1}.producto-casa.pagos{grid-row:span 2;background:radial-gradient(ellipse at 100% 100%,#d4af6a20,transparent 70%),var(--panel);border-color:#d4af6a60;justify-content:center}.producto-casa.pagos img{width:80px;height:80px;margin-bottom:20px}.producto-casa.pagos h2{font-size:2.4rem}.producto-casa.pagos p{font-size:17px;line-height:1.7}.producto-casa.futuro{--acento:#9279dd;grid-column:span 2;min-height:180px;background:linear-gradient(130deg,#9279dd0b,transparent)}.producto-casa h2{font-size:2rem}.producto-casa p{font-size:16px;line-height:1.6}.producto-etiqueta,.producto-ir{font-size:14px}.seccion{padding-top:65px;padding-bottom:65px}.seccion h2{letter-spacing:-.035em}.puerta{background:radial-gradient(ellipse at bottom,#45cfc012,transparent 65%)}
:root[data-tema="claro"] .destello{background:none;color:#096d60}:root[data-tema="claro"] .hero-luz{opacity:.2}:root[data-tema="claro"] .producto-casa{background:var(--panel)}
@media(max-width:800px){.apertura{padding-top:65px}.hero-luz{left:0;opacity:.27}.productos-casa{grid-template-columns:1fr 1fr}.producto-casa.pagos{grid-column:span 2;grid-row:auto}.producto-casa.futuro{grid-column:span 2}.producto-casa{padding:24px}.apertura h1{font-size:clamp(2.7rem,9vw,4.8rem)}}
@media(max-width:520px){.productos-casa{grid-template-columns:1fr}.producto-casa.pagos,.producto-casa.futuro{grid-column:auto}.aviso-preview{font-size:12px;flex-wrap:wrap}.sello{font-size:12px;letter-spacing:.08em}.hero-luz{filter:blur(18px)}.seccion{padding-top:40px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.hero-luz i{animation:none}.producto-casa{transition:none}.producto-casa:hover{transform:none}}

/* Profundidad suave y una trama que se descubre con el cursor. */
.hero-luz{translate:var(--parallax-x,0px) var(--parallax-y,0px);transition:translate .7s cubic-bezier(.2,.7,.2,1)}
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;background-image:radial-gradient(circle,#45e9dc70 1px,transparent 1.8px),linear-gradient(90deg,#45e9dc16 1px,transparent 1px),linear-gradient(#45e9dc16 1px,transparent 1px);background-size:32px 32px,96px 96px,96px 96px;mask-image:radial-gradient(circle 165px at var(--cursor-x,-500px) var(--cursor-y,-500px),#000,transparent);}
.explorando body::after{opacity:.65}
@media(prefers-reduced-motion:reduce),(hover:none){body::after{display:none}.hero-luz{translate:none;transition:none}}
body>.hero-luz{position:fixed;inset:-20% -25% -20% 20%;z-index:0;opacity:.28;mask-image:linear-gradient(90deg,transparent,#000 40%);pointer-events:none}
.producto-casa .marca-original,.producto-casa.pagos .marca-original{width:100%;height:auto;max-height:none;object-fit:contain;margin:0 0 12px}
.producto-casa.gente{grid-column:span 2}.producto-casa.remoto,.producto-casa.futuro{grid-column:auto}
.sr-brand{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.producto-casa .slogan-original{color:var(--tinta);font-weight:600}
@media(max-width:800px){.producto-casa.gente{grid-column:span 2}}
@media(max-width:520px){.producto-casa.gente{grid-column:auto}}

/* El fondo ocupa la ventana: sin bordes de panel ni traslación del conjunto. */
body>.hero-luz{inset:-18%;translate:none;transform:none;transition:none;mask-image:radial-gradient(ellipse at 65% 40%,#000 15%,transparent 72%);filter:blur(26px);opacity:.38}
.hero-luz i{inset:auto;left:35%;top:5%;width:85%;height:62%;border-width:18px;border-radius:50%;transform:rotate(-30deg) scaleY(.55);animation:none;translate:var(--drift-x,0px) var(--drift-y,0px);transition:translate 1.8s ease-out}
.hero-luz i:nth-child(2){inset:auto;left:15%;top:24%;width:95%;height:55%;transform:rotate(-15deg) scaleY(.5);transition-duration:2.3s}
.hero-luz i:nth-child(3){inset:auto;left:42%;top:38%;width:80%;height:48%;transform:rotate(-38deg) scaleY(.65);transition-duration:2.8s}
.hero-luz i:nth-child(4){inset:auto;left:30%;top:56%;width:90%;height:48%;transform:rotate(-23deg) scaleY(.5);transition-duration:3.2s}
.hero-luz i:nth-child(1){animation:onda-oro 19s ease-in-out infinite alternate}
.hero-luz i:nth-child(2){animation:onda-cian 23s ease-in-out -9s infinite alternate}
.hero-luz i:nth-child(3){animation:onda-verde 29s ease-in-out -17s infinite alternate}
.hero-luz i:nth-child(4){animation:onda-violeta 31s ease-in-out -7s infinite alternate}
@keyframes onda-oro{to{transform:rotate(-18deg) scaleY(.72) translateY(-28px)}}
@keyframes onda-cian{to{transform:rotate(-29deg) scaleY(.66) translateY(35px)}}
@keyframes onda-verde{to{transform:rotate(-23deg) scaleY(.46) translateX(-30px)}}
@keyframes onda-violeta{to{transform:rotate(-36deg) scaleY(.7) translateY(-35px)}}
.marco{width:100%;max-width:1320px;box-sizing:border-box;min-width:0}
.apertura{overflow:visible;min-width:0;padding-top:clamp(48px,7vw,100px)}
.apertura h1{width:100%;max-width:100%;font-size:clamp(2.4rem,5.5vw,5.8rem);letter-spacing:-.025em;word-spacing:.045em;line-height:1.12;overflow-wrap:normal;text-wrap:balance}
.cabecera{gap:18px}.cabecera>*{min-width:0}.navegacion-casa{flex-wrap:wrap}.productos-casa>*{min-width:0}
.acciones-casa{flex-wrap:wrap;max-width:100%}.entrada{max-width:min(100%,630px)}
@media(max-width:700px){.cabecera{gap:14px}.navegacion-casa{order:4}.idiomas{margin-left:auto}.apertura h1{font-size:clamp(2.2rem,7.8vw,3.5rem)}.apertura{padding-bottom:45px}.sello{letter-spacing:.06em}.acciones-casa{gap:18px}.producto-casa{padding:22px}body>.hero-luz{opacity:.25;filter:blur(20px)}}
@media(max-width:380px){.marco{padding-inline:16px}.apertura h1{font-size:2.1rem}.sello{font-size:11px}.acciones-casa>*{max-width:100%;box-sizing:border-box}.cabecera{gap:10px}}
@media(prefers-reduced-motion:reduce){.hero-luz i{transition:none}}
.logotipo .marca-matriz{display:block;width:240px;height:auto;max-width:100%}
/* Dos logos, uno por tema. Va en CSS y no en JavaScript a propósito: el
   guion del ojo no arranca en teléfonos, y el nombre tiene que leerse
   igual. El orden importa: estas reglas pisan al display:block de arriba. */
.logotipo .marca-clara{display:none}
[data-tema="claro"] .logotipo .marca-oscura{display:none}
[data-tema="claro"] .logotipo .marca-clara{display:block}
.producto-casa .marca-original,.producto-casa.pagos .marca-original{width:100%;max-width:300px;max-height:145px;object-fit:contain;align-self:center;margin:0 auto 12px}
.producto-casa.pagos .marca-original{max-width:300px;max-height:100px}
.producto-casa.remoto>img{width:48px;height:48px}
.producto-casa.gente{grid-column:auto}.productos-casa{grid-template-columns:repeat(2,minmax(0,1fr))}.producto-casa.pagos{grid-row:auto}.producto-casa.futuro{grid-column:auto}
.producto-casa{justify-content:flex-start;min-height:270px}.producto-casa.pagos{justify-content:flex-start}
:root{--oro:#d4a64f;--teal:#29b8bb;--indigo:#299c6b}.hero-luz i{border-color:#d4a64f}.hero-luz i:nth-child(2){border-color:#29b8bb}.hero-luz i:nth-child(3){border-color:#299c6b}.hero-luz i:nth-child(4){border-color:#784cc8}
@media(max-width:700px){.logotipo .marca-matriz{width:200px}.productos-casa{grid-template-columns:1fr}.producto-casa.pagos,.producto-casa.gente{grid-column:auto}.producto-casa .marca-original{max-width:260px}}
#transicion{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none;opacity:0;transition:opacity .12s}
#transicion.corriendo{opacity:1}