/**
 * Cabeceras nuevas de BONO y RESEÑA (pruebas, 22-oct-2026). Solo con
 * ?cabecera=nueva y la estructura F (preprod/local). La enlazan las propias
 * plantillas de la cabecera.
 *
 * BONO, la imagen del bono es la protagonista:
 *   Base (V1/V3…) «postal»: tarjeta blanca; foto a la izquierda que se funde
 *     en blanco; logo flotando en la unión; importe azul y CTA verde sobre
 *     blanco. En móvil, la foto arriba fundida hacia abajo (como las
 *     tarjetas de bono «imagen»).
 *   V4 «póster»: la foto a sangre en toda la cabecera, oscurecida desde la
 *     izquierda; texto en blanco; oferta en tarjeta blanca recta con corte
 *     en diagonal; etiqueta cian inclinada.
 *
 * RESEÑA «marcador» (no hay fotos de la casa): logo grande, H1 y nota a la
 *   izquierda; a la derecha las cuatro mejores notas por categoría en
 *   barras; la oferta en una franja blanca con el CTA. En móvil la oferta
 *   va antes que el marcador.
 *
 * Mismo H1 y mismos datos (sin encabezados nuevos): solo cambia la
 * composición. Hay muchos !important porque cada estilo y la maqueta
 * nueva pintan la cabecera con selectores muy específicos.
 */

/* =====================================================================
 * 1. BONO · base «postal»
 * ===================================================================== */
html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #E3E8EA !important;
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 2px 14px rgba(19, 19, 19, .05) !important;
  color: #131313 !important;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono::before {
  display: none !important;
}

html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f4f6f7;
}

html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, .85) 84%, #fff 100%);
  pointer-events: none;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-main {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 18px 22px !important;
  background: transparent !important;
  color: #131313 !important;
  text-align: center;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-logo {
  display: grid;
  place-items: center;
  width: auto !important;
  max-width: 220px;
  height: 64px;
  margin: 0;
  padding: 10px 18px !important;
  border: 1px solid #E3E8EA;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(3, 61, 77, .14) !important;
}

/* Con foto: el logo flota sobre la unión foto/texto. */
html body .wa-est .wa-est__hero--imagen .wa-est__hero-logo {
  margin-top: -40px !important;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-logo img {
  width: auto !important;
  max-width: 100%;
  max-height: 42px;
  height: auto;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__h1 {
  margin: 0 !important;
  color: #131313 !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
  text-wrap: balance;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-oferta {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

html body .wa-est .wa-est__hero--nueva .wa-est__importe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}

html body .wa-est .wa-est__hero--nueva .wa-est__importe-valor {
  color: #037693 !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -.02em;
}

html body .wa-est .wa-est__hero--nueva .wa-est__importe-tipo {
  order: -1;
  padding: 4px 12px;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(4, 158, 197, .1) !important;
  color: #037693 !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__cta {
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__verificado {
  margin: 0 !important;
  color: #23862F !important;
  font-size: .9rem;
  font-weight: 600;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono :is(.wa-est__verificado-ico) {
  border-radius: 4px;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono :is(.wa-est__actualizado, .wa-est__aviso, .wa-est__aviso small) {
  color: #6b7378 !important;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__aviso {
  max-width: 62ch;
  margin: 0 !important;
  font-size: .78rem;
  line-height: 1.45;
}

/* Escritorio: foto a la izquierda fundida hacia la derecha. */
@media (min-width: 992px) {
  html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--imagen {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 380px;
  }

  html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto {
    aspect-ratio: auto;
    min-height: 100%;
  }

  html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto::after {
    background: linear-gradient(90deg, transparent 55%, rgba(255, 255, 255, .85) 86%, #fff 100%);
  }

  html body .wa-est .wa-est__hero--imagen .wa-est__hero-main {
    align-items: flex-start !important;
    justify-content: center;
    padding: 36px 40px 32px 8px !important;
    text-align: left !important;
  }

  html body .wa-est .wa-est__hero--imagen .wa-est__hero-logo {
    margin: 0 0 4px -96px !important;
  }

  html body .wa-est .wa-est__hero--imagen .wa-est__hero-oferta {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 14px 20px !important;
  }

  html body .wa-est .wa-est__hero--imagen .wa-est__importe {
    align-items: flex-start;
  }

  html body .wa-est .wa-est__hero--imagen .wa-est__cta {
    width: auto;
    min-width: 230px;
  }
}

@media (hover: hover) and (pointer: fine) {
  html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto img {
    transition: transform 600ms cubic-bezier(.23, 1, .32, 1);
  }

  html body .wa-est .wa-est__hero--nueva:hover .wa-est__hero-foto img {
    transform: scale(1.03);
  }
}

/* =====================================================================
 * 2. BONO · «póster» (V4 y, desde el 22-oct, también V3 con su identidad)
 * ===================================================================== */
html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono {
  border: 0 !important;
  border-radius: 0;
  background: #0d2128 !important;
  box-shadow: inset 0 -3px 0 #04C4F6 !important;
  color: #fff !important;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--nueva .wa-est__hero-foto::after {
  background: linear-gradient(180deg, rgba(13, 33, 40, 0) 35%, rgba(13, 33, 40, .8) 75%, #0d2128 100%);
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-main {
  color: #fff !important;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-logo {
  border: 0;
  box-shadow: none !important;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__h1 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* La oferta: tarjeta blanca recta con corte en diagonal (CTA sobre blanco). */
html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-oferta {
  padding: 28px 20px 18px !important;
  background: #fff !important;
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%) !important;
  color: #131313;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--nueva .wa-est__importe-valor {
  color: #131313 !important;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--nueva .wa-est__importe-tipo {
  padding: 4px 14px;
  background: #04C4F6 !important;
  color: #131313 !important;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__verificado {
  color: #8fe3a0 !important;
}

html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono :is(.wa-est__actualizado, .wa-est__aviso, .wa-est__aviso small) {
  color: rgba(255, 255, 255, .72) !important;
}

@media (min-width: 992px) {
  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--imagen {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    min-height: 440px;
  }

  /* La foto pasa a fondo de toda la cabecera. */
  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-foto {
    position: absolute;
    inset: 0;
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-foto::after {
    background: linear-gradient(90deg, #0d2128 0%, rgba(13, 33, 40, .92) 34%, rgba(13, 33, 40, .45) 62%, rgba(13, 33, 40, .05) 85%);
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-main {
    grid-column: 1;
    padding: 36px 40px !important;
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-logo {
    margin: 0 0 4px !important;
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-oferta {
    width: auto;
  }
}

/* =====================================================================
 * 3. RESEÑA · «marcador»
 * ===================================================================== */
.wa-est .wa-est__hero.wa-est__hero--marcador {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "id" "oferta" "marcador" !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.wa-est .wa-est__hero--marcador .wa-est__hero-id {
  grid-area: id !important;
  display: flex !important;
  align-items: center;
  gap: 16px;
}

.wa-est .wa-est__hero--marcador .wa-est__hero-cuerpo {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wa-est .wa-est__hero--marcador :is(.wa-est__hero-logo, .wa-est__h1, .wa-est__nota, .wa-est__hero-bono, .wa-est__hero-botones, .wa-est__legal) {
  grid-area: auto !important;
}

.wa-est .wa-est__hero--marcador .wa-est__hero-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 112px !important;
  height: 72px;
  padding: 10px !important;
}

.wa-est .wa-est__hero--marcador .wa-est__hero-logo img {
  width: auto !important;
  max-width: 100%;
  max-height: 48px;
  height: auto;
}

.wa-est .wa-est__hero--marcador .wa-est__h1 {
  margin: 0 !important;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem) !important;
  line-height: 1.1 !important;
}

.wa-est .wa-est__hero--marcador .wa-est__nota {
  margin: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* El marcador. */
.wa-est .wa-est__marcador {
  grid-area: marcador;
  padding: 16px 18px;
  border: 1px solid rgba(4, 158, 197, .22);
  border-radius: 12px;
  background: rgba(4, 158, 197, .06);
  color: #131313;
}

.wa-est .wa-est__marcador-tit {
  margin: 0 0 10px !important;
  font-family: Poppins, Arial, sans-serif;
  font-size: .82rem !important;
  font-weight: 700;
  opacity: .8;
}

.wa-est .wa-est__marcador-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wa-est .wa-est__marcador-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: baseline;
  margin: 0 !important;
  padding: 0 !important;
}

.wa-est .wa-est__marcador-fila::before {
  display: none !important;
}

.wa-est .wa-est__marcador-etq {
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-est .wa-est__marcador-num {
  font-family: Poppins, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}

.wa-est .wa-est__marcador-barra {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(19, 19, 19, .1);
}

.wa-est .wa-est__marcador-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #037693;
  transform-origin: left center;
  animation: cab-barra 900ms cubic-bezier(.77, 0, .175, 1) 200ms both;
}

@keyframes cab-barra {
  from {
    transform: scaleX(0);
  }
}

/* La oferta: franja blanca con el CTA (el verde siempre sobre blanco). */
.wa-est .wa-est__hero--marcador .wa-est__hero-oferta {
  grid-area: oferta !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px !important;
  align-items: center;
  padding: 16px 18px !important;
  border-radius: 12px;
  background: #fff !important;
  color: #131313 !important;
}

.wa-est .wa-est__hero--marcador .wa-est__hero-botones {
  display: grid !important;
  gap: 10px;
}

.wa-est .wa-est__hero--marcador .wa-est__legal {
  margin: 0 !important;
  font-size: .74rem;
  line-height: 1.45;
}

@media (min-width: 992px) {
  .wa-est .wa-est__hero.wa-est__hero--marcador {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    grid-template-areas: "id marcador" "oferta oferta" !important;
    gap: 22px 32px !important;
    padding: 32px 36px 28px !important;
  }

  .wa-est .wa-est__hero--marcador .wa-est__hero-id {
    gap: 24px;
  }

  .wa-est .wa-est__hero--marcador .wa-est__hero-logo {
    width: 180px !important;
    height: 104px;
    padding: 14px !important;
  }

  .wa-est .wa-est__hero--marcador .wa-est__hero-logo img {
    max-height: 64px;
  }

  .wa-est .wa-est__marcador-lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* Franja: bono · botones · legal en una fila. */
  .wa-est .wa-est__hero--marcador .wa-est__hero-oferta {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 14px 24px !important;
    padding: 16px 22px !important;
  }

  .wa-est .wa-est__hero--marcador .wa-est__hero-botones {
    grid-template-columns: auto auto;
  }

  .wa-est .wa-est__hero--marcador .wa-est__hero-botones > * {
    min-width: 200px;
    white-space: nowrap;
  }
}

/* V3 (azul) y V4 (oscuro): el marcador sobre la cabecera de color. */
html:is(.estilo-acento, .estilo-def) .wa-est .wa-est__marcador {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

html:is(.estilo-acento, .estilo-def) .wa-est .wa-est__marcador-barra {
  background: rgba(255, 255, 255, .18);
}

html:is(.estilo-acento, .estilo-def) .wa-est .wa-est__marcador-barra > span {
  background: #04C4F6;
}

html.estilo-def .wa-est .wa-est__marcador-tit {
  display: inline-block;
  padding: 3px 12px;
  background: #04C4F6;
  color: #131313;
  opacity: 1;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .wa-est .wa-est__marcador-barra > span {
    animation: none;
  }

  .wa-est .wa-est__hero--nueva .wa-est__hero-foto img {
    transition: none;
  }
}

/* Correcciones (22-oct): la foto nunca redonda (la V4 redondea todo lo que
   lleva «-foto» en la clase) y el CTA no crece en la columna. */
html body .wa-est .wa-est__hero--nueva .wa-est__hero-foto,
html.estilo-def body .wa-est .wa-est__hero--nueva .wa-est__hero-foto,
html.estilo-def body .wa-est .wa-est__hero--nueva .wa-est__hero-foto img {
  border-radius: 0 !important;
}

html body .wa-est .wa-est__hero--nueva .wa-est__hero-oferta > *,
html body .wa-est .wa-est__hero--nueva .wa-est__cta {
  flex: none !important;
  height: auto !important;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__cta {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* V4: todo recto, también la placa del logo y el botón. */
html.estilo-def body .wa-est .wa-est__hero--nueva :is(.wa-est__hero-logo, .wa-est__cta, .wa-est__importe-tipo) {
  border-radius: 0 !important;
}

/* =====================================================================
 * 4. BONO · «póster» de la V3 (22-oct): misma composición que la V4 (la que
 *    gustó) con la identidad de la V3: velo en el azul de la web, esquinas
 *    redondeadas, oferta en tarjeta blanca redondeada (sin corte en
 *    diagonal) y etiqueta en píldora.
 * ===================================================================== */
html.estilo-acento .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono {
  border-radius: 16px;
  background: #03556b !important;
  box-shadow: none !important;
}

html.estilo-acento .wa-est .wa-est__hero--nueva .wa-est__hero-foto::after {
  background: linear-gradient(180deg, rgba(3, 85, 107, 0) 35%, rgba(3, 85, 107, .82) 75%, #03556b 100%);
}

html.estilo-acento .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-oferta {
  padding: 18px 20px !important;
  border-radius: 14px;
  clip-path: none !important;
  box-shadow: 0 14px 34px rgba(3, 40, 52, .28) !important;
}

html.estilo-acento .wa-est .wa-est__hero--nueva .wa-est__importe-valor {
  color: #037693 !important;
}

html.estilo-acento .wa-est .wa-est__hero--nueva .wa-est__importe-tipo {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(4, 158, 197, .12) !important;
  color: #037693 !important;
  clip-path: none;
}

html.estilo-acento .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-logo {
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(3, 40, 52, .3) !important;
}

@media (min-width: 992px) {
  html.estilo-acento .wa-est .wa-est__hero--imagen .wa-est__hero-foto::after {
    background: linear-gradient(90deg, #03556b 0%, rgba(3, 85, 107, .92) 34%, rgba(3, 118, 147, .45) 62%, rgba(4, 158, 197, .05) 85%);
  }
}

/* =====================================================================
 * 5. BONO · póster en ESCRITORIO: el logo grande en el centro de la parte
 *    visible de la foto (antes quedaba arriba, como forzado). El texto se
 *    queda en la columna izquierda de 600 px. En móvil no cambia.
 * ===================================================================== */
@media (min-width: 992px) {
  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-main {
    grid-column: 1 / -1 !important;
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero--imagen .wa-est__hero-main > :not(.wa-est__hero-logo) {
    max-width: 540px;
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--imagen .wa-est__hero-logo {
    position: absolute;
    top: 50%;
    left: calc(50% + 300px);
    width: 300px !important;
    max-width: none;
    height: 140px;
    margin: 0 !important;
    padding: 22px 30px !important;
    transform: translate(-50%, -50%);
  }

  html:is(.estilo-def, .estilo-acento) .wa-est .wa-est__hero.wa-est__hero--imagen .wa-est__hero-logo img {
    max-height: 84px;
  }
}

/* Escritorio: aire del bloque de texto del póster (la regla base de móvil
   tiene más prioridad y lo dejaba pegado arriba). */
@media (min-width: 992px) {
  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__hero-main {
    padding: 40px 44px 36px !important;
  }
}

/* Logo grande sobre la foto (escritorio) con prioridad sobre la base. */
@media (min-width: 992px) {
  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__hero-logo {
    width: 320px !important;
    max-width: none !important;
    height: 140px;
    padding: 22px 28px !important;
  }

  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__hero-logo img {
    width: 100% !important;
    height: 84px !important;
    max-height: none;
    object-fit: contain;
  }
}

html.estilo-def body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono :is(.wa-est__hero-logo, .wa-est__cta, .wa-est__hero-oferta) {
  border-radius: 0 !important;
}

/* =====================================================================
 * 6. BONO · tarjeta de la oferta sin huecos (22-oct, pedido de Fernando)
 *    Importe y botón en la MISMA fila; si el importe es largo (5–9
 *    palabras), el botón baja solo a la línea de abajo y ocupa todo el
 *    ancho (flex-wrap). Debajo, las condiciones clave del bono.
 * ===================================================================== */
html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  width: 100%;
  margin: 2px 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid #E3E8EA;
  color: #5f676c !important;
  font-size: .82rem;
  font-weight: 600;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__hero-datos span + span::before {
  content: "·";
  margin-right: 14px;
  color: #BBBBBB;
}

html body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono .wa-est__importe--largo .wa-est__importe-valor {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem) !important;
  line-height: 1.12;
  text-wrap: balance;
}

@media (min-width: 992px) {
  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__hero-oferta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 14px 20px !important;
    width: 100%;
  }

  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__importe {
    flex: 0 1 auto !important;
    min-width: 0;
    align-items: flex-start;
  }

  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__cta {
    flex: 1 1 200px !important;
    width: auto !important;
    min-width: 200px;
    max-width: none;
  }

  html:is(.estilo-def, .estilo-acento) body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--imagen .wa-est__hero-datos {
    flex: 1 0 100% !important;
    justify-content: flex-start;
  }
}

/* =====================================================================
 * 7. VARIANTE «FONDOS» de la V3 (?cabecera=fondos, 22-oct-2026)
 *  RESEÑA: en vez de las líneas inclinadas, una foto de su sector
 *    (img/fondos/apuestas | casino) con un velo oscuro a la izquierda para
 *    que el texto se lea. La foto va en un pseudo-elemento algo más alto
 *    que la cabecera: así se recortan los bordes superior e inferior de
 *    algunas imágenes, que vienen «estirados».
 *  BONO: el velo NEGRO de la V4 y su etiqueta (cian chillón, letra negra,
 *    inclinada); lo demás, como la V3 (más datos, esquinas redondeadas).
 * ===================================================================== */
html.estilo-acento body .wa-est .wa-est__hero.wa-est__hero--fondos.wa-est__hero--marcador {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #1c5e75 !important;
}

html.estilo-acento body .wa-est .wa-est__hero.wa-est__hero--fondos.wa-est__hero--marcador::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(28, 94, 117, .85) 0%, rgba(28, 94, 117, .55) 40%, rgba(28, 94, 117, .12) 72%, rgba(28, 94, 117, 0) 100%),
    var(--wa-fondo) center / cover no-repeat !important;
  transform: none !important;
  pointer-events: none;
}

/* En móvil el velo va de arriba (foto visible) a abajo (texto). */
@media (max-width: 991.98px) {
  html.estilo-acento body .wa-est .wa-est__hero.wa-est__hero--fondos.wa-est__hero--marcador::before {
    background:
      /* Móvil: la foto arriba a buena altura (no «cover», que amplía una
         franja casi lisa) y fundida con el azul hacia abajo. */
      linear-gradient(180deg, rgba(28, 94, 117, .05) 0%, rgba(28, 94, 117, .25) 120px, rgba(28, 94, 117, .85) 230px, #1c5e75 280px),
      var(--wa-fondo) 30% 0 / auto 280px no-repeat !important;
  }
}

html.estilo-acento body .wa-est .wa-est__hero--fondos .wa-est__marcador {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(16, 60, 76, .5);
}

/* Texto sobre la foto: sombra suave para que se lea en cualquier fondo. */
html.estilo-acento body .wa-est .wa-est__hero--fondos :is(.wa-est__h1, .wa-est__nota, .wa-est__marcador) {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* BONO con velo negro (como la V4) y etiqueta de la V4. */
html.estilo-acento body .wa-est .wa-est__hero.wa-est__hero--nueva.wa-est__hero--bono.wa-est__hero--fondos {
  background: #0d2128 !important;
}

html.estilo-acento body .wa-est .wa-est__hero--bono.wa-est__hero--fondos .wa-est__hero-foto::after {
  background: linear-gradient(180deg, rgba(13, 33, 40, 0) 35%, rgba(13, 33, 40, .8) 75%, #0d2128 100%) !important;
}

@media (min-width: 992px) {
  html.estilo-acento body .wa-est .wa-est__hero--bono.wa-est__hero--fondos.wa-est__hero--imagen .wa-est__hero-foto::after {
    background: linear-gradient(90deg, #0d2128 0%, rgba(13, 33, 40, .92) 34%, rgba(13, 33, 40, .45) 62%, rgba(13, 33, 40, .05) 85%) !important;
  }
}

html.estilo-acento body .wa-est .wa-est__hero--bono.wa-est__hero--fondos .wa-est__importe-tipo {
  padding: 4px 14px !important;
  border-radius: 0 !important;
  background: #04C4F6 !important;
  color: #131313 !important;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

/* Fondo de móvil propio (nombre-movil.webp, vertical 4:5): se ve entero
   arriba y se funde con el azul hacia abajo. */
@media (max-width: 991.98px) {
  html.estilo-acento body .wa-est .wa-est__hero.wa-est__hero--fondos.wa-est__hero--fondo-movil.wa-est__hero--marcador::before {
    background:
      linear-gradient(180deg, rgba(28, 94, 117, 0) 0%, rgba(28, 94, 117, .2) 35%, rgba(28, 94, 117, .85) 62%, #1c5e75 75%),
      var(--wa-fondo-movil) top center / 100% auto no-repeat !important;
  }
}