/* =========================================================
   1pit - Frases con scroll
   ========================================================= */

.onepit-rev{
  --r-apagado:rgba(255,255,255,.26);
  --r-encendido:#FFFFFF;
  --op-acento:#FC5601;
  --op-marco-color:#05070D;
  --op-marco:0px;
  --op-radio:0px;
  --onepit-veo:.55;

  position:relative;
  background:var(--op-marco-color);
  padding:0 var(--op-marco);
  font-family:var(--op-fuente-texto, "Inter", system-ui, sans-serif);
  /* sin overflow: rompe position:sticky */
}
.onepit-rev *{box-sizing:border-box}

/* La pista da la altura de scroll; la pantalla se queda fija dentro */
.onepit-rev-pista{position:relative}
.onepit-rev-pantalla{
  position:sticky;top:var(--op-marco);
  height:calc(100svh - var(--op-marco) * 2);
  display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
  border-radius:var(--op-radio);
}

.onepit-rev .onepit-fondo{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:#05070D center/cover no-repeat;
}
.onepit-rev .onepit-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.onepit-rev .onepit-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,.55), rgba(5,7,13,.75));
  opacity:var(--onepit-veo);
}

/* barra de progreso pegada al borde superior */
.onepit-rev-barra{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:5;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}
.onepit-rev-barra span{
  display:block;height:100%;width:0%;
  background:var(--op-acento);
  transform-origin:left center;
}

.onepit-rev-inner{
  position:relative;z-index:2;
  width:100%;max-width:1180px;margin:0 auto;
  padding:0 22px;
}

.onepit-rev-etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 14px;border-radius:4px;
  margin:0 0 26px;
}
.onepit-rev-punto{
  width:8px;height:8px;border-radius:2px;
  background:var(--op-acento);flex:none;
}

.onepit-rev-contador{
  font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  font-size:12px;letter-spacing:.16em;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:8px 18px;
  display:inline-block;
  margin:0 0 28px;
}
.onepit-rev-actual{color:#fff}
.onepit-rev-sep{margin:0 8px;opacity:.5}

/* frases apiladas: solo una visible a la vez */
.onepit-rev-frases{position:relative}
.onepit-rev-frase{
  font-family:var(--op-fuente-titulo, "Sora", system-ui, sans-serif);
  font-weight:var(--op-peso-titulo, 600);letter-spacing:-.03em;line-height:1.14;
  font-size:var(--op-titulo, clamp(27px,6.6vw,54px));
  margin:0;max-width:20ch;
  color:var(--r-apagado);
  opacity:0;pointer-events:none;
  position:absolute;top:0;left:0;right:0;
  transition:opacity .35s ease;
}
.onepit-rev-frase:first-child{position:relative}
.onepit-rev-frase.is-activa{opacity:1;pointer-events:auto}

.onepit-rev-w{
  color:var(--r-apagado);
  transition:color .18s linear;
}
.onepit-rev-w.on{color:var(--r-encendido)}

/* ---------- editor ---------- */
.onepit-rev.is-editor{
  position:relative;min-height:auto;padding:40px 0;overflow:hidden;
}
.onepit-rev.is-editor .onepit-rev-frase{
  position:relative;opacity:1;color:var(--r-encendido);
  font-size:clamp(22px,3.4vw,34px);margin-bottom:18px;
}
.onepit-rev.is-editor .onepit-rev-nota{
  margin-top:20px;font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

@media (prefers-reduced-motion:reduce){
  .onepit-rev-pantalla{position:relative;height:auto;padding:60px 0}
  .onepit-rev-frase{position:relative;opacity:1;margin-bottom:26px}
  .onepit-rev-w{color:var(--r-encendido)}
}

/* =========================================================
   Fondo heredado del hero + degradado de salida
   ========================================================= */

.onepit-rev{
  --op-fade-alto:34%;
  --op-fade-int:1;
  --op-fade-color:#05070D;
}

/* La seccion y su pantalla se vuelven transparentes: el marco lo
   pinta la sombra del hueco, y detras queda la capa fija del hero */
/* Solo cuando existe la capa fija del hero (la marca el JS con
   .hay-capa) la seccion se vuelve transparente. Si no, conserva
   su propio fondo y nunca queda en negro. */
.onepit-rev.usa-fondo-hero.hay-capa{
  background:transparent;
  overflow:clip;            /* recorta la sombra sin romper el sticky */
}

.onepit-rev.usa-fondo-hero:not(.con-marco){
  --op-marco:0px !important;
  --op-radio:0px !important;
  padding:0 !important;
}
.onepit-rev.usa-fondo-hero:not(.con-marco) .onepit-hueco{display:none}
.onepit-rev.usa-fondo-hero.hay-capa .onepit-rev-pantalla{
  background:transparent;
  overflow:visible;
}
.onepit-rev.usa-fondo-hero.hay-capa .onepit-fondo{display:none}

/* Sin capa fija, los elementos de la ventana sobran */
.onepit-rev:not(.hay-capa) .onepit-hueco,
.onepit-rev:not(.hay-capa) .onepit-velo-suelto{display:none}

/* Ventana: pinta el marco y recorta las esquinas */
.onepit-rev.usa-fondo-hero.hay-capa .onepit-hueco{
  position:absolute;
  inset:0;
  border-radius:var(--op-radio);
  box-shadow:0 0 0 100vmax var(--op-marco-color);
  z-index:2;
  pointer-events:none;
}

/* El velo de oscurecimiento, recortado a la ventana */
.onepit-rev.usa-fondo-hero.hay-capa .onepit-velo-suelto{
  position:absolute;
  inset:0;
  border-radius:var(--op-radio);
  background:linear-gradient(180deg, rgba(5,7,13,.55), rgba(5,7,13,.75));
  opacity:var(--onepit-veo);
  z-index:1;
  pointer-events:none;
}

/* Degradado al pie: cierra la transicion hacia la siguiente seccion */
.onepit-rev .onepit-fade{
  position:absolute;
  left:0;right:0;bottom:0;
  height:var(--op-fade-alto);
  border-radius:0 0 var(--op-radio) var(--op-radio);
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--op-fade-color) 55%, transparent) 58%,
    var(--op-fade-color) 100%);
  opacity:var(--op-fade-int);
  z-index:3;
  pointer-events:none;
}

/* El contenido va por encima de todo lo anterior */
.onepit-rev .onepit-rev-inner{z-index:4}
.onepit-rev .onepit-rev-barra{z-index:5}

/* En el editor no hay capa fija */
.onepit-rev.is-editor .onepit-hueco,
.onepit-rev.is-editor .onepit-velo-suelto{display:none}
.onepit-rev.is-editor .onepit-fade{height:60px}

/* Con capa continua, el degradado lo hace la capa al hacer scroll:
   el que va dentro del panel sobra y marcaria el borde inferior. */
.onepit-rev.hay-capa .onepit-fade{display:none}