/* Inicio (#inicio) · plan/landing-v4.md, apartado 6.
   Pantalla completa. Texto a la izquierda, anclado en el tercio inferior (en móvil, en la zona del pulgar).
   Capas: [data-hero-bg] (el lienzo del logo en polvo, z 0) · texto (z 2).
   Todos los selectores empiezan por #inicio. */

#inicio {
  min-height: 100svh;
  isolation: isolate;
  overflow: clip;
  /* Tamaños del titular y del subtítulo. --title-w es lo que mide su renglón más largo («trabajando con IA»);
     el subtítulo no pasa de ahí (+1 em) y el logo en polvo empieza a su derecha. Entre 1024 y 1430 px de ancho el
     titular se contiene un poco (6,7vw) para que al polvo le quede sitio al lado. */
  --title-fs: min(var(--fs-h1), 11.4svh, 6.7vw);
  --sub-fs: var(--fs-lead);
  --title-w: calc(7.95 * var(--title-fs));
}

/* ---------- Logo en polvo ----------
   js/core/logo-polvo.js. El lienzo cubre .hero-bg (en escritorio, todo el inicio: el polvo de la entrada viene de
   más lejos) y es transparente; las letras se forman centradas en la caja .logo-polvo.
   Escritorio: la caja va de la derecha del titular al borde derecho del contenido (en pantallas muy anchas se
   abre algo más hacia el borde de la pantalla) y de bajo la cabecera al pie del texto. Así nunca pisa el texto. */
#inicio .lp-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#inicio .logo-polvo {
  position: absolute;
  top: calc(var(--header-h) + clamp(12px, 3svh, 40px));
  bottom: clamp(40px, 11svh, 128px);
  left: calc(max(var(--gutter), (100% - var(--max)) / 2) + var(--title-w) + clamp(24px, 3vw, 56px));
  right: max(var(--gutter), (100% - var(--max)) * 0.2);
}
/* Sin JS o sin WebGL: el logotipo fijo, arriba en la caja (en columna, centrado). Con JS no se ve: llega el polvo. */
#inicio .lp-fijo {
  position: absolute; left: 0; top: 0;
  display: none; width: 100%; max-width: 900px; height: auto;
  opacity: 0.92;
}
.no-js #inicio .lp-fijo,
#inicio .logo-polvo.is-fijo .lp-fijo { display: block; }

/* Con el tope de .container, como la cabecera: el texto cae en la vertical del logo y de las demás secciones. */
#inicio .hero-frame {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(40px, 11svh, 128px);
  pointer-events: none;            /* el polvo se aparta del puntero; el texto y los botones no lo tapan */
}
/* El bloque mide lo que su titular (unos 760 px a 1440); subtítulo y datos van más estrechos. */
#inicio .hero-copy { width: 100%; max-width: 920px; pointer-events: auto; }

/* Mientras JS prepara la entrada, el bloque espera oculto. Sin JS se ve siempre; si JS fallara,
   aparece solo a los 2,6 s. */
.js #inicio [data-hero-copy]:not(.is-on) { visibility: hidden; animation: inicio-failsafe 0s 2.6s forwards; }
@keyframes inicio-failsafe { to { visibility: visible; } }

/* ---------- Titular ---------- */
#inicio .hero-title {
  /* 42 · 64 · 96 px; en pantallas bajas (portátil de 768 px de alto) se contiene para que el botón quepa. */
  font-size: var(--title-fs);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 9em;                 /* tres líneas: «Tu equipo,» · «trabajando con IA» · «desde el lunes.» */
  color: var(--text);
  text-wrap: balance;
  font-kerning: normal;
}
#inicio .hero-title .ai { letter-spacing: -0.02em; }
/* Cortes por sentido: quién · qué hace · cuándo. Por debajo de 360 px se deja partir. */
#inicio .hero-nw { white-space: nowrap; }
@media (max-width: 359px) { #inicio .hero-nw { white-space: normal; } }
/* Máscara de cada línea (SplitText): un poco de aire abajo para no cortar la «q» ni la «j». */
#inicio .hero-line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* ---------- Subtítulo ---------- */
#inicio .hero-sub {
  max-width: min(34em, var(--title-w) + 1em);
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: var(--sub-fs);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- Botones ---------- */
#inicio .hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
#inicio .hero-ctas .btn { --btn-h: 56px; padding: 0 28px; font-size: 1.0625rem; }
#inicio .hero-video { gap: 10px; padding-left: 24px; }
#inicio .hero-video .icon-play { color: var(--ai); transition: translate 0.3s var(--ease-out); }
#inicio .hero-video .btn-meta { color: var(--text-3); opacity: 1; }

/* ---------- Datos bajo los botones ----------
   Separados por una raya fina (el primer dato ya lleva puntos medios dentro). Si la fila parte, la raya que
   quedaría al principio de línea se esconde: cada raya vive en el hueco entre datos y la primera de cada fila
   cae fuera del recorte. */
#inicio .hero-facts {
  --sep: 1.8em;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sep);
  max-width: 760px;
  margin-top: clamp(24px, 3vw, 36px);
  overflow: hidden;
  font-size: 0.875rem; line-height: 1.5; color: var(--text-2);
}
#inicio .hero-facts li { margin-left: calc(var(--sep) * -1); white-space: nowrap; }
#inicio .hero-facts li::before {
  content: ""; display: inline-block; width: var(--sep); height: 0.95em; vertical-align: -0.12em;
  background: linear-gradient(var(--line-2), var(--line-2)) center / 1px 100% no-repeat;
}
#inicio .hero-facts b { font-weight: 500; color: var(--text); }

/* ---------- Solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  #inicio .hero-video:hover { box-shadow: inset 0 0 0 1px var(--text-2); }
  #inicio .hero-video:hover .icon-play { translate: 2px 0; }
}

/* ---------- Pantallas grandes: el titular crece con la pantalla (hasta 124 px) ---------- */
@media (min-width: 1600px) {
  #inicio { --title-fs: min(6.4vw, 12.4svh, 124px); --sub-fs: 1.375rem; }
  #inicio .hero-copy { max-width: 1120px; }
}

/* ---------- Tableta, tableta vertical y móvil: el logo entre la cabecera y el texto ----------
   El inicio pasa a columna: el lienzo ocupa lo que sobra por encima del texto (que sigue abajo), así nunca lo
   tapa. Tiene reservados 200 px como mínimo (30 % del alto, hasta 320 px): en un iPhone con Safari (390 × 664)
   no sobra nada sobre el texto y, sin esa reserva, el logo no salía. El inicio crece lo justo por encima del
   alto de la pantalla; el primer botón sigue a la vista. */
@media (max-width: 1023px), (max-width: 1366px) and (orientation: portrait) {
  #inicio { display: flex; flex-direction: column; --title-fs: min(var(--fs-h1), 11.4svh); }
  #inicio .hero-bg {
    position: relative; inset: auto; flex: 1 0 auto;
    min-height: clamp(200px, 30svh, 320px);
    margin-top: var(--header-h);
  }
  #inicio .logo-polvo { inset: 8px max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)) 4px; }
  #inicio .lp-fijo { top: 50%; translate: 0 -50%; }
  #inicio .hero-frame { min-height: 0; padding-top: 8px; padding-bottom: clamp(40px, 8svh, 96px); }
  #inicio .hero-sub { max-width: 34em; }
}
/* Móvil apaisado: primero el texto; el logo solo si sobra hueco (si la caja es muy baja, no se pinta). */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  #inicio .hero-bg { min-height: 0; }
}

/* ---------- Móvil: texto abajo, en la zona del pulgar; botones apilados ---------- */
@media (max-width: 767px) {
  #inicio .hero-frame { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* «trabajando con IA» no se parte: a 360 px se encoge lo justo para que el «IA» no toque el canto. */
  #inicio .hero-title { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 8.2)); max-width: none; letter-spacing: -0.03em; }
  #inicio .hero-sub { font-size: 1.0625rem; margin-top: 16px; }
  #inicio .hero-ctas { flex-direction: column; gap: 10px; margin-top: 28px; }
  #inicio .hero-ctas .btn { --btn-h: 54px; width: 100%; font-size: 1rem; }
  #inicio .hero-facts { flex-direction: column; gap: 2px; margin-top: 22px; }
  #inicio .hero-facts li { margin-left: 0; white-space: normal; }
  #inicio .hero-facts li::before { content: none; }
}