/* Objetos 3D incrustados (imágenes generadas con Higgsfield) */

/* Objeto flotante: el fondo oscuro de la imagen se funde con la web (screen) */
.obj{position:relative;width:100%;aspect-ratio:1;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),calc(var(--py,0px) + var(--ty,0px)),0);will-change:transform;pointer-events:none}
.obj::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(139,123,255,.22),rgba(53,224,255,.06) 55%,transparent 72%);filter:blur(40px);animation:objglow 6s ease-in-out infinite alternate}
.obj img{position:relative;display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.8;filter:saturate(.85) brightness(.92);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);animation:objfloat 7s ease-in-out infinite alternate}
@keyframes objfloat{from{transform:translateY(-10px) rotate(-1.2deg)}to{transform:translateY(12px) rotate(1.2deg)}}
@keyframes objglow{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}

/* Ojos del androide: se dibujan por código y siguen al cursor */
.eyes{position:absolute;inset:0;pointer-events:none}
.eyes i{position:absolute;display:block;transform:translate(-50%,-50%)}
.eyes .l{left:42.2%;top:34.7%}
.eyes .r{left:58.0%;top:34.7%}
.eyes .patch{width:11%;height:7.4%;border-radius:50%;background:radial-gradient(ellipse at center,#04050a 0,#04050a 58%,rgba(4,5,10,0) 100%)}
.eyes .eye{width:4.4%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translate(var(--ex,0px),var(--ey,0px));animation:blink 6.5s infinite}
.eyes .eye.l{background:radial-gradient(circle,#fff 0 14%,#e07bff 30%,#a23bff 52%,rgba(162,59,255,0) 72%);box-shadow:0 0 22px 6px rgba(190,80,255,.55)}
.eyes .eye.r{background:radial-gradient(circle,#fff 0 14%,#7ff4ff 30%,#17c9ea 52%,rgba(23,201,234,0) 72%);box-shadow:0 0 22px 6px rgba(40,215,240,.55)}
@keyframes blink{0%,93%,100%{scale:1 1}96%{scale:1 .08}}

/* Robot de dibujos animados (SVG): ojos que siguen el cursor, parpadeo y saludo */
.obj .robo{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 36px rgba(139,123,255,.35))}
.robo .r-bob{animation:robob 3.2s ease-in-out infinite alternate}
@keyframes robob{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
.robo .r-ant{transform-origin:200px 52px;animation:roboant 2.2s ease-in-out infinite alternate}
@keyframes roboant{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.robo .r-eye{transform-box:fill-box;transform-origin:center;animation:roboblink 5.2s infinite}
@keyframes roboblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.robo .iris{transition:transform .08s linear}
.robo .r-pulse{stroke-dasharray:140;animation:robopulse 2.4s linear infinite}
@keyframes robopulse{from{stroke-dashoffset:140}to{stroke-dashoffset:-140}}
.robo .r-brow{transition:transform .6s ease}
.robo .r-mouth{transform-box:fill-box;transform-origin:center;transition:transform .6s ease}
.robo .r-cheek{transition:opacity .6s ease}
.robo .r-arm{transform-origin:321px 292px;transform:rotate(8deg);transition:transform .9s ease-out}
.robo.wave .r-arm{animation:robowave 1.5s ease-in-out infinite alternate}
@keyframes robowave{from{transform:rotate(-138deg)}to{transform:rotate(-162deg)}}
.robo.happy .r-brow{transform:translateY(-6px)}
.robo.happy .r-mouth{transform:scale(1.22,1.45)}
.robo.happy .r-cheek{opacity:1}

/* Hero a dos columnas: texto a la izquierda, objeto a la derecha */
.hero{text-align:left;padding:96px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
.hero h1{margin-left:0;margin-right:0;max-width:15ch}
.hero p{margin-left:0;margin-right:0}
.hero .actions{justify-content:flex-start}
.hero-visual{display:flex;justify-content:center}
.hero-visual .obj{max-width:560px}

/* Objetos laterales en cabeceras de sección */
.has-obj{position:relative}
.has-obj>*:not(.obj-side){position:relative;z-index:1}
.obj-side{position:absolute;z-index:0;right:0;top:-70px;width:min(250px,24vw);opacity:.75}
.has-obj .lead{max-width:48ch}

/* Mano del androide: golpea dos veces la pantalla y señala el botón */
.hand{position:relative;width:100px;height:150px;margin:-18px auto 6px}
.hand-svg{position:relative;z-index:1;display:block;transform-origin:50% 0;filter:drop-shadow(0 8px 18px rgba(139,123,255,.35));opacity:0}
.hand .ripple{position:absolute;left:36%;top:86%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #35e0ff;box-shadow:0 0 16px rgba(53,224,255,.7);opacity:0;pointer-events:none}
.hand .ripple.r2{border-color:#8b7bff;box-shadow:0 0 16px rgba(139,123,255,.7)}
.cta.go .hand-svg{animation:handseq 7s ease-in-out infinite}
.cta.go .hand .ripple{animation:ripple 7s ease-out infinite}
.cta.go .hand .ripple.r2{animation-name:ripple2}
@keyframes handseq{
	0%{opacity:0;transform:translateY(-70px) scale(1)}
	10%{opacity:1;transform:translateY(0) scale(1)}
	17%{transform:translateY(0) scale(1)}
	20%{transform:translateY(10px) scale(1.2)}
	24%{transform:translateY(0) scale(1)}
	31%{transform:translateY(0) scale(1)}
	34%{transform:translateY(10px) scale(1.2)}
	38%{transform:translateY(0) scale(1)}
	48%{transform:translateY(0) scale(1)}
	55%{transform:translateY(20px)}
	62%{transform:translateY(0)}
	69%{transform:translateY(20px)}
	76%{transform:translateY(0)}
	90%{opacity:1;transform:translateY(0)}
	100%{opacity:0;transform:translateY(-24px)}
}
@keyframes ripple{
	0%,19%{opacity:0;transform:scale(.2)}
	20%{opacity:.95;transform:scale(.3)}
	30%{opacity:0;transform:scale(2.4)}
	31%,100%{opacity:0;transform:scale(.2)}
}
@keyframes ripple2{
	0%,33%{opacity:0;transform:scale(.2)}
	34%{opacity:.95;transform:scale(.3)}
	44%{opacity:0;transform:scale(2.6)}
	45%,100%{opacity:0;transform:scale(.2)}
}

@media (max-width:900px){
	.hero{text-align:center;padding:72px 0 56px}
	.hero-grid{grid-template-columns:1fr;gap:0}
	.hero h1,.hero p{margin-left:auto;margin-right:auto}
	.hero .actions{justify-content:center}
	.hero-visual{order:-1}
	.hero-visual .obj{max-width:300px}
	.obj-side{display:none}
}
@media (prefers-reduced-motion:reduce){
	.obj,.obj::before,.obj img{animation:none!important;transition:none!important;transform:none!important}
	.robo *{animation:none!important;transition:none!important}
	.hand-svg{opacity:1!important;animation:none!important}
	.hand .ripple{display:none}
	.card .ic *{animation:none!important}
}

/* Botones de icono con aspecto realista: tecla 3D con bisel, brillo de cristal y grosor */
.card .ico{width:58px;height:58px;border-radius:18px;margin-bottom:26px;color:#c9beff;position:relative;
	background:linear-gradient(160deg,#4d5394 0%,#2b3060 40%,#171b3a 100%);
	border:1px solid rgba(255,255,255,.16);
	box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -5px 9px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.4),
		0 6px 0 #0a0d22,0 7px 0 rgba(255,255,255,.05),0 16px 24px rgba(0,0,0,.6),0 0 28px rgba(139,123,255,.22);
	transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s ease,color .2s}
.card .ico::before{content:"";position:absolute;left:5px;right:5px;top:3px;height:44%;border-radius:15px 15px 50% 50%/15px 15px 22px 22px;
	background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.03));pointer-events:none}
.card .ico::after{content:"";position:absolute;inset:-1px;border-radius:19px;pointer-events:none;
	background:radial-gradient(circle at 50% 120%,rgba(53,224,255,.0),rgba(53,224,255,0) 60%);transition:background .25s}
.card .ico svg{position:relative;width:27px;height:27px;overflow:visible;
	filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.65)) drop-shadow(0 0 5px rgba(139,123,255,.6));transition:filter .2s}

/* Al pasar el ratón: la tecla se hunde un poco, se ilumina y el icono cobra vida */
.card:hover .ico{transform:translateY(3px);color:#fff;
	box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.4),
		0 3px 0 #0a0d22,0 4px 0 rgba(255,255,255,.05),0 10px 18px rgba(0,0,0,.55),0 0 34px rgba(53,224,255,.45)}
.card:hover .ico::after{background:radial-gradient(circle at 50% 120%,rgba(53,224,255,.55),rgba(53,224,255,0) 65%)}
.card:hover .ico svg{filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(53,224,255,.95))}
.card:active .ico{transform:translateY(6px);
	box-shadow:inset 0 3px 8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.45),0 0 0 #0a0d22,0 4px 8px rgba(0,0,0,.5),0 0 30px rgba(53,224,255,.5)}

/* Animación propia de cada icono */
.ic *{transform-box:fill-box;transform-origin:center}
.ic .i-spark{opacity:0}
.card:hover .ic-bolt .i-bolt{animation:icZap .9s ease-in-out infinite}
.card:hover .ic-bolt .i-spark{animation:icSpark .9s steps(2,end) infinite}
@keyframes icZap{0%,100%{transform:none}15%{transform:translate(-.7px,.5px) skewX(-7deg)}30%{transform:translate(.7px,-.5px) skewX(7deg) scale(1.08)}50%{transform:scale(1.14)}70%{transform:translate(-.5px,0) skewX(-5deg)}}
@keyframes icSpark{0%,100%{opacity:0}20%,60%{opacity:1}40%,80%{opacity:.15}}

.card:hover .ic-chat .i-dot{animation:icDot .9s ease-in-out infinite}
.card:hover .ic-chat .i-dot.d2{animation-delay:.15s}
.card:hover .ic-chat .i-dot.d3{animation-delay:.3s}
.card:hover .ic-chat .i-bubble{animation:icPulse 1.8s ease-in-out infinite}
@keyframes icDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3.2px)}}
@keyframes icPulse{50%{transform:scale(1.07)}}

.card:hover .ic-robot .i-head{animation:icNod 1.4s ease-in-out infinite;transform-origin:50% 100%}
.card:hover .ic-robot .i-eye{animation:icBlink 1.4s infinite}
.card:hover .ic-robot .i-ball{animation:icGlow .7s ease-in-out infinite alternate}
@keyframes icNod{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes icBlink{0%,40%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}56%{transform:scaleY(1)}}
@keyframes icGlow{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.55)}}

.card:hover .ic-cap .i-capg{animation:icToss 1.4s cubic-bezier(.3,0,.3,1) infinite}
.card:hover .ic-cap .i-tassel{animation:icTassel .7s ease-in-out infinite alternate;transform-box:view-box;transform-origin:20.4px 9.1px}
@keyframes icToss{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-4.5px) rotate(-12deg)}60%{transform:translateY(-1px) rotate(5deg)}}
@keyframes icTassel{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* Iconos de los servicios 5 y 6 */
.card:hover .ic-chart .i-bars path{animation:icBar .9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.card:hover .ic-chart .i-bars path:nth-child(2){animation-delay:.12s}.card:hover .ic-chart .i-bars path:nth-child(3){animation-delay:.24s}.card:hover .ic-chart .i-bars path:nth-child(4){animation-delay:.36s}
.card:hover .ic-chart .i-trend{stroke-dasharray:40;animation:icDraw 1.2s ease-in-out infinite}
@keyframes icBar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes icDraw{0%{stroke-dashoffset:40}60%,100%{stroke-dashoffset:0}}
.card:hover .ic-pen .i-penb{animation:icWrite 1.1s ease-in-out infinite alternate;transform-origin:100% 100%}
.card:hover .ic-pen .i-line{stroke-dasharray:18;animation:icLine 1.1s ease-in-out infinite alternate}
@keyframes icWrite{from{transform:translate(-3px,1px) rotate(-6deg)}to{transform:translate(3px,0) rotate(4deg)}}
@keyframes icLine{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}