/* Loader "Trazando plano", canvas del hero, entrada del texto y cursor de soldador (fx-hero.js). */

/* ---------- Loader ---------- */
#ads-loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--plano-bg); color: var(--plano-text);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 650ms var(--ease);
}
#ads-loader:empty { display: none; }
#ads-loader.is-saliendo { clip-path: polygon(0 0, 100% 0, 100% 0, 0 12%); }
html.ldr-activo body { overflow: hidden; }

.ldr__reticula { position: absolute; inset: 0; overflow: hidden; }
.ldr__reticula i { position: absolute; background: var(--plano-line); animation: ldr-traza 900ms var(--ease-out) both; }
.ldr__reticula i:nth-child(-n+4) { left: 0; right: 0; height: 1px; transform-origin: left; }
.ldr__reticula i:nth-child(n+5) { top: 0; bottom: 0; width: 1px; transform-origin: top; animation-name: ldr-traza-v; }
.ldr__reticula i:nth-child(1) { top: 20%; }
.ldr__reticula i:nth-child(2) { top: 40%; animation-delay: 80ms; }
.ldr__reticula i:nth-child(3) { top: 60%; animation-delay: 160ms; }
.ldr__reticula i:nth-child(4) { top: 80%; animation-delay: 240ms; }
.ldr__reticula i:nth-child(5) { left: 20%; animation-delay: 40ms; }
.ldr__reticula i:nth-child(6) { left: 40%; animation-delay: 120ms; }
.ldr__reticula i:nth-child(7) { left: 60%; animation-delay: 200ms; }
.ldr__reticula i:nth-child(8) { left: 80%; animation-delay: 280ms; }
@keyframes ldr-traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ldr-traza-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ldr__marco { position: relative; display: grid; justify-items: center; gap: 18px; padding: 34px 40px; border: 1px solid var(--plano-line); background: color-mix(in srgb, var(--plano-bg) 85%, transparent); }
.ldr__marco::before, .ldr__marco::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--chispa); }
.ldr__marco::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.ldr__marco::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.ldr__nave { width: 220px; height: auto; fill: none; stroke: var(--cianotipo); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ldr__nave path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ldr-nave 1.6s var(--ease) forwards; }
@keyframes ldr-nave { to { stroke-dashoffset: 0; } }
.ldr__lectura { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .2em; color: var(--plano-muted); }
.ldr__pct { font-family: var(--f-titulo); font-weight: 800; font-size: 2.6rem; letter-spacing: .04em; color: var(--plano-text); min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.ldr__barra { width: 240px; height: 2px; background: var(--plano-line); overflow: hidden; }
.ldr__avance { display: block; height: 100%; background: linear-gradient(90deg, var(--rojo), var(--chispa)); transform: scaleX(0); transform-origin: left; }
.ldr__pie { font-family: var(--f-mono); font-size: var(--fs-dato-s); letter-spacing: .18em; color: var(--plano-muted); opacity: .7; }

/* ---------- Canvas del hero ---------- */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 767px) { .hero-canvas { opacity: .42; } }

/* ---------- Entrada del texto (solo con JS; sin is-loaded todo se ve normal) ---------- */
html.ads-listo:not(.is-loaded) .hero-title span,
html.ads-listo:not(.is-loaded) .hero-eyebrow,
html.ads-listo:not(.is-loaded) .hero-lead,
html.ads-listo:not(.is-loaded) .hero-chips,
html.ads-listo:not(.is-loaded) .hero-ctas,
html.ads-listo:not(.is-loaded) .hero-meta { opacity: 0; }

html.is-loaded .hero-title span { animation: hero-linea 900ms var(--ease-out) both; }
html.is-loaded .hero-title .l1 { animation-delay: 120ms; }
html.is-loaded .hero-title .l2 { animation-delay: 240ms; }
html.is-loaded .hero-title .l3 { animation-delay: 360ms; }
@keyframes hero-linea {
  from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}
html.is-loaded .hero-eyebrow { animation: hero-sube 700ms var(--ease-out) both; }
html.is-loaded .hero-lead { animation: hero-sube 800ms 600ms var(--ease-out) both; }
html.is-loaded .hero-chips { animation: hero-sube 800ms 720ms var(--ease-out) both; }
html.is-loaded .hero-ctas { animation: hero-sube 800ms 840ms var(--ease-out) both; }
html.is-loaded .hero-meta { animation: hero-sube 800ms 980ms var(--ease-out) both; }
@keyframes hero-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Cordón de soldadura bajo "EL FUTURO": se traza al rojo vivo y se enfría a rojo ADSER */
.hero-title .l3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .075em; min-height: 4px;
  background: var(--rojo); border-radius: 2px; transform-origin: left;
}
html.is-loaded .hero-title .l3::after { animation: cordon-traza 1s 900ms var(--ease) both, cordon-enfria 1.8s 900ms linear both; }
@keyframes cordon-traza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cordon-enfria {
  0% { background: var(--incandescente); box-shadow: 0 0 18px 4px var(--chispa); }
  45% { background: var(--chispa); box-shadow: 0 0 12px 2px var(--chispa); }
  100% { background: var(--rojo); box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Cursor de soldador ---------- */
.chispa-cursor { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: var(--z-cursor); pointer-events: none; }
html[data-chispas="off"] .chispa-cursor { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.ads-listo:not(.is-loaded) .hero-title span,
  html.ads-listo:not(.is-loaded) .hero-eyebrow, html.ads-listo:not(.is-loaded) .hero-lead,
  html.ads-listo:not(.is-loaded) .hero-chips, html.ads-listo:not(.is-loaded) .hero-ctas,
  html.ads-listo:not(.is-loaded) .hero-meta { opacity: 1; }
  .hero-title .l3::after { animation: none !important; }
  #ads-loader { display: none; }
}