/* Header sticky solo en esta página — z-index por encima del stage (10) */
#site-header>header,
header {
  position: sticky !important;
  top: 0;
  z-index: 200 !important;
}

/* ─── Scroll-linked split panels ─── */

/*
Arquitectura:
  .sn-spacer → bloque invisible que crea el espacio de scroll
                Cada panel necesita 2×100vh:
                1 de dwell + 1 de transición

  3 paneles = (3 × 200vh) − 100vh = 500vh

  .sn-stage → fijo en pantalla, detrás del header
  */

.sn-spacer {
  /* 500vh de recorrido + 80vh extra para que el tercer bloque se quede fijo un poco más */
  height: 580vh;
}

.sn-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

/* Cuando el stage está inactivo */
.sn-stage.sn-hidden {
  display: none;
}

/* Cada panel llena todo el stage */
.sn-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  pointer-events: auto;
}

/* Celda */
.sn-half {
  overflow: hidden;
  height: 100%;
  will-change: transform;
}

/* Celda imagen */
.sn-half--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
  box-sizing: border-box;
}

.sn-half--img picture {
  display: contents;
}

.sn-half--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8%;
  box-sizing: border-box;
}

.sn-half--text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 6% 10%;
  gap: 0;
  box-sizing: border-box;

  /* Baja visualmente el contenido */
  padding-top: calc(6% + 200px);
}

.sn-bg-primary {
  background: #EC690D;
}

.sn-bg-dark {
  background: #272022;
}

.sn-accent {
  display: block;
  width: 38px;
  height: 2px;
  background: #fff;
  flex-shrink: 0;
  margin-bottom: 20px;
}

.sn-title {
  font-family: 'Cocogoose', 'Poppins', sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: 400;
  color: #fff !important;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 18px 0;
}

.sn-orange {
  color: #EC690D;
}

.sn-desc {
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(17px, 1.7vw, 28px) !important;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.20 !important;
  letter-spacing: 0.03em;
  margin: 0;
}

/* El resto del contenido sube SOBRE el stage */
.sn-below {
  position: relative;
  z-index: 40;
  background: #fff;
}


/* ═══════════════════════════════════════════════
 NUESTRA HISTORIA
 ═══════════════════════════════════════════════ */

.nh-section {
  position: sticky;
  top: 0;
  height: 100vh;

  display: flex;
  flex-direction: column;

  /* Margen horizontal reducido */
  padding: 8px 17% 20px;

  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
}


/* Título */
.nh-heading {
  font-family: 'Cocogoose', 'Poppins', sans-serif;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 900;
  color: #272022;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.35 !important;
  margin: 0;
  position: absolute;
  top: 120px;
}

/* Contenedor principal */
.nh-body {
  flex: 1;

  display: grid;

  /*
  Izquierda | línea | imagen | dots
*/
  grid-template-columns: 1fr 40px 1fr 32px;

  align-items: center;
  gap: 0;
}


/* ───────────────────────────────────────────────
 BLOQUE IZQUIERDO
 ─────────────────────────────────────────────── */

.nh-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
  padding-top: 0;
  transform: scale(1.12);
  transform-origin: left center;
  margin-top: -80px;
}

/*
Estado de salida de la animación.

IMPORTANTE:
Aquí mantenemos únicamente translateY.
La escala se combina para no perder el tamaño.
  */
.nh-left.nh-out {
  opacity: 0;
  transform: scale(1.12) translateY(-24px);
}


/* Año */
.nh-year {
  font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(82px, 9.5vw, 150px) !important;
  font-weight: 900;
  color: #EC690D;

  /* Lo dejamos compacto porque es un número grande */
  line-height: 0.95 !important;
}

/* Nombre de la marca */
.nh-brand {
  font-family: 'Cocogoose', 'Poppins', sans-serif;
  font-size: clamp(20px, 1.9vw, 30px) !important;
  font-weight: 900;
  color: #272022;
  letter-spacing: -0.03em;
  line-height: 1.35 !important;
  margin-bottom: -8px;

}

/* Descripción */
.nh-desc {
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 22px) !important;
  color: #272022;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
  max-width: 360px !important;
  margin: 0;
}

/* Línea naranja */
.nh-underline {
  display: block;

  width: 52px;
  height: 2px;

  background: #EC690D;

  margin-top: 4px;
}


/* ───────────────────────────────────────────────
 LÍNEA VERTICAL CENTRAL
 ─────────────────────────────────────────────── */

.nh-divider {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  height: 100%;

  position: relative;
}

.nh-vline {
  width: 1px;

  /*
  Línea más corta (40% del alto)
*/
  height: 40%;

  background: #EC690D;
  opacity: 0.4;
}

.nh-vdot {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #EC690D;

  position: absolute;

  top: 30%;
  left: 50%;
  transition: top 0.6s cubic-bezier(.22, 1, .36, 1);

  transform: translate(-50%, -50%);
  transition: top 0.42s ease;
}


/* ───────────────────────────────────────────────
 IMAGEN DERECHA
 ─────────────────────────────────────────────── */

.nh-right {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 100%;

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

.nh-right.nh-out {
  opacity: 0;
  transform: translateY(24px);
}

.nh-img {
  /*
  Imagen considerablemente más grande
*/
  max-height: 60vh;

  /*
  Permite que ocupe más espacio horizontal
*/
  max-width: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* ───────────────────────────────────────────────
 DOTS DE NAVEGACIÓN
 ─────────────────────────────────────────────── */

.nh-dots {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 10px;

  height: 100%;
}

.nh-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #ccc;

  transition: background 0.3s;

  cursor: pointer;
}

.nh-dot.active {
  background: #EC690D;
}


/* ═══════════════════════════════════════════════
 STATS
 ═══════════════════════════════════════════════ */
/* ─── Stats ─── */

.sn-stats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding: 64px var(--page-margin) 20px;
  background: #fff;
}

.sn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.sn-stat-number {
  font-family: 'Helvetica Neue Roman', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(70px, 8vw, 125px) !important;
  font-weight: 900;
  color: #EC690D;
  line-height: 1 !important;
  margin: 0;
}

.sn-stat-label {
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(17px, 1.7vw, 28px) !important;
  color: #272022;
  line-height: 1.20 !important;
  margin: 0;
}