/* Home v2: objeto 3D en la cabecera en lugar de la foto, entrada escalonada, acento violeta en detalles. Se suma a site.css. */
.home2{--v:#9281f7;--vg:#baa7ff;--ease:cubic-bezier(.22,.8,.2,1)}
.home2 .hero .photo{display:none}
.home2 .hero::before{content:"";position:absolute;left:-30%;right:-30%;top:26%;height:56%;background:radial-gradient(closest-side,rgba(146,129,247,.10),transparent);pointer-events:none;z-index:0;animation:h2breathe 9s ease-in-out infinite}
.home2 .hero h1 em{font-style:italic;color:var(--vg)}
.home2 .hero .btns{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:22px}
.home2 .hero .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:6px;box-shadow:inset 0 0 0 1px #fff;color:#fff;text-decoration:none;font:500 15px/1 var(--font-sans);letter-spacing:-.011em;transition:background .2s var(--ease),transform .15s var(--ease)}
.home2 .hero .btn:active{transform:scale(.97)}
.home2 .hero .btn:focus-visible,.home2 .hero .lnk:focus-visible{outline:2px solid #fff;outline-offset:3px}
.home2 .hero .lnk{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-2);text-decoration:none;font:500 15px/1 var(--font-sans)}
@media (hover:hover) and (pointer:fine){.home2 .hero .btn:hover{background:rgba(255,255,255,.08)}.home2 .hero .lnk:hover{color:#fff}}

.home2 .hero .o3{position:absolute;z-index:1;left:50%;bottom:0;width:min(78vw,380px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.home2 .hero .o3 .halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(146,129,247,.22),transparent 72%);animation:h2breathe 7s ease-in-out infinite}
.home2 .hero .o3 .fl3{position:relative;width:100%;height:100%;animation:h2float 8s ease-in-out infinite}
.home2 .hero .o3 img{display:block;width:100%;height:100%;object-fit:contain;transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease);will-change:transform;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
@media (min-width:900px){.home2 .hero .o3{left:auto;right:6vw;bottom:auto;top:50%;transform:translateY(-50%);width:min(42vw,540px)}}

/* acento violeta en detalles de las filas */
.home2 .row.on .fillring{stroke:var(--vg)}


@keyframes h2float{50%{transform:translateY(-8px)}}
@keyframes h2breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes h2enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js.home2 .hero h1,.js.home2 .hero .line,.js.home2 .hero .btns,.js.home2 .hero .o3 .fl3{opacity:0;animation:h2enter .8s var(--ease) forwards}
.js.home2 .hero .line{animation-delay:.12s}.js.home2 .hero .btns{animation-delay:.24s}.js.home2 .hero .o3 .fl3{animation:h2enter .9s var(--ease) .35s forwards,h2float 8s ease-in-out 1.3s infinite}
.js.home2 .rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.js.home2 .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .home2 *,.home2 *::before,.home2 *::after{animation:none!important;transition:none!important}
 .js.home2 .hero h1,.js.home2 .hero .line,.js.home2 .hero .btns,.js.home2 .hero .o3 .fl3,.js.home2 .rv{opacity:1!important;transform:none!important}
}

.home2 .hero h1 span span{display:inline}
.home2 .mlegal{display:flex;flex-wrap:wrap;gap:4px 16px;padding:14px var(--space-3) 0;border-top:var(--border);margin-top:var(--space-4)}
.home2 .mlegal a{display:inline-flex;align-items:center;min-height:36px;color:var(--color-text-4);text-decoration:none;font:400 var(--text-caption)/1 var(--font-sans)}
.home2 .mlegal a:focus-visible{outline:2px solid var(--color-light);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.home2 .row .d{max-height:none;margin-top:var(--space-2)}.home2 .row .d .l{opacity:1;transform:none}}
.home2:not(.js) .row .d{max-height:none;margin-top:var(--space-2)}
.home2:not(.js) .row .d .l{opacity:1;transform:none}

/* Home · héroe con el asistente: video en bucle (Gemini/Veo) sobre su primer fotograma.
   Todo se mueve salvo el texto, que solo tiene un brillo platinado lento. Se suma a site.css y home2.css. */
.home2 .hero-robot{--k:0;--px:0;--py:0;display:flex;align-items:center;min-height:max(640px,100svh);background:#000;isolation:isolate}
.home2 .hero-robot::before{content:none}
.hero-robot .stage{position:absolute;inset:0;z-index:0;pointer-events:none;transform:scale(calc(1 + var(--k)*.08));opacity:calc(1 - var(--k)*.85);transform-origin:70% 40%;will-change:transform,opacity}
/* Fondo y figura en una sola caja (el primer fotograma y el video encima, mismo encuadre) */
.hero-robot .cam{position:absolute;inset:0}
.hero-robot .glow{position:absolute;right:14vw;top:14%;width:44vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(146,129,247,.26),transparent 70%);filter:blur(24px);animation:hrBreathe 3.2s ease-in-out infinite}
.hero-robot .bot{position:absolute;right:0;bottom:0;height:92%;aspect-ratio:16/9}
.hero-robot .bot-in{position:absolute;inset:0;--mv:linear-gradient(to bottom,transparent 0,#000 9%,#000 70%,transparent 98%);--mh:linear-gradient(to right,transparent 0,#000 32%,#000 94%,transparent 100%);-webkit-mask-image:var(--mv),var(--mh);mask-image:var(--mv),var(--mh);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-robot .bot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}
/* Video en bucle del asistente: entra con un fundido sobre su primer fotograma cuando ya está listo */
.hero-robot .bot .vids{position:absolute;inset:0}
/* Viñeta: oscurece los bordes para que la luz quede en el personaje y se funda con el negro de la página */
.hero-robot .bot-in::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 62% 70% at 64% 42%,transparent 38%,rgba(0,0,0,.55) 74%,rgba(0,0,0,.9) 100%)}
.hero-robot .bot .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;opacity:0;transition:opacity .7s linear}
.hero-robot .bot .vid.on{opacity:1}
.hero-robot .veil{position:absolute;inset:0;background:linear-gradient(90deg,#000 0,#000 26%,rgba(0,0,0,.6) 44%,transparent 62%),linear-gradient(0deg,#000 0,transparent 20%)}

.home2 .hero-robot .txt{position:relative;z-index:2;width:100%;padding-top:clamp(96px,12svh,130px);padding-bottom:8svh;transform:translateY(calc(var(--k)*-50px))}
.home2 .hero-robot h1{font-size:clamp(44px,5.2vw,78px);line-height:1.04;letter-spacing:-.015em}
.hero-robot h1>span:first-child,.hero-robot h1>span>span{background:linear-gradient(100deg,#fff 0%,#f1f1f4 28%,#b8bbc6 46%,#fff 60%,#dcdde3 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hrShine 10s ease-in-out infinite}
.home2 .hero-robot h1 em{background:linear-gradient(100deg,#f3f0ff 0%,#cfc4ff 40%,#9281f7 70%,#e6e0ff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hrShine 10s ease-in-out infinite;padding-right:.08em}
.home2 .hero-robot .line{max-width:36ch;margin-top:var(--space-5);text-wrap:balance}
.hero-robot .agent{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;margin-top:22px;color:var(--color-text-2);text-decoration:none;font:500 15px/1.35 var(--font-sans);letter-spacing:-.011em}
.hero-robot .agent b{font-weight:500;color:var(--vg)}
.hero-robot .agent:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.hero-robot .agent:hover span{color:#fff}.hero-robot .agent:hover b{text-decoration:underline;text-underline-offset:4px}}

/* Tarjeta de ejemplo: solo en computadora y con altura suficiente, a un costado y pequeña */
.hero-robot .chat{display:none}
@media (min-width:900px) and (min-height:720px){
 .hero-robot .chat{display:block;position:absolute;z-index:3;left:clamp(24px,5.5vw,80px);bottom:6svh;width:250px;padding:11px 13px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);font:400 14px/1.4 var(--font-sans);transform:translateY(calc(var(--k)*-140px))}
 .home2 .hero-robot .txt{padding-bottom:calc(6svh + 190px)}
 .hero-robot .chat .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-3)}
 .hero-robot .chat .msg{margin-top:7px;padding:7px 11px;border-radius:13px;color:var(--color-text-1)}
 .hero-robot .chat .c{background:rgba(255,255,255,.09);width:max-content;max-width:90%}
 .hero-robot .chat .a{background:rgba(146,129,247,.26);margin-left:auto;max-width:92%}
 .js .hero-robot .chat .msg{opacity:0;transform:translateY(8px);animation:hrIn .6s cubic-bezier(.22,.8,.2,1) forwards}
 .js .hero-robot .chat .c{animation-delay:1.1s}.js .hero-robot .chat .a{animation-delay:2.1s}
}

/* Teléfono: como la portada publicada, el texto arriba con aire y el robot grande abajo, sin montarse; sin tarjeta */
@media (max-width:899px){
 .home2 .hero-robot{align-items:flex-start}
 .hero-robot .stage{transform-origin:50% 80%}
 .hero-robot .bot{right:-2vw;top:auto;bottom:0;height:auto;width:min(200vw,1100px)}
 .hero-robot .glow{left:10vw;right:auto;top:auto;bottom:8%;width:90vw}
 .hero-robot .bot-in{--mv:linear-gradient(to bottom,transparent 0,#000 18%,#000 76%,transparent 99%);--mh:linear-gradient(#000,#000)}
 .hero-robot .veil{background:linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.55) 44%,transparent 54%),linear-gradient(0deg,#000 0,transparent 10%)}
 .home2 .hero-robot h1{font-size:clamp(40px,11vw,48px)}
 .home2 .hero-robot .txt{padding-bottom:0;margin:0 auto}
}
@media (max-width:899px) and (max-height:740px){.hero-robot .bot{width:150vw;right:0}}
/* Tableta horizontal: la figura más a la derecha para no ir detrás del título */
@media (min-width:900px) and (max-width:1199px){.hero-robot .bot{right:-8vw;height:78%}}
/* Aviso de cookies a la derecha en la portada de computadora, para no tapar la tarjeta de ejemplo */
@media (min-width:900px) and (min-height:720px){.home2 .ak-analytics-notice{inset-inline-start:auto;inset-inline-end:1rem}}

@keyframes hrBreathe{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes hrWave{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.25)}}
@keyframes hrShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hrIn{to{opacity:1;transform:none}}
/* Movimiento reducido (Windows con animaciones apagadas, por ejemplo): se quitan los desplazamientos
   (zoom, flotar, parallax, scroll), pero se mantienen los cambios de luz, que no mueven nada de sitio. */
@media (prefers-reduced-motion:reduce){
 .hero-robot .stage,.home2 .hero-robot .txt,.hero-robot .chat,.hero-robot .bot,.hero-robot .cam{transform:none!important;opacity:1!important}
 .home2 .hero-robot .glow{animation:hrBreathe 2.8s ease-in-out infinite!important}
  .home2 .hero-robot h1>span:first-child,.home2 .hero-robot h1>span>span,.home2 .hero-robot h1 em{animation:hrShine 10s ease-in-out infinite!important}
 .js .hero-robot .chat .msg{opacity:1;transform:none}
}