/* reels — Ruleta Coverflow 3D (video principal al frente, los demás atrás en penumbra) */

/* ---- sección base ---- */
.reels {
  background: transparent;
  overflow: hidden;
}
.reels__inner { display: flex; align-items: center; gap: 60px; padding: 80px 0; min-height: 560px; }
.reels__left { flex: 1 1 42%; max-width: 430px; }
.reels__title { font-family: var(--font-sora); font-weight: 800; font-size: 36px; line-height: 1.12; margin-bottom: 16px; color: var(--white); }
.reels__subtitle { font-family: var(--font-sora); font-weight: 600; font-size: 18px; margin-bottom: 18px; }
.reels__text { font-family: var(--font-mont); font-size: 13px; line-height: 1.7; color: var(--white-75); margin-bottom: 30px; }
.reels__right { flex: 1 1 55%; position: relative; }
/* glow ambiental dorado detrás de la ruleta */
.reels__right::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(340px, 36vw, 480px);
  height: 82%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(243, 162, 8, 0.28), rgba(243, 162, 8, 0) 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* utilidad para la región aria-live */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============ RULETA COVERFLOW ============ */
/* el clip 3D lo da .reels{overflow:hidden}; .reels__right queda visible para el glow */
.reels__cf {
  position: relative;
  z-index: 1;
  width: 100%;
  /* tunables del coverflow (se sobreescriben por breakpoint) */
  --cf-persp: 1400px;
  --cf-card-w: clamp(258px, 26vw, 300px);
  --n1-x: 58%;   --n1-z: -220px; --n1-rot: 38deg; --n1-scale: .82; --n1-blur: 1.4px; --n1-bri: .45; --n1-op: .92;
  --n2-x: 92%;   --n2-z: -420px; --n2-rot: 42deg; --n2-scale: .66; --n2-blur: 2.4px; --n2-bri: .30; --n2-op: .55;
  --far-x: 112%; --far-z: -560px; --far-rot: 44deg; --far-scale: .60;
}

/* área 3D: alto = alto de la card activa (9/16) + aire */
.reels__cf-stage {
  position: relative;
  width: 100%;
  min-height: calc(var(--cf-card-w) * 1.7778 + 12px);
  perspective: var(--cf-persp);
  perspective-origin: 50% 46%;
  touch-action: pan-y; /* scroll vertical de la página libre; el swipe horizontal lo maneja el JS */
  will-change: transform; /* aísla el subárbol 3D del overflow:hidden ancestro (fix Safari) */
}

/* haz de luz verde cenital (interrogatorio) — capa decorativa, detrás de las cards */
.reels__cf-spot {
  position: absolute;
  left: 50%; top: -6%;
  width: 132%; height: 118%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%,
      transparent 156deg,
      rgba(243, 162, 8, .13) 173deg,
      rgba(243, 162, 8, .26) 180deg,
      rgba(243, 162, 8, .13) 187deg,
      transparent 204deg);
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: .85;
}
.reels__cf-stage:has(.reels__cf-track.is-settling) .reels__cf-spot { animation: reelsRelight .44s ease; }
@keyframes reelsRelight { 0% { opacity: .85; } 28% { opacity: .55; } 100% { opacity: .85; } }

/* pista 3D: NO se mueve; cada card se coloca sola según data-offset */
.reels__cf-track { position: absolute; inset: 0; transform-style: preserve-3d; }

/* card base (frame 9:16) */
.reels__cf-track .reels__video {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--cf-card-w);
  height: auto;
  aspect-ratio: 9 / 16;
  flex: none;
  border-radius: 18px;
  overflow: hidden;
  background: #050e1f;
  border: 1px solid rgba(243, 162, 8, .28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  backface-visibility: hidden;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .6s cubic-bezier(.34, 1.18, .4, 1),
              filter .5s ease, opacity .5s ease, box-shadow .45s ease;
}
.reels__cf-track .reels__video video {
  display: block; width: 100%; height: 100%;
  object-fit: contain;            /* DURO: nunca cover (cover rompe el fullscreen vertical) */
  border: 0; background: #050e1f;
}

/* ---- estados por offset (espejados a izquierda/derecha) ---- */
.reels__cf-track .reels__video[data-offset="0"] {
  transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0deg) scale(1);
  filter: none; opacity: 1; z-index: 30;
  cursor: default;
  border-color: rgba(243, 162, 8, .34);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(255, 255, 255, .05) inset,
              0 0 56px rgba(243, 162, 8, .20);
}
.reels__cf-track .reels__video[data-offset="1"] {
  transform: translate(-50%, -50%) translateX(var(--n1-x)) translateZ(var(--n1-z)) rotateY(calc(-1 * var(--n1-rot))) scale(var(--n1-scale));
  filter: brightness(var(--n1-bri)) saturate(.85) blur(var(--n1-blur));
  opacity: var(--n1-op); z-index: 20;
}
.reels__cf-track .reels__video[data-offset="-1"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--n1-x))) translateZ(var(--n1-z)) rotateY(var(--n1-rot)) scale(var(--n1-scale));
  filter: brightness(var(--n1-bri)) saturate(.85) blur(var(--n1-blur));
  opacity: var(--n1-op); z-index: 20;
}
.reels__cf-track .reels__video[data-offset="2"] {
  transform: translate(-50%, -50%) translateX(var(--n2-x)) translateZ(var(--n2-z)) rotateY(calc(-1 * var(--n2-rot))) scale(var(--n2-scale));
  filter: brightness(var(--n2-bri)) saturate(.7) blur(var(--n2-blur));
  opacity: var(--n2-op); z-index: 10;
}
.reels__cf-track .reels__video[data-offset="-2"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--n2-x))) translateZ(var(--n2-z)) rotateY(var(--n2-rot)) scale(var(--n2-scale));
  filter: brightness(var(--n2-bri)) saturate(.7) blur(var(--n2-blur));
  opacity: var(--n2-op); z-index: 10;
}
.reels__cf-track .reels__video[data-offset="3"],
.reels__cf-track .reels__video[data-offset="-3"] {
  opacity: 0; pointer-events: none; z-index: 1;
}
.reels__cf-track .reels__video[data-offset="3"] {
  transform: translate(-50%, -50%) translateX(var(--far-x)) translateZ(var(--far-z)) rotateY(calc(-1 * var(--far-rot))) scale(var(--far-scale));
}
.reels__cf-track .reels__video[data-offset="-3"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--far-x))) translateZ(var(--far-z)) rotateY(var(--far-rot)) scale(var(--far-scale));
}

/* SOLO la activa monta play + scrim interactivos; el resto, poster atenuado */
.reels__cf-track .reels__video:not([data-offset="0"]) .reels__scrim,
.reels__cf-track .reels__video:not([data-offset="0"]) .reels__play {
  opacity: 0; pointer-events: none;
}

/* foco visible (teclado) */
.reels__cf-track .reels__video:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* flare del glow dorado al aterrizar (settle 'clack' de ruleta) */
.reels__cf-track.is-settling .reels__video[data-offset="0"] { animation: reelsFlare .5s ease; }
@keyframes reelsFlare {
  0%   { box-shadow: 0 28px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 56px rgba(243, 162, 8, .20); }
  45%  { box-shadow: 0 28px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 86px rgba(243, 162, 8, .38); }
  100% { box-shadow: 0 28px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 56px rgba(243, 162, 8, .20); }
}

/* scanline CRT que recorre la activa una vez al asentar (guiño vigilancia) */
.reels__cf-track .reels__video::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(243, 162, 8, 0) 0%, rgba(243, 162, 8, .16) 50%, rgba(243, 162, 8, 0) 100%);
}
.reels__cf-track.is-settling .reels__video[data-offset="0"]::after { animation: reelsScan .8s ease-out 1; }
@keyframes reelsScan {
  0%   { opacity: 0; transform: translateY(-42%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(260%); }
}

/* ---- flechas prev/next ---- */
.reels__cf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20, 15, 5, .55);
  border: 1px solid rgba(243, 162, 8, .40);
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity .3s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.reels__cf-arrow svg { width: 22px; height: 22px; }
.reels__cf-arrow--prev { left: 2%; }
.reels__cf-arrow--next { right: 2%; }
.reels__cf-stage:hover .reels__cf-arrow,
.reels__cf:focus-within .reels__cf-arrow { opacity: 1; }
.reels__cf-arrow:hover { background: rgba(243, 162, 8, .18); box-shadow: 0 0 22px rgba(243, 162, 8, .30); }
.reels__cf-arrow:active { transform: translateY(-50%) scale(.94); }
.reels__cf-arrow:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- dots (horizontales debajo del stage) ---- */
.reels__feed-dots {
  display: flex; flex-direction: row; justify-content: center;
  gap: 9px; margin-top: 22px;
}
.reels__feed-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: background .25s ease, width .25s ease;
}
.reels__feed-dot--active { background: var(--accent); width: 22px; border-radius: 4px; }
.reels__feed-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- entrada en viewport (zoom-in sutil) ---- */
.reels__cf:not(.is-in) .reels__cf-track .reels__video {
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(-160px) scale(.9);
}

/* ============ click-to-play (compartido entre cards) ============ */
/* scrim sobre el poster para que el botón resalte */
.reels__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at center, rgba(20, 15, 5, .12) 0%, rgba(20, 15, 5, .58) 100%);
  transition: opacity .35s ease;
  pointer-events: none;
}
/* botón play custom con glow de marca + pulso */
.reels__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  z-index: 3;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--dark-text);
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  transition: transform .22s ease, opacity .3s ease, box-shadow .22s ease;
}
.reels__play:hover { transform: scale(1.08); box-shadow: 0 14px 40px rgba(243, 162, 8, .4); }
.reels__play:active { transform: scale(.96); }
.reels__play-icon { width: 28px; height: 28px; margin-left: 4px; }
.reels__play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(243, 162, 8, .5);
  animation: reelsPulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes reelsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(243, 162, 8, .45); }
  70%  { box-shadow: 0 0 0 24px rgba(243, 162, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 162, 8, 0); }
}
/* estado reproduciendo: oculta scrim + botón, controles nativos toman el control */
.reels__video.is-playing { cursor: default; }
.reels__video.is-playing .reels__scrim { opacity: 0; }
.reels__video.is-playing .reels__play { opacity: 0; transform: scale(.7); pointer-events: none; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .reels__cf { --cf-persp: 1200px; --n1-x: 54%; --n1-scale: .80; }
}
@media (max-width: 900px) {
  /* la sección apila columnas */
  .reels__inner { flex-direction: column; gap: 40px; padding: 60px 0; }
  .reels__left { max-width: none; }
  .reels__cf {
    --cf-persp: 1000px;
    --cf-card-w: clamp(220px, 42vw, 280px);
    --n1-x: 50%; --n1-z: -160px; --n1-rot: 32deg; --n1-scale: .84; --n1-blur: 1px;
  }
  /* mostrar solo activa + 1 vecina: ocultar lejanas */
  .reels__cf-track .reels__video[data-offset="2"],
  .reels__cf-track .reels__video[data-offset="-2"] { opacity: 0; pointer-events: none; }
}
@media (max-width: 600px) {
  .reels__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .reels__title { font-size: 32px; line-height: 1.12; margin-bottom: 18px; }
  .reels__subtitle {
    font-family: var(--font-mont);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--white-75);
    margin-bottom: 26px;
  }
  .reels__cf {
    --cf-persp: 760px;
    --cf-card-w: min(72vw, 290px);
    --n1-x: 46%; --n1-z: -120px; --n1-rot: 26deg; --n1-scale: .86; --n1-blur: 0px; --n1-bri: .40;
  }
  .reels__cf-arrow { display: none; }            /* swipe + dots como gestos primarios */
  .reels__cf-spot { mix-blend-mode: normal; filter: blur(8px); opacity: .5; } /* perf low-end */
  .reels__cf-track .reels__video[data-offset="2"],
  .reels__cf-track .reels__video[data-offset="-2"],
  .reels__cf-track .reels__video[data-offset="3"],
  .reels__cf-track .reels__video[data-offset="-3"] { opacity: 0; pointer-events: none; }
}

/* ============ accesibilidad / motion ============ */
@media (prefers-reduced-motion: reduce) {
  .reels__play-ring { animation: none; }
  .reels__cf-track .reels__video {
    transition: opacity .25s ease, filter .25s ease;
    animation: none;
  }
  /* sin rotateY/translateZ/blur: crossfade + escala leve, todo centrado */
  .reels__cf-track .reels__video[data-offset="0"] { transform: translate(-50%, -50%) scale(1); filter: none; }
  .reels__cf-track .reels__video[data-offset="1"],
  .reels__cf-track .reels__video[data-offset="-1"] { transform: translate(-50%, -50%) scale(.92); filter: brightness(.5); }
  .reels__cf-track .reels__video[data-offset="2"],
  .reels__cf-track .reels__video[data-offset="-2"] { transform: translate(-50%, -50%) scale(.84); filter: brightness(.35); opacity: .4; }
  .reels__cf-track .reels__video[data-offset="0"]::after { animation: none; }
  .reels__cf-spot { animation: none; }
  .reels__cf:not(.is-in) .reels__cf-track .reels__video { opacity: 1; transform: translate(-50%, -50%); }
}