/* =========================================================
   1pit - Hero (tarjeta enmarcada)
   ========================================================= */

.onepit-hero{
  --op-acento:#FC5601;
  --op-marco-color:#05070D;
  --op-marco:0px;
  --op-radio:0px;
  --op-alto:100svh;
  --op-veo:.45;
  --op-tit-x:0px;
  --op-tit-y:0px;
  --op-btn-x:0px;
  --op-btn-y:0px;

  position:relative;
  background:var(--op-marco-color);
  padding:var(--op-marco);
  font-family:var(--op-fuente-texto, "Inter", system-ui, sans-serif);
  overflow:hidden;          /* nunca desborda a los lados */
}
.onepit-hero *{box-sizing:border-box}

/* La tarjeta */
.onepit-tarjeta{
  position:relative;
  width:100%;
  min-height:calc(var(--op-alto) - var(--op-marco) * 2 - var(--wp-admin--admin-bar--height, 0px));
  border-radius:var(--op-radio);
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:flex-end;
  background:#05070D;
  will-change:clip-path;
}

/* fondo */
.onepit-hero .onepit-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.onepit-hero .onepit-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.onepit-hero .onepit-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,.18) 0%, rgba(5,7,13,.52) 58%, rgba(5,7,13,.90) 100%);
  opacity:var(--op-veo);
}

/* contenido */
.onepit-hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,5vw,48px) clamp(34px,6svh,68px);
}

.onepit-hero .onepit-t{
  translate:var(--op-tit-x) var(--op-tit-y);
  font-family:var(--op-fuente-titulo, "Sora", system-ui, sans-serif);
  font-weight:var(--op-peso-titulo, 800);letter-spacing:-.045em;line-height:1.0;
  font-size:clamp(36px,9.6vw,96px);
  margin:0;color:#fff;
}
.onepit-hero .onepit-fija{display:block}
.onepit-hero .onepit-slot{
  display:block;position:relative;
  color:var(--op-acento);
  min-height:1.04em;
  /* sin nowrap: evita que el bloque empuje el ancho de la pagina */
  overflow:hidden;
}
.onepit-hero .onepit-word{display:inline-block;white-space:nowrap}
.onepit-hero .onepit-word .char{display:inline-block;will-change:transform,opacity}
.onepit-hero .onepit-caret{
  display:inline-block;width:.10em;height:.68em;
  background:var(--op-acento);margin-left:.10em;vertical-align:-.02em;
  border-radius:1px;
  animation:onepitBlink 1.1s steps(1) infinite;
}
@keyframes onepitBlink{50%{opacity:0}}

/* ---------- boton (estilos en base.css) ---------- */
.onepit-cta-wrap{
  margin:clamp(26px,5svh,44px) 0 0;
  translate:var(--op-btn-x) var(--op-btn-y);
}

/* ---------- editor ---------- */
.onepit-hero.is-editor .onepit-t,
.onepit-hero.is-editor .onepit-cta-wrap{translate:none}
.onepit-hero.is-editor .onepit-tarjeta{
  min-height:400px;align-items:center;
  background-size:cover;background-position:center;
}
.onepit-hero.is-editor .onepit-t{font-size:clamp(30px,4.6vw,52px)}
.onepit-hero.is-editor .onepit-hero-inner{padding:34px 26px}
.onepit-hero.is-editor .op-btn-txt{padding:12px 18px;font-size:11px}
.onepit-hero.is-editor .op-btn-caja{width:42px;border-radius:14px}

@media (max-width:600px){
  .onepit-hero-inner{padding-bottom:clamp(30px,5svh,52px)}
}

@media (prefers-reduced-motion:reduce){
  .onepit-hero .onepit-caret{display:none}
  .onepit-hero video.onepit-media{display:none}
}

/* =========================================================
   Fondo continuo: el video queda fijo detras de todo y las
   secciones 1 y 2 abren una ventana para dejarlo ver.
   ========================================================= */

/* La capa deja de estar dentro de la tarjeta y pasa a la ventana */
.onepit-hero.es-continuo{
  overflow:clip;            /* recorta la sombra del marco */
  background:transparent;   /* la capa fija vive fuera, detras de todo */
}

/* ---------------------------------------------------------
   Carga: el hero permanece oculto sobre fondo solido hasta
   que las tipografias y el primer cuadro del video estan
   listos. Evita la sensacion de doble carga.
   --------------------------------------------------------- */
.onepit-hero[data-cargando="1"] .onepit-tarjeta,
.onepit-hero[data-cargando="1"] ~ * .onepit-fondo-fijo,
.onepit-fondo-fijo[data-cargando="1"]{
  visibility:hidden;
}
.onepit-hero[data-cargando="1"]{
  background:var(--op-marco-color,#05070D) !important;
}
.onepit-hero[data-cargando="1"] .onepit-hueco{visibility:hidden}

/* Sin marco salvo que se active expresamente. El !important gana
   incluso a un valor guardado en el atributo style del bloque. */
.onepit-hero.es-continuo:not(.con-marco){
  --op-marco:0px !important;
  --op-radio:0px !important;
  padding:0 !important;
}
/* La capa se cuelga del <body>: fija, detras de todo */
.onepit-fondo-fijo{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.onepit-fondo-fijo .onepit-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* Capa de salida: oscurece el video al color de la siguiente
   seccion antes de llegar a ella, para que no se note el corte */
.onepit-capa-solida{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  z-index:3;
}

.onepit-capa-salida{
  position:absolute;
  left:0;right:0;bottom:0;
  height:45%;
  opacity:0;
  pointer-events:none;
  z-index:2;
}

.onepit-fondo-fijo .onepit-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,.18) 0%, rgba(5,7,13,.52) 58%, rgba(5,7,13,.90) 100%);
  opacity:var(--op-veo,.45);
}

/* La tarjeta se vuelve transparente para que el video se vea */
.onepit-hero.es-continuo .onepit-tarjeta{
  background:transparent;
  overflow:hidden;          /* recorta el contenido a la ventana */
  z-index:3;                /* el texto va sobre el marco */
}

/* El hueco pinta el marco y recorta las esquinas redondeadas:
   la sombra solida cubre todo lo que queda fuera del rectangulo */
.onepit-hero.es-continuo .onepit-hueco{
  position:absolute;
  inset:var(--op-marco);
  border-radius:var(--op-radio);
  box-shadow:0 0 0 100vmax var(--op-marco-color);
  z-index:2;
  pointer-events:none;
}

/* El contenido va por encima del hueco */
.onepit-hero.es-continuo .onepit-hero-inner{z-index:1}

/* En el editor no hay capa fija */
.onepit-hero.is-editor .onepit-fondo-fijo{position:absolute}
.onepit-hero.is-editor .onepit-hueco{display:none}

@media (prefers-reduced-motion:reduce){
  .onepit-hero.es-continuo video.onepit-media{display:none}
}