/* Leveragency · Web v2 · Sección HERO. Todo scopeado bajo .sec-hero. */

.sec-hero{padding-top:clamp(28px,4.4vw,64px);padding-bottom:0;display:flex;flex-direction:column}
.sec-hero .hero-main{flex:1;display:flex;align-items:center;padding-bottom:clamp(40px,5vw,64px)}
.sec-hero .hero-grid{width:100%;display:grid;gap:clamp(34px,4.6vw,60px);align-items:center}

/* ---- columna de texto ---- */
.sec-hero .hero-txt{min-width:0;max-width:min(100%,760px)}
.sec-hero h1{margin-bottom:.4em;max-width:19ch}
/* el subrayado de base está calculado para line-height de párrafo; en display hay que bajarlo
   hasta la línea de base o corta las letras. Corrección posicional, solo acá. */
.sec-hero h1 .u{text-underline-offset:.08em}
.sec-hero .hero-sub{max-width:52ch;color:var(--tinta-cuerpo)}
.sec-hero .hero-cta{margin-top:clamp(24px,3vw,32px)}
.sec-hero .hero-fine{margin:18px 0 0;font-size:11.5px;color:var(--gris)}


/* ---- ficha del "empleado": capa de instrumento, no decoracion ----
   Mono + gris a proposito: leida como datos de una ficha, la ultima linea
   ('no te hace juicio') es un guino y no un manifiesto. Separadores en borde,
   NO en ambar: el ambar del hero ya esta gastado en eyebrow + .u del h1 + 01 del pie. */
.sec-hero .hero-ficha{margin:20px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,max-content);gap:9px 0;
  font-size:11px;letter-spacing:.085em;text-transform:uppercase;color:var(--gris)}
/* grid 2x2 y no una tira con wrap: con flex-wrap el separador del cuarto item
   queda colgado al inicio de la segunda linea. Aca la columna izquierda nunca
   lleva borde, asi que rompe siempre limpio. */
.sec-hero .hero-ficha li{padding:0 15px;line-height:1.35}
.sec-hero .hero-ficha li:nth-child(odd){padding-left:0}
.sec-hero .hero-ficha li:nth-child(even){border-left:1px solid rgba(28,23,20,.2)}


/* mobile: dos líneas limpias en el H1 y CTAs a ancho completo */
@media (max-width:700px){
  .sec-hero h1{font-size:clamp(33px,8.7vw,58px);max-width:none}
  .sec-hero .hero-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .sec-hero .hero-cta .btn{width:100%}
  .sec-hero .hero-ficha{gap:8px 0;font-size:10px;letter-spacing:.07em}
  .sec-hero .hero-ficha li{padding:0 11px}
}

/* ---- columna del robot 3D ----
   Debajo de 960px no se muestra Y no se descarga three.js (el módulo mira
   data-min-width antes de importar nada). El hero vuelve a una sola columna. */
.sec-hero .hero-robot{display:none}
.sec-hero .robot3d{position:relative;width:100%;aspect-ratio:1/1}
.sec-hero .robot3d canvas{display:block;width:100%;height:100%;
  opacity:0;transition:opacity .7s var(--ease)}
.sec-hero .robot3d.is-ready canvas{opacity:1}
/* mientras carga (y si falla o no hay WebGL) queda una mancha de luz, no un hueco */
.sec-hero .robot3d::before{content:'';position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 58%,rgba(193,90,23,.10),rgba(28,23,20,.05) 45%,transparent 70%);
  transition:opacity .7s var(--ease)}
.sec-hero .robot3d.is-ready::before{opacity:0}

@media (min-width:961px){
  .sec-hero{min-height:min(calc(92vh - var(--nav-h)),900px)}
  .sec-hero h1{max-width:19ch}
  .sec-hero .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .sec-hero .hero-robot{display:block;min-width:0}
  .sec-hero .hero-txt{max-width:none}
}

@media (min-width:1120px){
  .sec-hero h1{font-size:clamp(52px,4.9vw,68px)}
  .sec-hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* ---- pie del hero: una línea, un número, una flecha ---- */
.sec-hero .hero-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:var(--borde);padding:10px 0 14px}
.sec-hero .hero-pie-n{color:var(--gris);letter-spacing:.1em;text-transform:uppercase}
.sec-hero .hero-pie-n b{color:var(--ambar);font-weight:400}
.sec-hero .hero-flecha{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;border-radius:50%;color:var(--gris);text-decoration:none}
.sec-hero .hero-flecha:hover{color:var(--tinta)}
.sec-hero .hero-flecha svg{width:18px;height:18px;animation:hero-baja 2.6s var(--ease) infinite}
@keyframes hero-baja{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.sec-hero .hero-flecha svg{animation:none;opacity:.8}}