/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(96px,14vh,150px) 0 clamp(40px,7vh,90px);
}

/* fondo radial de láminas */
.hero__fondo{
  position:absolute; inset:0; z-index:0;
  background-image:url('../assets/img/hero/fondo-hero.webp?v=1');
  background-size:cover; background-position:center;
  /* SIN filter a propósito: el oscurecido va en el velo (capa plana).
     Un filtro aquí obligaría a recalcularse en cada fotograma de la
     animación de escala, sobre toda la pantalla. */
  animation:fondo-vivo 38s ease-in-out infinite alternate;
}
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  /* El velo cae sobre la columna del texto para que el logotipo se lea
     sobre las láminas claras, sin tapar el resto de la composición. */
  background:var(--velo-hero);
}
@media (max-width:900px){
  .hero__fondo{ background-image:url('../assets/img/hero/fondo-hero-movil.webp?v=1') }
}
@keyframes fondo-vivo{
  from{ transform:scale(1.02) translate3d(0,0,0) }
  to  { transform:scale(1.09) translate3d(-1.4%,-1%,0) }
}

.hero__contenido{
  position:relative; z-index:2;
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding-inline:var(--lado);
  display:grid; align-items:center;
  grid-template-columns:1fr;
  gap:clamp(24px,4vw,50px);
}
@media (min-width:900px){
  .hero__contenido{ grid-template-columns:1.02fr .98fr }
}

/* ---------- texto ---------- */
.hero__logo{
  width:clamp(184px,21vw,278px); height:auto;
  margin-bottom:clamp(16px,2.2vw,26px);
  filter:var(--logo-filtro);
}
.hero__claim{
  font-family:var(--display); font-weight:300;
  font-size:clamp(23px,3.35vw,44px);
  line-height:1.18; letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--texto);
}

/* La frase no se lee de corrido: la línea del medio va más marcada y
   en azul, y las otras dos más finas. Así el ojo entra por el centro
   y el bloque tiene relieve en vez de ser tres renglones iguales. */
.hero__linea:nth-child(1) .hero__sube,
.hero__linea:nth-child(3) .hero__sube{ font-weight:200; color:var(--texto-suave) }

/* Azul liso, no degradado recortado al texto. El recorte fallaba
   al combinarse con el desenfoque de la animación de entrada y la
   línea se quedaba en transparente: se veía casi negra. */
.hero__linea:nth-child(2) .hero__sube{
  font-weight:400;
  color:var(--azul-titular);
}

/* Cada línea entra por separado, subiendo y saliendo de un
   desenfoque, escalonadas con --t para que la frase se lea de arriba
   abajo. Es el mismo lenguaje que el resto de la página.

   No se recorta la línea con overflow: al hacerlo, la tilde de
   "TRAVÉS" quedaba cortada por arriba. */
.hero__linea{ display:block }
.hero__sube{
  display:block; will-change:transform, filter;
  animation:subir-linea 1.05s cubic-bezier(.16,.84,.3,1) var(--t,0s) both;
}
@keyframes subir-linea{
  from{ transform:translateY(34px); opacity:0; filter:blur(11px) }
  60% { opacity:1 }
  to  { transform:translateY(0);    opacity:1; filter:blur(0) }
}
@media (prefers-reduced-motion:reduce){
  .hero__sube{ animation:none }
}


/* ---------- circuito digital detrás de Crovnic ----------
   Pistas, vías y contactos dibujados en SVG: al ser vectorial se ve
   nítido en cualquier pantalla y no añade ni una imagen que cargar.
   Por siete de las pistas corre un pulso de luz en bucle.
   En modo claro no se dibuja: sin resplandores, como pediste.        */
.circuito{
  position:absolute; z-index:0;
  left:50%; top:34%;
  width:212%; height:auto; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:none; overflow:visible;
  animation:respirar-circuito 11s ease-in-out infinite;
}
.cir__anillo{
  fill:none; stroke:rgba(96,175,255,.30); stroke-width:1.2;
}
.cir__anillo--tenue{ stroke:rgba(96,175,255,.17) }

.cir__pista{
  fill:none; stroke:rgba(104,182,255,.58);
  stroke-width:2.1; stroke-linejoin:round; stroke-linecap:round;
}
.cir__pad{
  fill:rgba(28,84,190,.75);
  stroke:rgba(160,225,255,.9); stroke-width:1.5;
}
.cir__via{ fill:rgba(150,215,255,.62) }

/* un único resplandor para todo el grabado: sale más barato que
   ponerle sombra a cada una de las 26 pistas por separado */
.cir__trama{ filter:drop-shadow(0 0 3px rgba(70,160,255,.55)) }

/* el pulso: las pistas llevan pathLength="100", así que el trazo y el
   desplazamiento se miden en porcentaje del recorrido, sea cual sea
   la longitud real de cada una */
.cir__pulso{
  fill:none; stroke:var(--cian); stroke-width:3.1; stroke-linecap:round;
  stroke-dasharray:8 100;
  filter:drop-shadow(0 0 6px rgba(66,214,255,1)) drop-shadow(0 0 14px rgba(47,139,255,.7));
  animation:correr-pista var(--tarda,4s) linear var(--espera,0s) infinite;
}
@keyframes correr-pista{
  from{ stroke-dashoffset:107 }
  to  { stroke-dashoffset:0 }
}
@keyframes respirar-circuito{
  0%,100%{ opacity:.88 }
  50%    { opacity:1 }
}

/* modo claro: nada de resplandor detrás de la mascota */
html[data-tema="claro"] .circuito{ display:none }

@media (prefers-reduced-motion:reduce){
  .circuito{ animation:none }
  .cir__pulso{ animation:none; opacity:0 }
}

/* ---------- robot ----------
   Está montado en 5 piezas separadas del render original: cuerpo con
   cabeza, dos antebrazos y dos manos. Cada una se coloca en su sitio
   exacto y se mueve por su cuenta, con ritmos distintos, para que el
   conjunto respire sin parecer mecánico.                            */
.hero__robot{
  position:relative;
  position:relative; justify-self:center;
  width:clamp(210px,31vw,420px); aspect-ratio:1000/1602;
}
.robot{ position:absolute; inset:0 }

.robot__cuerpo,
.robot__pieza{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w);
  height:auto; display:block;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.7));
}
.robot__cuerpo{ filter:drop-shadow(0 30px 58px rgba(0,0,0,.72)) drop-shadow(0 0 64px rgba(15,54,231,.40)) }
.robot__cuerpo img{ width:100%; height:auto; display:block }

/* flotación: cada pieza con su propio ritmo y desfase */
.robot__cuerpo             { animation:flotar-cuerpo 7s ease-in-out infinite }
.robot__pieza--brazo-izq   { animation:brazo-izq 5.6s ease-in-out infinite }
.robot__pieza--brazo-der   { animation:brazo-der 6.2s ease-in-out infinite }
.robot__pieza--mano-izq    { animation:mano-izq 6.6s ease-in-out infinite }
.robot__pieza--mano-der    { animation:mano-der 5.9s ease-in-out infinite }

@keyframes flotar-cuerpo{ 0%,100%{ translate:0 0 }      50%{ translate:0 -13px } }
@keyframes brazo-izq   { 0%,100%{ translate:0 -2px; rotate:-1.6deg } 50%{ translate:-2px -14px; rotate:1.4deg } }
@keyframes brazo-der   { 0%,100%{ translate:0 -1px; rotate:1.6deg }  50%{ translate:2px -13px; rotate:-1.4deg } }
@keyframes mano-izq    { 0%,100%{ translate:0 0; rotate:1.8deg }     50%{ translate:-3px -16px; rotate:-2deg } }
@keyframes mano-der    { 0%,100%{ translate:0 0; rotate:-1.8deg }    50%{ translate:3px -15px; rotate:2deg } }

/* Entrada: el conjunto sube desde abajo, pierde el desenfoque y gana
   opacidad. El ritmo sale del vídeo de referencia. */
.hero__robot{ animation:entrar-robot 1.75s cubic-bezier(.19,.9,.24,1) .18s both }
@keyframes entrar-robot{
  from{ opacity:0; transform:translateY(58px) scale(.965); filter:blur(17px) }
  55% { opacity:.85 }
  to  { opacity:1; transform:translateY(0) scale(1); filter:blur(0) }
}
.hero__robot.asentado{ animation:none }

/* Párpados, sobre la posición medida de los ojos dentro de la pieza del cuerpo */
.parpado{
  position:absolute; display:block; background:#010510;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border-radius:46% / 40%; filter:blur(.6px);
  transform-origin:top center; transform:scaleY(0);
  animation:parpadear 7.5s ease-in-out infinite;
}
@keyframes parpadear{
  0%,91%  { transform:scaleY(0) }
  92.4%   { transform:scaleY(1) }
  93.8%   { transform:scaleY(0) }
  95.2%   { transform:scaleY(1) }
  96.6%,100%{ transform:scaleY(0) }
}

@media (prefers-reduced-motion:reduce){
  .hero__fondo,.hero__robot,.robot__cuerpo,.robot__pieza,.parpado{ animation:none }
  .hero__robot{ opacity:1; transform:none; filter:none }
}


/* ===========================================================
   TÁCTIL — lo mismo, pero barato
   En un teléfono la GPU es la que manda. Aquí se sustituye todo lo
   que obliga a REDIBUJAR en cada fotograma por cosas que la GPU
   resuelve sola (opacidad y transform). Las entradas con desenfoque
   se mantienen: son un momento, no un bucle.
   =========================================================== */
@media (pointer:coarse){

  /* El resplandor del grabado se recalcula continuamente. Se quita y
     se compensa con pistas algo más vivas: se ve igual de encendido. */
  .cir__trama{ filter:none }
  .cir__pista{ stroke:rgba(120,192,255,.70) }
  .cir__pad{ stroke:rgba(180,232,255,1) }

  /* De siete pulsos se dejan tres: cada uno es un trazo que se
     redibuja entero en cada fotograma. Se marcan por clase y no con
     nth-of-type, que contaba tambien las 26 pistas y los ocultaba todos. */
  .cir__pulso--extra{ display:none }
  .cir__pulso{ filter:drop-shadow(0 0 5px rgba(66,214,255,.95)) }

  /* Sombras más cortas: el coste de un drop-shadow sube con el
     cuadrado de su radio. (La del cuadro va en enlaces.css, que se
     carga después que esta hoja y si no ganaría la de escritorio.) */
  .robot__cuerpo{ filter:drop-shadow(0 14px 24px rgba(0,0,0,.7)) }
  .robot__pieza{ filter:drop-shadow(0 10px 18px rgba(0,0,0,.65)) }

  /* La entrada sigue teniendo su desenfoque, algo más corto. */
  .revelar{ filter:blur(8px); transition-duration:.7s }
}