/* =========================================================
   1pit - Estilos compartidos
   Boton de dos piezas partidas por un corte diagonal.
   Los recortes usan preserveAspectRatio="none" para que la
   diagonal no se deforme al cambiar de tamano.
   ========================================================= */

:root{
  --op-caja: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2256%22%20viewBox%3D%220%200%2060%2056%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%200H46a14%2014%200%200%201%2014%2014v28a14%2014%200%200%201-14%2014H6a6%206%200%200%201-5.6-8.1L10%203.6A6%206%200%200%201%2014%200Z%22%2F%3E%3C%2Fsvg%3E");
  /* espejo disponible por si se requiere */
  --op-caja-inv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2256%22%20viewBox%3D%220%200%2060%2056%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M44%200H14A14%2014%200%200%200%200%2014v28a14%2014%200%200%200%2014%2014h35.4a10.6%2010.6%200%200%200%2010.3-13.2L54.4%208A10.6%2010.6%200%200%200%2044%200Z%22%2F%3E%3C%2Fsvg%3E");
  --op-punta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2256%22%20viewBox%3D%220%200%2022%2056%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%200h16a6%206%200%200%201%205.6%208.1L13%2052.4A6%206%200%200%201%207.4%2056H0Z%22%2F%3E%3C%2Fsvg%3E");
  --op-punta-inv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2256%22%20viewBox%3D%220%200%2022%2056%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M22%200h-6.6L5.3%2042.8A10.6%2010.6%200%200%200%2015.6%2056H22V0Z%22%2F%3E%3C%2Fsvg%3E");
}

.op-btn{
  --op-btn-h:56px;
  --op-btn-w:60px;
  --op-punta-w:22px;
  --op-btn-sep:8px;

  display:inline-flex;align-items:stretch;
  gap:0;
  text-decoration:none;
  font-family:var(--op-fuente-etiqueta, "IBM Plex Mono", monospace);
  font-weight:var(--op-peso-etiqueta, 500);
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- pieza 1: pastilla con punta inclinada ---------- */
.op-btn-txt{
  position:relative;
  display:inline-flex;align-items:center;
  height:var(--op-btn-h);
  padding:0 6px 0 30px;
  margin-right:calc(var(--op-punta-w) - 11px);
  background:var(--op-btn-fondo,#141C24);
  color:var(--op-btn-texto,#FFFFFF);
  font-size:13px;letter-spacing:.17em;text-transform:uppercase;
  white-space:nowrap;
  border-radius:calc(var(--op-btn-h) / 2) 0 0 calc(var(--op-btn-h) / 2);
  transition:background .35s cubic-bezier(.33,1,.68,1),
             color .35s cubic-bezier(.33,1,.68,1);
}

/* la punta: continua la pastilla y cierra en diagonal */
.op-btn-txt::after{
  content:"";
  position:absolute;top:0;right:calc(-1 * var(--op-punta-w));
  width:var(--op-punta-w);height:100%;
  background:var(--op-btn-fondo,#141C24);
  -webkit-mask:var(--op-punta) no-repeat center/100% 100%;
  mask:var(--op-punta) no-repeat center/100% 100%;
  transition:background .35s cubic-bezier(.33,1,.68,1);
  pointer-events:none;
}

/* ---------- pieza 2: bloque de la flecha ---------- */
.op-btn-caja{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--op-btn-w);height:var(--op-btn-h);flex:none;
  margin-left:var(--op-btn-sep);
  background:var(--op-acento,#FC5601);
  color:var(--op-btn-fondo,#141C24);

  -webkit-mask:var(--op-caja) no-repeat center/100% 100%;
  mask:var(--op-caja) no-repeat center/100% 100%;

  transform:scale(1);
  transform-origin:center right;
  transition:background .35s cubic-bezier(.33,1,.68,1),
             color .35s cubic-bezier(.33,1,.68,1),
             transform .35s cubic-bezier(.33,1,.68,1);
}
.op-btn-caja svg{display:block}
.op-btn-flecha{display:block;will-change:transform,opacity}

/* =======================================================
   Estado activo: solo se intercambian los colores.
   Las piezas no cambian de lugar ni de forma.
   ======================================================= */
@media (hover:hover){

  /* al retirar el cursor vuelve de golpe */
  .op-btn .op-btn-txt,
  .op-btn .op-btn-txt::after,
  .op-btn .op-btn-caja{ transition-duration:0s }

  .op-btn:hover .op-btn-txt,
  .op-btn:focus-visible .op-btn-txt{
    transition-duration:.35s;
    background:var(--op-acento,#FC5601);
    color:var(--op-btn-fondo,#141C24);
  }
  .op-btn:hover .op-btn-txt::after,
  .op-btn:focus-visible .op-btn-txt::after{
    transition-duration:.35s;
    background:var(--op-acento,#FC5601);
  }

  .op-btn:hover .op-btn-caja,
  .op-btn:focus-visible .op-btn-caja{
    transition-duration:.35s;
    background:var(--op-btn-fondo,#141C24);
    color:var(--op-acento,#FC5601);
    transform:scale(1.05);
  }
}

@media (max-width:480px){
  .op-btn{--op-btn-h:50px;--op-btn-w:54px;--op-punta-w:19px}
  .op-btn-txt{padding:0 5px 0 24px;font-size:11.5px;letter-spacing:.14em}
}

@media (prefers-reduced-motion:reduce){
  .op-btn *{transition:none!important;transform:none!important}
}

/* -----------------------------------------------------------
   Ancho completo, tambien declarado aqui.
   base.css es dependencia de todas las hojas de bloque, asi que
   esta regla no depende del orden de carga del tema.
   ----------------------------------------------------------- */
.onepit-hero,
.onepit-rev,
.onepit-cap,
.onepit-cred,
.onepit-con{
  box-sizing:border-box;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-block:0;
}