/* 1 · HERO · v3 (02-10-2026). Fondo negro del propio robot (#000): la imagen se funde con la página sin bordes.
   Capas de la escena: red neuronal (canvas) → robot recortado → tareas flotando (refs B01 / A07). */
.s-hero{ position:relative; background:#000; color:#fff; overflow:hidden; isolation:isolate; }
/* La luz verde, en una caja un 40 % mayor para poder moverla con el scroll sin que asome su borde (antes, .s-hero::before) */
.he-luz{ position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(42.86% 39.29% at 65.71% 38.57%, rgba(60,193,160,.10), transparent 70%); }
/* Red + robot: UNA sola capa, con el centro de la cabeza como origen (si se separan, la red se descuadra) */
.he-cuerpo{ position:absolute; inset:0; z-index:1; transform-origin:52.7% 29.3%; }

/* Barra superior */
.he-barra{ position:relative; z-index:5; display:flex; align-items:center; gap:32px; height:84px; }
.he-logo{ display:inline-flex; align-items:center; gap:9px; font-size:19px; font-weight:600; letter-spacing:-.03em; color:#fff; text-decoration:none; }
.he-logo svg{ width:26px; height:22px; fill:var(--verde); }

/* Rejilla: texto a la izquierda, robot a la derecha */
.he-grid{ position:relative; display:grid; grid-template-columns:minmax(0, 540px) minmax(0, 1fr); gap:24px; align-items:center; min-height:min(820px, calc(100svh - 150px)); }
.he-texto{ position:relative; z-index:4; display:flex; flex-direction:column; gap:28px; padding-block:40px 64px; }
.s-hero .etiqueta{ color:rgba(255,255,255,.62); }
.s-hero .etiqueta::before{ box-shadow:0 0 0 4px rgba(60,193,160,.18); }
.he-h1{ font-size:clamp(44px, 5.4vw, 78px); line-height:1; letter-spacing:-.045em; font-weight:500; text-wrap:balance; }
.he-h1 .gris{ color:rgba(255,255,255,.42); }
.he-sub{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.45; letter-spacing:-.012em; color:rgba(255,255,255,.62); max-width:520px; text-wrap:pretty; }
.he-sub strong{ font-weight:400; color:#fff; }
.he-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.he-nota{ font-size:13.5px; color:rgba(255,255,255,.5); max-width:440px; line-height:1.5; text-wrap:pretty; }
.he-puntos{ display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); max-width:500px; }
.he-puntos li{ display:flex; gap:12px; font-size:15.5px; line-height:1.45; color:rgba(255,255,255,.68); }
.he-puntos strong{ font-weight:500; color:#fff; }
.he-ok{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(60,193,160,.14); color:var(--verde); display:grid; place-items:center; }
.he-ok .ico{ width:12px; height:12px; stroke-width:2.6; }

/* Escena del robot (cuadrada como la imagen) */
.he-escena{ position:relative; justify-self:end; width:min(800px, 100%); aspect-ratio:1 / 1; margin-right:-56px; margin-bottom:-8px; }
.he-red{ position:absolute; inset:-8% -14% -2% -10%; width:124%; height:110%; z-index:1; pointer-events:none;
  -webkit-mask:radial-gradient(62% 58% at 55% 34%, #000 55%, transparent 100%); mask:radial-gradient(62% 58% at 55% 34%, #000 55%, transparent 100%); }
.he-robot{ position:absolute; inset:0; width:100%; height:100%; z-index:2; object-fit:contain; user-select:none;
  -webkit-mask:linear-gradient(#000 74%, transparent 99%); mask:linear-gradient(#000 74%, transparent 99%); }

/* Tareas flotando (tarjetas de cristal oscuro, refs B01) */
.he-tareas{ position:absolute; inset:0; z-index:3; }
.he-t{ position:absolute; display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:11px; row-gap:1px; align-items:center; width:300px; padding:10px 12px 10px 10px; border-radius:14px;
  background:rgba(26,26,28,.86); border:1px solid rgba(255,255,255,.09); box-shadow:0 18px 40px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .4s; }
.he-t[data-hueco="1"]{ left:-4%; top:7%; }
.he-t[data-hueco="2"]{ right:9%; top:2%; }
.he-t[data-hueco="3"]{ right:8%; top:50%; }
.he-t[data-hueco="4"]{ left:-8%; top:60%; }
.he-t[data-hueco="5"]{ left:26%; top:79%; }
.he-t-ico{ grid-row:1 / span 2; width:34px; height:34px; border-radius:10px; background:rgba(60,193,160,.13); color:var(--verde); display:grid; place-items:center; }
.he-t-ico .ico{ width:17px; height:17px; }
.he-t-txt{ display:contents; }
.he-t-txt b{ grid-column:2; grid-row:1; font-size:13.5px; font-weight:500; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.he-t-txt em{ grid-column:2 / span 2; grid-row:2; font-style:normal; font-size:11.8px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.he-t-est{ grid-column:3; grid-row:1; justify-self:end; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:500; padding:2px 7px; border-radius:999px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.he-t-est .ico{ width:11px; height:11px; stroke-width:2.6; display:none; }
.he-t-est.hecho{ color:var(--verde); background:rgba(60,193,160,.12); }
.he-t-est.hecho .ico{ display:block; }
.he-t-est.ahora::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--verde); animation:hePunto 1s ease-in-out infinite; }
@keyframes hePunto{ 50%{ opacity:.25; } }
.he-t.activa{ border-color:rgba(60,193,160,.42); box-shadow:0 0 0 4px rgba(60,193,160,.07), 0 18px 40px -18px rgba(0,0,0,.9); }
.he-t.sale{ opacity:0; transform:translateY(-8px) scale(.97); }
.he-t.entra-t{ opacity:0; transform:translateY(10px) scale(.97); transition:none; }

/* 24 h · la hora de quien mira */
.he-reloj{ position:absolute; z-index:3; left:6%; top:34%; display:flex; align-items:center; gap:8px; padding:7px 13px 7px 10px; border-radius:999px;
  background:rgba(26,26,28,.86); border:1px solid rgba(255,255,255,.09); font-size:12.5px; color:rgba(255,255,255,.6); }
.he-reloj i{ width:8px; height:8px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(60,193,160,.6); animation:heVivo 2s ease-out infinite; }
.he-reloj b{ font-weight:600; color:#fff; letter-spacing:-.01em; }
@keyframes heVivo{ 0%{ box-shadow:0 0 0 0 rgba(60,193,160,.55); } 100%{ box-shadow:0 0 0 9px rgba(60,193,160,0); } }

/* Tira de sectores */
.he-sectores{ position:relative; z-index:4; display:flex; align-items:center; gap:18px; padding-block:22px 30px; border-top:1px solid rgba(255,255,255,.08); }
.he-sec-t{ font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.38); flex:none; }
.he-cinta{ flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.he-cinta-pista{ display:flex; width:max-content; animation:he-cinta 55s linear infinite; }
.he-cinta:hover .he-cinta-pista{ animation-play-state:paused; }
.he-sectores ul{ display:flex; flex:none; }
.he-sectores li{ font-size:14.5px; color:rgba(255,255,255,.6); white-space:nowrap; }
.he-sectores li::after{ content:'·'; margin:0 14px; color:rgba(255,255,255,.25); }
@keyframes he-cinta{ to{ transform:translateX(-50%); } }

/* Tableta */
@media (max-width:1180px){
  .he-grid{ grid-template-columns:minmax(0, 470px) minmax(0, 1fr); }
  .he-escena{ margin-right:-40px; }
  .he-t{ width:270px; }
  .he-t[data-hueco="4"]{ left:-2%; }
}
/* Móvil: el texto primero y el robot debajo, con tres tareas */
@media (max-width:899px){
  .he-barra{ height:68px; }
  .he-grid{ display:flex; flex-direction:column; gap:22px; min-height:0; padding-top:20px; }
  .he-texto{ display:contents; }
  .he-texto > *{ position:relative; z-index:4; }
  .he-escena{ order:1; margin-top:44px!important; }   /* 05-10 (dueño): el robot, menos pegado a lo de arriba */
  .he-puntos{ order:0; }
  .he-h1{ font-size:clamp(40px, 11vw, 54px); }
  .he-escena{ justify-self:center; width:calc(100% + 32px); max-width:560px; margin:0 -16px; }
  .he-t{ width:auto; max-width:68%; padding:8px 10px 8px 8px; gap:9px; border-radius:12px; }
  .he-t-ico{ width:28px; height:28px; border-radius:8px; }
  .he-t-ico .ico{ width:14px; height:14px; }
  .he-t-txt b{ font-size:12.5px; }
  .he-t-txt em{ font-size:11px; }
  .he-t-est{ display:none; }
  .he-t-txt em{ grid-column:2; }
  .he-t{ grid-template-columns:28px minmax(0,1fr); }
  .he-t[data-hueco="1"]{ left:3%; top:4%; }
  .he-t[data-hueco="2"]{ right:3%; top:45%; left:auto; }
  .he-t[data-hueco="3"]{ display:none; }
  .he-t[data-hueco="4"]{ left:3%; top:60%; }
  .he-t[data-hueco="5"]{ display:none; }
  .he-reloj{ left:auto; right:4%; top:6%; font-size:11.5px; }
  .he-sectores{ flex-direction:column; align-items:flex-start; gap:12px; }
  .he-cinta{ width:calc(100% + 32px); margin-inline:-16px; flex:none; }
  .he-sectores li{ font-size:13px; padding:5px 11px; border:1px solid rgba(255,255,255,.12); border-radius:999px; margin:0 8px 0 0; }
  .he-sectores li::after{ display:none; }
  .he-cinta-pista{ animation-duration:45s; }
}
@media (prefers-reduced-motion:reduce){ .he-t, .he-reloj i, .he-t-est.ahora::before{ animation:none!important; transition:none!important; }
  .he-cinta-pista{ animation:none; } .he-cinta{ overflow-x:auto; scrollbar-width:none; } }

/* ---------- Capas con el scroll (diseno-hero-scroll-v3.md) · solo escritorio; en reposo (scroll 0) el hero es el de siempre ---------- */
.he-h1{ transition:filter .45s cubic-bezier(.16,1,.3,1); }
.he-h1.difuso{ filter:blur(8px); }
.s-hero.capas-vivas :is(.he-luz, .he-cuerpo, .he-t, .he-reloj, .he-texto > .etiqueta, .he-h1, .he-sub){ will-change:transform, opacity; }
/* el horizonte: la franja de sectores tapa la base del robot cuando se hunde */
@media (min-width:1100px){ .he-sectores{ background:#000; box-shadow:0 0 0 100vmax #000; clip-path:inset(0 -100vmax); } }