/* =========================================================
   hero-header.css
   Restyle EDITORIAL de SOLO el header y el hero (index.html).
   Se carga el último → sobrescribe components.css / sections.css.
   Modular y reversible: borra el <link> y vuelve al diseño anterior.

   No cambia textos de marca, logo, colores de marca, secciones ni
   estructura de la página. Solo reestiliza header + hero y añade
   un lema/eyebrow derivados del propio título del sitio.
   NO afecta a agenda.html (que no carga este archivo).
   ========================================================= */

/* =========================================================
   HEADER — transparente, superpuesto sobre el hero
   ========================================================= */
.site-header {
  height: auto;
  padding: 20px 0;
  border-bottom: 0;
}
.site-header .container.header__inner {
  max-width: 100%;
  padding-inline: clamp(20px, 3.7vw, 40px);
}
/* Al hacer scroll sobre el contenido mantiene algo de fondo para legibilidad
   (sobre el hero, arriba del todo, sigue 100% transparente). */
.site-header.is-scrolled {
  background: rgba(6, 12, 34, 0.55);
  border-bottom: 0;
}

/* ---- Marca: wordmark + divisor + lema de dos líneas ---- */
.brand-block { display: inline-flex; align-items: center; gap: 14px; }
.brand { gap: 10px; }
.brand__text {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.40);
}
.brand-tag {
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Navegación: enlaces blancos, sin subrayado, hover opacidad ---- */
.nav__list { gap: 32px; }
.nav__link {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.nav__link::after { display: none; }          /* fuera el subrayado de acento */
.nav__link:hover,
.nav__link.is-active { color: #fff; opacity: 0.7; }
.nav__link.is-active { opacity: 1; }

/* ---- CTA de la derecha: se muestra como ENLACE (sin botón ni fondo),
   conservando el acceso a la reserva ---- */
.header__cta.btn {
  background: transparent;
  box-shadow: none;
  color: #fff;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  font-size: 15px;
}
.header__cta.btn:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 0.7;
}

/* =========================================================
   HERO — imagen/fondo a pantalla completa, contenido abajo-izquierda
   (se conserva el fondo de gradiente animado existente)
   ========================================================= */
.hero.section {
  min-height: 100vh;
  min-height: 100svh;          /* evita saltos por la barra del navegador móvil */
  padding: 0;
  display: flex;
  align-items: flex-end;       /* contenido en la mitad inferior */
  overflow: hidden;
}
/* Foto de fondo a pantalla completa (horizontal en escritorio).
   Va por debajo de la malla y del scrim; el contenido queda por encima. */
.hero.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/img/hero-desktop.jpg?v=20261021");
  background-size: cover;
  background-position: 70% center;   /* encuadra al sujeto (derecha), deja aire a la izquierda para el texto */
}
/* La malla de gradiente reactiva queda como tinte sutil de marca sobre la foto */
.hero__mesh { opacity: 0.28; }

/* Degradado oscuro suave (izquierda + abajo) para legibilidad del texto */
.hero.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 18, 0.82) 0%, rgba(5, 8, 18, 0.42) 40%, rgba(5, 8, 18, 0.12) 72%),
    linear-gradient(0deg, rgba(5, 8, 18, 0.85) 0%, rgba(5, 8, 18, 0.18) 44%, transparent 72%);
}

.hero .container.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-inline: clamp(20px, 3.7vw, 56px);
  padding-block: 0 clamp(40px, 7vh, 96px);
  display: block;
  gap: 0;
}
.hero__content {
  padding-left: 0;
  max-width: 46rem;
}
.hero__content::before { display: none; }   /* fuera la barra vertical de acento */

/* ---- Eyebrow: punto circular + texto en mayúsculas ---- */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
}
.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 10px var(--c-cyan);
}

/* ---- Título: MAYÚSCULAS, blanco, 700, grande, muy ceñido ---- */
.hero__title {
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}
/* La segunda línea se mantiene como matiz (blanco translúcido), sin color ajeno */
.hero__title-accent {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.60);
}

/* ---- Subtítulo ---- */
.hero__subtitle {
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.90);
  max-width: 34rem;
  margin: 0 0 28px;
}

/* ---- Botón principal: blanco sólido, texto negro, casi recto, con flecha ---- */
.hero__actions { gap: 16px; margin: 0 0 28px; }
.hero__actions .btn {
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  padding: 0 26px;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  gap: 8px;
}
.hero__actions .btn::after {
  content: "→";
  font-size: 14px;
  line-height: 1;
  transition: transform 0.25s var(--ease-out);
}
.hero__actions .btn:hover {
  background: #fff;
  color: #000;
  transform: none;
  box-shadow: none;
  opacity: 0.92;
}
.hero__actions .btn:hover::after { transform: translateX(3px); }

/* ---- Riel de confianza: línea fina blanca (25%) ---- */
.hero__trust {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  max-width: 640px;
  margin-top: 4px;
}
.hero__trust li + li { border-left-color: rgba(255, 255, 255, 0.18); }

/* =========================================================
   LIMPIEZA EDITORIAL (solo landing)
   - Se ocultan el eyebrow del hero ("ENTRENAMIENTO PERSONAL 1 A 1")
     y los eyebrows numerados de las secciones ("01 EN VIDEO", etc.).
   - Se elimina la animación de "enfoque" (blur→nítido) del hero, que
     causaba un parpadeo/bug al cargar en escritorio. El hero entra
     limpio; el resto de animaciones al scroll (GSAP) se mantienen.
   ========================================================= */
.hero__eyebrow,
.section__eyebrow { display: none; }
/* Lema redundante de la cabecera ("ENTRENAMIENTO PERSONAL 1 A 1"): fuera. */
.brand-sep,
.brand-tag { display: none; }

/* =========================================================
   RESPONSIVE — móvil: lema/divisor ocultos, header más compacto
   (el menú ya pasa a hamburguesa por responsive.css; el título ya
    baja a ~44px por el clamp).
   ========================================================= */
@media (max-width: 767px) {
  .brand-sep, .brand-tag { display: none; }
  .site-header { padding: 14px 0; }
  .hero .container.hero__inner { padding-block: 0 clamp(32px, 6vh, 64px); }
  /* En vertical: misma foto, pero subimos el encuadre (zoom suave anclado abajo)
     para que la cara quede ARRIBA despejada y el titular no la tape. */
  .hero.section::before {
    background-size: auto 132%;
    background-position: 50% 88%;
  }
}