/* ============================================================
   Cabecera "Un core" — el video crece con el scroll y funde
   la primera y la segunda sección en una sola pieza.
   Solo se carga en empresas.html. Va DESPUÉS de empresas.css
   para poder pisar la cabecera anterior.
   ============================================================ */

/* `overflow-x:hidden` en el body lo vuelve contenedor de scroll y rompe
   position:sticky. `clip` recorta igual pero sin crear scroller. */
body { overflow-x: clip; }

.corehero {
  position: relative;
  background: #070a09;
  color: #EAF3EC;
}

/* la altura del riel es lo que dura el crecimiento */
.corehero__track { height: 250vh; }

.corehero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* ---------- el video ---------- */
/* Tamaño final = pantalla completa. Arranca encogido con scale(), que va
   por GPU; animar width/height cuadro a cuadro provocaría relayout. */
.corehero__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%) scale(var(--ch-s, .66));
  border-radius: var(--ch-r, 26px);
  overflow: hidden;
  z-index: 0;
  will-change: transform;
  box-shadow: 0 60px 130px -50px rgba(0, 0, 0, .9);
}
.corehero__vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #070a09;
}
/* velo para que el texto blanco se lea sobre cualquier fotograma */
.corehero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* el clip pasa por fotogramas casi blancos (las pantallas de login):
     el velo tiene que aguantar el peor de ellos, no el promedio */
  background:
    radial-gradient(86% 70% at 50% 46%, rgba(3, 7, 5, .90), rgba(3, 7, 5, .74) 46%, rgba(3, 7, 5, .42) 70%, rgba(3, 7, 5, .2) 88%),
    linear-gradient(180deg, rgba(3, 7, 5, .62), rgba(3, 7, 5, .3) 38%, rgba(3, 7, 5, .66));
  opacity: var(--ch-scrim, 1);
  transition: opacity .2s linear;
}

/* ---------- la copy ---------- */
.corehero__copy {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 3rem));
  text-align: center;
  transform: translateY(var(--ch-copy-y, 0));
  opacity: var(--ch-copy-o, 1);
  will-change: transform, opacity;
}
.corehero__copy .eyebrow { color: var(--lime, #B6E14A); }
.corehero__title {
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.055em;
  color: #F4F9F4;
  text-wrap: balance;
}
.corehero__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #7FE3B0;
}
.corehero__lead {
  max-width: 56ch;
  margin: 0 auto 2rem;
  color: #C6D6CB;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.55;
}
.corehero__actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.corehero__ghost {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .05);
  color: #EAF3EC;
  backdrop-filter: blur(6px);
}
.corehero__ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: none;
}
.corehero__proof {
  margin: 1.6rem 0 0;
  color: #93A99C;
  font: 500 .78rem/1.4 "Geist Mono", monospace;
  letter-spacing: .04em;
}
.corehero__proof sup a { color: #93A99C; }

/* ---------- etiquetas flotantes (acento técnico) ---------- */
.corehero__tags {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  opacity: var(--ch-tags-o, 1);
}
.corehero__tags li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: .42rem .8rem;
  border: 1px solid rgba(182, 225, 74, .26);
  border-radius: 999px;
  background: rgba(4, 8, 6, .55);
  backdrop-filter: blur(7px);
  color: #C9DBB9;
  font: 500 .72rem/1 "Geist Mono", monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  animation: chDrift var(--dur, 13s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes chDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 10px), var(--dy, -14px), 0); }
}

/* ---------- indicación de scroll ---------- */
.corehero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #93A99C;
  font: 500 .7rem/1 "Geist Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: var(--ch-scroll-o, 1);
}
.corehero__scroll::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(182, 225, 74, .8), transparent);
}

/* ---------- frase de cierre a pantalla completa ---------- */
.corehero__closing {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--ch-close-y, 14px)));
  width: min(920px, calc(100% - 3rem));
  margin: 0;
  text-align: center;
  color: #F4F9F4;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 600;
  text-wrap: balance;
  opacity: var(--ch-close-o, 0);
  pointer-events: none;
}

/* ---------- costura con la sección clara ---------- */
.corehero__seam {
  height: 190px;
  background: linear-gradient(180deg, #070a09 0%, #0a1a12 42%, var(--paper-2, #EFF1EC) 100%);
}

/* ---------- nav sobre fondo oscuro ---------- */
.snav--on-dark {
  --nav-bg: rgba(6, 15, 11, .72);
  --nav-text: #EAF3EC;
  --nav-muted: #93A99C;
  --nav-line: rgba(255, 255, 255, .09);
  --nav-brand: #33B57D;
  --nav-cta-bg: #12684A;
  --nav-cta-fg: #FFFFFF;
}

/* ---------- móvil: sin fijado, una sola pantalla ---------- */
@media (max-width: 860px) {
  .corehero__track { height: auto; }
  .corehero__stage {
    position: static;
    height: auto;
    min-height: 100svh;
    padding: 96px 0 64px;
  }
  .corehero__media {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .corehero__tags { display: none; }
  .corehero__closing { display: none; }
  .corehero__seam { height: 120px; }
}

/* ---------- sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .corehero__track { height: auto; }
  .corehero__stage {
    position: static;
    height: auto;
    min-height: 100svh;
    padding: 96px 0 64px;
  }
  .corehero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
  }
  .corehero__tags li { animation: none; }
  .corehero__closing { display: none; }
  .corehero__scroll { display: none; }
}