/**
 * Rediseño de rankings y widgets de body (oct-2026).
 * Shortcode [table disenyo="ranking2|fila|caja|banner" …].
 * Todo bajo .wa para no chocar con el tema.
 */
.wa {
  --wa-navy: #0b2a44;
  --wa-navy2: #0d4f78;
  --wa-cyan: #00b4e6;
  --wa-blue: #0a84c6;
  --wa-sky: #e8f6fc;
  --wa-green: #45c96f;
  --wa-green-dark: #36b35e;
  --wa-ok: #0f9d58;
  --wa-no: #c9372c;
  --wa-line: #d9e7ef;
  --wa-ink: #16191c;
  --wa-muted: #5d6670;
  --wa-titulo: Poppins, system-ui, sans-serif;
  box-sizing: border-box;
  color: var(--wa-ink);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.45;
}

.wa *,
.wa *::before,
.wa *::after {
  box-sizing: inherit;
}

.wa p {
  margin: 0;
}

/* El tema justifica párrafos y listas y da estilo a tablas: aquí no. */
.wa,
.wa p,
.wa li,
.wa td {
  text-align: left;
}

.wa table,
.wa tr,
.wa td {
  border-left: 0;
  border-right: 0;
  background: transparent !important;
}

.wa img {
  max-width: 100%;
}

/* ---------- Piezas comunes ---------- */
.wa-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 52px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  background: #fff;
  color: var(--wa-navy);
  font: 700 12px var(--wa-titulo);
  text-align: center;
}

.wa-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wa-logo--sm {
  width: 64px;
  height: 38px;
  padding: 4px;
}

.wa-lic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 6px;
  border: 1px solid #bfe6cf;
  border-radius: 999px;
  background: #e8f6ee;
  color: var(--wa-ok);
  font: 600 11px Inter, system-ui, sans-serif;
  white-space: nowrap;
}

.wa-lic svg {
  width: 12px;
  height: 12px;
}

.wa-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1e2226;
  color: #fff;
  font: 400 12px/1.4 Inter, system-ui, sans-serif;
  white-space: normal;
}

.wa-lic:hover .wa-tip,
.wa-lic:focus .wa-tip {
  display: block;
}

.wa-nota {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff6db;
  color: #8a6100;
  font: 700 11px Inter, system-ui, sans-serif;
}

.wa-ver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8ff0c4;
  font: 600 10.5px Inter, system-ui, sans-serif;
}

.wa-ver svg {
  width: 11px;
  height: 11px;
}

.wa-legal {
  color: var(--wa-muted);
  font-size: 10.5px;
}

.wa-btn {
  display: block;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--wa-green);
  color: #06321f;
  font: 700 15px var(--wa-titulo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-out;
}

.wa-btn2 {
  display: block;
  padding: 8px 10px;
  border: 1.5px solid #bfe3f2;
  border-radius: 10px;
  background: var(--wa-sky);
  color: var(--wa-blue);
  font: 600 13.5px var(--wa-titulo);
  text-align: center;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .wa-btn:hover,
  [data-lk]:hover .wa-btn,
  [data-lk]:hover .wa-ticket__cta {
    background: var(--wa-green-dark);
  }
}

.wa [data-lk] {
  cursor: pointer;
}

.wa [data-lk]:focus-visible,
.wa button:focus-visible,
.wa a:focus-visible {
  outline: 2px solid var(--wa-cyan);
  outline-offset: 2px;
}

.wa-ticket__codigo {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: .9;
}

.wa-spoiler {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 4px;
  background: #ff5a36;
  color: #fff;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .5px;
}

.wa-spoiler--nuevo { background: #0f9d58; }
.wa-spoiler--exclusivo { background: #8a3ffc; }

/* ---------- Ranking 2 ---------- */
.wa-rk {
  margin: 18px 0;
}

.wa-rk-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(0, 180, 230, .55), transparent 55%), linear-gradient(135deg, var(--wa-navy), var(--wa-navy2));
  box-shadow: 0 10px 24px rgba(11, 42, 68, .25);
  color: #fff;
}

.wa-eyebrow {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(127, 220, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #7fdcff;
  font: 600 11px Inter, system-ui, sans-serif;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.wa-rk-hero__titulo {
  margin: 10px 0 12px;
  font: 700 21px/1.25 var(--wa-titulo);
}

.wa-rk-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wa-rk-hero__badges span {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-size: 12.5px;
}

.wa-rk-hero__link {
  display: inline-block;
  margin-top: 10px;
  color: #7fdcff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.wa-rk-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wa-rk-card {
  position: relative;
  padding: 12px 12px 8px;
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 68, .07);
}

.wa-rk-card.is-top {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #00b4e6, #0a5fa0) border-box;
  box-shadow: 0 8px 22px rgba(0, 132, 198, .18);
}

.wa-rk-card.is-oculta {
  display: none;
}

.wa-rk-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-rk-pos {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #c6e6f3;
  border-radius: 8px;
  background: var(--wa-sky);
  color: var(--wa-navy);
  font: 700 13px var(--wa-titulo);
}

.is-top .wa-rk-pos {
  border: 0;
  background: linear-gradient(135deg, #00b4e6, #0a5fa0);
  color: #fff;
}

.wa-rk-head .wa-logo {
  width: 74px;
  height: 44px;
}

.wa-rk-info {
  flex: 1;
  min-width: 0;
}

.wa-rk-nombre {
  margin-bottom: 3px;
  color: var(--wa-navy);
  font: 700 16px/1.2 var(--wa-titulo);
  overflow-wrap: anywhere;
}

.wa-rk-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.wa-rk-fbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  border: 1.5px solid #bfe3f2;
  border-radius: 999px;
  background: var(--wa-sky);
  color: var(--wa-blue);
  font: 600 12.5px var(--wa-titulo);
  cursor: pointer;
}

.wa-rk-fbtn svg {
  width: 12px;
  height: 12px;
  transition: transform .2s ease-out;
}

.wa-rk-fbtn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Cupón */
.wa-ticket {
  position: relative;
  display: flex;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(0, 180, 230, .35), transparent 60%), linear-gradient(120deg, var(--wa-navy), var(--wa-navy2));
  color: #fff;
}

.wa-ticket__main {
  flex: 1;
  min-width: 0;
  padding: 9px 12px 10px;
}

.wa-ticket__label {
  display: block;
  color: #7fdcff;
  font: 600 9.5px Inter, system-ui, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.wa-ticket__main b {
  display: block;
  margin: 1px 0 2px;
  font: 700 16px/1.25 var(--wa-titulo);
}

.wa-ticket__cta {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  border-left: 2px dashed rgba(11, 42, 68, .35);
  background: var(--wa-green);
  color: #06321f;
  font: 700 15px var(--wa-titulo);
  transition: background-color .15s ease-out;
}

.wa-ticket__cta::before,
.wa-ticket__cta::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.wa-ticket__cta::before { top: -8px; }
.wa-ticket__cta::after { bottom: -8px; }

.wa-rk-card > .wa-legal {
  margin-top: 5px;
}

/* Ficha (desplegable en escritorio, hoja inferior en móvil) */
.wa-ficha {
  margin: 10px -12px -8px;
  border-top: 1px solid var(--wa-line);
  border-radius: 0 0 16px 16px;
  background: #fafcfd;
}

.wa-ficha[hidden] {
  display: none;
}

.wa-ficha__cab {
  display: none;
}

.wa-ficha__top {
  padding: 14px 16px 0;
}

.wa-ideal {
  display: inline-block;
  margin: 0 0 10px !important;
  padding: 4px 10px;
  border: 1px solid #c6e6f3;
  border-radius: 999px;
  background: var(--wa-sky);
  color: var(--wa-navy2);
  font: 600 12.5px var(--wa-titulo);
}

.wa-resumen {
  margin: 0 0 12px !important;
  padding: 10px 12px;
  border-left: 3px solid var(--wa-cyan);
  border-radius: 0 10px 10px 0;
  background: #f4fafd;
  color: #2b3137;
  font-size: 14px;
}

.wa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #d3ebf5;
  border-radius: 8px;
  background: #f2f9fc;
  font-size: 12.5px;
  white-space: nowrap;
}

.wa-si {
  color: var(--wa-ok);
  font-weight: 700;
}

.wa-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.wa-appbtn {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  background: #1e2226;
  color: #fff;
}

.wa-appbtn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.wa-appbtn small {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  opacity: .75;
}

.wa-appbtn strong {
  font: 600 14px/1.2 var(--wa-titulo);
}

.wa-ficha__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 16px;
}

.wa-h4 {
  margin: 0 0 8px;
  color: var(--wa-navy);
  font: 600 14px var(--wa-titulo);
}

.wa-datos {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.wa-datos td {
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid #e4eef3;
  background: none;
  vertical-align: top;
}

.wa-datos td:first-child {
  width: 46%;
  color: var(--wa-muted);
  font-weight: 400;
}

.wa .wa-datos td:last-child {
  font-weight: 500;
  text-align: right;
}

.wa-verify {
  display: inline-block;
  margin-top: 2px;
  color: #14708f;
  font-size: 12px;
  font-weight: 600;
}

.wa-pc {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.wa-pc li {
  display: flex;
  gap: 8px;
  margin: 4px 0;
  padding: 6px 8px;
  border-radius: 8px;
}

.wa-pc li::before {
  font-weight: 700;
}

.wa-pc .is-pro {
  background: #effaf3;
}

.wa-pc .is-pro::before {
  content: "✓";
  color: var(--wa-ok);
}

.wa-pc .is-contra {
  background: #fdf2f1;
}

.wa-pc .is-contra::before {
  content: "✕";
  color: var(--wa-no);
}

.wa-pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.wa-pago {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #d3ebf5;
  border-radius: 6px;
  background: #fff;
  color: #2b3137;
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
}

.wa-pago img {
  /* width/height en el HTML (estilo wa_logo_pago) dan la proporción; auto +
     máximos la mantienen sin deformar. */
  width: auto;
  height: auto;
  max-width: 60px;
  max-height: 20px;
}

.wa-pagos--mini {
  display: inline-flex;
  margin: 0;
  gap: 3px;
  vertical-align: middle;
}

.wa-pagos--mini .wa-pago {
  min-width: 0;
  height: 20px;
  padding: 0 4px;
  border-radius: 4px;
}

.wa-pagos--mini .wa-pago img {
  max-width: 34px;
  max-height: 12px;
}

.wa-juegos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}

.wa-juegos .is-off {
  color: #b7bec5;
  text-decoration: line-through;
}

.wa-bonos {
  padding: 0 16px 16px;
}

.wa-bonos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.wa-bono {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d3ebf5;
  border-left: 4px solid var(--wa-cyan);
  border-radius: 10px;
  background: linear-gradient(90deg, #f4fbfe, #fff);
  color: var(--wa-ink) !important;
  text-decoration: none !important;
}

.wa-bono small {
  display: block;
  color: var(--wa-muted);
  font-size: 11.5px;
}

.wa-bono strong {
  font: 600 14.5px var(--wa-titulo);
}

.wa-bono em {
  display: block;
  margin-top: 1px;
  color: #4a5a66;
  font-size: 11.5px;
  font-style: normal;
}

.wa-bono__ico {
  font-size: 18px;
}

.wa-bono__chev {
  margin-left: auto;
  color: var(--wa-muted);
  font-size: 18px;
}

.wa-ficha__pie {
  display: none;
}

.wa-rk-mas {
  display: block;
  margin: 12px auto 0;
  padding: 9px 18px;
  border: 1.5px solid #bfe3f2;
  border-radius: 999px;
  background: #fff;
  color: var(--wa-blue);
  font: 600 13.5px var(--wa-titulo);
  cursor: pointer;
}

.wa-legal--pie {
  margin-top: 10px !important;
  font-size: 11.5px;
}

/* El tema justifica <p> y <li> con «body .node__content p {… !important}»:
 * hace falta un poco más de peso que esa regla. */
html body .wa p,
html body .wa li {
  text-align: left !important;
}

/* Novedades de {casa} */
.wa-news {
  position: relative;
  overflow: hidden;
  margin: 0 16px 16px;
  padding: 14px;
  border-radius: 16px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(0, 180, 230, .55), transparent 60%), linear-gradient(135deg, #0a5fa0, var(--wa-navy));
  color: #fff;
}

.wa-news__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wa-news__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  font-size: 20px;
}

.wa-news__top strong {
  font: 600 15px var(--wa-titulo);
}

.wa-news__top p {
  margin: 2px 0 0 !important;
  color: #d5f1fb;
  font-size: 12.5px;
}

.wa-news__fila {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.wa-news__fila input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--wa-ink);
  font: 16px Inter, system-ui, sans-serif;
}

.wa-news__fila button {
  flex: none;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--wa-navy);
  font: 700 13.5px var(--wa-titulo);
  cursor: pointer;
}

.wa-news__chk {
  display: block;
  margin-top: 8px;
  color: #bfe6f5;
  font-size: 11px;
  line-height: 1.4;
}

.wa-news__chk a {
  color: #fff !important;
  text-decoration: underline;
}

.wa-news__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wa-news__msg {
  margin: 8px 0 0 !important;
  font-size: 12.5px;
  font-weight: 600;
}

.wa-news__msg:empty {
  display: none;
}

.wa-news__msg.is-error {
  color: #ffd2cc;
}

.wa-news.is-ok .wa-news__fila,
.wa-news.is-ok .wa-news__chk {
  display: none;
}

@media (max-width: 420px) {
  .wa-news__fila {
    flex-direction: column;
  }
}

/* Escritorio: cabecera y cupón en una fila, pero solo si el ranking tiene
 * sitio de verdad (columna estrecha con lateral = sigue apilado). Se mide el
 * ancho de la lista (container query); solo desde 768 px de pantalla, porque
 * un contenedor medido es el bloque de referencia de los position:fixed y en
 * móvil la ficha es una hoja fija. */
@media (min-width: 768px) {
  .wa-rk-list {
    container-type: inline-size;
  }
}

@container (min-width: 660px) {
  .wa-rk-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    column-gap: 16px;
    align-items: center;
    padding: 14px 16px 10px;
  }

  .wa-rk-head {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .wa-ticket {
    grid-column: 2;
    margin-top: 0;
  }

  .wa-rk-card > .wa-legal {
    grid-column: 2;
  }

  .wa-ficha {
    grid-column: 1 / -1;
    margin: 12px -16px -10px;
  }

  .wa-rk-head .wa-logo {
    width: 96px;
    height: 54px;
  }

  .wa-rk-nombre {
    font-size: 18px;
  }
}

/* Móvil: la ficha es una hoja inferior (sigue en el HTML) */
@media (max-width: 767.98px) {
  .wa-ficha:not([hidden]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147482000;
    max-height: 86vh;
    margin: 0;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
    overscroll-behavior: contain;
  }

  .wa-ficha__cab {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: radial-gradient(100% 160% at 100% 0%, rgba(0, 180, 230, .5), transparent 60%), linear-gradient(135deg, var(--wa-navy), var(--wa-navy2));
    color: #fff;
  }

  .wa-ficha__marca {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .wa-ficha__marca strong {
    display: block;
    margin-bottom: 3px;
    font: 600 16px var(--wa-titulo);
  }

  .wa-ficha__cerrar {
    border: 0;
    background: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  .wa-ficha__grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .wa-ficha__pie {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--wa-line);
    background: #fff;
  }

  .wa-ficha__pie > * {
    flex: 1;
  }

  .wa-btn--ghost {
    background: #eef1f3;
    color: var(--wa-ink);
  }

  .wa-fondo {
    position: fixed;
    inset: 0;
    z-index: 2147481999;
    background: rgba(0, 0, 0, .45);
  }

  html.wa-ficha-abierta,
  html.wa-ficha-abierta body {
    overflow: hidden;
  }
}

/* ---------- A) Card horizontal ---------- */
.wa-fila {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 68, .07);
}

.wa-fila__main {
  display: grid;
  grid-template-columns: 1.15fr 1fr 170px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.wa-fila__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wa-fila__nombre {
  margin: 0 0 4px;
  color: var(--wa-navy);
  font: 600 17px/1.2 var(--wa-titulo);
}

.wa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--wa-muted);
  font-size: 11.5px;
}

.wa-oferta {
  padding: 10px 12px;
  border-radius: 12px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(0, 180, 230, .35), transparent 60%), linear-gradient(120deg, var(--wa-navy), var(--wa-navy2));
  color: #fff;
}

.wa-oferta small {
  display: block;
  color: #7fdcff;
  font: 600 9.5px Inter, system-ui, sans-serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.wa-oferta b {
  display: block;
  margin: 2px 0 3px;
  font: 700 16px/1.25 var(--wa-titulo);
}

.wa-fila__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-fila__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 16px;
  border-top: 1px solid var(--wa-line);
  background: #f6f9fb;
}

.wa-por {
  color: var(--wa-muted);
  font-size: 11px;
}

.wa-por b {
  color: var(--wa-navy);
}

@media (max-width: 640px) {
  .wa-fila__main {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .wa-fila__cta {
    flex-direction: row;
  }

  .wa-fila__cta > * {
    flex: 1;
  }

  .wa-fila__pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 12px;
  }
}

/* ---------- B) Caja de bono ---------- */
.wa-cajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.wa-cajas--1 {
  max-width: 360px;
}

.wa-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 68, .07);
  text-align: center;
}

.wa-caja__top {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 12px 28px;
}

.wa-caja__top .wa-logo {
  width: 120px;
  height: 56px;
}

.wa-caja__cuerpo {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 16px 14px 14px;
  background: radial-gradient(100% 120% at 100% 0%, rgba(0, 180, 230, .45), transparent 60%), linear-gradient(140deg, var(--wa-navy), var(--wa-navy2));
  color: #fff;
}

.wa-caja__cuerpo::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -10%;
  left: -10%;
  height: 36px;
  border-radius: 0 0 50% 50%;
  background: #fff;
}

.wa-caja__titulo {
  position: relative;
  margin-top: 4px;
  font: 600 14px/1.3 var(--wa-titulo);
}

.wa-caja__importe {
  color: #7ff5b9;
  font: 700 20px/1.2 var(--wa-titulo);
}

.wa-caja .wa-btn {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-size: 14px;
}

.wa-caja .wa-legal {
  color: #bcd9e8;
}

/* ---------- C) Banner ---------- */
.wa-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: radial-gradient(70% 160% at 100% 0%, rgba(0, 180, 230, .45), transparent 60%), linear-gradient(110deg, var(--wa-navy), var(--wa-navy2));
  box-shadow: 0 6px 16px rgba(11, 42, 68, .18);
  color: #fff;
}

.wa-banner .wa-logo {
  width: 84px;
  height: 46px;
}

.wa-banner__txt {
  flex: 1;
  min-width: 0;
}

.wa-banner__txt > span {
  display: block;
  color: #cfeefa;
  font-size: 12px;
}

.wa-banner__txt b {
  display: block;
  font: 700 16px/1.25 var(--wa-titulo);
}

.wa-banner .wa-banner__legal {
  margin-top: 2px;
  color: #9fc7da;
  font-size: 10px;
}

.wa-banner .wa-btn {
  flex: none;
  padding: 10px 16px;
  font-size: 14px;
}

@media (max-width: 520px) {
  .wa-banner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .wa-banner .wa-logo {
    width: 64px;
    height: 40px;
  }

  .wa-banner .wa-btn {
    width: 100%;
  }
}

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

/* ---------- Lateral (disenyo="lateral") ---------- */
.wa-lat {
  display: grid;
  gap: 8px;
}

.wa-lat__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--wa-muted);
  font-size: 10.5px;
}

.wa-lat__item {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--wa-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .1s ease-out;
}

.wa-lat__item.is-top {
  border-color: var(--wa-cyan);
}

.wa-lat__marca {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46%;
  padding: 8px 8px 8px 20px;
}

.wa-lat__marca .wa-logo {
  width: 100%;
  height: 46px;
  border: 0;
  padding: 2px;
}

.wa-lat__pos {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wa-navy);
  color: #fff;
  font: 700 10px/1 var(--wa-titulo);
}

.wa-lat__item.is-top .wa-lat__pos {
  background: var(--wa-cyan);
  color: var(--wa-navy);
}

.wa-lat__bono {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px 8px 14px;
  border-left: 2px dashed var(--wa-line);
  background: radial-gradient(90% 140% at 0% 0%, rgba(0, 180, 230, .35), transparent 60%), linear-gradient(120deg, var(--wa-navy), var(--wa-navy2));
  color: #fff;
}

/* Muescas del cupón. */
.wa-lat__bono::before,
.wa-lat__bono::after {
  content: "";
  position: absolute;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.wa-lat__bono::before { top: -7px; }
.wa-lat__bono::after { bottom: -7px; }

.wa-lat__bono b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 700 13.5px/1.25 var(--wa-titulo);
  overflow-wrap: anywhere;
}

.wa-lat__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  background: var(--wa-green);
  color: #06321f;
  font: 700 11.5px var(--wa-titulo);
  white-space: nowrap;
  transition: background-color .15s ease-out;
}

.wa-lat__cta svg {
  width: 12px;
  height: 12px;
}

.wa-lat__legal {
  margin: -4px 4px 2px;
  font-size: 9.5px;
  line-height: 1.3;
}

.wa-lat__pie {
  text-align: center !important;
}

.wa-lat__item:focus-visible {
  outline: 3px solid var(--wa-cyan);
  outline-offset: 2px;
}

.wa-lat__item:active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .wa-lat__item:hover {
    border-color: var(--wa-cyan);
    box-shadow: 0 6px 18px rgba(11, 42, 68, .12);
  }

  .wa-lat__item:hover .wa-lat__cta {
    background: var(--wa-green-dark);
  }
}

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


/* =====================================================================
 * Variante «emil» (variante="emil"): el diseño inicial tal cual, con el
 * acabado de interacción de la skill emil-design-eng. No cambia colores
 * ni formas; cambia cómo responde: pulsar, abrir, cerrar, arrastrar.
 * Solo transform y opacity, curvas propias, salidas más rápidas que las
 * entradas y nada de animación en lo que se repite mucho.
 * ===================================================================== */
.wa--emil {
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-drawer: cubic-bezier(.32, .72, 0, 1);
}

/* 1. Todo lo que se pulsa responde al dedo (feedback inmediato). */
.wa--emil .wa-btn,
.wa--emil .wa-btn2,
.wa--emil .wa-rk-fbtn,
.wa--emil .wa-rk-mas,
.wa--emil .wa-appbtn,
.wa--emil .wa-news__fila button,
.wa--emil .wa-lat__cta {
  transition: transform 160ms var(--e-out), background-color 150ms ease, color 150ms ease;
}

.wa--emil .wa-btn:active,
.wa--emil .wa-btn2:active,
.wa--emil .wa-rk-fbtn:active,
.wa--emil .wa-rk-mas:active,
.wa--emil .wa-appbtn:active,
.wa--emil .wa-news__fila button:active {
  transform: scale(.97);
}

/* Bloques grandes (cupón, oferta, caja, banner, fila del lateral, bonos):
 * menos escala, que un bloque ancho encogiendo un 3% se nota demasiado. */
.wa--emil .wa-ticket,
.wa--emil .wa-oferta,
.wa--emil.wa-banner,
.wa--emil .wa-caja,
.wa--emil .wa-lat__item,
.wa--emil .wa-bono {
  transition: transform 160ms var(--e-out), box-shadow 200ms ease, border-color 200ms ease;
}

.wa--emil .wa-ticket:active,
.wa--emil .wa-oferta:active,
.wa--emil.wa-banner:active,
.wa--emil .wa-caja:active,
.wa--emil .wa-lat__item:active,
.wa--emil .wa-bono:active {
  transform: scale(.985);
}

/* 2. Caja y banner: flecha que se adelanta al pasar por encima. */
.wa--emil .wa-ticket__cta {
  transition: background-color 150ms ease;
}

.wa--emil.wa-banner .wa-btn::after,
.wa--emil .wa-caja .wa-btn::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 200ms var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa--emil.wa-banner:hover .wa-btn::after,
  .wa--emil .wa-caja:hover .wa-btn::after {
    transform: translateX(3px);
  }

  .wa--emil .wa-lat__item:hover .wa-lat__cta svg {
    transform: translateX(2px);
  }

  .wa--emil .wa-rk-card,
  .wa--emil.wa-fila,
  .wa--emil .wa-caja {
    transition: box-shadow 200ms ease;
  }

  .wa--emil .wa-rk-card:hover,
  .wa--emil.wa-fila:hover,
  .wa--emil .wa-caja:hover {
    box-shadow: 0 10px 28px rgba(11, 42, 68, .13);
  }
}

.wa--emil .wa-lat__cta svg {
  transition: transform 200ms var(--e-out);
}

/* 3. «Ficha»: la flecha gira con curva propia y la ficha entra desde
 * su botón (opacidad + 6px + un toque de desenfoque que disimula el cambio). */
.wa--emil .wa-rk-fbtn svg {
  transition: transform 200ms var(--e-out);
}

.wa--emil .wa-ficha {
  transition: opacity 220ms var(--e-out), transform 220ms var(--e-out), filter 220ms var(--e-out);
}

@starting-style {
  .wa--emil .wa-ficha:not([hidden]) {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(2px);
  }
}

/* 4. «Ver más casas»: las nuevas entran escalonadas (50 ms entre una y otra). */
.wa--emil .wa-rk-card.is-revelada {
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out);
  transition-delay: calc(var(--wa-i, 0) * 50ms);
}

@starting-style {
  .wa--emil .wa-rk-card.is-revelada {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 5. Aviso de licencia DGOJ: aparece con un pequeño retraso (evita
 * abrirlo sin querer) y desde su sello, no de golpe. */
.wa--emil .wa-tip {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2px) scale(.97);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 125ms var(--e-out), transform 125ms var(--e-out), visibility 0s linear 125ms;
}

.wa--emil .wa-lic:hover .wa-tip,
.wa--emil .wa-lic:focus .wa-tip {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 250ms;
}

/* 6. Newsletter: el mensaje entra suave; si hay error, una sacudida corta. */
.wa--emil .wa-news__msg {
  transition: opacity 200ms var(--e-out), transform 200ms var(--e-out);
}

@starting-style {
  .wa--emil .wa-news__msg {
    opacity: 0;
    transform: translateY(4px);
  }
}

.wa--emil .wa-news__msg.is-error {
  animation: wa-e-sacude 300ms var(--e-out);
}

.wa--emil .wa-news__fila button:disabled {
  opacity: .7;
}

@keyframes wa-e-sacude {
  20% { transform: translateX(-4px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  100% { transform: none; }
}

/* 7. Móvil: hoja inferior con curva de cajón tipo iOS, asa para
 * arrastrarla y salida más rápida que la entrada. */
@media (max-width: 767.98px) {
  .wa--emil .wa-ficha:not([hidden]) {
    filter: none;
    transition: transform 420ms var(--e-drawer);
    will-change: transform;
  }

  @starting-style {
    .wa--emil .wa-ficha:not([hidden]) {
      opacity: 1;
      filter: none;
      transform: translateY(100%);
    }
  }

  .wa--emil .wa-ficha.is-saliendo {
    transform: translateY(100%);
    transition: transform 220ms var(--e-out);
  }

  .wa--emil .wa-ficha.is-arrastrando {
    transition: none;
  }

  .wa--emil .wa-ficha__cab {
    padding-top: 20px;
    touch-action: none;
    cursor: grab;
  }

  .wa--emil .wa-ficha__cab::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .5);
    transform: translateX(-50%);
  }

  html.wa-ficha-emil .wa-fondo {
    transition: opacity 300ms ease;
  }

  @starting-style {
    html.wa-ficha-emil .wa-fondo:not([hidden]) {
      opacity: 0;
    }
  }

  .wa-fondo.is-saliendo {
    opacity: 0;
    transition: opacity 220ms ease;
  }
}

/* Movimiento reducido: se queda la opacidad (ayuda a entender el cambio),
 * se quita todo desplazamiento, escala y sacudida. */
@media (prefers-reduced-motion: reduce) {
  .wa--emil .wa-ficha,
  .wa--emil .wa-ficha:not([hidden]),
  .wa--emil .wa-rk-card.is-revelada,
  .wa--emil .wa-news__msg,
  .wa--emil .wa-tip {
    transform: none !important;
    filter: none !important;
    transition: opacity 200ms ease !important;
  }

  .wa--emil .wa-ficha.is-saliendo {
    opacity: 0;
  }

  .wa--emil .wa-news__msg.is-error {
    animation: none;
  }

  .wa--emil :active {
    transform: none !important;
  }
}


/* =====================================================================
 * Variante «impacto» (variante="impacto", skill bencium-impact-designer):
 * cartel deportivo a dos tintas con sensación de velocidad. Cobalto +
 * amarillo señal sobre blanco, Poppins inclinada y gruesa, paralelogramos
 * y líneas de velocidad. Una sola animación: las líneas corren al pasar.
 * ===================================================================== */
.wa--impacto {
  --i-cobalto: #1238c9;
  --i-cobalto2: #0c2797;
  --i-amarillo: #ffd400;
  --i-amarillo2: #ffe14d;
  --i-tinta: #141414;
  --i-gris: #5a5f6b;
  --i-linea: #dfe4f3;
  --i-velocidad: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px);
  color: var(--i-tinta);
}

.wa--impacto .wa-emo,
.wa--impacto .wa-news__ico,
.wa--impacto .wa-bono__ico {
  display: none;
}

.wa--impacto .wa-logo {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
}

.wa--impacto .wa-lic {
  border: 0;
  border-radius: 0;
  background: var(--i-tinta);
  color: #fff;
  font-style: italic;
}

.wa--impacto .wa-nota {
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
}

.wa--impacto .wa-legal {
  color: var(--i-gris);
}

.wa--impacto .wa-ver {
  color: #cfd8ff;
}

.wa--impacto .wa-ver svg {
  color: var(--i-amarillo);
}

/* Botón: paralelogramo amarillo, texto negro inclinado. */
.wa--impacto .wa-btn,
.wa--impacto .wa-ticket__cta {
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font: italic 800 16px var(--wa-titulo);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background-color 150ms ease;
}

.wa--impacto .wa-btn2 {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto .wa-btn:hover,
  .wa--impacto [data-lk]:hover .wa-btn,
  .wa--impacto [data-lk]:hover .wa-ticket__cta {
    background: var(--i-amarillo2);
  }

  .wa--impacto .wa-btn2:hover {
    background: var(--i-amarillo);
  }
}

.wa--impacto [data-lk]:focus-visible,
.wa--impacto button:focus-visible,
.wa--impacto a:focus-visible {
  outline: 3px solid var(--i-amarillo);
  outline-offset: 2px;
}

.wa--impacto .wa-spoiler {
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
}

/* ---------- Ranking 2 ---------- */
.wa--impacto .wa-rk-hero {
  border-radius: 0;
  background: linear-gradient(115deg, transparent 90%, var(--i-amarillo) 90%, var(--i-amarillo) 93%, transparent 93%), var(--i-velocidad), var(--i-cobalto);
  box-shadow: 8px 8px 0 var(--i-tinta);
}

.wa--impacto .wa-eyebrow {
  border: 0;
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.wa--impacto .wa-rk-hero {
  padding-right: 64px;
}

.wa--impacto .wa-rk-hero__titulo {
  font: italic 800 26px/1.1 var(--wa-titulo);
  letter-spacing: -.02em;
}

.wa--impacto .wa-rk-hero__badges span {
  border-radius: 0;
  background: rgba(255, 255, 255, .12);
}

.wa--impacto .wa-rk-hero__link {
  color: var(--i-amarillo) !important;
  font-style: italic;
}

.wa--impacto .wa-rk-list {
  gap: 16px;
}

.wa--impacto .wa-rk-card {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
  box-shadow: 6px 6px 0 var(--i-linea);
}

.wa--impacto .wa-rk-card.is-top {
  border: 2px solid var(--i-tinta);
  background: #fff;
  box-shadow: 6px 6px 0 var(--i-amarillo);
}

/* Posición: dorsal inclinado. */
.wa--impacto .wa-rk-pos,
.wa--impacto .is-top .wa-rk-pos {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: var(--i-cobalto);
  color: #fff;
  font: italic 800 18px var(--wa-titulo);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.wa--impacto .is-top .wa-rk-pos {
  background: var(--i-amarillo);
  color: var(--i-tinta);
}

.wa--impacto .wa-rk-nombre {
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-rk-fbtn {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 700;
}

.wa--impacto .wa-rk-fbtn[aria-expanded="true"] {
  background: var(--i-tinta);
  color: #fff;
}

/* Lo memorable: el cupón con líneas de velocidad que corren al pasar. */
.wa--impacto .wa-ticket {
  border-radius: 0;
  background: var(--i-velocidad), var(--i-cobalto);
  background-size: 28px 28px, auto;
}

.wa--impacto .wa-ticket__label {
  color: var(--i-amarillo);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.wa--impacto .wa-ticket__main b {
  font: italic 800 20px/1.15 var(--wa-titulo);
}

.wa--impacto .wa-ticket__codigo strong {
  color: var(--i-amarillo);
}

.wa--impacto .wa-ticket__cta {
  width: 116px;
  margin: 8px 8px 8px 0;
  border-left: 0;
}

.wa--impacto .wa-ticket__cta::before,
.wa--impacto .wa-ticket__cta::after {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wa--impacto .wa-ticket:hover,
  .wa--impacto.wa-banner:hover {
    animation: wa-i-corre 600ms linear infinite;
  }
}

@keyframes wa-i-corre {
  to { background-position: 28px 0, 0 0; }
}

/* Ficha */
.wa--impacto .wa-ficha {
  border-top: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
}

.wa--impacto .wa-ideal {
  border: 0;
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 700;
}

.wa--impacto .wa-resumen {
  border-left: 4px solid var(--i-cobalto);
  border-radius: 0;
  background: #f3f5fc;
}

.wa--impacto .wa-chip {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
}

.wa--impacto .wa-si {
  color: var(--i-cobalto);
}

.wa--impacto .wa-appbtn {
  border-radius: 0;
  background: var(--i-tinta);
}

.wa--impacto .wa-h4 {
  color: var(--i-cobalto);
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-pc .is-pro,
.wa--impacto .wa-pc .is-contra {
  border-radius: 0;
}

.wa--impacto .wa-pc .is-pro::before {
  color: var(--i-cobalto);
}

.wa--impacto .wa-pago {
  border: 2px solid var(--i-linea);
  border-radius: 0;
}

.wa--impacto .wa-bono {
  border: 2px solid var(--i-tinta);
  border-left: 8px solid var(--i-cobalto);
  border-radius: 0;
  background: #fff;
}

.wa--impacto .wa-bono strong {
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-rk-mas {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-news {
  border-radius: 0;
  background: var(--i-velocidad), var(--i-cobalto);
}

.wa--impacto .wa-news__fila input {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
}

.wa--impacto .wa-news__fila button {
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-news__chk a {
  color: var(--i-amarillo) !important;
}

@media (max-width: 767.98px) {
  .wa--impacto .wa-ficha:not([hidden]) {
    border-radius: 0;
  }

  .wa--impacto .wa-ficha__cab {
    background: var(--i-velocidad), var(--i-cobalto);
  }

  .wa--impacto .wa-ficha__pie {
    border-top: 2px solid var(--i-tinta);
  }

  .wa--impacto .wa-btn--ghost {
    border: 2px solid var(--i-tinta);
    background: #fff;
    color: var(--i-tinta);
    clip-path: none;
  }

  .wa--impacto .wa-ticket__cta {
    width: 104px;
  }
}

/* ---------- A) Card horizontal ---------- */
.wa--impacto.wa-fila {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--i-amarillo);
}

.wa--impacto .wa-fila__nombre {
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-oferta {
  border-radius: 0;
  background: var(--i-velocidad), var(--i-cobalto);
}

.wa--impacto .wa-oferta small {
  color: var(--i-amarillo);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.wa--impacto .wa-oferta b {
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-fila__pie {
  border-top: 2px solid var(--i-tinta);
  background: #fff;
}

.wa--impacto .wa-por b {
  color: var(--i-cobalto);
}

/* ---------- B) Caja de bono ---------- */
.wa--impacto .wa-caja {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--i-amarillo);
}

.wa--impacto .wa-caja__cuerpo {
  background: var(--i-velocidad), var(--i-cobalto);
}

.wa--impacto .wa-caja__cuerpo::before {
  top: -14px;
  right: 0;
  left: 0;
  height: 28px;
  border-radius: 0;
  transform: skewY(-3deg);
}

.wa--impacto .wa-caja__titulo {
  font-style: italic;
}

.wa--impacto .wa-caja__importe {
  color: var(--i-amarillo);
  font-style: italic;
  font-weight: 800;
}

/* ---------- C) Banner ---------- */
.wa--impacto.wa-banner {
  border-radius: 0;
  background: var(--i-velocidad), var(--i-cobalto);
  background-size: 28px 28px, auto;
  box-shadow: 6px 6px 0 var(--i-tinta);
}

.wa--impacto.wa-banner .wa-logo {
  border-color: #fff;
}

.wa--impacto .wa-banner__txt > span {
  color: var(--i-amarillo);
  font-style: italic;
}

.wa--impacto .wa-banner__txt b {
  font-style: italic;
  font-weight: 800;
}

/* ---------- Lateral ---------- */
.wa--impacto.wa-lat {
  gap: 8px;
}

.wa--impacto .wa-lat__item,
.wa--impacto .wa-lat__item.is-top {
  border: 2px solid var(--i-tinta);
  border-radius: 0;
  background: #fff;
}

.wa--impacto .wa-lat__item.is-top {
  box-shadow: 4px 4px 0 var(--i-amarillo);
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto .wa-lat__item:hover {
    border-color: var(--i-tinta);
    box-shadow: 4px 4px 0 var(--i-cobalto);
  }
}

.wa--impacto .wa-lat__marca .wa-logo {
  border: 0;
}

.wa--impacto .wa-lat__pos,
.wa--impacto .wa-lat__item.is-top .wa-lat__pos {
  border-radius: 0;
  background: var(--i-cobalto);
  color: #fff;
  font-style: italic;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.wa--impacto .wa-lat__item.is-top .wa-lat__pos {
  background: var(--i-amarillo);
  color: var(--i-tinta);
}

.wa--impacto .wa-lat__bono {
  border-left: 0;
  background: var(--i-velocidad), var(--i-cobalto);
}

.wa--impacto .wa-lat__bono::before,
.wa--impacto .wa-lat__bono::after {
  display: none;
}

.wa--impacto .wa-lat__bono b {
  font-style: italic;
  font-weight: 800;
}

.wa--impacto .wa-lat__cta {
  border-radius: 0;
  background: var(--i-amarillo);
  color: var(--i-tinta);
  font-style: italic;
  font-weight: 800;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}


/* =====================================================================
 * Vista compacta (disenyo="compacta"), diseño de Stitch oct-2026.
 * Base con la paleta del diseño inicial. Mide su propio ancho:
 *   < 700 px  -> tarjetas apiladas (móvil o columna estrecha)
 *   700-999   -> dos líneas por casa
 *   >= 1000   -> tabla completa con cabecera
 * ===================================================================== */
.wa-cmp {
  margin: 18px 0;
}

.wa-cmp__hero {
  margin-bottom: 14px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(0, 180, 230, .45), transparent 55%), linear-gradient(135deg, var(--wa-navy), var(--wa-navy2));
  box-shadow: 0 10px 24px rgba(11, 42, 68, .22);
  color: #fff;
}

.wa-cmp__titulo {
  margin: 10px 0 12px;
  font: 700 21px/1.25 var(--wa-titulo);
}

.wa-cmp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wa-cmp__badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  font-size: 12.5px;
}

.wa-cmp__badges svg {
  width: 13px;
  height: 13px;
  color: #7ff5b9;
}

.wa-cmp__metodo {
  display: inline-block;
  margin-top: 10px;
  color: #7fdcff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.wa-cmp__tabla {
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--wa-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 68, .07);
}

.wa-cmp__cab {
  display: none;
}

.wa-cmp__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Móvil / estrecho: tarjeta apilada. */
.wa-cmp__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "pos op nota"
    "bono bono bono"
    "pagos pagos pagos"
    "vent vent vent"
    "acc acc acc";
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 14px;
  border-top: 1px solid var(--wa-line);
}

.wa-cmp__fila:first-child {
  border-top: 0;
}

.wa-cmp__fila.is-oculta {
  display: none;
}

.wa-cmp__pos { grid-area: pos; }
.wa-cmp__op { grid-area: op; }
.wa-cmp__nota { grid-area: nota; }
.wa-cmp__bono { grid-area: bono; }
.wa-cmp__pagos { grid-area: pagos; }
.wa-cmp__ventajas { grid-area: vent; }
.wa-cmp__acc { grid-area: acc; }

.wa-cmp__pos {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #c6e6f3;
  border-radius: 50%;
  background: var(--wa-sky);
  color: var(--wa-navy);
  font: 700 12.5px var(--wa-titulo);
  font-variant-numeric: tabular-nums;
}

.wa-cmp__fila.is-top .wa-cmp__pos {
  border-color: #f2c94c;
  background: #fde58a;
  color: #5b4300;
}

.wa-cmp__op {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wa-cmp__op .wa-logo {
  width: 84px;
  height: 42px;
}

.wa-cmp__nombre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.wa-cmp__nombre .wa-cmp__nombre-h {
  color: var(--wa-navy);
  font: 700 14.5px/1.2 var(--wa-titulo);
  overflow-wrap: anywhere;
}

.wa-cmp__nota {
  text-align: center;
}

.wa-cmp__bono {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(0, 180, 230, .3), transparent 60%), linear-gradient(120deg, var(--wa-navy), var(--wa-navy2));
  color: #fff;
  cursor: pointer;
  transition: filter 150ms ease;
}

.wa-cmp__bono-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wa-cmp__bono small {
  color: #7fdcff;
  font: 600 9.5px Inter, system-ui, sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.wa-cmp__bono b {
  font: 700 14.5px/1.25 var(--wa-titulo);
}

.wa-cmp__codigo {
  flex: none;
  padding: 3px 8px;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  font: 600 11px var(--wa-titulo);
  letter-spacing: .04em;
}

.wa-cmp__pagos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wa-cmp__pagos span {
  padding: 2px 7px;
  border: 1px solid var(--wa-line);
  border-radius: 6px;
  background: #f6f9fb;
  color: #2b3137;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.wa-cmp__ventajas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-cmp__ventajas li {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 2px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #3a444d;
  font-size: 11.5px;
  line-height: 1.35;
}

.wa-cmp__ventajas li:first-child {
  color: var(--wa-ok);
  font-weight: 600;
}

.wa-cmp__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wa-cmp__ficha {
  color: var(--wa-navy) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.wa-cmp__acc .wa-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 14.5px;
}

.wa-cmp__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--wa-line);
  background: #f6f9fb;
}

@media (hover: hover) and (pointer: fine) {
  .wa-cmp__bono:hover {
    filter: brightness(1.12);
  }
}

/* Columnas medianas: dos líneas por casa. */
@container (min-width: 700px) {
  .wa-cmp__fila {
    grid-template-columns: 40px minmax(150px, 1.2fr) 66px minmax(200px, 1.4fr) 150px;
    grid-template-areas:
      "pos op nota bono acc"
      ". pagos pagos vent vent";
    gap: 8px 12px;
    padding: 12px 16px;
  }

  .wa-cmp__acc {
    justify-content: flex-end;
  }

  .wa-cmp__acc .wa-btn {
    flex: none;
  }
}

/* Con sitio: tabla completa. */
@container (min-width: 1000px) {
  .wa-cmp__cab,
  .wa-cmp__fila {
    grid-template-columns: 44px minmax(170px, 1.25fr) 70px minmax(220px, 1.5fr) minmax(140px, 1fr) minmax(130px, 1fr) 160px;
  }

  .wa-cmp__cab {
    display: grid;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--wa-line);
    background: #f6f9fb;
    color: var(--wa-muted);
    font: 700 10.5px var(--wa-titulo);
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  .wa-cmp__fila {
    grid-template-areas: "pos op nota bono pagos vent acc";
    gap: 12px;
  }
}


/* Tokens del banner [destacado] (antes compartidos con equipo/lista). */
.wa-eq,
.wa-ls,
.wa-dest {
  --eq-ink: #1d1d1f;
  --eq-muted: #5f6670;
  --eq-line: #e3e7ea;
  --eq-sep: #eef1f3;
  --eq-surface: #f5f7f9;
  --eq-brand: #049ec5;
  --eq-brand-ink: #037a98;
  --eq-cta: var(--wa-green);
  --eq-cta-hover: var(--wa-green-dark);
  --eq-curva: cubic-bezier(.22, 1, .36, 1);
  --eq-texto: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--eq-ink);
  font-family: var(--eq-texto);
  -webkit-font-smoothing: antialiased;
}



/* ---------- [destacado]: banner de enlace interno ---------- */
.wa-dest {
  margin: 20px 0;
  container-type: inline-size;
}

html body .wa-dest a.wa-dest__link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--eq-surface);
  color: var(--eq-ink);
  text-decoration: none;
  transition: background-color .18s var(--eq-curva), border-color .18s var(--eq-curva);
}

.wa-dest__media {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--eq-brand-ink);
}

.wa-dest__media svg {
  width: 28px;
  height: 28px;
}

.wa-dest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-dest__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wa-dest__etiqueta {
  color: var(--eq-brand-ink);
  font-size: 13px;
  font-weight: 600;
}

.wa-dest__titulo {
  font: 600 18px/1.25 var(--eq-texto);
  letter-spacing: -.015em;
}

.wa-dest__texto {
  color: var(--eq-muted);
  font-size: 14.5px;
  line-height: 1.45;
}

.wa-dest__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 980px;
  background: var(--eq-ink);
  color: #fff;
  font: 600 15px/1 var(--eq-texto);
  white-space: nowrap;
  transition: background-color .18s var(--eq-curva), transform .14s var(--eq-curva);
}

.wa-dest__boton svg {
  width: 16px;
  height: 16px;
  transition: transform .18s var(--eq-curva);
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-dest a.wa-dest__link:hover {
    background: #edf1f4;
  }

  .wa-dest__link:hover .wa-dest__boton svg {
    transform: translateX(3px);
  }
}

.wa-dest__link:active .wa-dest__boton {
  transform: scale(.97);
}

html body .wa-dest a.wa-dest__link:focus-visible {
  outline: 2px solid var(--eq-brand-ink);
  outline-offset: 2px;
}

/* estilo="oscuro": azul marino con botón amarillo (idea de la captura). */
html body .wa-dest--oscuro a.wa-dest__link {
  background: #0d2238;
  color: #f2f5f7;
}

.wa-dest--oscuro .wa-dest__media {
  color: #0d2238;
}

.wa-dest--oscuro .wa-dest__etiqueta {
  color: #7fd6ef;
}

.wa-dest--oscuro .wa-dest__texto {
  color: rgba(242, 245, 247, .8);
}

.wa-dest--oscuro .wa-dest__boton {
  background: #ffc627;
  color: #14202b;
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-dest--oscuro a.wa-dest__link:hover {
    background: #12304d;
  }

  .wa-dest--oscuro .wa-dest__link:hover .wa-dest__boton {
    background: #ffd350;
  }
}

html body .wa-dest--oscuro a.wa-dest__link:focus-visible {
  outline-color: #ffc627;
}

/* estilo="marca": tinte del azul de la web. */
html body .wa-dest--marca a.wa-dest__link {
  background: #e9f6fb;
}

.wa-dest--marca .wa-dest__media {
  background: var(--eq-brand);
  color: #fff;
}

.wa-dest--marca .wa-dest__boton {
  background: var(--eq-brand-ink);
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-dest--marca a.wa-dest__link:hover {
    background: #def1f9;
  }
}

/* estilo="linea": blanco con borde fino. */
html body .wa-dest--linea a.wa-dest__link {
  border: 1px solid var(--eq-line);
  background: #fff;
}

.wa-dest--linea .wa-dest__media {
  background: var(--eq-surface);
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-dest--linea a.wa-dest__link:hover {
    border-color: var(--eq-brand);
    background: #fff;
  }
}

/* Estrecho: el botón baja a lo ancho. */
@container (max-width: 520px) {
  html body .wa-dest a.wa-dest__link {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 16px;
  }

  .wa-dest__media {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .wa-dest__media svg {
    width: 22px;
    height: 22px;
  }

  .wa-dest__titulo {
    font-size: 17px;
  }

  .wa-dest__boton {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-eq *,
  .wa-ls *,
  .wa-dest * {
    animation: none !important;
    transition-property: background-color, color, border-color, text-decoration-color !important;
  }

  .wa-eq__cta:active,
  .wa-ls__cta:active,
  .wa-eq__fbtn:active,
  .wa-ls__chev:active,
  .wa-dest__link:active .wa-dest__boton {
    transform: none;
  }
}


/* =====================================================================
 * 16-oct-2026 (todas las variantes): la licencia DGOJ va UNA vez en la
 * cabecera de cada bloque, no en cada casa. Línea fina para los bloques
 * sin título (ranking2, compacta) y para las cajas.
 * ===================================================================== */
.wa-cab-lic {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 10px;
  color: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .78;
}

.wa-cab-lic svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.wa-cajas__cab {
  grid-column: 1 / -1;
  margin: 0;
}

.wa-eq__lic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wa-eq__lic svg {
  width: 13px;
  height: 13px;
  color: var(--eq-muted);
}


/* =====================================================================
 * Variante «iwa-emil» (variante="iwa-emil" -> raíz «wa--impacto wa--iwa-emil»).
 * El cartel deportivo de «impacto» pasado a la paleta ACTUAL de
 * webapuestas.com + el acabado de movimiento de la skill emil-design-eng.
 *
 * PALETA (solo estos tonos, blanco y transparencias de ellos):
 *   verde CTA #3FBF53 (hover #36a948) con texto blanco en negrita,
 *   azul #049EC5, azul oscuro #037693, acento claro #04C4F6,
 *   negro #131313, gris oscuro #333, gris medio #BBBBBB, gris claro #E9E9E9.
 * Reparto: el cobalto pasa a azul oscuro (#037693: blanco encima = 5,2:1);
 * el amarillo señal pasa a acento claro #04C4F6 SOLO como fondo con texto
 * negro (9:1) o como sombra/detalle; donde impacto ponía texto amarillo
 * sobre cobalto se pone blanco. Los CTA de afiliado, verdes con texto blanco.
 *
 * MOVIMIENTO: solo transform y opacity, curvas propias, salidas más
 * rápidas que entradas. Las líneas de velocidad ya NO corren en bucle
 * (animación infinita de background-position al pasar, algo que se ve
 * decenas de veces): ahora son una capa que se desplaza 12 px una vez.
 * La hoja móvil entra con curva de cajón; la salida es inmediata porque el
 * JS solo hace «salida animada + arrastre» con .wa--emil (no se toca JS).
 *
 * Va al FINAL de wa-widgets.css (después de «impacto»).
 * ===================================================================== */
.wa.wa--iwa-emil {
  /* Variables del diseño inicial (las usan las reglas base). */
  --wa-navy: #131313;
  --wa-navy2: #037693;
  --wa-cyan: #049EC5;
  --wa-blue: #037693;
  --wa-sky: rgba(4, 158, 197, .08);
  --wa-green: #3FBF53;
  --wa-green-dark: #36a948;
  --wa-ok: #037693;
  --wa-no: #333;
  --wa-line: #E9E9E9;
  --wa-ink: #131313;
  --wa-muted: #333;
  /* Variables de «impacto». */
  --i-cobalto: #037693;
  --i-cobalto2: #131313;
  --i-amarillo: #04C4F6;
  --i-amarillo2: #049EC5;
  --i-tinta: #131313;
  --i-gris: #333;
  --i-linea: #E9E9E9;
  --i-velocidad: repeating-linear-gradient(115deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 14px);
  /* Curvas (emil). */
  --ie-out: cubic-bezier(.23, 1, .32, 1);
  --ie-drawer: cubic-bezier(.32, .72, 0, 1);
  color: #131313;
}

/* ---------- Piezas comunes ---------- */
.wa--impacto.wa--iwa-emil .wa-logo {
  border-color: #131313;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-lic,
.wa--impacto.wa--iwa-emil .wa-tip {
  background: #131313;
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-nota {
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-cab-lic {
  color: #333;
  opacity: 1;
}

.wa--impacto.wa--iwa-emil .wa-legal {
  color: #333;
}

/* Sobre azul oscuro, el «verificado» va en blanco (el amarillo no contrasta). */
.wa--impacto.wa--iwa-emil .wa-ver,
.wa--impacto.wa--iwa-emil .wa-ver svg {
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-spoiler,
.wa--impacto.wa--iwa-emil .wa-spoiler--nuevo,
.wa--impacto.wa--iwa-emil .wa-spoiler--exclusivo {
  background: #04C4F6;
  color: #131313;
}

/* CTA de afiliado: paralelogramo de impacto, en verde con texto blanco. */
.wa--impacto.wa--iwa-emil .wa-btn,
.wa--impacto.wa--iwa-emil .wa-ticket__cta,
.wa--impacto.wa--iwa-emil .wa-lat__cta {
  background: #3FBF53;
  color: #fff;
  font-weight: 800;
}

.wa--impacto.wa--iwa-emil .wa-btn2 {
  border-color: #131313;
  color: #131313;
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-btn:hover,
  .wa--impacto.wa--iwa-emil [data-lk]:hover .wa-btn,
  .wa--impacto.wa--iwa-emil [data-lk]:hover .wa-ticket__cta,
  .wa--impacto.wa--iwa-emil .wa-lat__item:hover .wa-lat__cta {
    background: #36a948;
  }

  .wa--impacto.wa--iwa-emil .wa-btn2:hover,
  .wa--impacto.wa--iwa-emil .wa-btn.wa-btn--ghost:hover {
    background: rgba(4, 158, 197, .1);
  }
}

/* Foco visible: azul oscuro sobre blanco; blanco sobre los bloques azules. */
.wa--impacto.wa--iwa-emil [data-lk]:focus-visible,
.wa--impacto.wa--iwa-emil button:focus-visible,
.wa--impacto.wa--iwa-emil a:focus-visible,
.wa--impacto.wa--iwa-emil input:focus-visible {
  outline: 3px solid #037693;
  outline-offset: 2px;
}

.wa--impacto.wa--iwa-emil .wa-ficha__cerrar:focus-visible,
.wa--impacto.wa--iwa-emil .wa-news input:focus-visible,
.wa--impacto.wa--iwa-emil .wa-news button:focus-visible,
.wa--impacto.wa--iwa-emil .wa-news a:focus-visible,
.wa--impacto.wa--iwa-emil .wa-rk-hero a:focus-visible {
  outline-color: #fff;
}

/* ---------- Ranking 2 ---------- */
.wa--impacto.wa--iwa-emil .wa-rk-hero {
  background: linear-gradient(115deg, transparent 90%, #04C4F6 90%, #04C4F6 93%, transparent 93%), var(--i-velocidad), #037693;
  box-shadow: 8px 8px 0 #131313;
}

.wa--impacto.wa--iwa-emil .wa-eyebrow {
  background: #04C4F6;
  color: #131313;
}

/* Los distintivos oscurecen el fondo (blanco sobre blanco translúcido no llega a 4,5:1). */
.wa--impacto.wa--iwa-emil .wa-rk-hero__badges span {
  background: rgba(19, 19, 19, .24);
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-rk-hero__link {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wa--impacto.wa--iwa-emil .wa-rk-card {
  border-color: #131313;
  box-shadow: 6px 6px 0 #E9E9E9;
}

.wa--impacto.wa--iwa-emil .wa-rk-card.is-top {
  border-color: #131313;
  box-shadow: 6px 6px 0 #04C4F6;
}

.wa--impacto.wa--iwa-emil .wa-rk-pos,
.wa--impacto.wa--iwa-emil .is-top .wa-rk-pos {
  background: #037693;
  color: #fff;
}

.wa--impacto.wa--iwa-emil .is-top .wa-rk-pos {
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-rk-nombre {
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-rk-fbtn {
  border-color: #131313;
  background: #fff;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-rk-fbtn[aria-expanded="true"] {
  background: #131313;
  color: #fff;
}

/* Cupón: el fondo queda liso y las líneas de velocidad pasan a una capa
 * propia (::before) que se puede mover con transform. */
.wa--impacto.wa--iwa-emil .wa-ticket,
.wa--impacto.wa--iwa-emil .wa-oferta,
.wa--impacto.wa--iwa-emil.wa-banner,
.wa--impacto.wa--iwa-emil .wa-cmp__bono {
  position: relative;
  overflow: hidden;
  background: #037693;
  animation: none;
}

.wa--impacto.wa--iwa-emil .wa-ticket::before,
.wa--impacto.wa--iwa-emil .wa-oferta::before,
.wa--impacto.wa--iwa-emil.wa-banner::before,
.wa--impacto.wa--iwa-emil .wa-cmp__bono::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -28px;
  background: var(--i-velocidad);
  pointer-events: none;
  /* Vuelta: más rápida que la ida. */
  transition: transform 200ms var(--ie-out);
}

.wa--impacto.wa--iwa-emil .wa-ticket > *,
.wa--impacto.wa--iwa-emil .wa-oferta > *,
.wa--impacto.wa--iwa-emil.wa-banner > *,
.wa--impacto.wa--iwa-emil .wa-cmp__bono > * {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-ticket:hover,
  .wa--impacto.wa--iwa-emil.wa-banner:hover {
    animation: none;
  }

  .wa--impacto.wa--iwa-emil .wa-ticket:hover::before,
  .wa--impacto.wa--iwa-emil .wa-oferta:hover::before,
  .wa--impacto.wa--iwa-emil.wa-banner:hover::before,
  .wa--impacto.wa--iwa-emil .wa-cmp__bono:hover::before {
    transform: translateX(12px);
    transition-duration: 320ms;
  }
}

.wa--impacto.wa--iwa-emil .wa-ticket__label,
.wa--impacto.wa--iwa-emil .wa-ticket__codigo,
.wa--impacto.wa--iwa-emil .wa-ticket__codigo strong {
  color: #fff;
  opacity: 1;
}

.wa--impacto.wa--iwa-emil .wa-ticket__codigo strong {
  font-weight: 800;
}

/* «Visitar» del cupón: flecha que se adelanta al pasar (sin muescas). */
.wa--impacto.wa--iwa-emil .wa-ticket__cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa--impacto.wa--iwa-emil .wa-ticket__cta::after,
.wa--impacto.wa--iwa-emil.wa-banner .wa-btn::after,
.wa--impacto.wa--iwa-emil .wa-caja .wa-btn::after {
  content: "→";
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 6px;
  border-radius: 0;
  background: none;
  transition: transform 160ms var(--ie-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-ticket:hover .wa-ticket__cta::after,
  .wa--impacto.wa--iwa-emil.wa-banner:hover .wa-btn::after,
  .wa--impacto.wa--iwa-emil .wa-caja:hover .wa-btn::after {
    transform: translateX(3px);
    transition-duration: 220ms;
  }
}

/* Ficha */
.wa--impacto.wa--iwa-emil .wa-ficha {
  border-top-color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-ideal {
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-resumen {
  border-left-color: #037693;
  background: rgba(4, 158, 197, .07);
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-chip {
  border-color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-si,
.wa--impacto.wa--iwa-emil .wa-h4,
.wa--impacto.wa--iwa-emil .wa-pc .is-pro::before {
  color: #037693;
}

.wa--impacto.wa--iwa-emil .wa-appbtn {
  background: #131313;
}

.wa--impacto.wa--iwa-emil .wa-datos td {
  border-bottom-color: #E9E9E9;
}

.wa--impacto.wa--iwa-emil .wa-datos td:first-child {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-pc .is-pro {
  background: rgba(63, 191, 83, .1);
}

.wa--impacto.wa--iwa-emil .wa-pc .is-contra {
  background: rgba(233, 233, 233, .7);
}

.wa--impacto.wa--iwa-emil .wa-pc .is-contra::before {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-pago {
  border-color: #E9E9E9;
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-juegos .is-off {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-bono {
  border-color: #131313;
  border-left-color: #037693;
}

.wa--impacto.wa--iwa-emil .wa-bono small,
.wa--impacto.wa--iwa-emil .wa-bono em,
.wa--impacto.wa--iwa-emil .wa-bono__chev {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-rk-mas {
  border-color: #131313;
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-news {
  background: var(--i-velocidad), #037693;
}

.wa--impacto.wa--iwa-emil .wa-news__top p,
.wa--impacto.wa--iwa-emil .wa-news__chk,
.wa--impacto.wa--iwa-emil .wa-news__chk a,
.wa--impacto.wa--iwa-emil .wa-news__msg,
.wa--impacto.wa--iwa-emil .wa-news__msg.is-error {
  color: #fff !important;
}

.wa--impacto.wa--iwa-emil .wa-news__fila input {
  border-color: #131313;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-news__fila button {
  background: #04C4F6;
  color: #131313;
}

/* ---------- A) Card horizontal ---------- */
.wa--impacto.wa--iwa-emil.wa-fila {
  border-color: #131313;
  box-shadow: 6px 6px 0 #04C4F6;
}

.wa--impacto.wa--iwa-emil .wa-fila__nombre {
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-meta {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-oferta small {
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-fila__pie {
  border-top-color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-por {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-por b {
  color: #037693;
}

/* ---------- B) Caja de bono ---------- */
.wa--impacto.wa--iwa-emil .wa-caja {
  border-color: #131313;
  box-shadow: 6px 6px 0 #04C4F6;
}

.wa--impacto.wa--iwa-emil .wa-caja__cuerpo {
  background: var(--i-velocidad), #037693;
}

.wa--impacto.wa--iwa-emil .wa-caja__importe,
.wa--impacto.wa--iwa-emil .wa-caja .wa-legal {
  color: #fff;
}

/* ---------- C) Banner ---------- */
.wa--impacto.wa--iwa-emil.wa-banner {
  box-shadow: 6px 6px 0 #131313;
}

.wa--impacto.wa--iwa-emil .wa-banner__txt > span,
.wa--impacto.wa--iwa-emil.wa-banner .wa-banner__legal {
  color: #fff;
}

/* ---------- Compacta (impacto no la cubría) ---------- */
.wa--impacto.wa--iwa-emil .wa-cmp__hero {
  position: relative;
  padding-right: 64px;
  border-radius: 0;
  background: linear-gradient(115deg, transparent 90%, #04C4F6 90%, #04C4F6 93%, transparent 93%), var(--i-velocidad), #037693;
  box-shadow: 8px 8px 0 #131313;
}

.wa--impacto.wa--iwa-emil .wa-cmp__titulo {
  font: italic 800 26px/1.1 var(--wa-titulo);
  letter-spacing: -.02em;
}

.wa--impacto.wa--iwa-emil .wa-cmp__badges span {
  border-radius: 0;
  background: rgba(19, 19, 19, .24);
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-cmp__badges svg {
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-cmp__metodo {
  color: #fff !important;
  text-decoration: underline;
}

.wa--impacto.wa--iwa-emil .wa-cmp__tabla {
  border: 2px solid #131313;
  border-radius: 0;
  box-shadow: 6px 6px 0 #E9E9E9;
}

.wa--impacto.wa--iwa-emil .wa-cmp__cab {
  background: #131313;
  color: #fff;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.wa--impacto.wa--iwa-emil .wa-cmp__fila {
  border-top-color: #E9E9E9;
}

.wa--impacto.wa--iwa-emil .wa-cmp__fila.is-top {
  box-shadow: inset 5px 0 0 #04C4F6;
}

.wa--impacto.wa--iwa-emil .wa-cmp__pos,
.wa--impacto.wa--iwa-emil .wa-cmp__fila.is-top .wa-cmp__pos {
  border: 0;
  border-radius: 0;
  background: #037693;
  color: #fff;
  font: italic 800 14px var(--wa-titulo);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.wa--impacto.wa--iwa-emil .wa-cmp__fila.is-top .wa-cmp__pos {
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-cmp__nombre .wa-cmp__nombre-h {
  color: #131313;
  font-style: italic;
  font-weight: 800;
}

.wa--impacto.wa--iwa-emil .wa-cmp__bono {
  border-radius: 0;
  filter: none;
}

.wa--impacto.wa--iwa-emil .wa-cmp__bono small {
  color: #fff;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.wa--impacto.wa--iwa-emil .wa-cmp__bono b {
  font-style: italic;
  font-weight: 800;
}

.wa--impacto.wa--iwa-emil .wa-cmp__codigo {
  border: 2px solid #fff;
  border-radius: 0;
  background: transparent;
}

.wa--impacto.wa--iwa-emil .wa-cmp__pagos span {
  border: 2px solid #E9E9E9;
  border-radius: 0;
  background: #fff;
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-cmp__ventajas li {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-cmp__ventajas li:first-child {
  color: #037693;
}

.wa--impacto.wa--iwa-emil .wa-cmp__ficha {
  color: #131313 !important;
  font-style: italic;
}

.wa--impacto.wa--iwa-emil .wa-cmp__pie {
  border-top: 2px solid #131313;
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-cmp__bono:hover {
    filter: none;
  }
}

/* ---------- Lateral ---------- */
.wa--impacto.wa--iwa-emil .wa-lat__cab {
  color: #333;
}

.wa--impacto.wa--iwa-emil .wa-lat__item,
.wa--impacto.wa--iwa-emil .wa-lat__item.is-top {
  border-color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-lat__item.is-top {
  box-shadow: 4px 4px 0 #04C4F6;
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-lat__item:hover {
    border-color: #131313;
    box-shadow: 4px 4px 0 #037693;
  }
}

.wa--impacto.wa--iwa-emil .wa-lat__pos,
.wa--impacto.wa--iwa-emil .wa-lat__item.is-top .wa-lat__pos {
  background: #037693;
  color: #fff;
}

.wa--impacto.wa--iwa-emil .wa-lat__item.is-top .wa-lat__pos {
  background: #04C4F6;
  color: #131313;
}

.wa--impacto.wa--iwa-emil .wa-lat__bono {
  background: var(--i-velocidad), #037693;
}

/* ---------- Movimiento (emil) ---------- */

/* 1. Lo que se pulsa responde al dedo. Solo transform; el color cambia al
 * instante (es un hover que se ve decenas de veces). */
.wa--impacto.wa--iwa-emil .wa-btn,
.wa--impacto.wa--iwa-emil .wa-btn2,
.wa--impacto.wa--iwa-emil .wa-rk-fbtn,
.wa--impacto.wa--iwa-emil .wa-rk-mas,
.wa--impacto.wa--iwa-emil .wa-appbtn,
.wa--impacto.wa--iwa-emil .wa-news__fila button,
.wa--impacto.wa--iwa-emil .wa-ticket__cta,
.wa--impacto.wa--iwa-emil .wa-lat__cta {
  transition: transform 160ms var(--ie-out);
}

.wa--impacto.wa--iwa-emil .wa-btn:active,
.wa--impacto.wa--iwa-emil .wa-btn2:active,
.wa--impacto.wa--iwa-emil .wa-rk-fbtn:active,
.wa--impacto.wa--iwa-emil .wa-rk-mas:active,
.wa--impacto.wa--iwa-emil .wa-appbtn:active,
.wa--impacto.wa--iwa-emil .wa-news__fila button:active {
  transform: scale(.97);
}

/* Bloques anchos: menos escala (un 3% en algo ancho se nota demasiado). */
.wa--impacto.wa--iwa-emil .wa-ticket,
.wa--impacto.wa--iwa-emil .wa-oferta,
.wa--impacto.wa--iwa-emil.wa-banner,
.wa--impacto.wa--iwa-emil .wa-caja,
.wa--impacto.wa--iwa-emil .wa-lat__item,
.wa--impacto.wa--iwa-emil .wa-bono,
.wa--impacto.wa--iwa-emil .wa-cmp__bono {
  transition: transform 160ms var(--ie-out);
}

.wa--impacto.wa--iwa-emil .wa-ticket:active,
.wa--impacto.wa--iwa-emil .wa-oferta:active,
.wa--impacto.wa--iwa-emil.wa-banner:active,
.wa--impacto.wa--iwa-emil .wa-caja:active,
.wa--impacto.wa--iwa-emil .wa-lat__item:active,
.wa--impacto.wa--iwa-emil .wa-bono:active,
.wa--impacto.wa--iwa-emil .wa-cmp__bono:active {
  transform: scale(.985);
}

/* 2. Flechas que se adelantan al pasar (lateral). */
.wa--impacto.wa--iwa-emil .wa-lat__cta svg,
.wa--impacto.wa--iwa-emil .wa-bono__chev {
  display: inline-block;
  transition: transform 160ms var(--ie-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa--impacto.wa--iwa-emil .wa-lat__item:hover .wa-lat__cta svg,
  .wa--impacto.wa--iwa-emil .wa-bono:hover .wa-bono__chev {
    transform: translateX(2px);
    transition-duration: 220ms;
  }
}

/* 3. «Ficha»: flecha con curva propia; la ficha entra desde su botón
 * (opacidad + 6 px). Sin desenfoque: solo transform y opacity. */
.wa--impacto.wa--iwa-emil .wa-rk-fbtn svg {
  transition: transform 200ms var(--ie-out);
}

.wa--impacto.wa--iwa-emil .wa-ficha {
  transition: opacity 220ms var(--ie-out), transform 220ms var(--ie-out);
}

@starting-style {
  .wa--impacto.wa--iwa-emil .wa-ficha:not([hidden]) {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* 4. «Ver más casas» (ranking y compacta): entrada escalonada, 50 ms. */
.wa--impacto.wa--iwa-emil .wa-rk-card.is-revelada,
.wa--impacto.wa--iwa-emil .wa-cmp__fila.is-revelada {
  transition: opacity 280ms var(--ie-out), transform 280ms var(--ie-out);
  transition-delay: calc(var(--wa-i, 0) * 50ms);
}

@starting-style {
  .wa--impacto.wa--iwa-emil .wa-rk-card.is-revelada,
  .wa--impacto.wa--iwa-emil .wa-cmp__fila.is-revelada {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 5. Novedades: el mensaje entra suave; el error, sacudida corta. */
.wa--impacto.wa--iwa-emil .wa-news__msg {
  transition: opacity 200ms var(--ie-out), transform 200ms var(--ie-out);
}

@starting-style {
  .wa--impacto.wa--iwa-emil .wa-news__msg {
    opacity: 0;
    transform: translateY(4px);
  }
}

.wa--impacto.wa--iwa-emil .wa-news__msg.is-error {
  animation: wa-ie-sacude 300ms var(--ie-out);
}

.wa--impacto.wa--iwa-emil .wa-news__fila button:disabled {
  opacity: .7;
}

@keyframes wa-ie-sacude {
  20% { transform: translateX(-4px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  100% { transform: none; }
}

/* 6. Móvil: la hoja sube con curva de cajón tipo iOS y el fondo aparece
 * con opacidad. La salida es inmediata (la anima el JS solo en .wa--emil). */
@media (max-width: 767.98px) {
  .wa--impacto.wa--iwa-emil .wa-ficha:not([hidden]) {
    transition: transform 380ms var(--ie-drawer);
  }

  @starting-style {
    .wa--impacto.wa--iwa-emil .wa-ficha:not([hidden]) {
      opacity: 1;
      transform: translateY(100%);
    }
  }

  .wa--impacto.wa--iwa-emil .wa-ficha__cab {
    background: var(--i-velocidad), #037693;
  }

  .wa--impacto.wa--iwa-emil .wa-ficha__cerrar {
    color: #fff;
  }

  .wa--impacto.wa--iwa-emil .wa-ficha__pie {
    border-top-color: #131313;
  }

  .wa--impacto.wa--iwa-emil .wa-btn--ghost {
    border-color: #131313;
    background: #fff;
    color: #131313;
  }

  /* El fondo está fuera de la raíz (lo crea el JS en <body>). */
  html:has(.wa--iwa-emil .wa-ficha:not([hidden])) .wa-fondo:not([hidden]) {
    background: rgba(19, 19, 19, .5);
    transition: opacity 260ms ease;
  }

  @starting-style {
    html:has(.wa--iwa-emil .wa-ficha:not([hidden])) .wa-fondo:not([hidden]) {
      opacity: 0;
    }
  }
}

/* Movimiento reducido: queda la opacidad; fuera desplazamientos, escalas,
 * líneas que se mueven y sacudidas. */
@media (prefers-reduced-motion: reduce) {
  .wa--impacto.wa--iwa-emil .wa-ficha,
  .wa--impacto.wa--iwa-emil .wa-ficha:not([hidden]),
  .wa--impacto.wa--iwa-emil .wa-rk-card.is-revelada,
  .wa--impacto.wa--iwa-emil .wa-cmp__fila.is-revelada,
  .wa--impacto.wa--iwa-emil .wa-news__msg {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  .wa--impacto.wa--iwa-emil :active,
  .wa--impacto.wa--iwa-emil:active,
  .wa--impacto.wa--iwa-emil .wa-ticket::before,
  .wa--impacto.wa--iwa-emil .wa-oferta::before,
  .wa--impacto.wa--iwa-emil.wa-banner::before,
  .wa--impacto.wa--iwa-emil .wa-cmp__bono::before,
  .wa--impacto.wa--iwa-emil .wa-ticket__cta::after,
  .wa--impacto.wa--iwa-emil .wa-btn::after,
  .wa--impacto.wa--iwa-emil .wa-lat__cta svg,
  .wa--impacto.wa--iwa-emil .wa-bono__chev {
    transform: none !important;
    transition: none !important;
  }

  .wa--impacto.wa--iwa-emil .wa-news__msg.is-error {
    animation: none;
  }
}


/* =====================================================================
 * Variante «suave-emil» (variante="suave-emil" -> raíz «wa--emil wa--suave-emil»).
 * El diseño inicial con el movimiento de «emil» (pulsar, ficha, «ver más»,
 * hoja móvil arrastrable: el JS la reconoce por .wa--emil), pero con el
 * dibujo de cupón muy rebajado y la paleta ACTUAL de webapuestas.com:
 *   - fuera las muescas (::before/::after), el borde discontinuo y los
 *     degradados navy de cupón, oferta, caja, banner, lateral, compacta,
 *     hero, newsletter y cabecera de la hoja;
 *   - en su lugar, un tinte azul muy ligero (#049EC5 al 6%) con borde fino,
 *     textos en negro #131313 / azul oscuro #037693 y el CTA verde #3FBF53
 *     con texto blanco como único punto fuerte.
 * Misma estructura (no cambia HTML, solo la piel). Va al FINAL del CSS.
 * ===================================================================== */
.wa.wa--suave-emil {
  --wa-navy: #131313;
  --wa-navy2: #037693;
  --wa-cyan: #049EC5;
  --wa-blue: #037693;
  --wa-sky: rgba(4, 158, 197, .08);
  --wa-green: #3FBF53;
  --wa-green-dark: #36a948;
  --wa-ok: #037693;
  --wa-no: #333;
  --wa-line: #E9E9E9;
  --wa-ink: #131313;
  --wa-muted: #333;
  /* Tinte de los bloques de bono (antes navy). */
  --s-tinte: rgba(4, 158, 197, .06);
  --s-borde: rgba(4, 158, 197, .24);
  --s-sombra: 0 2px 10px rgba(19, 19, 19, .05);
  color: #131313;
}

/* ---------- Piezas comunes ---------- */
.wa--suave-emil .wa-logo {
  border-color: #E9E9E9;
  color: #131313;
}

.wa--suave-emil .wa-lic {
  border-color: var(--s-borde);
  background: var(--s-tinte);
  color: #037693;
}

.wa--suave-emil .wa-tip {
  background: #131313;
  color: #fff;
}

.wa--suave-emil .wa-nota {
  background: rgba(4, 158, 197, .1);
  color: #037693;
}

.wa--suave-emil .wa-cab-lic {
  color: #333;
  opacity: 1;
}

.wa--suave-emil .wa-ver {
  color: #037693;
}

.wa--suave-emil .wa-legal {
  color: #333;
}

.wa--suave-emil .wa-spoiler,
.wa--suave-emil .wa-spoiler--nuevo {
  background: #037693;
  color: #fff;
}

.wa--suave-emil .wa-spoiler--exclusivo {
  background: #131313;
}

.wa--suave-emil .wa-btn,
.wa--suave-emil .wa-ticket__cta,
.wa--suave-emil .wa-lat__cta {
  background: #3FBF53;
  color: #fff;
}

.wa--suave-emil .wa-btn2 {
  border: 1.5px solid var(--s-borde);
  background: #fff;
  color: #037693;
}

.wa--suave-emil .wa-btn--ghost {
  background: #E9E9E9;
  color: #131313;
}

@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-btn:hover,
  .wa--suave-emil [data-lk]:hover .wa-btn,
  .wa--suave-emil [data-lk]:hover .wa-ticket__cta,
  .wa--suave-emil .wa-lat__item:hover .wa-lat__cta {
    background: #36a948;
  }

  .wa--suave-emil .wa-btn2:hover,
  .wa--suave-emil .wa-rk-mas:hover,
  .wa--suave-emil .wa-btn.wa-btn--ghost:hover {
    background: rgba(4, 158, 197, .08);
  }
}

.wa--suave-emil [data-lk]:focus-visible,
.wa--suave-emil button:focus-visible,
.wa--suave-emil a:focus-visible,
.wa--suave-emil input:focus-visible,
.wa--suave-emil .wa-lat__item:focus-visible {
  outline: 2px solid #037693;
  outline-offset: 2px;
}

/* ---------- Hero (ranking y compacta): claro, sin degradado ---------- */
.wa--suave-emil .wa-rk-hero,
.wa--suave-emil .wa-cmp__hero {
  border: 1px solid #E9E9E9;
  background: linear-gradient(var(--s-tinte), var(--s-tinte)), #fff;
  box-shadow: var(--s-sombra);
  color: #131313;
}

.wa--suave-emil .wa-eyebrow {
  border-color: var(--s-borde);
  background: rgba(4, 158, 197, .08);
  color: #037693;
}

.wa--suave-emil .wa-rk-hero__badges span,
.wa--suave-emil .wa-cmp__badges span {
  border: 1px solid #E9E9E9;
  background: #fff;
  color: #333;
}

.wa--suave-emil .wa-cmp__badges svg {
  color: #037693;
}

.wa--suave-emil .wa-rk-hero__link,
.wa--suave-emil .wa-cmp__metodo {
  color: #037693 !important;
}

/* ---------- Ranking 2 ---------- */
.wa--suave-emil .wa-rk-card {
  border-color: #E9E9E9;
  box-shadow: var(--s-sombra);
}

.wa--suave-emil .wa-rk-card.is-top {
  border: 2px solid #049EC5;
  background: #fff;
  box-shadow: var(--s-sombra);
}

.wa--suave-emil .wa-rk-pos {
  border-color: var(--s-borde);
  background: var(--s-tinte);
  color: #037693;
}

.wa--suave-emil .is-top .wa-rk-pos {
  border: 0;
  background: #037693;
  color: #fff;
}

.wa--suave-emil .wa-rk-fbtn {
  border: 1.5px solid var(--s-borde);
  background: #fff;
  color: #037693;
}

/* La tarjeta no es clicable: sin sombra que cambie al pasar. */
@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-rk-card,
  .wa--suave-emil.wa-fila,
  .wa--suave-emil .wa-caja {
    transition: none;
  }

  .wa--suave-emil .wa-rk-card:hover,
  .wa--suave-emil.wa-fila:hover,
  .wa--suave-emil .wa-caja:hover {
    box-shadow: var(--s-sombra);
  }
}

/* Cupón: sin muescas, sin troquel discontinuo, sin navy. */
.wa--suave-emil .wa-ticket,
.wa--suave-emil .wa-oferta {
  border: 1px solid var(--s-borde);
  background: var(--s-tinte);
  color: #131313;
}

.wa--suave-emil .wa-ticket__label,
.wa--suave-emil .wa-oferta small {
  color: #037693;
}

.wa--suave-emil .wa-ticket__codigo {
  color: #333;
  opacity: 1;
}

.wa--suave-emil .wa-ticket__codigo strong {
  color: #131313;
}

.wa--suave-emil .wa-ticket__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0;
}

.wa--suave-emil .wa-ticket__cta::before {
  display: none;
}

/* La muesca de abajo se reaprovecha como flecha que se adelanta al pasar. */
.wa--suave-emil .wa-ticket__cta::after {
  content: "→";
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 6px;
  border-radius: 0;
  background: none;
  transition: transform 160ms var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-ticket:hover .wa-ticket__cta::after {
    transform: translateX(3px);
    transition-duration: 220ms;
  }
}

/* Ficha */
.wa--suave-emil .wa-ficha {
  border-top-color: #E9E9E9;
  background: #fff;
}

.wa--suave-emil .wa-ideal {
  border-color: var(--s-borde);
  background: var(--s-tinte);
  color: #037693;
}

.wa--suave-emil .wa-resumen {
  border-left-color: #049EC5;
  background: rgba(4, 158, 197, .05);
  color: #333;
}

.wa--suave-emil .wa-chip,
.wa--suave-emil .wa-pago {
  border-color: #E9E9E9;
  background: #fff;
  color: #333;
}

.wa--suave-emil .wa-appbtn {
  background: #131313;
}

.wa--suave-emil .wa-datos td {
  border-bottom-color: #E9E9E9;
}

.wa--suave-emil .wa-pc .is-pro {
  background: rgba(63, 191, 83, .08);
}

.wa--suave-emil .wa-pc .is-contra {
  background: rgba(233, 233, 233, .6);
}

.wa--suave-emil .wa-juegos .is-off {
  color: #333;
}

.wa--suave-emil .wa-bono {
  border-color: #E9E9E9;
  border-left: 3px solid #049EC5;
  background: #fff;
}

.wa--suave-emil .wa-bono em {
  color: #333;
}

.wa--suave-emil .wa-rk-mas {
  border: 1.5px solid var(--s-borde);
  color: #037693;
}

.wa--suave-emil .wa-news {
  border: 1px solid var(--s-borde);
  background: var(--s-tinte);
  color: #131313;
}

.wa--suave-emil .wa-news__ico {
  background: #fff;
}

.wa--suave-emil .wa-news__top p,
.wa--suave-emil .wa-news__chk {
  color: #333;
}

.wa--suave-emil .wa-news__chk a {
  color: #037693 !important;
}

.wa--suave-emil .wa-news__fila input {
  border: 1px solid #037693;
}

.wa--suave-emil .wa-news__fila button {
  background: #037693;
  color: #fff;
}

.wa--suave-emil .wa-news__msg,
.wa--suave-emil .wa-news__msg.is-error {
  color: #131313;
}

/* ---------- A) Card horizontal ---------- */
.wa--suave-emil.wa-fila {
  border-color: #E9E9E9;
  box-shadow: var(--s-sombra);
}

.wa--suave-emil .wa-fila__pie,
.wa--suave-emil .wa-cmp__pie {
  border-top-color: #E9E9E9;
  background: rgba(233, 233, 233, .35);
}

.wa--suave-emil .wa-por b {
  color: #037693;
}

/* ---------- B) Caja de bono ---------- */
.wa--suave-emil .wa-caja {
  border-color: #E9E9E9;
  box-shadow: var(--s-sombra);
}

.wa--suave-emil .wa-caja__top {
  padding-bottom: 16px;
}

.wa--suave-emil .wa-caja__cuerpo {
  border-top: 1px solid var(--s-borde);
  background: var(--s-tinte);
  color: #131313;
}

/* Fuera la curva blanca que «muerde» el cuerpo. */
.wa--suave-emil .wa-caja__cuerpo::before {
  display: none;
}

.wa--suave-emil .wa-caja__importe {
  color: #131313;
}

.wa--suave-emil .wa-caja .wa-legal {
  color: #333;
}

/* ---------- C) Banner ---------- */
.wa--suave-emil.wa-banner {
  border: 1px solid var(--s-borde);
  background: linear-gradient(var(--s-tinte), var(--s-tinte)), #fff;
  box-shadow: var(--s-sombra);
  color: #131313;
}

.wa--suave-emil .wa-banner__txt > span,
.wa--suave-emil.wa-banner .wa-banner__legal {
  color: #333;
}

/* ---------- Compacta ---------- */
.wa--suave-emil .wa-cmp__tabla {
  border-color: #E9E9E9;
  box-shadow: var(--s-sombra);
}

.wa--suave-emil .wa-cmp__cab {
  border-bottom-color: #E9E9E9;
  background: rgba(233, 233, 233, .35);
  color: #333;
}

.wa--suave-emil .wa-cmp__fila {
  border-top-color: #E9E9E9;
}

.wa--suave-emil .wa-cmp__pos {
  border-color: var(--s-borde);
  background: var(--s-tinte);
  color: #037693;
}

.wa--suave-emil .wa-cmp__fila.is-top .wa-cmp__pos {
  border-color: #037693;
  background: #037693;
  color: #fff;
}

.wa--suave-emil .wa-cmp__bono {
  border: 1px solid var(--s-borde);
  background: var(--s-tinte);
  color: #131313;
  filter: none;
  transition: transform 160ms var(--e-out);
}

.wa--suave-emil .wa-cmp__bono small {
  color: #037693;
}

.wa--suave-emil .wa-cmp__codigo {
  border: 1px solid var(--s-borde);
  background: #fff;
  color: #037693;
}

.wa--suave-emil .wa-cmp__pagos span {
  border-color: #E9E9E9;
  background: #fff;
  color: #333;
}

.wa--suave-emil .wa-cmp__ventajas li {
  color: #333;
}

.wa--suave-emil .wa-cmp__ventajas li:first-child {
  color: #037693;
}

.wa--suave-emil .wa-cmp__ficha {
  color: #037693 !important;
}

@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-cmp__bono:hover {
    filter: none;
  }
}

/* ---------- Lateral ---------- */
.wa--suave-emil .wa-lat__cab {
  color: #333;
}

.wa--suave-emil .wa-lat__item {
  border-color: #E9E9E9;
}

.wa--suave-emil .wa-lat__item.is-top {
  border-color: #049EC5;
}

@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-lat__item:hover {
    border-color: #049EC5;
    box-shadow: var(--s-sombra);
  }
}

.wa--suave-emil .wa-lat__pos {
  background: #131313;
  color: #fff;
}

.wa--suave-emil .wa-lat__item.is-top .wa-lat__pos {
  background: #04C4F6;
  color: #131313;
}

.wa--suave-emil .wa-lat__bono {
  border-left: 1px solid #E9E9E9;
  background: var(--s-tinte);
  color: #131313;
}

.wa--suave-emil .wa-lat__bono::before,
.wa--suave-emil .wa-lat__bono::after {
  display: none;
}

/* ---------- Movimiento: el de «emil», limitado a transform y opacity ---------- */

/* Pulsar: emil anima también fondo y sombra; aquí solo la escala
 * (el color cambia al instante). */
.wa--suave-emil .wa-btn,
.wa--suave-emil .wa-btn2,
.wa--suave-emil .wa-rk-fbtn,
.wa--suave-emil .wa-rk-mas,
.wa--suave-emil .wa-appbtn,
.wa--suave-emil .wa-news__fila button,
.wa--suave-emil .wa-ticket__cta,
.wa--suave-emil .wa-lat__cta,
.wa--suave-emil .wa-ticket,
.wa--suave-emil .wa-oferta,
.wa--suave-emil.wa-banner,
.wa--suave-emil .wa-caja,
.wa--suave-emil .wa-lat__item,
.wa--suave-emil .wa-bono {
  transition: transform 160ms var(--e-out);
}

/* Compacta (emil no la cubría): el cupón y «Visitar» también se pulsan. */
.wa--suave-emil .wa-cmp__bono:active {
  transform: scale(.985);
}

.wa--suave-emil .wa-lat__item:active {
  transform: scale(.985);
}

.wa--suave-emil .wa-bono__chev {
  display: inline-block;
  transition: transform 160ms var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa--suave-emil .wa-bono:hover .wa-bono__chev {
    transform: translateX(2px);
    transition-duration: 220ms;
  }
}

/* Ficha: la entrada de emil sin el desenfoque (filter fuera). */
.wa--suave-emil .wa-ficha {
  transition: opacity 220ms var(--e-out), transform 220ms var(--e-out);
}

@starting-style {
  .wa--suave-emil .wa-ficha:not([hidden]) {
    filter: none;
  }
}

/* «Ver más» también en la compacta, escalonado igual que el ranking. */
.wa--suave-emil .wa-cmp__fila.is-revelada {
  transition: opacity 280ms var(--e-out), transform 280ms var(--e-out);
  transition-delay: calc(var(--wa-i, 0) * 50ms);
}

@starting-style {
  .wa--suave-emil .wa-cmp__fila.is-revelada {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Hoja móvil: misma mecánica de emil (sube con curva de cajón, se arrastra,
 * sale en 220 ms), cabecera clara con asa oscura. */
@media (max-width: 767.98px) {
  .wa--suave-emil .wa-ficha:not([hidden]) {
    box-shadow: 0 -6px 24px rgba(19, 19, 19, .14);
  }

  .wa--suave-emil .wa-ficha__cab {
    border-bottom: 1px solid #E9E9E9;
    background: #fff;
    color: #131313;
  }

  .wa--suave-emil .wa-ficha__cab::before {
    background: rgba(19, 19, 19, .2);
  }

  .wa--suave-emil .wa-ficha__cerrar {
    color: #131313;
  }

  .wa--suave-emil .wa-ficha__pie {
    border-top-color: #E9E9E9;
  }

  html:has(.wa--suave-emil .wa-ficha:not([hidden])) .wa-fondo {
    background: rgba(19, 19, 19, .4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa--suave-emil .wa-cmp__fila.is-revelada {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  .wa--suave-emil :active,
  .wa--suave-emil:active,
  .wa--suave-emil .wa-ticket__cta::after,
  .wa--suave-emil .wa-bono__chev {
    transform: none !important;
    transition: none !important;
  }
}


/* ---------- [intenciones /]: chips de acceso (20-oct-2026) ---------- */
.wa-int {
  /* La fila de chips no se parte: sin «contain» su ancho mínimo estiraba la
   * columna principal y el Top 10 del sidebar caía fuera de su sitio. */
  contain: inline-size;
  max-width: 100%;
  margin: 16px 0;
}

.wa-int__titulo {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
}

html body .wa-int__lista {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

html body .wa-int__lista li {
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .wa-int__lista li::before {
  content: none;
}

html body .wa-int a.wa-int__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #e9e9e9;
  border-radius: 999px;
  background: #fff;
  color: #131313;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease-out, color .15s ease-out;
}

.wa-int__chip svg {
  width: 16px;
  height: 16px;
  color: #037693;
}

html body .wa-int a.wa-int__chip[aria-current="page"] {
  border-color: #037693;
  color: #037693;
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-int a.wa-int__chip:hover {
    border-color: #049ec5;
    color: #037693;
  }
}

html body .wa-int a.wa-int__chip:focus-visible {
  outline: 2px solid #037693;
  outline-offset: 2px;
}

/* Nombres de casa en H3 (20-oct-2026): como en el ranking antiguo. El H3 no
 * debe cambiar el aspecto: se anulan márgenes y tamaños del tema. */
html body .wa h3.wa-rk-nombre,
html body .wa h3.wa-fila__nombre,
html body .wa h3.wa-cmp__nombre-h {
  margin-top: 0;
  padding: 0;
  border: 0;
  line-height: 1.2;
  text-transform: none;
}

html body .wa h3.wa-rk-nombre::before,
html body .wa h3.wa-fila__nombre::before,
html body .wa h3.wa-cmp__nombre-h::before,
html body .wa h3.wa-rk-nombre::after,
html body .wa h3.wa-fila__nombre::after,
html body .wa h3.wa-cmp__nombre-h::after {
  content: none;
}

html body .wa h3.wa-cmp__nombre-h {
  margin: 0;
  color: var(--wa-navy);
  font: 700 14.5px/1.2 var(--wa-titulo);
  overflow-wrap: anywhere;
}

/* Enlace interno «Análisis de X» bajo el nombre (21-oct-2026): visible en
 * escritorio y móvil, fuera de cualquier data-lk (como el «Leer opiniones de X»
 * del ranking antiguo). Base mínima: cada estilo puede retocarlo. */
.wa-rk-analisis {
  display: inline-block;
  margin: 0 0 4px;
  color: var(--wa-enlace, #0369a1);
  font: 600 13px/1.3 var(--wa-titulo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

html body .wa a.wa-rk-analisis {
  text-decoration: underline !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .wa a.wa-rk-analisis:hover {
    color: var(--wa-navy);
  }
}

.wa-rk-analisis:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
 * TARJETAS DE BONO CON IMAGEN (disenyo="imagen"; en pruebas también
 * «boxes»). 21-oct-2026. Imagen del bono arriba (con el logo encima) y
 * franja oscura con el importe, el CTA verde y «Detalles del bono».
 * Cada estilo (?estilo=) cambia el color de la franja y el radio.
 * ===================================================================== */
.wa-imgs {
  --wi-franja: linear-gradient(160deg, #1b2433 0%, #121822 100%);
  --wi-r: 14px;
  margin: 24px 0;
}

.wa-imgs__cab {
  margin-bottom: 12px;
}

.wa-imgs__rejilla {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.wa-imgs--1 .wa-imgs__rejilla { grid-template-columns: minmax(0, 420px); }
.wa-imgs--2 .wa-imgs__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-imgs--3 .wa-imgs__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767.98px) {
  .wa-imgs--2 .wa-imgs__rejilla,
  .wa-imgs--3 .wa-imgs__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wa-img {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wi-r);
  background: var(--wi-franja);
  color: #fff;
}

.wa-img__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #0d1118;
}

.wa-img__fondo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-img__fondo--vacio {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, #03556b 0%, #037693 55%, #049ec5 100%);
}

.wa-img__logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  height: 44px;
  padding: 6px 12px;
  border-radius: calc(var(--wi-r) - 6px);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  color: #131313;
  font-weight: 800;
}

.wa-img__logo img {
  max-width: 110px;
  max-height: 30px;
  width: auto;
  height: auto;
}

.wa-img__cinta {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #04C4F6;
  color: #131313;
  font: 800 .72rem/1.2 Poppins, Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wa-img__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.wa-img__tipo {
  color: rgba(255, 255, 255, .7);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wa-img__importe {
  color: #fff;
  font: 800 1.45rem/1.15 Poppins, Arial, sans-serif;
  letter-spacing: -.01em;
}

.wa-img__desc {
  margin: 0 0 4px !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: .88rem !important;
  line-height: 1.4 !important;
}

.wa-img .wa-ver {
  color: #8fe3a0;
  font-size: .78rem;
}

.wa-img .wa-ticket__codigo {
  color: #fff;
  font-size: .82rem;
}

.wa-img__pie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.wa-img .wa-img__cta {
  text-align: center;
}

.wa-img__detalles {
  align-self: center;
  color: rgba(255, 255, 255, .78) !important;
  font-size: .82rem;
  text-decoration: none !important;
}

.wa-img__detalles:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.wa-img .wa-legal {
  color: rgba(255, 255, 255, .6);
  font-size: .7rem;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .wa-img .wa-img__fondo {
    transition: transform 400ms cubic-bezier(.23, 1, .32, 1);
  }

  .wa-img:hover .wa-img__fondo {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-img .wa-img__fondo {
    transition: none;
  }
}

.wa-img__datos {
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
}

/* Título del bono como H3 (bloque «Todos los bonos de X» de la reseña):
   mismo aspecto que el párrafo. */
.wa-img h3.wa-img__desc {
  font-family: inherit !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

/* ---------- [wa_enlaces]: rejilla de enlaces internos (26-oct-2026) ----------
 * estilo «boton»: icono + texto en una línea (enlazado cruzado, «Guías
 * relacionadas»). estilo «tarjeta»: icono + título + descripción. 1-4
 * columnas; en tableta 2 como mucho y en móvil 1. Toda la caja es el
 * enlace. Iconos finos de WaIconos, en el azul de la web.
 */
.wa-enl {
  --enl-ink: #131313;
  --enl-muted: #5f6670;
  --enl-line: #E3E7EA;
  --enl-brand: #049EC5;
  --enl-brand-ink: #037693;
  --enl-tinte: rgba(4, 158, 197, .08);
  --enl-curva: cubic-bezier(.23, 1, .32, 1);
  margin: 22px 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html body .wa-enl .wa-enl__titulo {
  margin: 0 0 12px;
  color: var(--enl-ink);
  font: 700 19px/1.3 Poppins, Inter, sans-serif;
  letter-spacing: -.01em;
}

html body .wa-enl .wa-enl__lista {
  display: grid;
  grid-template-columns: repeat(var(--enl-cols, 3), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-enl--c1 { --enl-cols: 1; }
.wa-enl--c2 { --enl-cols: 2; }
.wa-enl--c3 { --enl-cols: 3; }
.wa-enl--c4 { --enl-cols: 4; }

html body .wa-enl .wa-enl__lista > li {
  margin: 0;
  padding: 0;
}

html body .wa-enl .wa-enl__lista > li::before,
html body .wa-enl .wa-enl__lista > li::marker {
  content: none;
}

html body .wa-enl a.wa-enl__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--enl-line);
  border-radius: 12px;
  background: #fff;
  color: var(--enl-ink);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(19, 19, 19, .04);
  transition: border-color .18s var(--enl-curva), box-shadow .18s var(--enl-curva), transform .14s var(--enl-curva);
}

.wa-enl__icono {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--enl-tinte);
  color: var(--enl-brand-ink);
}

.wa-enl__icono svg {
  width: 22px;
  height: 22px;
}

.wa-enl__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wa-enl__texto {
  font: 600 15px/1.3 Inter, system-ui, sans-serif;
}

.wa-enl__desc {
  color: var(--enl-muted);
  font-size: 14px;
  line-height: 1.45;
}

.wa-enl__flecha {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--enl-brand-ink);
  opacity: .55;
  transition: transform .18s var(--enl-curva), opacity .18s var(--enl-curva);
}

/* Tarjeta: más aire, icono arriba alineado con el título. */
html body .wa-enl--tarjeta a.wa-enl__item {
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}

.wa-enl--tarjeta .wa-enl__icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.wa-enl--tarjeta .wa-enl__icono svg {
  width: 24px;
  height: 24px;
}

.wa-enl--tarjeta .wa-enl__texto {
  font: 700 16px/1.3 Poppins, Inter, sans-serif;
}

.wa-enl--tarjeta .wa-enl__flecha {
  margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-enl a.wa-enl__item:hover {
    border-color: rgba(4, 158, 197, .45);
    box-shadow: 0 6px 18px rgba(19, 19, 19, .07);
  }

  .wa-enl__item:hover .wa-enl__flecha {
    opacity: 1;
    transform: translateX(3px);
  }
}

html body .wa-enl a.wa-enl__item:active {
  transform: scale(.98);
}

html body .wa-enl a.wa-enl__item:focus-visible {
  outline: 2px solid var(--enl-brand-ink);
  outline-offset: 2px;
}

/* Tableta: como mucho 2 columnas. */
@media (max-width: 991px) {
  .wa-enl--c3,
  .wa-enl--c4 {
    --enl-cols: 2;
  }
}

/* Móvil: una columna (los textos de los botones no caben en dos). */
@media (max-width: 575px) {
  .wa-enl--c2,
  .wa-enl--c3,
  .wa-enl--c4 {
    --enl-cols: 1;
  }

  html body .wa-enl a.wa-enl__item {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .wa-enl a.wa-enl__item,
  .wa-enl__flecha {
    transition: none;
  }
}

/* [wa_enlaces] dentro del cuerpo: los estilos de los enlaces del texto
 * (subrayado y azul; en la V3, «main .field--name-body li a» con !important)
 * no deben llegar a la caja. */
html body .wa-enl .wa-enl__lista > li > a.wa-enl__item,
html body .wa-enl .wa-enl__lista > li > a.wa-enl__item:hover,
html body .wa-enl .wa-enl__lista > li > a.wa-enl__item:focus {
  color: var(--enl-ink) !important;
  text-decoration: none !important;
}

.wa-enl .wa-enl__texto {
  color: var(--enl-ink);
}

.wa-enl .wa-enl__desc {
  color: var(--enl-muted);
}

/* ---------- Sello único «Bonos verificados el …» (26-oct-2026) ----------
 * Encima de la primera tarjeta del ranking, en vez de «Verificado en …» en
 * cada bono. Texto normal, fuera de data-lk. ≥13px y contraste ≥4,5:1. */
.wa .wa-sello-ver {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(63, 191, 83, .09);
  color: #24323A;
  font: 500 13.5px/1.45 Inter, system-ui, sans-serif;
}

.wa .wa-sello-ver svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #1F7A33;
}

.wa .wa-sello-ver strong {
  font-weight: 700;
}

html body .wa .wa-sello-ver a {
  color: #037693;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(3, 118, 147, .35);
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  html body .wa .wa-sello-ver a:hover {
    text-decoration-color: currentColor;
  }
}

.wa-fila-sello {
  margin-bottom: 0;
}

/* Comparación en local/preprod (?verificado=fila): fechas por bono en vez
 * del sello. En prod las fechas por bono no se pintan. */
.wa .wa-ver.wa-ver--comparar {
  display: none;
}

html.wa-ver-fila .wa .wa-ver.wa-ver--comparar {
  display: inline-flex;
}

html.wa-ver-fila .wa .wa-sello-ver {
  display: none;
}

/* Sello en las cajas: la rejilla de .wa-cajas lo metía como una caja más;
 * ocupa la fila entera, como la línea de la licencia (26-oct-2026). */
.wa-cajas > .wa-sello-ver {
  grid-column: 1 / -1;
}