/* ============================================================
   FOR HOSTING · home.css — la PORTADA de los tres productos
   (VOICE · KIT · HOST). Estrenada el 2026-08-18, cuando la home
   dejó de ser la página de hosting: ésa se mudó a `host` y
   conserva su propia hoja, `host.css`.

   PALETA CLARA, por decisión de Larry. `/voice` y el hub del KIT
   son oscuros desde el 2026-08-17; la portada NO los sigue, y eso
   es deliberado, no un olvido.

   Alcance: la carga SOLO la home (core.js → EXTRA_HEAD.home), así
   que aquí se puede tocar el chrome compartido sin alcanzar a
   ninguna otra página. Aun así no se redefine ni un token de
   `:root`: `--tinta` quiere decir tinta, y en site.css se usa como
   FONDO en varios sitios.

   SIN CADENAS. Todo el texto viene de content/core/<code>/home.json
   → `strings`, horneado por core.js dentro del HTML. Esta página no
   tiene diccionario `js` a propósito: la clase de fallo «se sirve
   inglés y nadie avisa» no puede existir donde no hay JS que pinte
   texto.
   ============================================================ */

/* ---------- ESPINA: sólo cuando CABE ----------
   Vive en el canalón de la rejilla, no pegada al borde de la ventana. A 1440 px el
   contenido empieza en (1440−1280)/2+28 = 108 px, y una espina anclada al borde se
   pintaba ENCIMA de las cifras del primer acto. El umbral se DERIVA del ancho que
   necesita: 1280 de rejilla + 2×(104 de espina + 24 de aire) = 1536 → se enseña a
   partir de 1560. */
.h-espina{position:fixed;inset-inline-start:calc(50% - (var(--max) / 2) - 118px);top:50%;
  transform:translateY(-50%);z-index:40;display:none;width:104px}
@media(min-width:1560px){.h-espina{display:block}}
.h-espina ol{list-style:none;display:flex;flex-direction:column;gap:20px;margin:0;padding:0}
.h-espina a{display:flex;align-items:center;gap:11px;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-txt);transition:color .18s}
.h-espina a b{width:9px;height:9px;border:1.5px solid var(--linea-2);display:block;flex-shrink:0;transition:.18s}
.h-espina a:hover,.h-espina a[aria-current]{color:var(--txt)}
.h-espina a[aria-current] b{background:var(--lima-deep);border-color:var(--lima-deep);transform:scale(1.25)}

/* ---------- ENTRADA ---------- */
.h-entrada{padding:170px 0 92px;position:relative;overflow:hidden}
.h-rejilla{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000 20%,transparent 78%)}
.h-claim{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-txt);border:1px solid var(--linea-2);
  padding:7px 13px;background:var(--blanco)}
.h-claim .dot{width:7px;height:7px;background:var(--lima-deep);border-radius:50%;flex-shrink:0}
.h-entrada h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.88;
  letter-spacing:.012em;font-size:clamp(3rem,8.4vw,7.4rem);margin:24px 0 0;max-width:16ch}
.h-entrada h1 em{display:block;font-style:normal;color:var(--lima-deep)}
.h-sub{margin-top:20px;max-width:62ch;font-size:1.12rem;color:var(--gris-txt)}
.h-salto{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.h-salto a{display:inline-flex;align-items:baseline;gap:9px;border:1px solid var(--linea-2);background:var(--blanco);
  padding:11px 16px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .16s,color .16s,transform .16s}
.h-salto a:hover{border-color:var(--lima-deep);color:var(--lima-deep);transform:translateY(-2px)}
.h-salto a i{font-style:normal;font-size:.62rem;color:var(--gris-txt)}

/* ---------- LOS TRES ACTOS ---------- */
.h-acto{position:relative;padding:96px 0;border-top:1px solid var(--linea);overflow:hidden}
.h-acto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 68% at 88% 22%,var(--h-dim),transparent 70%)}
.h-acto>.wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;min-height:54vh}
.h-num{position:absolute;inset-inline-end:-14px;top:36px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(9rem,20vw,17rem);line-height:.7;color:var(--h-acento);opacity:.07;pointer-events:none;user-select:none}
.h-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h-txt)}
.h-acto h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.88;
  font-size:clamp(3.2rem,7.4vw,6.2rem);margin:14px 0 0;color:var(--tinta)}
.h-tag{display:block;font-size:.24em;letter-spacing:.14em;color:var(--gris-txt);margin-top:14px;font-weight:600}
.h-lead{margin-top:20px;font-size:1.08rem;color:var(--gris-txt);max-width:48ch}
.h-cifras{display:flex;gap:34px;margin-top:28px;flex-wrap:wrap}
.h-cifra>b{display:block;font-family:var(--font-display);font-weight:800;font-size:2.5rem;line-height:1;color:var(--h-txt)}
/* HIJO DIRECTO: `{kit_total}` se hornea como <span data-kit-total> DENTRO del <b>,
   y un `.h-cifra span` a secas se lo comía — la cifra del catálogo salía en cuerpo 10. */
.h-cifra>span{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-txt);margin-top:7px}
.h-acciones{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.h-btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;padding:13px 24px;transition:background .16s,color .16s,border-color .16s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.h-btn-1{background:var(--tinta);color:var(--fondo)}
.h-btn-1:hover{background:var(--h-acento,var(--lima));color:var(--tinta)}
.h-btn-2{background:var(--blanco);border:1px solid var(--linea-2);color:var(--txt)}
.h-btn-2:hover{border-color:var(--h-txt);color:var(--h-txt)}
.h-btn-wa{background:#25D366;border-color:#25D366;color:#04310f}
.h-btn-wa:hover{background:#1fbe59;border-color:#1fbe59;color:#04310f}

/* el instrumento de cada acto */
.h-instr{background:var(--blanco);border:1px solid var(--linea-2);padding:22px;position:relative;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.h-instr-lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-txt);display:flex;justify-content:space-between;align-items:center;gap:12px}
.h-instr-lbl em{font-style:normal;color:var(--h-txt)}

/* acento por acto: no se inventa ningún color, son los del sistema */
#p-voice{--h-acento:var(--verde);--h-txt:var(--verde-txt);--h-dim:var(--verde-suave)}
#p-kit{--h-acento:var(--lima);--h-txt:var(--lima-deep);--h-dim:var(--lima-dim)}
#p-host{--h-acento:var(--naranja);--h-txt:var(--naranja-deep);--h-dim:var(--naranja-dim)}
#p-ad{--h-acento:var(--azul);--h-txt:var(--azul-deep);--h-dim:var(--azul-dim)}

/* AD — el instrumento reutiliza LITERAL .h-familias/.h-familias-pie de KIT
   (mismo aspecto de "nube de etiquetas técnicas", cero CSS nuevo: esas dos
   clases ya no van ancladas a #p-kit). Nada que añadir aquí. */

/* VOICE — la onda */
#h-osc{width:100%;height:180px;display:block;margin-top:8px}
.h-pistas{display:flex;gap:8px;margin-top:14px}
.h-pistas span{flex:1;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris-txt);border-top:2px solid var(--verde);padding-top:8px}

/* KIT — las familias del catálogo */
.h-familias{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.h-familias span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--linea-2);padding:7px 10px;color:var(--gris-txt);background:var(--fondo)}
.h-familias-pie{margin-top:14px;font-size:.82rem;color:var(--gris-txt)}

/* HOST — el duelo */
.h-duelo{margin-top:14px;display:flex;flex-direction:column;gap:16px}
.h-pista-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt);margin-bottom:7px}
.h-pista-top b{color:var(--txt)}
.h-barra{height:14px;background:var(--fondo-2);position:relative;overflow:hidden}
.h-barra i{position:absolute;inset-block:0;inset-inline-start:0;width:0;transition:width 1.5s cubic-bezier(.2,.9,.3,1)}
.is-hdd .h-barra i{background:var(--verde)}
.is-nvme .h-barra i{background:var(--naranja)}
.h-pista-pie{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris-txt);margin-top:5px}

/* ---------- LO QUE COMPARTEN ---------- */
.h-comun{background:var(--tinta);color:var(--fondo);padding:78px 0;position:relative;overflow:hidden}
.h-comun::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(var(--linea-dark) 1px,transparent 1px),linear-gradient(90deg,var(--linea-dark) 1px,transparent 1px);
  background-size:52px 52px}
.h-comun h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.9;
  font-size:clamp(2.2rem,5vw,4rem);color:var(--fondo);max-width:20ch}
.h-comun .h-sub{color:#aab4ac;max-width:58ch}
.h-cuadro{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(233,240,232,.14);margin-top:40px}
.h-cuadro>div{background:var(--tinta);padding:22px 20px}
.h-cuadro b{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lima)}
.h-cuadro p{margin-top:9px;font-size:.92rem;color:#aab4ac}
.h-comun .h-btn-1{background:var(--lima);color:var(--tinta)}
.h-comun .h-btn-1:hover{background:var(--lima-hot)}
.h-comun .h-btn-2{background:transparent;border-color:rgba(233,240,232,.28);color:var(--fondo)}
.h-comun .h-btn-2:hover{border-color:var(--lima);color:var(--lima)}

/* ---------- REVELADO ----------
   El estado por defecto es VISIBLE y el JS lo que hace es DESPLAZAR y desvanecer al
   entrar. Al revés (opacity:0 esperando un observador) basta con que el JS no corra
   para que la página quede en blanco: es la trampa clásica del reveal-on-scroll. */
.rv{transition:opacity .6s ease,transform .6s ease}
.js-rv .rv{opacity:0;transform:translateY(18px)}
.js-rv .rv.on{opacity:1;transform:none}

/* ---------- MÓVIL — simplificado de verdad ----------
   Los instrumentos NO se miniaturizan: desaparecen, y home.js ni siquiera los
   instancia. Lo que se simplifica es cómo se enseña; el DATO (la cifra del catálogo)
   se sigue enseñando. */
@media(max-width:940px){
  .h-espina{display:none!important}
  .h-entrada{padding:120px 0 56px}
  .h-acto{padding:52px 0}
  .h-acto>.wrap{grid-template-columns:1fr;gap:26px;min-height:0}
  .h-num{font-size:7rem;top:14px;inset-inline-end:-6px}
  .h-instr{display:none}
  .h-cifras{gap:22px}
  .h-cifra>b{font-size:2rem}
  .h-cuadro{grid-template-columns:1fr 1fr}
  .h-comun{padding:56px 0}
}
@media(max-width:480px){
  .h-cuadro{grid-template-columns:1fr}
  .h-salto a{width:100%}
}
/* site.css ya anula animation y transition globalmente bajo prefers-reduced-motion;
   aquí sólo se garantiza que el revelado no deje nada invisible. */
@media(prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none}
}

/* ---------- ÁRABE ----------
   La escritura árabe es CURSIVA: las letras se unen, y un `letter-spacing` las
   separa como si fueran latinas. Esta hoja usa tracking en quince sitios (mono en
   versalitas), así que hay que anularlo, igual que ya hacen site.css y kit.css.
   No lo heredó al nacer y se vio en la captura del bloque oscuro. */
html[lang="ar"] .h-claim,html[lang="ar"] .h-salto a,html[lang="ar"] .h-espina a,
html[lang="ar"] .h-eyebrow,html[lang="ar"] .h-tag,html[lang="ar"] .h-cifra>span,
html[lang="ar"] .h-btn,html[lang="ar"] .h-instr-lbl,html[lang="ar"] .h-pistas span,
html[lang="ar"] .h-familias span,html[lang="ar"] .h-pista-top,html[lang="ar"] .h-pista-pie,
html[lang="ar"] .h-cuadro b{letter-spacing:0}