/* style.css - Main stylesheet for the theme */
@font-face {
    font-family: 'Martil';
    font-display: swap;
    src: local("Martil-Light"),
         url("/storage/assets/fonts/Martil-Light.woff2") format("woff2"),
         url("/storage/assets/fonts/Martil-Light.woff") format("woff"),
         url("/storage/assets/fonts/Martil-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html {
  font-size: 17.5px;
}

@media (max-width: 640px) {
  html {
    font-size: 16.5px;
  }
}

body {
  margin: 0;
  font-family: 'Martil', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Block Title Styles */
.wpw__title {
  position: relative;
  margin: 0 0 1.2rem;
  padding-bottom: .9rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--fg);
  border-bottom: 2px solid #e5e7eb;
}

.wpw__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 22%;
  height: 3px;
  background: var(--c);
}

@media (max-width: 480px) {

  .wpw__title,
  .wpw__label {
    font-size: 1.2rem;
  }
}

/* =====================================================
   ======= NEW BLOCK TITLE STYLES (bt-01 to bt-20) =======
   ===================================================== */

/* ---- base común ---- */
.bt {
  --to-end: to right;
  /* dirección "hacia el final" (LTR) */
  margin: 0 0 1rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative
}

.bt:dir(rtl) {
  --to-end: to left
}

[dir="rtl"] .bt {
  --to-end: to left
}

/* fallback navegadores sin :dir() */
.bt i {
  flex: none
}

/* 01 · Navy Pro: barra oscura, icono circular dorado, filo inferior */
.bt-01 {
  --bg: #1e2b40;
  --fg: #fff;
  --accent: #f5b301;
  background: var(--bg);
  color: var(--fg);
  padding: 14px 18px;
  border-radius: 10px;
  border-bottom: 3px solid var(--accent)
}

.bt-01 i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: .9rem
}

/* 02 · Underline: línea fina con tramo grueso de acento */
.bt-02 {
  --fg: #1e2b40;
  --accent: #e63946;
  color: var(--fg);
  padding: 6px 2px 12px;
  border-bottom: 1px solid #d9dee7
}

.bt-02 i {
  color: var(--accent)
}

.bt-02::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent)
}

/* 03 · Soft Side: fondo suave y barra lateral gruesa */
.bt-03 {
  --bg: #eaf1ff;
  --fg: #12326b;
  --accent: #2563eb;
  background: var(--bg);
  color: var(--fg);
  padding: 13px 16px;
  border-inline-start: 6px solid var(--accent);
  border-radius: 6px
}

.bt-03 i {
  color: var(--accent)
}



/* 08 · Live Pulse: icono con anillo pulsante + etiqueta LIVE */
.bt-08 {
  --bg: #111;
  --fg: #fff;
  --accent: #ff2d2d;
  background: var(--bg);
  color: var(--fg);
  padding: 13px 18px;
  border-radius: 12px
}

.bt-08 i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  animation: bt-pulse 1.7s infinite
}

.bt-08::after {
  content: "LIVE";
  margin-inline-start: auto;
  font: 800 .68rem/1 system-ui, sans-serif;
  letter-spacing: 1.5px;
  background: var(--accent);
  padding: 5px 9px;
  border-radius: 5px
}

@keyframes bt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 45, 45, .7)
  }

  70% {
    box-shadow: 0 0 0 11px rgba(255, 45, 45, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 45, 45, 0)
  }
}



/* 10 · Outline Dots: icono con marco y línea punteada */
.bt-10 {
  --fg: #1e2b40;
  --accent: #0ea5e9;
  color: var(--fg);
  padding: 8px 0
}

.bt-10 i {
  width: 40px;
  height: 40px;
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .95rem
}

.bt-10::after {
  content: "";
  flex: 1;
  border-top: 2px dotted #b8c2d2
}



/* 14 · Breaking Hazard: amarillo de alerta con franjas */
.bt-14 {
  --bg: #ffd400;
  --fg: #000;
  background: var(--bg);
  color: var(--fg);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 0 0 0;
  padding-inline-start: 14px;
  gap: 12px
}

.bt-14 i {
  font-size: 1.05rem
}

.bt-14 span {
  padding: 13px 0
}

.bt-14::after {
  content: "";
  align-self: stretch;
  width: 64px;
  margin-inline-start: auto;
  background: repeating-linear-gradient(45deg, #000 0 9px, var(--bg) 9px 18px)
}



/* 16 · Tech Glow: oscuro con barra superior degradada y resplandor */
.bt-16 {
  --bg: #0f172a;
  --fg: #fff;
  --accent: #22d3ee;
  background: radial-gradient(160px 70px at 100% 0, rgba(34, 211, 238, .22), transparent), var(--bg);
  color: var(--fg);
  padding: 18px 18px 14px;
  border-radius: 12px;
  overflow: hidden
}

.bt-16::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(var(--to-end), #22d3ee, #6366f1, #ec4899)
}

.bt-16 i {
  color: var(--accent)
}

/* 17 · Corner Brackets: esquinas editoriales */
.bt-17 {
  --fg: #1e2b40;
  --accent: #e63946;
  color: var(--fg);
  padding: 15px 22px
}

.bt-17 i {
  color: var(--accent)
}

.bt-17::before,
.bt-17::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid var(--accent)
}

.bt-17::before {
  inset-block-start: 0;
  inset-inline-start: 0;
  border-inline-end: 0;
  border-block-end: 0
}

.bt-17::after {
  inset-block-end: 0;
  inset-inline-end: 0;
  border-inline-start: 0;
  border-block-start: 0
}

/* 18 · Pastel Soft: tarjeta suave con icono blanco */
.bt-18 {
  --fg: #3b2a6b;
  --accent: #7c3aed;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05));
  background-color: var(--bg, #fde7f3);
  color: var(--fg);
  padding: 12px 16px;
  border-radius: 18px
}

.bt-18 i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--fg);
  display: grid;
  place-items: center;
  font-size: .95rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
}

/* 19 · Center Divider: título centrado con líneas que se desvanecen */
.bt-19 {
  --fg: #1e2b40;
  --accent: #2563eb;
  --line: #9aa7bd;
  color: var(--fg);
  justify-content: center;
  gap: 14px
}

.bt-19 i {
  color: var(--accent)
}

.bt-19::before,
.bt-19::after {
  content: "";
  flex: 1;
  height: 1px
}

.bt-19::before {
  background: linear-gradient(var(--to-end), transparent, var(--line))
}

.bt-19::after {
  background: linear-gradient(var(--to-end), var(--line), transparent)
}

/* 20 · Watermark: bloque profundo con icono gigante de fondo */
.bt-20 {
  --fg: #fff;
  --accent: #5eead4;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
  background-color: var(--bg, #0f766e);
  color: var(--fg);
  padding: 18px 20px 24px;
  border-radius: 14px;
  overflow: hidden
}

.bt-20 i {
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-size: 5.2rem;
  opacity: .14;
  color: var(--fg)
}

.bt-20 span {
  position: relative
}

.bt-20::after {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  bottom: 11px;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: var(--fg)
}

/* ---- tema oscuro (variables globales) ---- */
.bt-d {
  --bg: linear-gradient(90deg, #141e30 0%, #243b55 100%);
  --fg: #fff;
  --line: #DB2725;
  color: var(--fg)
}

/* d01 · Classic Bar: barra con filo rojo e icono circular */
.bt-d01 {
  background: var(--bg);
  padding: 14px 18px;
  border-radius: 10px;
  border-bottom: 3px solid var(--line)
}

.bt-d01 i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .9rem
}

/* d02 · Start Edge: barra lateral roja gruesa */
.bt-d02 {
  background: var(--bg);
  padding: 14px 18px;
  border-inline-start: 6px solid var(--line);
  border-radius: 6px
}

.bt-d02 i {
  color: var(--line)
}

/* d03 · Top Line: línea roja superior */
.bt-d03 {
  background: var(--bg);
  padding: 17px 18px 13px;
  border-radius: 0 0 10px 10px
}

.bt-d03::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line)
}

.bt-d03 i {
  color: var(--line)
}

/* d04 · Underline Segment: tramo rojo sobre filo tenue */
.bt-d04 {
  background: var(--bg);
  padding: 14px 18px 17px;
  border-radius: 10px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14)
}

.bt-d04::after {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--line)
}

.bt-d04 i {
  color: var(--line)
}

/* d05 · Icon Block: bloque rojo sólido con el icono */
.bt-d05 {
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  gap: 14px;
  padding: 0
}

.bt-d05 i {
  align-self: stretch;
  width: 56px;
  display: grid;
  place-items: center;
  background: var(--line);
  color: #fff;
  font-size: 1.05rem
}

.bt-d05 span {
  padding: 14px 0
}

/* d06 · Arrow Ribbon: cinta con punta y filo rojo */
.bt-d06 {
  background: linear-gradient(var(--line), var(--line)) bottom/100% 3px no-repeat, var(--bg);
  width: fit-content;
  min-width: 60%;
  padding: 12px 20px 14px;
  padding-inline-end: 42px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%)
}

.bt-d06:dir(rtl) {
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%)
}

[dir="rtl"] .bt-d06 {
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%)
}

.bt-d06 i {
  color: var(--line)
}

/* d07 · Double Rule: doble filete rojo, centrado */
.bt-d07 {
  background: var(--bg);
  justify-content: center;
  padding: 14px;
  border-block: 4px double var(--line)
}

.bt-d07 i {
  color: var(--line)
}

/* d08 · Center Divider: líneas rojas que se desvanecen a ambos lados */
.bt-d08 {
  background: var(--bg);
  justify-content: center;
  gap: 14px;
  padding: 13px 20px;
  border-radius: 12px
}

.bt-d08 i {
  color: var(--line)
}

.bt-d08::before,
.bt-d08::after {
  content: "";
  flex: 1;
  height: 2px
}

.bt-d08::before {
  background: linear-gradient(var(--to-end), transparent, var(--line))
}

.bt-d08::after {
  background: linear-gradient(var(--to-end), var(--line), transparent)
}

/* d09 · Corner Brackets: esquinas rojas editoriales */
.bt-d09 {
  background: var(--bg);
  padding: 17px 26px;
  border-radius: 4px
}

.bt-d09 i {
  color: var(--line)
}

.bt-d09::before,
.bt-d09::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid var(--line)
}

.bt-d09::before {
  inset-block-start: 7px;
  inset-inline-start: 7px;
  border-inline-end: 0;
  border-block-end: 0
}

.bt-d09::after {
  inset-block-end: 7px;
  inset-inline-end: 7px;
  border-inline-start: 0;
  border-block-start: 0
}

/* d10 · Live Pulse: icono rojo pulsante + etiqueta LIVE */
.bt-d10 {
  background: var(--bg);
  padding: 13px 18px;
  border-radius: 12px
}

.bt-d10 i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  animation: bt-pulse-r 1.7s infinite
}

.bt-d10::after {
  content: "LIVE";
  margin-inline-start: auto;
  font: 800 .68rem/1 system-ui, sans-serif;
  letter-spacing: 1.5px;
  background: var(--line);
  padding: 5px 9px;
  border-radius: 5px
}

@keyframes bt-pulse-r {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, .75)
  }

  70% {
    box-shadow: 0 0 0 11px rgba(219, 39, 37, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, 0)
  }
}

/* d11 · Rail Stripes: franjas rojas verticales al inicio */
.bt-d11 {
  background: var(--bg);
  padding: 14px 18px;
  padding-inline-start: 44px;
  border-radius: 8px;
  overflow: hidden
}

.bt-d11::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 26px;
  background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 9px)
}

.bt-d11 i {
  color: var(--line)
}

/* d12 · Pill Bar Fade: píldora con línea roja que se desvanece */
.bt-d12 {
  background: var(--bg);
  padding: 11px 22px;
  border-radius: 999px
}

.bt-d12 i {
  color: var(--line)
}

.bt-d12::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-inline-start: 6px;
  background: linear-gradient(var(--to-end), var(--line), transparent)
}

/* d13 · Hazard: franjas diagonales rojas al final */
.bt-d13 {
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  padding-inline-start: 16px
}

.bt-d13 i {
  color: var(--line)
}

.bt-d13 span {
  padding: 14px 0
}

.bt-d13::after {
  content: "";
  align-self: stretch;
  width: 70px;
  margin-inline-start: auto;
  background: repeating-linear-gradient(45deg, var(--line) 0 9px, transparent 9px 18px)
}

/* d14 · Glow Underline: filo rojo con resplandor */
.bt-d14 {
  background: var(--bg);
  padding: 14px 18px;
  border-radius: 10px 10px 0 0;
  border-bottom: 3px solid var(--line);
  box-shadow: 0 8px 16px -6px rgba(219, 39, 37, .75)
}

.bt-d14 i {
  color: var(--line);
  filter: drop-shadow(0 0 6px rgba(219, 39, 37, .8))
}

/* d15 · Split Divider: separador vertical rojo entre icono y texto */
.bt-d15 {
  background: var(--bg);
  padding: 12px 18px;
  border-radius: 10px;
  gap: 14px
}

.bt-d15 i {
  padding-inline-end: 14px;
  border-inline-end: 2px solid var(--line);
  color: var(--line);
  font-size: 1.1rem
}

/* d16 · Hex Tag: etiqueta hexagonal con filo rojo */
.bt-d16 {
  background: linear-gradient(var(--line), var(--line)) bottom/100% 3px no-repeat, var(--bg);
  width: fit-content;
  min-width: 55%;
  justify-content: center;
  padding: 13px 34px 15px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%)
}

.bt-d16 i {
  color: var(--line)
}

/* d17 · Marker: subrayado rojo tipo rotulador */
.bt-d17 {
  background: var(--bg);
  padding: 14px 18px;
  border-radius: 10px
}

.bt-d17 i {
  color: var(--line)
}

.bt-d17 span {
  padding: 0 8px;
  background: linear-gradient(transparent 62%, var(--line) 62% 90%, transparent 90%)
}

/* d18 · Dotted Rail: línea roja punteada hasta el final */
.bt-d18 {
  background: var(--bg);
  padding: 13px 18px;
  border-radius: 10px
}

.bt-d18 i {
  color: var(--line)
}

.bt-d18::after {
  content: "";
  flex: 1;
  border-top: 2px dotted var(--line);
  margin-inline-start: 6px
}

/* d19 · Inner Frame: marco rojo interior */
.bt-d19 {
  background: var(--bg);
  padding: 17px 22px;
  border-radius: 8px;
  outline: 2px solid var(--line);
  outline-offset: -7px
}

.bt-d19 i {
  color: var(--line)
}

/* d20 · Watermark: icono gigante rojo tenue de fondo */
.bt-d20 {
  background: var(--bg);
  padding: 5px 20px 20px;
  border-radius: 14px;
  overflow: hidden
}

.bt-d20 i {
  position: absolute;
  inset-inline-end: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  font-size: 5.2rem;
  color: var(--line);
  opacity: .28
}

.bt-d20 span {
  position: relative
}

.bt-d20::after {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  bottom: 11px;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--line)
}

/* ---- tema video (variables globales) ---- */
.bt-v {
  --bg: linear-gradient(90deg, #141e30 0%, #243b55 100%);
  --fg: #fff;
  --line: #DB2725;
  --pop: #FFD400;
  color: var(--fg)
}

/* ---- animaciones ---- */
@keyframes bt-v-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, .8)
  }

  70% {
    box-shadow: 0 0 0 12px rgba(219, 39, 37, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, 0)
  }
}

@keyframes bt-v-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

@keyframes bt-v-shake {

  0%,
  86%,
  100% {
    transform: rotate(0)
  }

  88% {
    transform: rotate(-14deg)
  }

  92% {
    transform: rotate(12deg)
  }

  96% {
    transform: rotate(-8deg)
  }
}

@keyframes bt-v-flicker {

  0%,
  18%,
  22%,
  62%,
  64%,
  100% {
    box-shadow: 0 0 16px rgba(219, 39, 37, .75), inset 0 0 12px rgba(219, 39, 37, .4)
  }

  20%,
  63% {
    box-shadow: 0 0 4px rgba(219, 39, 37, .4), inset 0 0 3px rgba(219, 39, 37, .2)
  }
}

@keyframes bt-v-alert {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, 0), inset 0 0 0 0 rgba(219, 39, 37, 0)
  }

  50% {
    box-shadow: 0 0 20px 2px rgba(219, 39, 37, .8), inset 0 0 24px rgba(219, 39, 37, .45)
  }
}

@media (prefers-reduced-motion:reduce) {

  .bt-v,
  .bt-v *,
  .bt-v::before,
  .bt-v::after {
    animation: none !important
  }
}

/* v01 · LIVE Badge  (icono: fa-solid fa-tower-broadcast) */
.bt-v01 {
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  border-inline-start: 5px solid var(--line)
}

.bt-v01 i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .95rem;
  animation: bt-v-ring 1.7s infinite
}

.bt-v01::after {
  content: "● LIVE";
  margin-inline-start: auto;
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: 1.6px;
  background: var(--line);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  animation: bt-v-blink 1.4s infinite
}

/* v02 · Breaking Strip: etiqueta roja "عاجل" + icono amarillo  (icono: fa-solid fa-bolt) */
.bt-v02 {
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  gap: 14px
}

.bt-v02::before {
  content: "عاجل";
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--line);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .5px
}

.bt-v02 i {
  color: var(--pop);
  filter: drop-shadow(0 0 6px rgba(255, 212, 0, .7));
  animation: bt-v-blink 1.1s infinite
}

.bt-v02 span {
  padding: 14px 0
}

/* v03 · Danger Tape: cinta de peligro arriba y abajo, icono que tiembla  (icono: fa-solid fa-triangle-exclamation) */
.bt-v03 {
  background: var(--bg);
  padding: 22px 18px;
  border-radius: 4px;
  overflow: hidden
}

.bt-v03::before,
.bt-v03::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--pop) 0 10px, #111 10px 20px)
}

.bt-v03::before {
  top: 0
}

.bt-v03::after {
  bottom: 0
}

.bt-v03 i {
  color: var(--pop);
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(255, 212, 0, .6));
  animation: bt-v-shake 2.4s infinite;
  transform-origin: 50% 90%
}

/* v04 · Play Progress: botón play con aro y barra de progreso de video  (icono: fa-solid fa-play) */
.bt-v04 {
  background: var(--bg);
  padding: 12px 16px 18px;
  border-radius: 10px;
  overflow: hidden
}

.bt-v04 i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  animation: bt-v-ring 2s infinite
}

.bt-v04::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(var(--to-end), var(--line) 0 38%, rgba(255, 255, 255, .22) 38%)
}

/* v05 · Film Strip: perforaciones de cinta arriba y abajo  (icono: fa-solid fa-film) */
.bt-v05 {
  background: var(--bg);
  padding: 24px 18px;
  border-radius: 6px
}

.bt-v05::before,
.bt-v05::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, .3) 8px 18px, transparent 18px 26px)
}

.bt-v05::before {
  top: 6px
}

.bt-v05::after {
  bottom: 6px
}

.bt-v05 i {
  color: var(--line);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 7px rgba(219, 39, 37, .85))
}

/* v06 · Neon Flicker: borde rojo neón que parpadea  (icono: fa-solid fa-bolt) */
.bt-v06 {
  background: var(--bg);
  padding: 13px 18px;
  border: 2px solid var(--line);
  border-radius: 12px;
  animation: bt-v-flicker 3.2s infinite
}

.bt-v06 span {
  text-shadow: 0 0 10px rgba(255, 255, 255, .45)
}

.bt-v06 i {
  color: var(--pop);
  filter: drop-shadow(0 0 8px rgba(255, 212, 0, .85))
}

/* v07 · ON AIR: etiqueta flotante parpadeante  (icono: fa-solid fa-video) */
.bt-v07 {
  background: var(--bg);
  padding: 17px 18px 13px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .18);
  margin-top: 12px
}

.bt-v07::before {
  content: "ON AIR";
  position: absolute;
  top: -12px;
  inset-inline-end: 16px;
  font: 800 .68rem/1 system-ui, sans-serif;
  letter-spacing: 1.8px;
  background: var(--line);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(219, 39, 37, .9);
  animation: bt-v-blink 1.2s infinite
}

.bt-v07 i {
  color: var(--pop);
  filter: drop-shadow(0 0 6px rgba(255, 212, 0, .65))
}

/* v08 · Slant Block: bloque rojo con corte diagonal + rayas decorativas  (icono: fa-solid fa-circle-play) */
.bt-v08 {
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  gap: 14px
}

.bt-v08 i {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 28px 0 22px;
  background: var(--line);
  color: #fff;
  font-size: 1.15rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%)
}

.bt-v08 i:dir(rtl) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%)
}

[dir="rtl"] .bt-v08 i {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%)
}

.bt-v08 span {
  padding: 14px 0
}

.bt-v08::after {
  content: "";
  align-self: stretch;
  width: 90px;
  margin-inline-start: auto;
  background: repeating-linear-gradient(-60deg, transparent 0 8px, rgba(219, 39, 37, .6) 8px 11px)
}

/* v09 · Red Alert: borde y resplandor de alarma pulsante  (icono: fa-solid fa-circle-exclamation) */
.bt-v09 {
  background: var(--bg);
  padding: 13px 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  animation: bt-v-alert 1.3s infinite
}

.bt-v09 i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pop);
  color: #111;
  display: grid;
  place-items: center;
  font-size: 1rem;
  animation: bt-v-shake 2.2s infinite
}

/* v10 · Viewfinder REC: esquinas de visor + indicador REC  (icono: fa-solid fa-video) */
.bt-v10 {
  padding: 17px 24px;
  border-radius: 4px;
  background:
    linear-gradient(var(--line), var(--line)) top left/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) top left/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) top right/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) top right/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right/3px 16px no-repeat,
    var(--bg)
}

.bt-v10 i {
  color: var(--pop);
  filter: drop-shadow(0 0 6px rgba(255, 212, 0, .65))
}

.bt-v10::after {
  content: "● REC";
  margin-inline-start: auto;
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: 1.6px;
  color: var(--line);
  animation: bt-v-blink 1s infinite
}

/* ---- tema video claro (variables globales) ---- */
.bt-vl {
  --bg: #fff;
  --fg: #141e30;
  --line: #DB2725;
  --pop: #DB2725;
  color: var(--fg);
  box-shadow: 0 1px 4px rgba(20, 30, 48, .18)
}

@keyframes bt-vl-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, .7)
  }

  70% {
    box-shadow: 0 0 0 12px rgba(219, 39, 37, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, 0)
  }
}

@keyframes bt-vl-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

@keyframes bt-vl-shake {

  0%,
  86%,
  100% {
    transform: rotate(0)
  }

  88% {
    transform: rotate(-14deg)
  }

  92% {
    transform: rotate(12deg)
  }

  96% {
    transform: rotate(-8deg)
  }
}

@keyframes bt-vl-flicker {

  0%,
  18%,
  22%,
  62%,
  64%,
  100% {
    box-shadow: 0 0 14px rgba(219, 39, 37, .55), inset 0 0 10px rgba(219, 39, 37, .2)
  }

  20%,
  63% {
    box-shadow: 0 0 3px rgba(219, 39, 37, .3), inset 0 0 2px rgba(219, 39, 37, .1)
  }
}

@keyframes bt-vl-alert {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(219, 39, 37, 0), inset 0 0 0 0 rgba(219, 39, 37, 0)
  }

  50% {
    box-shadow: 0 0 18px 2px rgba(219, 39, 37, .55), inset 0 0 20px rgba(219, 39, 37, .2)
  }
}

@media (prefers-reduced-motion:reduce) {

  .bt-vl,
  .bt-vl *,
  .bt-vl::before,
  .bt-vl::after {
    animation: none !important
  }
}

/* vl01 */
.bt-vl01 {
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  border-inline-start: 5px solid var(--line)
}

.bt-vl01 i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .95rem;
  animation: bt-vl-ring 1.7s infinite
}

.bt-vl01::after {
  content: "● LIVE";
  margin-inline-start: auto;
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: 1.6px;
  background: var(--line);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  animation: bt-vl-blink 1.4s infinite
}

/* vl02 */
.bt-vl02 {
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  gap: 14px
}

.bt-vl02::before {
  content: "عاجل";
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--line);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .5px
}

.bt-vl02 i {
  color: var(--pop);
  animation: bt-vl-blink 1.1s infinite
}

.bt-vl02 span {
  padding: 14px 0
}

/* vl03 */
.bt-vl03 {
  background: var(--bg);
  padding: 22px 18px;
  border-radius: 4px;
  overflow: hidden
}

.bt-vl03::before,
.bt-vl03::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
  background: repeating-linear-gradient(-45deg, #FFD400 0 10px, #141e30 10px 20px)
}

.bt-vl03::before {
  top: 0
}

.bt-vl03::after {
  bottom: 0
}

.bt-vl03 i {
  color: var(--pop);
  font-size: 1.25rem;
  animation: bt-vl-shake 2.4s infinite;
  transform-origin: 50% 90%
}

/* vl04 */
.bt-vl04 {
  background: var(--bg);
  padding: 12px 16px 18px;
  border-radius: 10px;
  overflow: hidden
}

.bt-vl04 i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  animation: bt-vl-ring 2s infinite
}

.bt-vl04::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(var(--to-end), var(--line) 0 38%, rgba(20, 30, 48, .15) 38%)
}

/* vl05 */
.bt-vl05 {
  background: var(--bg);
  padding: 24px 18px;
  border-radius: 6px
}

.bt-vl05::before,
.bt-vl05::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(219, 39, 37, .5) 8px 18px, transparent 18px 26px)
}

.bt-vl05::before {
  top: 6px
}

.bt-vl05::after {
  bottom: 6px
}

.bt-vl05 i {
  color: var(--line);
  font-size: 1.2rem
}

/* vl06 */
.bt-vl06 {
  background: var(--bg);
  padding: 13px 18px;
  border: 2px solid var(--line);
  border-radius: 12px;
  animation: bt-vl-flicker 3.2s infinite
}

.bt-vl06 i {
  color: var(--pop)
}

/* vl07 */
.bt-vl07 {
  background: var(--bg);
  padding: 17px 18px 13px;
  border-radius: 12px;
  border: 2px solid var(--line);
  margin-top: 12px
}

.bt-vl07::before {
  content: "ON AIR";
  position: absolute;
  top: -12px;
  inset-inline-end: 16px;
  font: 800 .68rem/1 system-ui, sans-serif;
  letter-spacing: 1.8px;
  background: var(--line);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(219, 39, 37, .6);
  animation: bt-vl-blink 1.2s infinite
}

.bt-vl07 i {
  color: var(--pop)
}

/* vl08 */
.bt-vl08 {
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  gap: 14px
}

.bt-vl08 i {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 28px 0 22px;
  background: var(--line);
  color: #fff;
  font-size: 1.15rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%)
}

.bt-vl08 i:dir(rtl) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%)
}

[dir="rtl"] .bt-vl08 i {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%)
}

.bt-vl08 span {
  padding: 14px 0
}

.bt-vl08::after {
  content: "";
  align-self: stretch;
  width: 90px;
  margin-inline-start: auto;
  background: repeating-linear-gradient(-60deg, transparent 0 8px, rgba(219, 39, 37, .6) 8px 11px)
}

/* vl09 */
.bt-vl09 {
  background: var(--bg);
  padding: 13px 18px;
  border: 2px solid var(--line);
  border-radius: 10px;
  animation: bt-vl-alert 1.3s infinite
}

.bt-vl09 i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1rem;
  animation: bt-vl-shake 2.2s infinite
}

/* vl10 */
.bt-vl10 {
  padding: 17px 24px;
  border-radius: 4px;
  background:
    linear-gradient(var(--line), var(--line)) top left/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) top left/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) top right/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) top right/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom left/3px 16px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right/16px 3px no-repeat,
    linear-gradient(var(--line), var(--line)) bottom right/3px 16px no-repeat,
    var(--bg)
}

.bt-vl10 i {
  color: var(--pop)
}

.bt-vl10::after {
  content: "● REC";
  margin-inline-start: auto;
  font: 800 .72rem/1 system-ui, sans-serif;
  letter-spacing: 1.6px;
  color: var(--line);
  animation: bt-vl-blink 1s infinite
}