/* ASCII only */
/* ========================= */
/* HERO ULTRA LITE (low GPU) */
/* ========================= */

/* Vars */
:root {
  --hero-bg: #0b1220;
  --hero-fg: #e2e8f0;

  --btn-border: rgba(39,245,77,.7);
  --btn-border-hover: rgba(96,165,250,.7);
  --btn-accent: rgba(96,165,250,.12); /* hover sutil */

  --title-shift-y: -40px;
}

/* Hero container */
.hero.hero-dark {
  min-height: calc(100vh - (var(--topbar-h) + var(--bar-h)));
  background: var(--hero-bg);
  color: var(--hero-fg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 56px 16px 40px;
  position: relative;
  overflow: hidden;
}
@supports (height: 100svh) {
  .hero.hero-dark {
    min-height: calc(100svh - (var(--topbar-h) + var(--bar-h)));
  }
}

/* BG wrapper + video */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* FX off */
.fx-wrap, .lines-1, .lines-2, .sheenA, .sheenB, .glare { display: none !important; }

/* Content wrapper (centrado real de hijos) */
.hero-center {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ======= Anti-FOUC + espera al header ======= */
.js .hero-center { visibility: hidden; }
.js .hero.hero-ready .hero-center { visibility: visible; }
.js .h1 { visibility: hidden; }
.js .h1.prepared { visibility: visible; }

/* Títulos base + brillo */
.h1 {
  display: inline-flex;
  gap: .02em;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 8vw, 72px);
  margin: 0;
  transform: translateY(var(--title-shift-y));
  text-shadow:
    0 0 1px  rgba(120,190,255,0.54),
    0 0 4px  rgba(90,176,255,0.46),
    0 0 9px  rgba(0,153,255,0.36),
    0 0 18px rgba(0,153,255,0.22);
  margin-left: auto;
  margin-right: auto;
}
.h1-sub {
  display: inline-flex; gap: .02em; justify-content: center;
  margin-top: 14px; /* desktop/tablet por defecto */
  font-size: clamp(18px, 5.5vw, 36px);
  font-weight: 800;
  transform: translateY(calc(var(--title-shift-y) + 12px));
  text-shadow:
    0 0 1px  rgba(120,190,255,0.48),
    0 0 5px  rgba(90,176,255,0.38),
    0 0 11px rgba(0,153,255,0.24);
  margin-left: auto;
  margin-right: auto;
}

/* Más brillo al finalizar */
.h1.revealed {
  text-shadow:
    0 0 1px  rgba(120,190,255,0.64),
    0 0 5px  rgba(90,176,255,0.56),
    0 0 12px rgba(0,153,255,0.44),
    0 0 24px rgba(0,153,255,0.28);
}
.h1-sub.revealed {
  text-shadow:
    0 0 1px  rgba(120,190,255,0.58),
    0 0 6px  rgba(90,176,255,0.48),
    0 0 13px rgba(0,153,255,0.30);
}

/* Reveal por letras */
.h1 span {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
.h1 span.space { display: inline-block; width: .35em; opacity: 0; }
.h1.revealed span { animation: pop .7s ease forwards; }
@keyframes pop {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Subtítulo y botón aparecen juntos */
.hero-subtag,
.btn-hero {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.hero-subtag.show,
.btn-hero.show {
  opacity: 1;
  transform: translateY(0);
}

/* Subtag centrado y legible */
.hero-subtag {
  max-width: 60ch;
  margin: 10px auto 0;
}

/* Botón hero + efecto sheen */
.btn-hero {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  text-decoration: none;
  color: var(--hero-fg);
  background: rgba(11,18,32,.62);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn-hero:hover {
  transform: translateY(-2px);
  border-color: var(--btn-border-hover);
  background: var(--btn-accent);
}

/* Sheen (barrido) */
.btn-hero::after{
  content:"";
  position:absolute; top:0; left:-150%;
  width:50%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: skewX(-20deg);
}
.btn-hero:hover::after{ animation: sheen .9s ease; }
.btn-hero.sheen-once::after{ animation: sheen 1.1s ease; }
@keyframes sheen{
  from{ left:-150%; }
  to{ left:150%; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .js .hero-center { visibility: visible; }
  .js .h1 { visibility: visible; }
  .h1 span, .h1.revealed span { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .hero-subtag, .btn-hero { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn-hero:hover::after, .btn-hero.sheen-once::after { animation: none !important; }
}

/* ===================== Responsive ===================== */

/* Tablet y abajo */
@media (max-width: 880px) {
  :root { --title-shift-y: -24px; }
  .h1 { font-size: clamp(28px, 8.5vw, 60px); }
  .h1-sub { font-size: clamp(16px, 5.5vw, 32px); }
  .hero-center { padding-inline: 8px; }
}

/* ===== Ajuste puntual móviles: sin separación H1↔H2 y 30px H2↔texto ===== */
@media (max-width: 560px) {
  :root { --title-shift-y: 0px; }

  /* Sin separación entre H1 y H2 */
  .h1-sub { margin-top: 0; }

  /* 30px entre H2 y el texto del hero */
  .hero-subtag { margin-top: 30px; }

  /* Extras para evitar desbordes laterales, sin alterar inter-títulos */
  .h1,
  .h1-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    letter-spacing: -0.005em;
    max-width: 92vw;
  }
  #title1, #title2 { margin-left: auto; margin-right: auto; }
  .hero-center { max-width: 92vw; }
}