/* ═══════════════════════════════════════════════════════════════════════════
   Kabi — movimiento y técnicas modernas.
   Se carga después de kabi.css. Todo lo de aquí es MEJORA PROGRESIVA: si el
   navegador no lo soporta, la web funciona igual, solo que más quieta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Propiedades animables ───────────────────────────────────────────────── */
@property --spot-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --spot-y { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

/* ── Transiciones entre páginas (View Transitions API) ───────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

.brand img { view-transition-name: kabi-marca; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ── Barra de progreso de lectura ────────────────────────────────────────── */
.progress {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--terracotta), var(--wheat));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@keyframes barra { to { transform: scaleX(1); } }

/* Sin JS: el navegador la anima en el compositor. */
@supports (animation-timeline: scroll()) {
  .progress {
    animation: barra linear both;
    animation-timeline: scroll(root block);
  }
}

/* ── Apariciones ligadas al scroll, nativas ──────────────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 1;
      transform: none;
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 25%;
    }
  }
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Titulares que se revelan línea a línea ──────────────────────────────── */
.kinetic > span {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.kinetic > span > span {
  display: block;
  animation: subir 1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 105ms + 100ms);
}
@keyframes subir {
  from { transform: translateY(108%) rotate(2deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic > span > span { animation: none; }
}

/* ── Foco que sigue al puntero en las tarjetas ───────────────────────────── */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(20rem 20rem at var(--spot-x) var(--spot-y),
              color-mix(in srgb, var(--mint) 62%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.card:hover::before { opacity: 1; }
.card--warm::before {
  background: radial-gradient(20rem 20rem at var(--spot-x) var(--spot-y),
              color-mix(in srgb, var(--terracotta) 24%, transparent), transparent 60%);
}
.card--wheat::before {
  background: radial-gradient(20rem 20rem at var(--spot-x) var(--spot-y),
              color-mix(in srgb, var(--wheat) 28%, transparent), transparent 60%);
}
.card--slate::before {
  background: radial-gradient(20rem 20rem at var(--spot-x) var(--spot-y),
              color-mix(in srgb, var(--slate) 26%, transparent), transparent 60%);
}
.band--deep .card::before {
  background: radial-gradient(20rem 20rem at var(--spot-x) var(--spot-y),
              rgba(241, 234, 218, .12), transparent 60%);
}

/* El peso variable de Hanken Grotesk da un hover más fino que cambiar color */
.card h3 { transition: font-variation-settings .45s var(--ease); }
.card:hover h3 { font-variation-settings: 'wght' 560; }

/* ── Brillo que cruza el botón ───────────────────────────────────────────── */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%,
              rgba(241, 234, 218, .24) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .85s var(--ease);
}
.btn--primary:hover::after { transform: translateX(130%); }

/* ── Cinta de nombres de pueblos ─────────────────────────────────────────── */
.marquee {
  --dur: 52s;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--divider);
  padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row {
  display: flex; align-items: center; gap: 2.4rem;
  flex: none; min-width: max-content;
  padding-right: 2.4rem;
  animation: correr var(--dur) linear infinite;
}
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-100%); } }

.marquee b {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  font-weight: 400;
  color: var(--forest);
  white-space: nowrap;
}
.marquee i {
  font-style: normal;
  color: var(--terracotta);
  font-size: .9rem;
  opacity: .65;
}
.band--deep .marquee { border-color: rgba(241, 234, 218, .16); }
.band--deep .marquee b { color: #F1EADA; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__row { animation: none; }
}

/* ── Pasos que se apilan al hacer scroll ─────────────────────────────────── */
.stack { display: grid; gap: 1.1rem; }
.stack__item {
  position: sticky;
  top: calc(6.2rem + var(--n, 0) * 2.4rem);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3.6vw, 2.8rem);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  align-items: start;
}
.band--tint .stack__item { background: var(--canvas); }
.stack__n {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--terracotta);
  opacity: .5;
}
.stack__item h3 { font-size: var(--fs-h3); margin-bottom: .45rem; }
.stack__item p { color: var(--ink-soft); }

@media (max-width: 640px) {
  .stack__item { position: static; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stack__item { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CINTA — vídeo arrastrado por el scroll, con el texto cambiando encima
   ═══════════════════════════════════════════════════════════════════════════ */

/* La altura marca cuánto scroll hace falta para recorrer el vídeo entero.
   Más alto = avanza más despacio. */
.reel {
  height: 460vh;
  position: relative;
  background: var(--forest-deep);
}

.reel__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.reel__video,
.reel__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.reel__video {
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.reel__video.is-ready { opacity: 1; }

/* Velo. Tres capas, y el orden importa:
   1) una sombra CENTRADA justo detrás del texto — es la que da el contraste
      cuando el cielo se pone claro a mediodía;
   2) un viñeteado suave en los bordes;
   3) el degradado vertical, que ancla la barra de navegación arriba y el
      reloj abajo. */
.reel__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(62% 46% at 50% 45%, rgba(14, 31, 24, .58), transparent 72%),
    radial-gradient(135% 95% at 50% 50%, transparent 42%, rgba(14, 31, 24, .38) 88%),
    linear-gradient(180deg, rgba(14, 31, 24, .48) 0%, rgba(14, 31, 24, .06) 26%,
                    rgba(14, 31, 24, .10) 58%, rgba(14, 31, 24, .60) 100%);
}

.reel__stage {
  position: relative; z-index: 2;
  width: min(100% - 2.5rem, 54rem);
  display: grid;
  text-align: center;
}

/* Todos los paneles ocupan la MISMA celda: se cruzan sin mover el layout */
.reel__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(7px);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.reel__panel.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.reel__panel .eyebrow {
  justify-content: center;
  color: var(--wheat);
  margin-bottom: 1rem;
  /* A mediodía el cielo se pone claro y el rótulo se lava; la sombra lo salva
     sin tener que oscurecer el vídeo entero. */
  text-shadow: 0 1px 14px rgba(14, 31, 24, .85);
}

/* Los botones de tienda, sobre el vídeo, van en claro (como en las bandas
   oscuras). Si no, quedan verde sobre verde y no se ven. */
.reel .store {
  background: #F1EADA;
  color: var(--forest);
}
.reel__panel h2 {
  font-size: clamp(2rem, 6vw, 4.2rem);
  color: #F6F1E4;
  letter-spacing: -.028em;
  text-shadow: 0 2px 44px rgba(14, 31, 24, .55);
}
.reel__panel h2 em { font-style: italic; color: var(--wheat); }
.reel__panel p {
  color: #DCE6DD;
  font-size: var(--fs-lead);
  max-width: 33rem;
  margin: 1.15rem auto 0;
  text-wrap: pretty;
  text-shadow: 0 1px 26px rgba(14, 31, 24, .65);
}

/* Reloj: en qué momento del día va el vídeo */
.reel__clock {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(1.5rem, 4vh, 2.8rem);
  transform: translateX(-50%);
  width: min(80%, 29rem);
  display: grid; gap: .65rem; justify-items: center;
}
.reel__track {
  width: 100%; height: 2px;
  background: rgba(241, 234, 218, .2);
  border-radius: 2px;
  overflow: hidden;
}
.reel__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--wheat), var(--terracotta));
}
.reel__hours {
  display: flex; justify-content: space-between; width: 100%;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(241, 234, 218, .5);
}
.reel__hours span { transition: color .4s; }
.reel__hours span.is-on { color: var(--wheat); }

.reel__hint {
  position: absolute; z-index: 3;
  top: clamp(5.2rem, 11vh, 7.5rem); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .55rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241, 234, 218, .62);
  transition: opacity .5s;
  white-space: nowrap;
}
.reel__hint.is-off { opacity: 0; }
.reel__hint svg {
  width: 14px; height: 14px;
  animation: bajar 1.9s var(--ease) infinite;
}
@keyframes bajar {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 860px) {
  /* La barra fija de descarga ocupa la parte baja: el reloj sube para no
     quedar debajo. */
  .reel__clock { bottom: 5.4rem; }
}

@media (max-width: 720px) {
  .reel { height: 380vh; }
  /* En vertical el texto ocupa casi todo el ancho, así que la sombra central
     tiene que ser más ancha y más densa o el titular se lava. */
  .reel__veil {
    background:
      radial-gradient(96% 42% at 50% 42%, rgba(14, 31, 24, .70), transparent 78%),
      linear-gradient(180deg, rgba(14, 31, 24, .55) 0%, rgba(14, 31, 24, .12) 24%,
                      rgba(14, 31, 24, .18) 58%, rgba(14, 31, 24, .68) 100%);
  }
}

/* Sin movimiento: la cinta se convierte en secciones normales apiladas */
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel__sticky { position: static; height: auto; padding-block: 4.5rem; }
  .reel__stage { display: block; }
  .reel__panel {
    opacity: 1; transform: none; filter: none; pointer-events: auto;
  }
  .reel__panel + .reel__panel { margin-top: 3.5rem; }
  .reel__clock, .reel__hint { display: none; }
}

/* Cada línea diseñada del titular debe caber en una línea real, o el revelado
   por líneas pierde el sentido. Por debajo de eso, que fluya normal. */
@media (min-width: 900px) {
  .kinetic > span > span { white-space: nowrap; }
}