/**
 * Resto de componentes de la web en las versiones 3 (suave-acento) y 4
 * (definitiva) (pruebas, 21-oct-2026). Salieron sin diseño nuevo al montar
 * el escaparate completo /test-componentes:
 *   app móvil, código promocional, bono de una casa (ranking, boxes, sin
 *   depósito), pronósticos por competición, pronóstico del día, cuenta
 *   atrás, testimonios, criterios / estadísticas / equipo, etiquetas básicas
 *   (botón, cita, resaltado, letra capital) y la cita del editor.
 *
 * Cada versión pone su color de «cabecera» y su radio:
 *   V3 = azul de la web en degradado, esquinas de 12 px.
 *   V4 = negro-petróleo y todo recto (la V4 ya fuerza radio 0 en todo).
 * El CTA de afiliado siempre verde sobre blanco o como única mancha.
 */

html.estilo-acento[data-estilo="suave-emil"] {
  --rx-hero: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px), linear-gradient(135deg, #03556b 0%, #037693 55%, #049ec5 100%);
  --rx-hero-solido: #03556b;
  --rx-r: 12px;
  --rx-linea: #E3E8EA;
  --rx-tinte: rgba(4, 158, 197, .06);
}

html.estilo-def[data-estilo="suave-emil"] {
  --rx-hero: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 18px), linear-gradient(120deg, #131313 0%, #0d2128 45%, #0b3542 100%);
  --rx-hero-solido: #0d2128;
  --rx-r: 0px;
  --rx-linea: #E3E6E8;
  --rx-tinte: #F6F8F9;
}

/* ---------------------------------------------------------------------
 * 1. APP MÓVIL ([appmovil]): fuera el turquesa y el dorado; cabecera de
 *    la versión, titular en Poppins, botones de tienda en blanco.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app {
  border: 0;
  border-radius: var(--rx-r);
  background: var(--rx-hero);
  box-shadow: 0 18px 40px rgba(3, 40, 52, .22);
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__eyebrow {
  color: #04C4F6 !important;
  letter-spacing: .14em !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__title {
  font-family: Poppins, Arial, sans-serif !important;
  font-size: clamp(2rem, 3.6vw, 2.9rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__rule {
  width: 56px;
  height: 4px;
  background: #04C4F6;
}

html.estilo-def[data-estilo="suave-emil"] .wa-app .wa-app__rule {
  transform: skewX(-20deg);
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__store {
  border: 1px solid #fff;
  border-radius: calc(var(--rx-r) - 2px);
  background: #fff;
  color: #131313;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__store :is(span, small, strong, b) {
  color: #131313 !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__store-ico {
  color: #037693;
}

@media (hover: hover) and (pointer: fine) {
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__store {
    transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
  }

  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-app .wa-app__store:hover {
    transform: translateY(-2px);
  }
}

/* ---------------------------------------------------------------------
 * 2. CÓDIGO PROMOCIONAL ([bonobienvenida disenyo="codigo_promo"]).
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-card,
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-hero {
  border-radius: var(--rx-r);
  box-shadow: none;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-hero {
  background: var(--rx-hero) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-headline {
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-logo {
  border-radius: var(--rx-r);
  background: #fff;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-badge {
  border-radius: calc(var(--rx-r) - 4px);
  background: #04C4F6;
  color: #131313;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-promo-cta {
  border: 0 !important;
  border-radius: calc(var(--rx-r) - 4px);
  background: #3FBF53 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------
 * 3. BONO DE UNA CASA ([bonobienvenida]): tarjeta blanca de línea fina,
 *    logo en placa (no círculo), importe destacado y CTA verde.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .bookmaker-card {
  border: 1px solid var(--rx-linea) !important;
  border-radius: var(--rx-r);
  background: #fff;
  box-shadow: none !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .bookmaker-card .bookmaker-logo {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r) !important;
  background: #fff;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .bookmaker-card .bonus-info {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r);
  background: var(--rx-tinte);
  box-shadow: none !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main :is(.bookmaker-card, .text-center) .bonus-amount {
  color: #037693;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .bookmaker-card ul li::marker {
  color: #3FBF53;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .bookmaker-card .cta-button {
  border-radius: calc(var(--rx-r) - 4px);
}

/* Diseño «boxes»: el logo era una tira estrecha y el bono una cajita
   suelta. Ahora logo y bono ocupan la misma altura, uno al lado del otro. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row:has(.logo-casa-de-apuestas) {
  align-items: stretch;
  row-gap: 12px;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row > .col-md-7 > [data-lk] {
  height: 100%;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row > .col-md-7 .logo-casa-de-apuestas {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r) !important;
  background: #fff;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row > .col-md-7 .logo-casa-de-apuestas img {
  max-height: 64px;
  width: auto;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row > :is(.col-md-5, .col-md-7) > * {
  display: block;
  width: 100%;
  height: 100%;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .text-center > .row > .col-md-5 .bonus-info {
  max-width: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border: 1px solid var(--rx-linea) !important;
  border-radius: var(--rx-r);
  background: var(--rx-tinte);
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
 * 4. PRONÓSTICOS POR COMPETICIÓN ([getpronosticos]): tarjeta blanca; la
 *    parte de los equipos con el color de cabecera de la versión.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .prono-card {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r);
  box-shadow: none !important;
  overflow: hidden;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .prono-card :is(.prono-card__top, .prono-card__teams) {
  background: var(--rx-hero) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .prono-card .prono-card__top :is(span, div, p) {
  color: #fff;
}

/* ---------------------------------------------------------------------
 * 5. PRONÓSTICO DEL DÍA ([getpronosticodeldia]): misma cabecera.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .lista-pronosticos .pronos {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r);
  overflow: hidden;
  box-shadow: none !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .lista-pronosticos .pronos-header {
  background: var(--rx-hero) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .lista-pronosticos .chip {
  border-radius: calc(var(--rx-r) - 4px);
}

/* ---------------------------------------------------------------------
 * 6. CUENTA ATRÁS ([playercountdown]): el título del partido salía oscuro
 *    sobre oscuro (lo pisaba el color de los H3 del cuerpo).
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .pc-widget .pc-title {
  color: #fff !important;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .pc-widget .pc-description {
  color: rgba(255, 255, 255, .72) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .pc-widget {
  border-radius: var(--rx-r);
}

/* ---------------------------------------------------------------------
 * 7. TESTIMONIOS ([testimonials]): tarjeta blanca con comillas.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .testimonial-card {
  position: relative;
  border: 1px solid var(--rx-linea) !important;
  border-radius: var(--rx-r);
  background: #fff !important;
  box-shadow: none !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .testimonial-card::before {
  content: "“";
  position: absolute;
  top: 6px;
  right: 18px;
  color: #04C4F6;
  font: 800 64px/1 Poppins, Arial, sans-serif;
  pointer-events: none;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .testimonial-card__source {
  color: #131313;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .testimonial-card__text {
  color: #333;
  font-style: italic;
  text-align: left !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .testimonial-card__logo {
  border: 0;
  border-top: 1px solid var(--rx-linea);
  border-radius: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------
 * 8. CRITERIOS, ESTADÍSTICAS Y EQUIPO ([htmlmarkup]).
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterios-esenciales {
  border: 1px solid var(--rx-linea) !important;
  border-radius: var(--rx-r) !important;
  background: #fff !important;
}

/* El título iba centrado y la pestaña de la V4 quedaba lejos: a la izquierda. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterios-esenciales h2 {
  text-align: left !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterio-item {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r);
  background: var(--rx-tinte);
  box-shadow: none !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterio-numero {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rx-r);
  background: #fff;
  color: #037693;
  font-size: 1.3rem;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterio-item h4 {
  color: #131313;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
}

/* Estadísticas: la cifra es la protagonista. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main :is(.estadisticas, [class*="estadistica"]) :is(strong, .numero, [class*="numero"]) {
  color: #037693;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

/* Equipo: tarjeta de línea fina; foto redonda también en la V4. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .card:has(img.rounded-circle) {
  border: 1px solid var(--rx-linea);
  border-radius: var(--rx-r);
  box-shadow: none;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .card img.rounded-circle {
  border-radius: 50% !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .card:has(img.rounded-circle) .h5 {
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

/* ---------------------------------------------------------------------
 * 9. ETIQUETAS BÁSICAS DEL EDITOR: salían como texto plano.
 * ------------------------------------------------------------------- */
/* [button]: enlace interno = botón secundario (el verde es solo afiliado). */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main a.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #037693;
  border-radius: calc(var(--rx-r) - 2px);
  background: #fff;
  color: #037693;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main a.button::after {
  content: "→";
}

@media (hover: hover) and (pointer: fine) {
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main a.button:hover {
    background: #037693;
    color: #fff;
  }
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main a.button:active {
  transform: scale(.97);
}

html.estilo-def[data-estilo="suave-emil"] main a.button {
  border-color: #131313;
  color: #131313;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-def[data-estilo="suave-emil"] main a.button:hover {
    background: #131313;
    color: #fff;
  }
}

/* [quote] y la cita del editor (blockquote): barra cian y cursiva. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main :is(span.quote, .field--name-body blockquote) {
  display: block;
  margin: 1.5rem 0;
  padding: 16px 20px;
  border-left: 3px solid #04C4F6;
  border-radius: 0 var(--rx-r) var(--rx-r) 0;
  background: var(--rx-tinte);
  color: #131313;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main .field--name-body blockquote p:last-child {
  margin-bottom: 0;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main span.quote .quote-author {
  display: block;
  order: 2;
  margin-bottom: 6px;
  color: #037693;
  font-size: .85rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* [highlight]: subrayado de rotulador en cian suave. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main span.highlight {
  padding: 0 2px;
  background: linear-gradient(transparent 55%, rgba(4, 196, 246, .32) 55%);
  color: inherit;
  font-weight: 600;
}

/* [dropcap]: letra capital en Poppins, azul. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] main span.dropcap {
  float: left;
  margin: 4px 10px 0 0;
  color: #037693;
  font: 800 3.4em/.8 Poppins, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * 10. TARJETAS DE BONO CON IMAGEN (disenyo «imagen» / «boxes»).
 *     Una idea propia por versión (no la tarjeta antigua tal cual):
 *     V3 «postal»: la foto se funde en blanco, el logo flota en una placa
 *        redondeada entre foto y texto; importe en azul y CTA verde sobre
 *        blanco.
 *     V4 «póster»: la foto ocupa toda la tarjeta y se oscurece abajo;
 *        etiqueta cian inclinada, importe blanco grande y el CTA en un pie
 *        blanco con corte en diagonal (como el pie de la web).
 * ------------------------------------------------------------------- */

/* ===== V3 · postal ===== */
html.estilo-acento[data-estilo="suave-emil"] .wa-img {
  border: 1px solid var(--rx-linea);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(19, 19, 19, .05);
  color: #131313;
  text-align: center;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__visual {
  aspect-ratio: 16 / 10;
  background: #fff;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(255, 255, 255, .85) 82%, #fff 100%);
  pointer-events: none;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__logo {
  z-index: 1;
  left: 50%;
  bottom: 4px;
  height: 52px;
  padding: 8px 16px;
  border: 1px solid var(--rx-linea);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(3, 61, 77, .14);
  transform: translateX(-50%);
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__cinta {
  border-radius: 999px;
  background: #fff;
  color: #037693;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__info {
  align-items: center;
  padding: 14px 18px 18px;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__tipo {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(4, 158, 197, .1);
  color: #037693;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__importe {
  color: #037693;
  font-size: 1.6rem;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__desc {
  color: #333 !important;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-ver {
  color: #23862F;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-ticket__codigo {
  color: #131313;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__pie {
  align-self: stretch;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-img__cta {
  border-radius: 10px;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__detalles {
  color: #037693 !important;
  font-weight: 600;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-legal {
  color: #6b7378;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento[data-estilo="suave-emil"] .wa-img {
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1);
  }

  html.estilo-acento[data-estilo="suave-emil"] .wa-img:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(3, 61, 77, .12);
  }
}

/* ===== V4 · póster ===== */
html.estilo-def[data-estilo="suave-emil"] .wa-img {
  position: relative;
  min-height: 470px;
  background: #131313;
  color: #fff;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__visual {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 19, 19, .18) 0%, rgba(19, 19, 19, 0) 28%, rgba(13, 33, 40, .55) 50%, rgba(13, 33, 40, .92) 66%, #0d2128 80%);
  pointer-events: none;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__logo {
  z-index: 1;
  top: 14px;
  bottom: auto;
  left: 14px;
  height: 46px;
  box-shadow: none;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__cinta {
  z-index: 1;
  top: 22px;
  right: 14px;
  left: auto;
  background: #3FBF53;
  color: #fff;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__info {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  padding: 0 18px;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__tipo {
  align-self: flex-start;
  margin-top: 170px;
  padding: 4px 14px;
  background: #04C4F6;
  color: #131313;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__importe {
  font-size: 2rem;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__pie {
  margin: 10px -18px 0;
  padding: 26px 18px 16px;
  background: #fff;
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
  color: #131313;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img__detalles {
  color: #131313 !important;
  font-weight: 600;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img .wa-legal {
  color: #5f676c;
}

/* ---------------------------------------------------------------------
 * 11. CAJAS DE BONO (disenyo «caja»): en V3/V4 habían quedado blancas y
 *     planas. Arriba el logo en blanco; abajo la franja de cabecera de la
 *     versión con el importe grande y el CTA verde (más llamativo, como
 *     pedía Fernando; inspirado en la caja de «emil»).
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rx-linea) !important;
  border-radius: var(--rx-r) !important;
  background: #fff !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-caja__top {
  background: #fff !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-caja__cuerpo {
  position: relative;
  flex: 1;
  background: var(--rx-hero) !important;
  color: #fff !important;
}

/* V3: borde superior curvo de la franja; V4: corte en diagonal. */
html.estilo-acento[data-estilo="suave-emil"] .wa-caja .wa-caja__cuerpo {
  border-radius: 50% 50% 0 0 / 18px 18px 0 0 !important;
}

html.estilo-def[data-estilo="suave-emil"] .wa-caja .wa-caja__cuerpo {
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
  padding-top: 26px !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-caja__titulo {
  color: rgba(255, 255, 255, .88) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-caja__importe {
  color: #fff !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-ver {
  color: #8fe3a0 !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-legal {
  color: rgba(255, 255, 255, .65) !important;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-caja .wa-ticket__codigo {
  color: #fff !important;
}

/* El tema fuerza height:auto en las imágenes del cuerpo: en el póster la
   foto debe cubrir toda la tarjeta. */
html.estilo-def[data-estilo="suave-emil"] .wa-img .wa-img__fondo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-img__fondo {
  height: 100% !important;
  object-fit: cover;
}

/* Póster V4: pies iguales (el aviso legal largo descuadraba) y borde fino
   para que el pie blanco no se funda con la página. */
html.estilo-def[data-estilo="suave-emil"] .wa-img {
  border: 1px solid #E3E6E8;
}

html.estilo-def[data-estilo="suave-emil"] .wa-img .wa-legal {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-img__datos {
  color: #5f676c;
}

/* ---------------------------------------------------------------------
 * 12. ACCESIBILIDAD (22-oct-2026, revisión WCAG 2.2 AA):
 *  - «Escrito por…» se puede enfocar (abre la ficha del autor) y no
 *    mostraba el foco con teclado.
 *  - Pulsables sueltos por debajo de 24 px (mínimo de WCAG 2.2): «Detalles
 *    del bono» de las tarjetas con imagen y el «+N» de las fichas.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .meta-confianza__escrito:focus-visible {
  outline: 2px solid #037693;
  outline-offset: 3px;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-img__detalles {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 6px;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-est__mas {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}

/* ---------------------------------------------------------------------
 * 13. CONTRASTE DE LOS CTA VERDES (22-oct-2026, decisión de Fernando):
 *     texto NEGRO sobre el MISMO verde. Blanco sobre #3FBF53 daba 2,39
 *     (WCAG AA pide 4,5); #131313 sobre #3FBF53 da 7,78 y sobre el verde
 *     del hover (#36a948) 6,13. Incluye iconos y flechas (currentColor).
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(
  .wa-est__cta, .wa-btn, .wac-btn, .wac-bono__cta, .btn-success, .wa-ticket__cta,
  .cta-button, .cta-boton, .wa-maq-dest__cta, .reco-sc__cta, .wbs-listing-card__cta,
  .wa-img__cta, .wa-lat__cta, .wa-promo-cta, .pc-cta, .wa-rk-cta, .wa-cmp__cta,
  .wa-fila__cta, .wa-caja__cta, .wac-banner__cta, .wbs-prono-card__cta
),
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(
  .wa-est__cta, .wa-btn, .wac-btn, .wac-bono__cta, .btn-success, .wa-ticket__cta,
  .cta-button, .cta-boton, .wa-maq-dest__cta, .reco-sc__cta, .wbs-listing-card__cta,
  .wa-img__cta, .wa-lat__cta, .wa-promo-cta, .pc-cta, .wa-rk-cta, .wa-cmp__cta,
  .wa-fila__cta, .wa-caja__cta, .wac-banner__cta, .wbs-prono-card__cta
) :is(span, i, svg, strong, b) {
  color: #131313 !important;
}

/* Textos azul claro sobre fondo claro (3,1 → 5,0 con el azul oscuro). */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wbs-listing-card__vermas, .lista-pronosticos .chip, .sycsl-enc__more, .wa-opinion a) {
  color: #037693 !important;
}

/* ---------------------------------------------------------------------
 * 14. VERDE DE LOS CTA = #00e08c (22-oct-2026, decisión de Fernando),
 *     con texto negro (10,65:1). Hover: #00c97e (8,54:1). Solo los botones
 *     de afiliado (lista sacada recorriendo /test-componentes y las páginas
 *     principales); el check de «verificado» y la etiqueta IA no cambian.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(
  .wa-est__cta, .wa-btn, .wac-btn, .wac-bono__cta, .btn-success, .wa-ticket__cta,
  .cta-button, .cta-boton, .wa-maq-dest__cta, .reco-sc__cta, .wbs-listing-card__cta,
  .wa-img__cta, .wa-lat__cta, .wa-promo-cta, .pc-cta, .wa-fila__cta, .wa-caja__cta,
  .wa-cmp__cta, .wac-banner__cta
) {
  border-color: #00e08c !important;
  background: #00e08c !important;
  color: #131313 !important;
}

@media (hover: hover) and (pointer: fine) {
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(
    .wa-est__cta, .wa-btn, .wac-btn, .wac-bono__cta, .btn-success, .wa-ticket__cta,
    .cta-button, .cta-boton, .wa-maq-dest__cta, .reco-sc__cta, .wbs-listing-card__cta,
    .wa-img__cta, .wa-lat__cta, .wa-promo-cta, .pc-cta, .wa-fila__cta, .wa-caja__cta,
    .wa-cmp__cta, .wac-banner__cta
  ):hover,
  html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-ticket, .wa-rk-card, .wa-maq-dest, .wbs-listing-card__cta-section):hover :is(.wa-ticket__cta, .wa-btn, .wa-maq-dest__cta, .wbs-listing-card__cta) {
    border-color: #00c97e !important;
    background: #00c97e !important;
    color: #131313 !important;
  }
}

/* Foco con teclado visible sobre el verde claro. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-est__cta, .wa-btn, .wac-btn, .btn-success, .cta-button, .cta-boton, .wa-img__cta, .wa-maq-dest__cta, .reco-sc__cta, .pc-cta):focus-visible {
  outline: 2px solid #131313 !important;
  outline-offset: 2px;
}

/* «Cómo analizamos»: el texto tocaba el borde derecho de cada tarjeta. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .criterio-item {
  padding-right: 18px;
}

/* =====================================================================
 * 15. BLOG (V3, 22-oct-2026)
 *  - Cabecera como las reseñas: foto deportiva + velo #1c5e75, título
 *    blanco y categorías en píldoras claras (la activa en cian).
 *  - Tarjetas iguales: imagen 16:9 nítida (estilo wa_blog_card), categoría
 *    como etiqueta arriba, título 3 líneas, extracto 3 líneas, autor y
 *    fecha siempre abajo. La primera, destacada en grande en escritorio.
 * ===================================================================== */
html.estilo-acento .vocabulary-blog {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 24px;
  padding: 28px 24px 22px;
  border-radius: 16px;
  background: #1c5e75;
}

html.estilo-acento .vocabulary-blog::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(28, 94, 117, .92) 0%, rgba(28, 94, 117, .65) 50%, rgba(28, 94, 117, .25) 100%),
    url("/themes/custom/webapuestas/img/fondos/apuestas/06_apuestas_balon_y_estadio.webp") center / cover no-repeat;
}

html.estilo-acento .vocabulary-blog .blog-category__title,
html.estilo-acento .vocabulary-blog .blog-category__title * {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

html.estilo-acento .vocabulary-blog .blog-category__description > p,
html.estilo-acento .vocabulary-blog .blog-category__description {
  color: rgba(255, 255, 255, .9) !important;
}

html.estilo-acento .vocabulary-blog ul.menu-blog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.estilo-acento .vocabulary-blog ul.menu-blog li {
  margin: 0;
  padding: 0;
}

html.estilo-acento .vocabulary-blog ul.menu-blog li::before {
  display: none !important;
}

html.estilo-acento .vocabulary-blog ul.menu-blog a {
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: .9rem !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

html.estilo-acento .vocabulary-blog ul.menu-blog a * {
  color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento .vocabulary-blog ul.menu-blog a:hover {
    border-color: #fff !important;
    background: #fff !important;
    color: #1c5e75 !important;
  }
}

html.estilo-acento .vocabulary-blog ul.menu-blog a:is(.is-active, [aria-current="page"]) {
  border-color: #04C4F6 !important;
  background: #04C4F6 !important;
  color: #131313 !important;
}

html.estilo-acento .vocabulary-blog ul.menu-blog a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Móvil: una sola fila que se desliza. */
@media (max-width: 767.98px) {
  html.estilo-acento .vocabulary-blog {
    padding: 22px 16px 18px;
    border-radius: 12px;
  }

  html.estilo-acento .vocabulary-blog ul.menu-blog {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }

  html.estilo-acento .vocabulary-blog ul.menu-blog li {
    flex: none;
  }
}

/* Rejilla de tarjetas: todas iguales. */
html.estilo-acento .view-taxonomy-term .item-list > ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

html.estilo-acento .view-taxonomy-term .item-list > ul > li {
  display: flex;
  margin: 0 !important;
  padding: 0 !important;
}

html.estilo-acento .view-taxonomy-term .item-list > ul > li::before {
  display: none !important;
}

@media (max-width: 767.98px) {
  html.estilo-acento .view-taxonomy-term .item-list > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

html.estilo-acento article.blog-card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #E3E8EA !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html.estilo-acento article.blog-card .blog-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #E9EEF0;
}

html.estilo-acento article.blog-card .blog-card__image :is(.field, .field__item) {
  height: 100%;
}

html.estilo-acento article.blog-card .blog-card__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento article.blog-card:hover .blog-card__image img {
    transform: scale(1.04);
  }
}

html.estilo-acento article.blog-card .blog-card__body {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px !important;
}

/* La categoría sube encima del título, como etiqueta. La genérica
   «El Blog de Webapuestas» sobra (están todas en el blog). */
html.estilo-acento article.blog-card .blog-card__tags {
  order: -1;
  margin: 0 !important;
}

html.estilo-acento article.blog-card .blog-card__tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
}

html.estilo-acento article.blog-card .blog-card__tags li {
  margin: 0 !important;
  padding: 0 !important;
}

html.estilo-acento article.blog-card .blog-card__tags li::before {
  display: none !important;
}

html.estilo-acento article.blog-card .blog-card__tags li:has(> a[href="/blog"]) {
  display: none !important;
}

html.estilo-acento article.blog-card .blog-card__tags a {
  display: inline-block;
  padding: 3px 10px;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(4, 158, 197, .1) !important;
  color: #037693 !important;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none !important;
  text-transform: uppercase;
}

html.estilo-acento article.blog-card .blog-card__title {
  margin: 0 !important;
  font-size: 1.12rem !important;
  line-height: 1.3 !important;
}

html.estilo-acento article.blog-card .blog-card__title a {
  display: -webkit-box;
  overflow: hidden;
  color: #131313 !important;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  text-decoration: none !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento article.blog-card .blog-card__title a:hover {
    color: #037693 !important;
  }
}

html.estilo-acento article.blog-card .blog-card__excerpt {
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  color: #4a5459 !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html.estilo-acento article.blog-card .blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #EEF1F2 !important;
  color: #5f676c;
  font-size: .82rem;
}

html.estilo-acento article.blog-card .blog-card__meta a {
  color: #131313 !important;
  font-weight: 600;
}

/* Escritorio: el primer artículo, destacado en grande. */
@media (min-width: 992px) {
  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child {
    grid-column: 1 / -1;
  }

  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child article.blog-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child .blog-card__image-link,
  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child .blog-card__image {
    height: 100%;
  }

  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child .blog-card__body {
    justify-content: center;
    padding: 26px 28px !important;
  }

  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child .blog-card__title {
    font-size: 1.55rem !important;
  }

  html.estilo-acento .view-taxonomy-term .item-list > ul > li:first-child .blog-card__excerpt {
    -webkit-line-clamp: 4;
  }
}

/* =====================================================================
 * 16. PÁGINA DE AUTOR (V3, 22-oct-2026)
 *  Cabecera con foto deportiva + velo #1c5e75 (como reseñas y blog),
 *  nombre en blanco, foto enmarcada; especialidades y cifras en tarjetas
 *  de línea fina; contenidos sin imagen con un fondo en vez del azul liso.
 * ===================================================================== */
html.estilo-acento .autor-perfil__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px 16px 18px 18px;
  background: #1c5e75 !important;
}

html.estilo-acento .autor-perfil__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(28, 94, 117, .94) 0%, rgba(28, 94, 117, .72) 55%, rgba(28, 94, 117, .35) 100%),
    url("/themes/custom/webapuestas/img/fondos/apuestas/01_apuestas_estadio_futbol.webp") center / cover no-repeat;
}

html.estilo-acento .autor-perfil__hero :is(.autor-perfil__name, h1) {
  color: #fff !important;
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

html.estilo-acento .autor-perfil__hero :is(.autor-perfil__lead, .autor-perfil__role, .autor-perfil__since) {
  color: rgba(255, 255, 255, .92) !important;
}

html.estilo-acento .autor-perfil__photo img {
  border: 4px solid #fff;
  border-radius: 16px;
}

html.estilo-acento .autor-perfil__linkedin {
  color: #1c5e75 !important;
}

html.estilo-acento .autor-perfil__card {
  border: 1px solid #E3E8EA !important;
  box-shadow: 0 8px 22px rgba(19, 19, 19, .08) !important;
}

html.estilo-acento .autor-perfil__card-ico {
  background: rgba(4, 196, 246, .14) !important;
  color: #037693 !important;
}

html.estilo-acento .autor-perfil__stat {
  border: 1px solid #E3E8EA !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html.estilo-acento .autor-perfil__stat-num {
  color: #037693 !important;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800 !important;
}

html.estilo-acento .autor-cat__title {
  font-family: Poppins, Arial, sans-serif;
  font-weight: 800;
}

html.estilo-acento .autor-cat__count {
  background: #04C4F6 !important;
  color: #131313 !important;
}

html.estilo-acento .autor-card {
  overflow: hidden;
  border: 1px solid #E3E8EA !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento .autor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(3, 61, 77, .12) !important;
  }
}

/* Sin imagen: un fondo (van rotando por posición) con velo y el logo. */
html.estilo-acento .autor-card__media--placeholder {
  background:
    linear-gradient(135deg, rgba(28, 94, 117, .55), rgba(28, 94, 117, .78)),
    var(--ac-ph, url("/themes/custom/webapuestas/img/fondos/apuestas/08_apuestas_patron_digital.webp")) center / cover no-repeat !important;
}

html.estilo-acento .autor-cat__grid > :nth-child(5n+1) .autor-card__media--placeholder { --ac-ph: url("/themes/custom/webapuestas/img/fondos/apuestas/08_apuestas_patron_digital.webp"); }
html.estilo-acento .autor-cat__grid > :nth-child(5n+2) .autor-card__media--placeholder { --ac-ph: url("/themes/custom/webapuestas/img/fondos/apuestas/03_apuestas_tactica_deportiva.webp"); }
html.estilo-acento .autor-cat__grid > :nth-child(5n+3) .autor-card__media--placeholder { --ac-ph: url("/themes/custom/webapuestas/img/fondos/casino/fondo-casino-09-ilustracion-lineal.webp"); }
html.estilo-acento .autor-cat__grid > :nth-child(5n+4) .autor-card__media--placeholder { --ac-ph: url("/themes/custom/webapuestas/img/fondos/apuestas/05_apuestas_franjas_tecnologicas.webp"); }
html.estilo-acento .autor-cat__grid > :nth-child(5n+5) .autor-card__media--placeholder { --ac-ph: url("/themes/custom/webapuestas/img/fondos/apuestas/10_apuestas_trazos_dinamicos.webp"); }

html.estilo-acento .autor-card__title {
  color: #131313 !important;
  font-family: Poppins, Arial, sans-serif;
}

html.estilo-acento .autor-cat__more-btn {
  border: 1px solid #037693 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #037693 !important;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  html.estilo-acento .autor-cat__more-btn:hover {
    background: #037693 !important;
    color: #fff !important;
  }
}

/* Las fichas montan sobre la cabecera: encima de ella. */
html.estilo-acento .autor-perfil__cards {
  position: relative;
  z-index: 1;
}

/* =====================================================================
 * 17. SIN LÍNEAS INCLINADAS (22-oct-2026, Fernando): todas las cajas de
 *     color de la V3 llevan una foto (apuestas o casino según la caja) con
 *     velo #1c5e75, en lugar del rayado. Las tarjetas que se repiten van
 *     rotando de foto.
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] {
  --rx-fondo: url("/themes/custom/webapuestas/img/fondos/apuestas/06_apuestas_balon_y_estadio.webp");
  --rx-hero:
    linear-gradient(120deg, rgba(28, 94, 117, .9) 0%, rgba(28, 94, 117, .68) 55%, rgba(28, 94, 117, .42) 100%),
    var(--rx-fondo) center / cover no-repeat;
  --rx-hero-solido: #1c5e75;
}

/* Cajas de casino: fondo de casino. */
html.estilo-acento[data-estilo="suave-emil"] :is(.wa--sector-casino, [data-wa-sector="casino"], .wa-app--casino, .wac-banner--casino, .wac-bono--casino) {
  --rx-fondo: url("/themes/custom/webapuestas/img/fondos/casino/fondo-casino-01-ruleta-premium.webp");
}

/* Que la variable se recalcule en cada caja (si no, hereda la de <html>). */
html.estilo-acento[data-estilo="suave-emil"] :is(.wa-app, .wa-promo-card, .wa-promo-hero, .prono-card, .lista-pronosticos, .pc-widget, .wa-imgs, .wa-caja, .wa-cajas) {
  --rx-hero:
    linear-gradient(120deg, rgba(28, 94, 117, .9) 0%, rgba(28, 94, 117, .68) 55%, rgba(28, 94, 117, .42) 100%),
    var(--rx-fondo) center / cover no-repeat;
}

/* Variedad en lo que se repite. */
html.estilo-acento[data-estilo="suave-emil"] :is(.pronos-slider__track, .wa-cajas, .wa-imgs__rejilla) > :nth-child(4n+1) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/apuestas/01_apuestas_estadio_futbol.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.pronos-slider__track, .wa-cajas, .wa-imgs__rejilla) > :nth-child(4n+2) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/apuestas/04_apuestas_multideporte.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.pronos-slider__track, .wa-cajas, .wa-imgs__rejilla) > :nth-child(4n+3) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/apuestas/09_apuestas_trofeo_competicion.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.pronos-slider__track, .wa-cajas, .wa-imgs__rejilla) > :nth-child(4n+4) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/apuestas/03_apuestas_tactica_deportiva.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.wa--sector-casino, [data-wa-sector="casino"]) :is(.wa-cajas, .wa-imgs__rejilla) > :nth-child(3n+1),
html.estilo-acento[data-estilo="suave-emil"] .wa-cajas.wa--sector-casino > :nth-child(3n+1) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/casino/fondo-casino-02-tragaperras-minimalista.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.wa--sector-casino, [data-wa-sector="casino"]) :is(.wa-cajas, .wa-imgs__rejilla) > :nth-child(3n+2),
html.estilo-acento[data-estilo="suave-emil"] .wa-cajas.wa--sector-casino > :nth-child(3n+2) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/casino/fondo-casino-06-fichas-azules.webp"); }
html.estilo-acento[data-estilo="suave-emil"] :is(.wa--sector-casino, [data-wa-sector="casino"]) :is(.wa-cajas, .wa-imgs__rejilla) > :nth-child(3n+3),
html.estilo-acento[data-estilo="suave-emil"] .wa-cajas.wa--sector-casino > :nth-child(3n+3) { --rx-fondo: url("/themes/custom/webapuestas/img/fondos/casino/fondo-casino-03-ruleta-tecnica.webp"); }

/* La caja de bono y la cuenta atrás: fondo propio de la caja. */
html.estilo-acento[data-estilo="suave-emil"] .wa-caja .wa-caja__cuerpo {
  background:
    linear-gradient(180deg, rgba(28, 94, 117, .82) 0%, rgba(28, 94, 117, .92) 100%),
    var(--rx-fondo) center / cover no-repeat !important;
}

html.estilo-acento[data-estilo="suave-emil"] main .pc-widget :is(.pc-state, .pc-state--pre) {
  background:
    linear-gradient(180deg, rgba(19, 40, 50, .8) 0%, rgba(19, 40, 50, .92) 100%),
    url("/themes/custom/webapuestas/img/fondos/apuestas/01_apuestas_estadio_futbol.webp") center / cover no-repeat !important;
}

/* Bonos sin imagen: un fondo en vez del rayado. */
html.estilo-acento[data-estilo="suave-emil"] .wa-img__fondo--vacio {
  background:
    linear-gradient(135deg, rgba(28, 94, 117, .55), rgba(28, 94, 117, .8)),
    var(--rx-fondo) center / cover no-repeat !important;
}

/* Fuera las líneas de las cabeceras F (la de fondos ya pinta su foto). */
html.estilo-acento .wa-est--f .wa-est__hero:not(.wa-est__hero--fondos)::before {
  display: none !important;
}

html.estilo-acento .wa-est--f .wa-est__hero:not(.wa-est__hero--fondos):not(.wa-est__hero--bono) {
  background:
    linear-gradient(120deg, rgba(28, 94, 117, .9) 0%, rgba(28, 94, 117, .65) 60%, rgba(28, 94, 117, .4) 100%),
    url("/themes/custom/webapuestas/img/fondos/apuestas/06_apuestas_balon_y_estadio.webp") center / cover no-repeat !important;
}

/* Tarjetas con imagen: el botón a la misma altura aunque el aviso legal
   sea largo (máximo 2 líneas). */
html.estilo-acento .wa-img .wa-legal {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.estilo-acento .wa-img .wa-img__datos {
  min-height: 1.4em;
}

/* =====================================================================
 * 18. REJILLAS CON LA ÚLTIMA FILA CENTRADA (22-oct-2026, Fernando): cuando
 *     las cajas no llenan la última fila (p. ej. 5 bonos en 3 columnas), las
 *     que sobran van al centro, como en la web de siempre, y no pegadas a la
 *     izquierda. Mismas columnas y huecos que la rejilla: solo pasa de grid
 *     a flex con wrap centrado.
 * ===================================================================== */

/* Bonos con imagen [wa-imagen]: 3, 2 o 1 columna según cuántos haya. */
html.estilo-acento[data-estilo="suave-emil"] .wa-imgs__rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
html.estilo-acento[data-estilo="suave-emil"] .wa-imgs__rejilla > * {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 0;
}
html.estilo-acento[data-estilo="suave-emil"] .wa-imgs--2 .wa-imgs__rejilla > * {
  flex-basis: calc((100% - 16px) / 2);
}
html.estilo-acento[data-estilo="suave-emil"] .wa-imgs--1 .wa-imgs__rejilla > * {
  flex-basis: min(420px, 100%);
}
@media (max-width: 767.98px) {
  html.estilo-acento[data-estilo="suave-emil"] .wa-imgs__rejilla > *,
  html.estilo-acento[data-estilo="suave-emil"] .wa-imgs--2 .wa-imgs__rejilla > * {
    flex-basis: 100%;
  }
}

/* Juegos de casino [playgame]: 4 columnas; 3 hasta 1024 px; 2 hasta 640 px. */
html.estilo-acento[data-estilo="suave-emil"] .pg-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
html.estilo-acento[data-estilo="suave-emil"] .pg-grid > * {
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
}
@media (max-width: 1024px) {
  html.estilo-acento[data-estilo="suave-emil"] .pg-grid > * { flex-basis: calc((100% - 20px) / 3); }
}
@media (max-width: 640px) {
  html.estilo-acento[data-estilo="suave-emil"] .pg-grid > * { flex-basis: calc((100% - 10px) / 2); }
}

/* =====================================================================
 * 19. TODA LA CAJA ES CLICABLE (22-oct-2026): el clic en cualquier parte de
 *     la ficha abre su afiliado (lo hace el manejador de html.html.twig);
 *     aquí solo la mano del ratón para que se note.
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] :is(.wa-rk-card, .wa-cmp__fila, .wa-fila, .wa-img, .wac-bono, .wa-est__otras-card, .wa-maq-dest):has([data-lk]) {
  cursor: pointer;
}

/* =====================================================================
 * 20. BONOS CON IMAGEN: SIN RAYA OSCURA AL PASAR EL RATÓN (22-oct-2026).
 *     La tarjeta sube y a la vez la foto hacía zoom: mientras duraba, el
 *     navegador pintaba la foto en otra capa y asomaba ~1 px de su borde
 *     oscuro bajo el degradado blanco (entre imagen y texto). Con la subida
 *     de la tarjeta basta: la foto ya no hace zoom y el degradado cubre la
 *     junta.
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] .wa-img .wa-img__fondo,
html.estilo-acento[data-estilo="suave-emil"] .wa-img:hover .wa-img__fondo {
  transform: none !important;
  transition: none !important;
}
html.estilo-acento[data-estilo="suave-emil"] .wa-img__visual::after {
  bottom: -2px;
}

/* =====================================================================
 * 21. BOTONES ESCRITOS A MANO EN EL BODY (repaso 22-oct-2026).
 *     - div.cta-boton[data-lk] = afiliado: se queda con el verde (§13-14).
 *     - a.cta-boton SIN data-lk = enlace INTERNO («Todas las casas de
 *       apuestas», «Ver todos los bonos»…): parecía un CTA de afiliado
 *       (verde, subrayado y, en /bonos, letra blanca casi ilegible). Pasa al
 *       botón secundario de la V3, el mismo de «Encuentra tu bono».
 *     - Paginación (blog y listados): del cuadrado de Bootstrap a la V3.
 *     Solo estilo: no se toca el contenido del body.
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] .field--name-body a.cta-boton:not([data-lk]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 420px;
  margin: 24px auto !important;
  padding: 10px 22px;
  border: 2px solid #037693 !important;
  border-radius: 10px;
  background: #fff !important;
  color: #037693 !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color .15s ease-out, color .15s ease-out;
}
html.estilo-acento[data-estilo="suave-emil"] .field--name-body a.cta-boton:not([data-lk]) * {
  color: inherit !important;
  text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.estilo-acento[data-estilo="suave-emil"] .field--name-body a.cta-boton:not([data-lk]):hover {
    background: #037693 !important;
    color: #fff !important;
  }
}
html.estilo-acento[data-estilo="suave-emil"] .field--name-body a.cta-boton:not([data-lk]):active {
  transform: scale(.97);
}
html.estilo-acento[data-estilo="suave-emil"] .field--name-body a.cta-boton:not([data-lk]):focus-visible {
  outline: 3px solid #049EC5;
  outline-offset: 2px;
}

/* Paginación. */
html.estilo-acento[data-estilo="suave-emil"] .pagination {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
html.estilo-acento[data-estilo="suave-emil"] .pagination .page-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(4, 158, 197, .24) !important;
  border-radius: 10px !important;
  background: #fff;
  color: #037693;
  font-weight: 600;
  transition: background-color .15s ease-out, color .15s ease-out;
}
html.estilo-acento[data-estilo="suave-emil"] .pagination .page-item.active .page-link,
html.estilo-acento[data-estilo="suave-emil"] .pagination .page-link[aria-current] {
  border-color: #037693 !important;
  background: #037693;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  html.estilo-acento[data-estilo="suave-emil"] .pagination .page-link:hover {
    background: rgba(4, 158, 197, .1);
    color: #03556b;
  }
}
/* Pareja de botones (div.btn_shortcut, en /bonos): mismo ancho y aire. */
html.estilo-acento[data-estilo="suave-emil"] .field--name-body .btn_shortcut {
  gap: 12px;
}
html.estilo-acento[data-estilo="suave-emil"] .field--name-body .btn_shortcut > a.cta-boton:not([data-lk]) {
  flex: 1 1 0;
  margin: 16px 0 !important;
}

/* =====================================================================
 * 22. MÓVIL: LECTURA Y DEDO (ensayo 22-oct-2026).
 *     - Texto a 16 px en toda la V3 (custom_min.css lo deja en 15 px para
 *       todos los contenidos).
 *     - Botón «i» del autor: 34 px de alto; zona de toque de 44 px sin
 *       cambiar cómo se ve.
 * ===================================================================== */
@media (max-width: 767.98px) {
  /* Toda la V3 (22-oct, Fernando). Solo pisa la regla general de 15 px de
     custom_min.css («body .node__content p»…): una clase más de peso y nada
     más, para no bajar entradillas ni destacados que van a 18 px. */
  :where(html.estilo-acento[data-estilo="suave-emil"]) body:not(.wa-nada) :is(.casa-apuestas__content, .node__content) :is(p, li) {
    font-size: 16px;
  }
}
html.estilo-acento[data-estilo="suave-emil"] .autor-tooltip__btn {
  position: relative;
}
html.estilo-acento[data-estilo="suave-emil"] .autor-tooltip__btn::after {
  content: "";
  position: absolute;
  inset: -5px;
}

/* =====================================================================
 * 23. LÍNEA LEGAL BAJO EL BOTÓN DEL BONO (23-oct-2026): en una sola línea y
 *     con poco alto (Fernando: «ocupa demasiado espacio de altura»).
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] .wa-est__legal--hero {
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
 * 24. RANKINGS (ensayo 23-oct-2026).
 *     - La cifra del bono, más viva (azul de la marca, mayor y más gruesa) y
 *       la caja algo más marcada: en azul muy claro «se apagaba».
 *     - «Análisis de X» se partía en 2-3 líneas en móvil: allí se ve solo
 *       «Análisis ›»; el nombre sigue en el enlace (oculto a la vista, lo
 *       leen Google y los lectores de pantalla).
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] .wa-rk .wa-ticket {
  background: rgba(3, 118, 147, .1) !important;
  border-color: rgba(3, 118, 147, .28) !important;
}
html.estilo-acento[data-estilo="suave-emil"] .wa-rk .wa-ticket__main > b {
  color: #037693 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15;
}
@media (max-width: 767.98px) {
  html.estilo-acento[data-estilo="suave-emil"] .wa-rk .wa-ticket__main > b { font-size: 19px !important; }
  html.estilo-acento[data-estilo="suave-emil"] .wa-rk-analisis { white-space: nowrap; }
  html.estilo-acento[data-estilo="suave-emil"] .wa-rk-analisis__casa {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* =====================================================================
 * 25. /PRONÓSTICOS: SIN HUECO ENTRE EL TÍTULO Y LOS FILTROS (ensayo
 *     23-oct-2026). Se sumaban ~114 px: el párrafo que solo lleva el JSON-LD
 *     de los partidos (invisible, con márgenes) y los rellenos del listado.
 *     El JSON-LD sigue en la página igual.
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] .field--name-body > p:has(> script[type="application/ld+json"]:only-child) {
  margin: 0 !important;
}
html.estilo-acento[data-estilo="suave-emil"] .wbs-listing--index {
  padding-top: 0 !important;
}
html.estilo-acento[data-estilo="suave-emil"] .wbs-listing--index > .wbs-filters:first-child {
  margin-top: 0 !important;
}