.wcb-banners {
  clear: both;
  display: grid;
  gap: 12px;
  margin: 12px 0 18px;
  width: 100%;
}

.wcb-banner {
  align-items: center;
  background: linear-gradient(135deg, var(--wcb-bg1), var(--wcb-bg2));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--wcb-radius);
  box-shadow: 0 10px 26px rgba(5, 13, 45, .17);
  box-sizing: border-box;
  color: var(--wcb-text);
  display: grid;
  font-family: var(--wcb-font);
  gap: 14px;
  grid-template-areas: "copy countdown" "button button";
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--wcb-height-d);
  overflow: hidden;
  padding: var(--wcb-padding-d);
  position: relative;
  width: var(--wcb-width-d);
}

.wcb-banner[hidden] { display: none !important; }

.wcb-banner::before {
  background: radial-gradient(circle, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 68%);
  content: "";
  height: 190px;
  pointer-events: none;
  position: absolute;
  right: -70px;
  top: -100px;
  width: 190px;
}

.wcb-copy,
.wcb-countdown,
.wcb-actions { position: relative; z-index: 1; }
.wcb-copy { grid-area: copy; min-width: 0; }
.wcb-countdown { grid-area: countdown; }
.wcb-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-area: button;
  justify-self: start;
}

.wcb-title {
  color: var(--wcb-text) !important;
  font-family: inherit !important;
  font-size: var(--wcb-title-d) !important;
  font-weight: 900 !important;
  letter-spacing: -.45px;
  line-height: 1.05 !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  text-transform: uppercase;
}

.wcb-subtitle {
  color: var(--wcb-text) !important;
  font-family: inherit;
  font-size: var(--wcb-subtitle-d) !important;
  line-height: 1.35;
  margin: 0 !important;
  opacity: .84;
}

.wcb-countdown {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(47px, 1fr));
}

.wcb-unit { text-align: center; }

.wcb-unit strong {
  align-items: center;
  background: var(--wcb-unit-bg);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: var(--wcb-unit-text);
  display: flex;
  font-family: inherit;
  font-size: var(--wcb-counter-d);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 47px;
  padding: 7px 5px;
}

.wcb-unit span {
  color: var(--wcb-accent);
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1;
  margin-top: 5px;
}

.wcb-button {
  align-items: center;
  background: var(--wcb-button-bg);
  border-radius: 9px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
  color: var(--wcb-button-text) !important;
  display: inline-flex;
  font-size: var(--wcb-button-d);
  font-weight: 900;
  gap: 7px;
  justify-content: center;
  line-height: 1;
  padding: 11px 15px;
  text-decoration: none !important;
  transition: transform .18s ease, filter .18s ease;
}

.wcb-button span { color: var(--wcb-accent); }
.wcb-button:hover,
.wcb-button:focus { color: var(--wcb-button-text) !important; filter: brightness(1.1); transform: translateY(-1px); }


/* 01 · Gamer dividido clásico */
.wcb-layout-01 { grid-template-areas: "copy countdown" "button button"; }

/* 02 · Dividido invertido */
.wcb-layout-02 { grid-template-areas: "countdown copy" "button button"; grid-template-columns: auto minmax(0,1fr); }
.wcb-layout-02 .wcb-copy { text-align: right; }
.wcb-layout-02 .wcb-actions { justify-self: end; }

/* 03 · Centro vertical */
.wcb-layout-03 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-03 .wcb-countdown { justify-self: center; }
.wcb-layout-03 .wcb-actions { justify-self: center; }

/* 04 · Vertical izquierda */
.wcb-layout-04 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; }
.wcb-layout-04 .wcb-countdown { justify-self: start; }

/* 05 · Vertical derecha */
.wcb-layout-05 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: right; }
.wcb-layout-05 .wcb-countdown,
.wcb-layout-05 .wcb-actions { justify-self: end; }

/* 06 · Título superior y acciones inferiores */
.wcb-layout-06 { grid-template-areas: "copy copy" "countdown button"; grid-template-columns: 1fr auto; }
.wcb-layout-06 .wcb-actions { justify-self: end; }

/* 07 · Título superior y CTA ancho */
.wcb-layout-07 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-07 .wcb-countdown { justify-self: center; }
.wcb-layout-07 .wcb-actions { justify-self: stretch; }
.wcb-layout-07 .wcb-button { flex: 1 1 160px; }

/* 08 · Contador arriba */
.wcb-layout-08 { grid-template-areas: "countdown" "copy" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-08 .wcb-countdown,
.wcb-layout-08 .wcb-actions { justify-self: center; }

/* 09 · Botón arriba */
.wcb-layout-09 { grid-template-areas: "button" "copy" "countdown"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-09 .wcb-actions,
.wcb-layout-09 .wcb-countdown { justify-self: center; }

/* 10 · Contador 2 × 2 */
.wcb-layout-10 { grid-template-areas: "copy countdown" "button countdown"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-10 .wcb-countdown { grid-template-columns: repeat(2, minmax(54px,1fr)); }

/* 11 · Franja horizontal */
.wcb-layout-11 { grid-template-areas: "copy countdown button"; grid-template-columns: minmax(0,1fr) auto auto; min-height: 0; }
.wcb-layout-11 .wcb-title { font-size: calc(var(--wcb-title-d) * .82) !important; }
.wcb-layout-11 .wcb-unit strong { min-height: 39px; }
.wcb-layout-11 .wcb-actions { justify-self: end; }

/* 12 · Tarjeta central premium */
.wcb-layout-12 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-12 .wcb-copy { margin: 0 auto; max-width: 90%; }
.wcb-layout-12 .wcb-countdown { background: rgba(255,255,255,.1); border-radius: 14px; justify-self: center; padding: 10px; }
.wcb-layout-12 .wcb-actions { justify-self: center; }
.wcb-layout-12 .wcb-button { border-radius: 999px; padding-left: 24px; padding-right: 24px; }

/* 13 · Texto y botón juntos */
.wcb-layout-13 { grid-template-areas: "copy countdown" "copy button"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-13 .wcb-actions { justify-self: stretch; }
.wcb-layout-13 .wcb-button { flex: 1 1 150px; }

/* 14 · Título centrado y botón derecho */
.wcb-layout-14 { grid-template-areas: "copy copy" "countdown button"; grid-template-columns: 1fr auto; }
.wcb-layout-14 .wcb-copy { text-align: center; }
.wcb-layout-14 .wcb-actions { justify-self: end; }

/* 15 · CTA ancho inferior */
.wcb-layout-15 { grid-template-areas: "copy countdown" "button button"; }
.wcb-layout-15 .wcb-actions { justify-self: stretch; }
.wcb-layout-15 .wcb-button { flex: 1 1 160px; }

/* 16 · Contador lateral izquierdo */
.wcb-layout-16 { grid-template-areas: "countdown copy" "countdown button"; grid-template-columns: auto minmax(0,1fr); }
.wcb-layout-16 .wcb-countdown { grid-template-columns: repeat(2, minmax(52px,1fr)); }

/* 17 · Contador lateral derecho */
.wcb-layout-17 { grid-template-areas: "copy countdown" "button countdown"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-17 .wcb-countdown { grid-template-columns: repeat(2, minmax(52px,1fr)); }

/* 18 · Editorial */
.wcb-layout-18 { grid-template-areas: "copy" "button" "countdown"; grid-template-columns: 1fr; }
.wcb-layout-18 .wcb-title { font-size: calc(var(--wcb-title-d) * 1.22) !important; max-width: 90%; }
.wcb-layout-18 .wcb-countdown { justify-self: stretch; }

/* 19 · Escalonado */
.wcb-layout-19 { grid-template-areas: "copy countdown" "button countdown"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-19 .wcb-copy { transform: translateY(-5px); }
.wcb-layout-19 .wcb-actions { transform: translateX(18px); }
.wcb-layout-19 .wcb-countdown { transform: translateY(5px); }

/* 20 · Minimalista centrado */
.wcb-layout-20 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-20::before { display: none; }
.wcb-layout-20 .wcb-countdown,
.wcb-layout-20 .wcb-actions { justify-self: center; }
.wcb-layout-20 .wcb-unit strong { background: transparent; border-color: var(--wcb-accent); color: var(--wcb-text); }

/* 21 · Minimalista izquierdo */
.wcb-layout-21 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; }
.wcb-layout-21::before { display: none; }
.wcb-layout-21 .wcb-countdown { justify-self: start; }
.wcb-layout-21 .wcb-unit strong { background: transparent; border-color: var(--wcb-accent); color: var(--wcb-text); }

/* 22 · Minimalista derecho */
.wcb-layout-22 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: right; }
.wcb-layout-22::before { display: none; }
.wcb-layout-22 .wcb-countdown,
.wcb-layout-22 .wcb-actions { justify-self: end; }
.wcb-layout-22 .wcb-unit strong { background: transparent; border-color: var(--wcb-accent); color: var(--wcb-text); }

/* 23 · Contador grande */
.wcb-layout-23 { grid-template-areas: "countdown" "copy" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-23 .wcb-countdown,
.wcb-layout-23 .wcb-actions { justify-self: center; }
.wcb-layout-23 .wcb-unit strong { font-size: calc(var(--wcb-counter-d) * 1.32); min-height: 62px; min-width: 62px; }

/* 24 · Título gigante */
.wcb-layout-24 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; }
.wcb-layout-24 .wcb-title { font-size: calc(var(--wcb-title-d) * 1.42) !important; letter-spacing: -1px; }
.wcb-layout-24 .wcb-countdown { justify-self: start; }

/* 25 · Botón protagonista */
.wcb-layout-25 { grid-template-areas: "copy button" "countdown button"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-25 .wcb-actions { align-self: stretch; }
.wcb-layout-25 .wcb-button { align-self: stretch; border-radius: 14px; font-size: calc(var(--wcb-button-d) * 1.15); min-width: 115px; }

/* 26 · Contador vertical */
.wcb-layout-26 { grid-template-areas: "copy countdown" "button countdown"; grid-template-columns: minmax(0,1fr) auto; }
.wcb-layout-26 .wcb-countdown { grid-template-columns: 1fr; }
.wcb-layout-26 .wcb-unit { align-items: center; display: grid; gap: 5px; grid-template-columns: 48px 34px; }
.wcb-layout-26 .wcb-unit strong { min-height: 34px; }
.wcb-layout-26 .wcb-unit span { margin: 0; text-align: left; }

/* 27 · Texto superior y contador 2 × 2 */
.wcb-layout-27 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-27 .wcb-countdown { grid-template-columns: repeat(2, minmax(70px,1fr)); justify-self: center; }
.wcb-layout-27 .wcb-actions { justify-self: center; }

/* 28 · Tres columnas */
.wcb-layout-28 { grid-template-areas: "copy countdown button"; grid-template-columns: minmax(0,1fr) auto auto; }
.wcb-layout-28 .wcb-actions { justify-self: end; }

/* 29 · Marco brillante */
.wcb-layout-29 { border: 2px solid var(--wcb-accent); grid-template-areas: "copy countdown" "button button"; box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.25); }
.wcb-layout-29 .wcb-button { border: 1px solid var(--wcb-accent); }

/* 30 · Evento cinematográfico */
.wcb-layout-30 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; text-align: center; }
.wcb-layout-30::after { background: linear-gradient(90deg, transparent, var(--wcb-accent), transparent); content: ""; height: 2px; left: 12%; opacity: .8; position: absolute; top: 12px; width: 76%; }
.wcb-layout-30 .wcb-title { font-size: calc(var(--wcb-title-d) * 1.22) !important; letter-spacing: 1px; }
.wcb-layout-30 .wcb-countdown { justify-self: center; }
.wcb-layout-30 .wcb-actions { justify-self: stretch; }
.wcb-layout-30 .wcb-button { flex: 1 1 160px; text-transform: uppercase; }

@media (max-width: 760px) {
  .wcb-layout-11,
  .wcb-layout-28 { grid-template-areas: "copy" "countdown" "button"; grid-template-columns: 1fr; }
  .wcb-layout-11 .wcb-countdown,
  .wcb-layout-28 .wcb-countdown { justify-self: start; }
  .wcb-layout-11 .wcb-actions,
  .wcb-layout-28 .wcb-actions { justify-self: start; }
}

@media (min-width: 550px) {
  .wcb-banner.wcb-hide-desktop { display: none !important; }
}

@media (max-width: 549px) {
  .wcb-banners { margin: 10px 0 15px; }

  .wcb-banner {
    gap: 12px;
    grid-template-areas: "copy" "countdown" "button" !important;
    grid-template-columns: 1fr !important;
    min-height: var(--wcb-height-m);
    padding: var(--wcb-padding-m);
    width: var(--wcb-width-m);
  }

  .wcb-copy { text-align: center !important; transform: none !important; }
  .wcb-title { font-size: var(--wcb-title-m) !important; }
  .wcb-subtitle { font-size: var(--wcb-subtitle-m) !important; }

  .wcb-countdown {
    gap: 5px;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    justify-self: stretch !important;
    padding: 0 !important;
    transform: none !important;
    width: 100%;
  }

  .wcb-unit { display: block !important; }
  .wcb-unit strong {
    border-radius: 8px;
    font-size: var(--wcb-counter-m) !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 6px 3px;
  }
  .wcb-unit span { font-size: 7px; margin-top: 5px !important; text-align: center !important; }

  .wcb-banner.wcb-hide-mobile { display: none !important; }

  .wcb-actions {
    justify-self: stretch !important;
    transform: none !important;
    width: 100%;
  }

  .wcb-button {
    align-self: auto !important;
    flex: 1 1 130px;
    font-size: var(--wcb-button-m) !important;
    min-width: 0 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wcb-button { transition: none; }
}