/* =====================================================================
   HERO — escena ilustrada

   La página arranca en el cielo y baja hasta el parque. Cuatro capas
   SVG apiladas con el mismo viewBox (1440 × 1500); js/v2.js escribe
   --y en cada una según su data-depth, así el cielo va más lento que
   la ciudad y las ramas de adelante más rápido que todo.

   La ilustración es media, no un suelo (regla 1): cumple el mismo
   papel que la foto que había antes. El suelo empieza en las franjas
   de abajo, que se disuelven en el de la sección siguiente.

   Estado de reposo (regla 7): --y vale 0 y la avioneta tiene una
   posición fija en el cielo. Si el motor no corre, la escena queda
   armada y quieta.
   ===================================================================== */
.hero-il{
  position:relative;
  height:max(150vh, 104vw);
  overflow:clip;
  background:#8BBDF0; /* el celeste del horizonte, por si una capa tarda */
  /* Suelo en el que se disuelve: el de la sección que sigue (.zseq). */
  --hero-floor:var(--ground-raise);
}

.hero-il__scene{position:absolute;inset:0}

/* Cada capa sobra un 12 % arriba: al correrse con el parallax nunca
   deja ver su borde. */
.hero-il__layer{
  position:absolute;left:0;right:0;top:-12%;
  width:100%;height:112%;
  object-fit:cover;
  transform:translate3d(0, var(--y, 0px), 0);
  will-change:transform;
  pointer-events:none;user-select:none;
}
.hero-il__layer--front{top:0;height:100%}

/* ---------------------------------------------------------------------
   DE DÍA A NOCHE
   El hero es de día y lo que sigue es de noche. En vez de un corte, el
   día cae sobre la misma ciudad mientras se baja: js/v2.js escribe
   --dusk (0→1) según el recorrido del hero.

   El velo es un degradé de atardecer en las alturas de la escena:
   noche arriba, violeta jacarandá, el naranja del sol justo en el
   horizonte de los edificios (~70 %) y abajo el azul del suelo que
   sigue, para que las franjas ya caigan sobre su propio color.
   Las luces (estrellas, ventanas) prenden recién a mitad del velo.

   Reposo (regla 7): sin --dusk vale 0 y la escena queda de día.
   --------------------------------------------------------------------- */
.hero-il__dusk{position:absolute;inset:0;pointer-events:none;opacity:var(--dusk, 0)}
/* Cielo y ciudad: noche arriba, violeta, el naranja justo en el
   horizonte de los edificios. Queda DEBAJO de las luces. */
.hero-il__dusk--sky{
  background:linear-gradient(180deg,
    rgba(8,12,52,.92) 0%,
    rgba(34,28,104,.80) 28%,
    rgba(122,95,192,.55) 50%,
    rgba(242,150,110,.42) 68%,
    rgba(92,62,150,.55) 80%,
    rgba(40,30,100,.6) 100%);
}
/* Parque y ramas: queda ENCIMA de todo pero es transparente a la altura
   de las ventanas. Arriba oscurece las ramas del primer plano; abajo
   baja al azul del suelo que sigue, así las franjas caen sobre su
   propio color. */
.hero-il__dusk--ground{
  background:linear-gradient(180deg,
    rgba(8,12,52,.62) 0%,
    rgba(8,12,52,0) 30%,
    rgba(8,12,52,0) 62%,
    rgba(50,36,116,.30) 72%,
    rgba(70,48,140,.55) 84%,
    rgba(0,28,76,.92) 100%);
}
.hero-il__night{opacity:clamp(0, calc((var(--dusk, 0) - .35) / .5), 1)}

/* Avioneta con banner. Por debajo del rótulo, sobre el cielo. */
.hero-il__plane{
  position:absolute;top:30%;left:0;
  width:clamp(220px, 28vw, 400px);height:auto;
  transform:translate3d(var(--px, 58vw), var(--py, 0px), 0) rotate(var(--pr, 0deg));
  will-change:transform;
}
.hero-il__rope{stroke:#5B6474;stroke-width:1.6;fill:none}
.hero-il__flag{fill:#F7F4EC;stroke:#E3DDCF;stroke-width:1.5}
.hero-il__plane text{
  font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:26px;
  fill:var(--blue-700);
}

/* Título arriba al centro, sobre el cielo: la marca y qué es, en dos
   renglones. Poppins liviana y grande — no es una declaración (regla 2),
   es la firma de la página. */
.hero-il__title{
  position:absolute;top:calc(var(--nav-h) + clamp(48px, 9vh, 96px));left:0;right:0;z-index:2;
  margin:0;padding-inline:var(--container-pad);
  text-align:center;
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(22px, 2.4vw, 35px);line-height:1.25;letter-spacing:-.01em;
  color:var(--white);
  text-shadow:0 2px 16px rgba(0,30,90,.4);
}

/* La estrella de la marca antes de "consultora de IA para PyMEs": mismo
   color y tamaño óptico que el texto. */
.hero-il__star{
  --ico-size:.82em;
  display:inline-block;vertical-align:-.06em;
  margin-right:.35em;
}

/* ---------------------------------------------------------------------
   RIEL Y TARJETA
   El riel cubre todo el hero; la tarjeta es su último hijo y es sticky
   abajo. Arranca pegada al borde inferior de la pantalla y sólo se va
   cuando el hero termina. Todo CSS: funciona igual sin JS.
   --------------------------------------------------------------------- */
.hero-il__rail{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--container-pad) clamp(48px, 7vh, 80px);
  pointer-events:none;
}
/* El bloque sticky es el dock: datos + tarjeta. Arranca pegado al
   borde inferior de la pantalla y sólo se va cuando el hero termina. */
.hero-il__dock{
  position:sticky;bottom:32px;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-5);
}
.hero-il__card{
  order:1;flex:none;
  width:min(500px, 100%);
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:clamp(22px, 2.5vw, 34px);
  border-radius:var(--radius-xl, 24px);
  /* Vidrio con tinte de marca: el blanco del texto se tiene que leer
     igual sobre cielo claro que sobre edificios. */
  background:
    linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    rgba(0,28,76,.42);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
          backdrop-filter:blur(28px) saturate(160%);
  /* Sombra que separa planos, no brillo (regla 3). */
  box-shadow:0 20px 50px rgba(0,11,31,.28), inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events:auto;
}
/* Un escalón abajo de lo que dan los tokens: a tamaño completo la
   tarjeta tapaba el Obelisco. */
.hero-il__card .display{color:var(--paper);max-width:12ch;font-size:calc(var(--type-h1-size) * .86)}
.hero-il__card .lead{color:var(--paper);max-width:44ch;font-size:calc(var(--type-lead-size) * .92)}
.hero-il__cta{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Los dos datos, a la derecha de la tarjeta y a su misma altura. En
   píldoras con el vidrio de la tarjeta: sueltos, el blanco no se lee
   sobre los edificios claros. */
.hero-il__facts{
  order:2;
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);
  font-size:var(--text-sm);color:var(--white);
  pointer-events:auto;
}
.hero-il__facts li{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(0,28,76,.42);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
}
.hero-il__facts .ico{--ico-size:15px;color:var(--cyan-200)}

/* ---------------------------------------------------------------------
   FRANJAS — la escena se disuelve en el suelo que sigue. Barras del
   color del suelo, cada vez más gruesas, y entre ellas todavía se ve
   el parque.
   --------------------------------------------------------------------- */
.hero-il__stripes{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:5px;
}
.hero-il__stripes i{display:block;background:var(--hero-floor)}
.hero-il__stripes i:nth-child(1){height:2px}
.hero-il__stripes i:nth-child(2){height:3px}
.hero-il__stripes i:nth-child(3){height:4px}
.hero-il__stripes i:nth-child(4){height:5px}
.hero-il__stripes i:nth-child(5){height:7px}
.hero-il__stripes i:nth-child(6){height:9px}
.hero-il__stripes i:nth-child(7){height:14px}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
/* Sin lugar a la derecha: los datos pasan arriba de la tarjeta, dentro
   del mismo bloque sticky — nunca quedan asomando debajo de ella. */
@media (max-width:860px){
  .hero-il__dock{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .hero-il__facts{order:0;align-items:flex-start}
}
@media (max-width:640px){
  .hero-il__cta{flex-direction:column}
  .hero-il__cta .btn{width:100%}
  .hero-il__card .lead{font-size:var(--text-base)}
}

/* ---------------------------------------------------------------------
   PREFERENCIAS
   Mismo peso de selector que las reglas que pisan: sin eso la
   degradación pierde por especificidad (regla 6).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-il__layer,
  .hero-il__plane{transform:none}
  .hero-il__plane{left:58vw}
}
@media (prefers-reduced-transparency: reduce){
  .hero-il__facts li{background:var(--ground-raise);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-il__card{
    background:var(--ground-raise);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (prefers-contrast: more){
  .hero-il__card{background:rgba(0,11,31,.9);border-color:rgba(255,255,255,.5)}
  .hero-il__title{text-shadow:0 0 6px #000, 0 1px 14px #000}
  .hero-il__facts li{background:rgba(0,11,31,.9);border-color:rgba(255,255,255,.5)}
}