/* ==========================================================================
   ESTRUCTURA F «Impacto BB» (reseña y bono) — pruebas ?estructura=f, solo
   preprod/local. Inspirada en el sistema de betbrothers:
   fondo gris claro, tarjetas blancas, radio 10, UNA sombra, CTA verde con
   texto blanco SIEMPRE sobre blanco, líneas de velocidad muy sutiles solo en
   las cabeceras. Todo bajo .wa-est--f. Móvil primero.
   La tabla de contenido de sycsl_toc (.toc…) NO se toca aquí.
   ========================================================================== */

.wa-est--f {
  --f-verde: #3FBF53;
  --f-azul: #049EC5;
  --f-azul-osc: #037693;
  --f-negro: #131313;
  --f-texto: #333;
  --f-suave: #555;
  --f-linea: #E9E9E9;
  --f-gris: #BBB;
  --f-fondo: #F3F4F6;
  --f-azul-claro: #EAF6FA;
  --f-rojo: #C8372D;
  --f-radio: 10px;
  --f-sombra: 0 2px 30px rgba(0, 0, 0, .08);
  --f-titulos: Poppins, Inter, system-ui, sans-serif;
  --f-fuente: Inter, system-ui, sans-serif;
  background: var(--f-fondo);
  border-radius: var(--f-radio);
  padding: 10px;
  color: var(--f-texto);
  font-family: var(--f-fuente);
  line-height: 1.55;
  max-width: 100%;
  overflow-x: clip;
}
.wa-est--f *, .wa-est--f *::before, .wa-est--f *::after { box-sizing: border-box; }
.wa-est--f img { max-width: 100%; height: auto; }
.wa-est--f p { margin: 0; }
.wa-est--f .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wa-est--f > * + *,
.wa-est--f .wa-est__main > * + *,
.wa-est--f article > * + * { margin-top: 14px; }
.wa-est--f a { color: var(--f-azul-osc); }

/* ---------- Tipografía ---------- */
body .wa-est--f h1.wa-est__h1 {
  font-family: var(--f-titulos);
  font-weight: 700;
  color: var(--f-negro) !important;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}
.wa-est--f .wa-est__h2,
.wa-est--f .wa-est__h-sm,
.wa-est--f section > h2 {
  font-family: var(--f-titulos);
  font-weight: 700;
  color: var(--f-negro);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  line-height: 1.25;
  margin: 0 0 12px;
}
.wa-est--f .wa-est__h3 {
  font-family: var(--f-titulos);
  font-weight: 700;
  color: var(--f-negro);
  font-size: 1rem;
  margin: 0 0 8px;
}
.wa-est--f .wa-est__legal { font-size: .78rem; color: var(--f-suave); line-height: 1.45; }
.wa-est--f .wa-est__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--f-fondo); border: 1px dashed var(--f-gris);
  border-radius: 6px; padding: 1px 7px; color: var(--f-negro); font-weight: 700;
}
.wa-est--f .wa-est__enlace { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tarjetas ---------- */
.wa-est--f .wa-est__card,
.wa-est--f .wa-est__hero,
.wa-est--f .wa-est__meta,
.wa-est--resena-f article > section:not(.wa-est__bonos):not(.wa-est__sector),
.wa-est--resena-f .wa-est__texto,
.wa-est--resena-f #wa-autor > section,
.wa-est--bono-f > section:not(.wa-est__otros):not(.wa-est__rivales),
.wa-est--bono-f > .wa-est__resumen,
.wa-est--bono-f > .wa-est__faq,
.wa-est--bono-f .wa-est__lateral-card {
  background: #fff;
  border-radius: var(--f-radio);
  box-shadow: var(--f-sombra);
  padding: 16px;
}
@media (min-width: 768px) {
  .wa-est--f { padding: 14px; }
  .wa-est--f .wa-est__card,
  .wa-est--f .wa-est__hero,
  .wa-est--resena-f article > section:not(.wa-est__bonos):not(.wa-est__sector),
  .wa-est--resena-f .wa-est__texto,
  .wa-est--resena-f #wa-autor > section,
  .wa-est--bono-f > section:not(.wa-est__otros):not(.wa-est__rivales),
  .wa-est--bono-f > .wa-est__resumen,
  .wa-est--bono-f > .wa-est__faq { padding: 22px 24px; }
}

/* ---------- CTA único: verde, texto blanco, sobre blanco ---------- */
.wa-est--f .wa-est__cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 22px;
  background: var(--f-verde); color: #fff;
  border: 2px solid var(--f-verde); border-radius: var(--f-radio);
  font-family: var(--f-titulos); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em; text-align: center;
  cursor: pointer; user-select: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out;
}
.wa-est--f .wa-est__cta:active { transform: scale(.97); }
.wa-est--f .wa-est__btn-sec {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px; width: 100%;
  background: #fff; color: var(--f-azul-osc);
  border: 2px solid var(--f-azul-osc); border-radius: var(--f-radio);
  font-family: var(--f-titulos); font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .wa-est--f .wa-est__cta:hover { background: var(--f-negro); border-color: var(--f-negro); color: #fff; }
  .wa-est--f .wa-est__btn-sec:hover { background: var(--f-azul-osc); color: #fff; }
  .wa-est--f .wa-est__chip:hover { border-color: var(--f-azul-osc); color: var(--f-azul-osc); }
  .wa-est--f .wa-est__enlace:hover { color: var(--f-negro); }
}
.wa-est--f :is(a, button, summary, [role="link"]):focus-visible {
  outline: 3px solid var(--f-azul-osc); outline-offset: 2px;
}

/* ---------- Cabeceras con líneas de velocidad (muy sutiles) ---------- */
.wa-est--f .wa-est__hero { position: relative; overflow: clip; isolation: isolate; }
.wa-est--f .wa-est__hero::before {
  content: ""; position: absolute; inset: 0 0 0 35%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(-62deg, transparent 0 18px, rgba(19, 19, 19, .035) 18px 19px, transparent 19px 34px, rgba(4, 158, 197, .05) 34px 35px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
  mask-image: linear-gradient(to left, #000 0%, transparent 85%);
}

/* ---------- Estrellas y nota ---------- */
.wa-est--f .wa-est__estrellas {
  --p: 0%;
  position: relative; display: inline-block; line-height: 1;
  font-size: 1.05rem; letter-spacing: 2px; color: var(--f-linea);
}
.wa-est--f .wa-est__estrellas::before { content: "★★★★★"; }
.wa-est--f .wa-est__estrellas::after {
  content: "★★★★★"; position: absolute; left: 0; top: 0;
  width: var(--p); overflow: hidden; white-space: nowrap; color: var(--f-verde);
}
.wa-est--f .wa-est__nota { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wa-est--f .wa-est__nota-num { font-family: var(--f-titulos); font-weight: 700; font-size: 1.35rem; color: var(--f-negro); }
.wa-est--f .wa-est__nota-num small { font-size: .8rem; color: var(--f-suave); font-weight: 600; }

/* =========================== RESEÑA =========================== */

/* Hero */
.wa-est--resena-f .wa-est__hero { display: grid; gap: 16px; }
.wa-est--resena-f .wa-est__hero-id { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wa-est--f .wa-est__hero-logo img { display: block; border-radius: 8px; }
.wa-est--resena-f .wa-est__hero-logo { flex: 0 0 auto; width: 130px; }
.wa-est--resena-f .wa-est__hero-cuerpo { flex: 1 1 220px; min-width: 0; }
.wa-est--resena-f .wa-est__hero-oferta { display: grid; gap: 12px; }
.wa-est--f .wa-est__hero-bono { display: flex; gap: 10px; align-items: center; }
.wa-est--f .wa-est__bono-ico { color: var(--f-azul-osc); flex: 0 0 auto; }
.wa-est--resena-f .wa-est__hero-bono > span { display: grid; }
.wa-est--resena-f .wa-est__hero-bono-tipo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--f-suave); font-weight: 600; }
.wa-est--resena-f .wa-est__hero-bono strong { font-family: var(--f-titulos); font-size: 1.35rem; color: var(--f-negro); line-height: 1.2; }
.wa-est--resena-f .wa-est__hero-bono-cod { font-size: .85rem; margin-top: 2px; }
.wa-est--resena-f .wa-est__hero-botones { display: grid; gap: 8px; }
@media (min-width: 768px) {
  .wa-est--resena-f .wa-est__hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .wa-est--resena-f .wa-est__hero-logo { width: 150px; }
}

/* Franja de confianza (oscura, sin CTA) */
.wa-est--f .wa-est__confianza {
  background: var(--f-negro); color: #fff; border-radius: var(--f-radio);
  padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 20px;
}
.wa-est--f .wa-est__confianza-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wa-est--f .wa-est__confianza-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.wa-est--f .wa-est__confianza-item svg { color: var(--f-verde); flex: 0 0 auto; }
.wa-est--f .wa-est__sellos-jr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wa-est--f .wa-est__sellos-jr img { height: 26px; width: auto; }

/* Barra de metadatos (4 celdas) */
.wa-est--f .wa-est__meta {
  position: relative; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px;
}
@media (min-width: 768px) {
  .wa-est--f .wa-est__meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 16px 20px; }
}
.wa-est--f .wa-est__meta-celda { position: relative; padding-left: 44px; min-height: 36px; display: flex; flex-direction: column; justify-content: center; }
.wa-est--f .wa-est__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--f-suave); font-weight: 600; }
.wa-est--f .wa-est__meta dd { margin: 0; font-weight: 600; color: var(--f-negro); font-size: .92rem; line-height: 1.3; }
.wa-est--f .wa-est__meta-foto,
.wa-est--f .wa-est__meta-ini,
.wa-est--f .wa-est__meta-ico { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.wa-est--f .wa-est__meta-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.wa-est--f .wa-est__meta-ini {
  width: 36px; height: 36px; border-radius: 50%; background: var(--f-azul-claro); color: var(--f-azul-osc);
  display: grid; place-items: center; font-weight: 700;
}
.wa-est--f .wa-est__meta-ico { left: 7px; color: var(--f-azul); }
/* Burbuja con la bio del verificador: se posiciona respecto a la barra
   entera para no salirse de pantalla en móvil. */
.wa-est--f .wa-est__pop-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px;
  vertical-align: middle; border: 0; border-radius: 50%; background: transparent;
  color: var(--f-azul-osc); cursor: pointer; padding: 0;
}
.wa-est--f .wa-est__pop-txt {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 30;
  background: var(--f-negro); color: #fff; font-weight: 400; font-size: .85rem; line-height: 1.45;
  padding: 10px 12px; border-radius: 8px; box-shadow: var(--f-sombra);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease-out, visibility .15s ease-out;
}
.wa-est--f .wa-est__pop:hover .wa-est__pop-txt,
.wa-est--f .wa-est__pop:focus-within .wa-est__pop-txt { opacity: 1; visibility: visible; }

/* Índice en chips (sticky; acompaña a la tabla de contenido, no la sustituye) */
.wa-est--f .wa-est__indice {
  position: sticky; top: 0; z-index: 20;
  background: var(--f-fondo); padding: 6px 0;
}
.wa-est--f .wa-est__indice-lista {
  list-style: none; margin: 0; padding: 2px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.wa-est--f .wa-est__chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  background: #fff; border: 1px solid var(--f-linea); border-radius: 999px;
  color: var(--f-negro); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease-out, color .15s ease-out;
}
/* Las anclas no quedan tapadas por los chips. */
.wa-est--resena-f :is(section[id], #wa-analisis, #wa-autor) { scroll-margin-top: 64px; }

/* Rejilla: principal + lateral sticky (columna propia → sin CLS) */
.wa-est--f .wa-est__lateral { display: none; }
@media (min-width: 1200px) {
  .wa-est--f .wa-est__layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
  .wa-est--f .wa-est__lateral { display: block; position: sticky; top: 12px; }
}
.wa-est--f .wa-est__lateral-card {
  background: #fff; border-radius: var(--f-radio); box-shadow: var(--f-sombra);
  padding: 16px; display: grid; gap: 10px; text-align: center; justify-items: center;
}
.wa-est--f .wa-est__lateral-card .wa-est__hero-logo { width: 140px; }
.wa-est--f .wa-est__lateral-card .wa-est__nota { flex-direction: column; gap: 2px; margin: 0; }
.wa-est--f .wa-est__lateral-bono { display: grid; gap: 2px; }
.wa-est--f .wa-est__lateral-bono span { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--f-suave); font-weight: 600; }
.wa-est--f .wa-est__lateral-bono strong { font-family: var(--f-titulos); font-size: 1.15rem; color: var(--f-negro); line-height: 1.2; }
.wa-est--f .wa-est__lateral-card .wa-est__cta,
.wa-est--f .wa-est__lateral-card .wa-est__btn-sec { width: 100%; font-size: .9rem; padding-inline: 10px; }

/* Resumen («respuesta primero») */
.wa-est--resena-f .wa-est__resumen { border-left: 4px solid var(--f-verde); }
.wa-est--resena-f .wa-est__resumen-texto { font-size: 1.02rem; }

/* Puntuación: nota total + barras + veredicto */
.wa-est--f .wa-est__puntuacion-grid { display: grid; gap: 16px; }
@media (min-width: 600px) { .wa-est--f .wa-est__puntuacion-grid { grid-template-columns: 150px minmax(0, 1fr); align-items: start; } }
.wa-est--f .wa-est__puntuacion-total {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  background: var(--f-fondo); border-radius: var(--f-radio); padding: 14px 10px;
}
.wa-est--f .wa-est__nota-grande { font-family: var(--f-titulos); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--f-negro); }
.wa-est--f .wa-est__nota-grande small { font-size: 1rem; color: var(--f-suave); }
.wa-est--f .wa-est__puntuacion-etq { font-size: .8rem; color: var(--f-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.wa-est--f .wa-est__notas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 20px; }
/* Dos columnas de barras solo si la tarjeta es ancha (no depende del viewport). */
.wa-est--f .wa-est__puntuacion { container-type: inline-size; }
@container (min-width: 720px) { .wa-est--f .wa-est__notas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wa-est--f .wa-est__nota-fila { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.wa-est--f .wa-est__nota-val { font-weight: 700; color: var(--f-negro); }
.wa-est--f .wa-est__nota-val small { color: var(--f-suave); font-weight: 500; }
.wa-est--f .wa-est__barra { display: block; height: 8px; background: var(--f-linea); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.wa-est--f .wa-est__barra > span { display: block; height: 100%; background: var(--f-verde); border-radius: 4px; }
.wa-est--f .wa-est__veredicto-frase {
  margin-top: 16px; background: var(--f-azul-claro); border-left: 4px solid var(--f-azul);
  border-radius: 0 var(--f-radio) var(--f-radio) 0; padding: 12px 14px; color: var(--f-texto);
}

/* Bloques Apuestas / Casino */
.wa-est--f .wa-est__sector-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wa-est--f .wa-est__sector-cab .wa-est__h2 { margin: 0; flex: 1 1 auto; }
.wa-est--f .wa-est__sector-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--f-radio);
  background: var(--f-azul-claro); color: var(--f-azul-osc); display: grid; place-items: center;
}
.wa-est--f .wa-est__sector-nota {
  flex: 0 0 auto; background: var(--f-negro); color: #fff; border-radius: 8px; padding: 6px 10px;
  font-family: var(--f-titulos); line-height: 1;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-inline: 14px;
}
.wa-est--f .wa-est__sector-nota strong { font-size: 1.2rem; }
.wa-est--f .wa-est__sector-nota small { font-size: .75rem; opacity: .85; }
.wa-est--f .wa-est__veredicto-cols { display: grid; gap: 12px; }
@media (min-width: 640px) { .wa-est--f .wa-est__veredicto-cols { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.wa-est--f .wa-est__pros,
.wa-est--f .wa-est__contras { border-radius: var(--f-radio); padding: 14px 16px; border-top: 3px solid var(--f-verde); background: #F3FAF4; }
.wa-est--f .wa-est__contras { border-top-color: var(--f-rojo); background: #FCF3F2; }
.wa-est--f :is(.wa-est__pros, .wa-est__contras) ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wa-est--f :is(.wa-est__pros, .wa-est__contras) li { position: relative; padding-left: 24px; font-size: .95rem; }
.wa-est--f .wa-est__pros li::before,
.wa-est--f .wa-est__contras li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.wa-est--f .wa-est__pros li::before { content: "✓"; color: #23862F; }
.wa-est--f .wa-est__contras li::before { content: "✕"; color: var(--f-rojo); }

/* Tarjetas de bono (vista rápida) */
.wa-est--f .wa-est__bono { position: relative; }
.wa-est--f .wa-est__sector .wa-est__bono { margin-top: 16px; border: 1px solid var(--f-linea); border-radius: var(--f-radio); padding: 16px; }
.wa-est--f .wa-est__bono-q { font-family: var(--f-titulos); font-weight: 700; color: var(--f-negro); font-size: 1.05rem; line-height: 1.3; margin: 0 0 10px; }
.wa-est--f .wa-est__bono-cuerpo { display: grid; gap: 10px; }
.wa-est--f .wa-est__bono-importe { display: flex; align-items: center; gap: 8px; font-family: var(--f-titulos); font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--f-negro); }
.wa-est--f .wa-est__bono-titulo { font-size: .95rem; font-weight: 600; margin: 0; line-height: 1.35; font-family: var(--f-fuente); }
.wa-est--f .wa-est__bono-tipo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--f-suave); font-weight: 700; }
.wa-est--f .wa-est__bono-cond { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .wa-est--f .wa-est__sector .wa-est__bono-cond { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wa-est--f .wa-est__bono-cond > div { background: var(--f-fondo); border-radius: 8px; padding: 6px 10px; }
.wa-est--f .wa-est__bono-cond dt { font-size: .72rem; color: var(--f-suave); font-weight: 600; }
.wa-est--f .wa-est__bono-cond dd { margin: 0; font-weight: 700; color: var(--f-negro); font-size: .92rem; }
.wa-est--f .wa-est__bono-como summary { cursor: pointer; font-weight: 600; color: var(--f-azul-osc); min-height: 32px; display: flex; align-items: center; }
.wa-est--f .wa-est__bono-como summary { list-style: none; gap: 8px; }
.wa-est--f .wa-est__bono-como summary::-webkit-details-marker { display: none; }
.wa-est--f .wa-est__bono-como summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.wa-est--f .wa-est__bono-como[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.wa-est--f .wa-est__bono-como .wa-est__pasos { margin-top: 8px; font-size: .93rem; }
.wa-est--f .wa-est__bono-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.wa-est--f .wa-est__bono-acciones .wa-est__cta { flex: 1 1 200px; }
.wa-est--f .wa-est__bonos-grid,
.wa-est--f .wa-est__tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wa-est--f .wa-est__bonos-grid > li,
.wa-est--f .wa-est__tarjetas > li { display: flex; flex-direction: column; gap: 8px; }
.wa-est--f .wa-est__bonos-grid .wa-est__bono-acciones,
.wa-est--f .wa-est__tarjetas .wa-est__cta { margin-top: auto; }

/* Datos clave (rejilla de baldosas) */
.wa-est--f .wa-est__datos-lista { margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wa-est--f .wa-est__dato { background: var(--f-fondo); border-radius: var(--f-radio); padding: 12px 14px; }
.wa-est--f .wa-est__dato dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--f-suave); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.wa-est--f .wa-est__dato dd { margin: 4px 0 0; font-weight: 700; color: var(--f-negro); font-size: 1rem; }
.wa-est--f .wa-est__dato--pagos { grid-column: 1 / -1; }
.wa-est--f .wa-est__dato-ico { color: var(--f-azul); flex: 0 0 auto; }
.wa-est--f .wa-est__pagos-mini { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-est--f .wa-est__pagos-mini img { height: 22px; width: auto; }

/* Pagos */
.wa-est--f .wa-est__pagos-datos { margin: 0 0 14px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wa-est--f .wa-est__pagos-datos > div { background: var(--f-fondo); border-radius: var(--f-radio); padding: 10px 14px; }
.wa-est--f .wa-est__pagos-datos dt { font-size: .74rem; color: var(--f-suave); font-weight: 600; text-transform: uppercase; }
.wa-est--f .wa-est__pagos-datos dd { margin: 2px 0 0; font-weight: 700; color: var(--f-negro); }
.wa-est--f .wa-est__pagos-logos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.wa-est--f .wa-est__pagos-logos li { display: grid; justify-items: center; gap: 4px; border: 1px solid var(--f-linea); border-radius: 8px; padding: 8px 6px; font-size: .75rem; color: var(--f-suave); text-align: center; }
.wa-est--f .wa-est__pagos-logos img { height: 30px; width: auto; }

/* Características */
.wa-est--f .wa-est__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wa-est--f .wa-est__checks li { display: flex; align-items: center; gap: 8px; background: var(--f-fondo); border-radius: 8px; padding: 8px 10px; font-weight: 500; }
.wa-est--f .wa-est__check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.wa-est--f .is-si .wa-est__check { background: var(--f-verde); color: #fff; }
.wa-est--f .is-no { color: var(--f-suave); }
.wa-est--f .is-no .wa-est__check { background: var(--f-linea); color: var(--f-suave); }

/* Capturas */
.wa-est--f .wa-est__capturas-fila { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.wa-est--f .wa-est__captura { flex: 0 0 150px; }
.wa-est--f .wa-est__captura img { border-radius: 8px; }
.wa-est--f .wa-est__capturas-fecha { font-size: .8rem; color: var(--f-suave); margin-bottom: 8px; }

/* Cita destacada + citas del texto */
.wa-est--f .wa-est__cita { margin: 0; background: var(--f-azul-claro); border-radius: var(--f-radio); padding: 18px 20px; border-left: 4px solid var(--f-azul); }
.wa-est--f .wa-est__cita blockquote { margin: 0; }
.wa-est--f .wa-est__cita blockquote p { font-family: var(--f-titulos); font-weight: 600; font-size: 1.1rem; line-height: 1.45; color: var(--f-negro); }
.wa-est--f .wa-est__cita figcaption { margin-top: 8px; font-size: .82rem; color: var(--f-suave); }
.wa-est--f .wa-est__texto blockquote {
  margin: 18px 0; background: var(--f-azul-claro); border-left: 4px solid var(--f-azul);
  border-radius: 0 var(--f-radio) var(--f-radio) 0; padding: 14px 18px; font-size: 1.05rem; color: var(--f-negro);
}

/* Texto editorial */
.wa-est--f .wa-est__texto { overflow-wrap: break-word; }
.wa-est--f .wa-est__texto p { margin: 0 0 1em; }
.wa-est--f .wa-est__texto h2 { font-family: var(--f-titulos); font-weight: 700; color: var(--f-negro); margin: 1.6em 0 .6em; line-height: 1.25; }
.wa-est--f .wa-est__texto h3 { font-family: var(--f-titulos); color: var(--f-negro); margin: 1.3em 0 .5em; line-height: 1.3; }
.wa-est--f .wa-est__texto table { display: block; max-width: 100%; overflow-x: auto; }
.wa-est--f .wa-est__texto img { border-radius: 8px; }

/* Opinión de la casa, información general, otras casas, autor */
.wa-est--f .wa-est__tabla { width: 100%; border-collapse: collapse; }
.wa-est--f .wa-est__tabla th,
.wa-est--f .wa-est__tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--f-linea); vertical-align: top; }
.wa-est--f .wa-est__tabla th { color: var(--f-suave); font-weight: 600; width: 40%; }
.wa-est--f .wa-est__otras-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.wa-est--f .wa-est__otra { border: 1px solid var(--f-linea); border-radius: var(--f-radio); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.wa-est--f .wa-est__otra-logo { border-radius: 8px; }
.wa-est--f .wa-est__otra-nombre { font-weight: 600; }
.wa-est--f .wa-est__otra-nota strong { font-family: var(--f-titulos); font-size: 1.2rem; color: var(--f-negro); }
.wa-est--f .wa-est__otra-bono { font-weight: 700; color: var(--f-negro); }
.wa-est--f .wa-est__otra .wa-est__cta { margin-top: auto; font-size: .88rem; }
.wa-est--f .wa-est__autor-verif { font-size: .88rem; color: var(--f-suave); margin-top: 4px; }

/* =========================== BONO =========================== */
.wa-est--bono-f > * + * { margin-top: 14px; }
.wa-est--bono-f .wa-est__hero-main { display: grid; gap: 12px; justify-items: start; }
.wa-est--bono-f a.wa-est__hero-logo {
  display: inline-flex; background: #fff; border: 1px solid var(--f-linea); border-radius: var(--f-radio);
  padding: 8px; box-shadow: var(--f-sombra);
}
.wa-est--bono-f a.wa-est__hero-logo img { width: auto; height: 52px; }
.wa-est--bono-f .wa-est__hero-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; width: 100%; }
.wa-est--bono-f .wa-est__importe { display: grid; gap: 4px; margin: 0; }
.wa-est--bono-f .wa-est__importe-valor { font-family: var(--f-titulos); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.7rem); line-height: 1.05; color: var(--f-negro); }
.wa-est--bono-f .wa-est__importe-tipo {
  justify-self: start; background: var(--f-azul-claro); color: var(--f-azul-osc);
  border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700;
}
.wa-est--bono-f .wa-est__cta--hero { flex: 1 1 220px; max-width: 360px; }
.wa-est--bono-f .wa-est__verificado { font-size: .88rem; color: var(--f-suave); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wa-est--bono-f .wa-est__verificado-ico { width: 20px; height: 20px; border-radius: 50%; background: var(--f-verde); color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; }
.wa-est--bono-f .wa-est__aviso { font-size: .78rem; color: var(--f-suave); line-height: 1.45; }
.wa-est--bono-f .meta-confianza { padding: 0 4px; }
.wa-est--bono-f > .wa-est__resumen { border-left: 4px solid var(--f-verde); font-size: 1.02rem; }
.wa-est--bono-f .wa-est__dato--destacado { background: #fff; border: 2px solid var(--f-verde); grid-column: span 2; }
.wa-est--bono-f .wa-est__dato--destacado dd { font-family: var(--f-titulos); font-size: 1.2rem; }

/* Pasos con número en paralelogramo negro (seña «impacto») */
.wa-est--f .wa-est__pasos-lista { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 12px; }
.wa-est--f .wa-est__paso { counter-increment: paso; position: relative; padding: 4px 0 0 52px; min-height: 34px; }
.wa-est--f .wa-est__paso::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 40px; height: 32px;
  display: grid; place-items: center; background: var(--f-negro); color: #fff;
  font-family: var(--f-titulos); font-weight: 700;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.wa-est--f .wa-est__paso p { margin: 0 0 .4em; }

/* Términos (details open) */
.wa-est--f .wa-est__tyc-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wa-est--f .wa-est__tyc-summary::-webkit-details-marker { display: none; }
.wa-est--f .wa-est__tyc-summary h2 { margin: 0; }
.wa-est--f .wa-est__tyc-summary::after {
  content: ""; width: 10px; height: 10px; flex: 0 0 auto; margin-right: 4px;
  border-right: 2px solid var(--f-negro); border-bottom: 2px solid var(--f-negro); transform: rotate(45deg);
}
.wa-est--f .wa-est__tyc-details[open] > .wa-est__tyc-summary::after { transform: rotate(-135deg); }
.wa-est--f .wa-est__tyc-details > .wa-est__texto { margin-top: 14px; }

/* Puntos clave */
.wa-est--bono-f .wa-est__puntos .wa-est__pros { background: transparent; border: 0; padding: 0; }

/* Otros bonos de la casa y bonos rivales */
.wa-est--bono-f .wa-est__tarjeta-logo img { height: 28px; width: auto; border-radius: 6px; }
.wa-est--bono-f .wa-est__tarjeta .wa-est__cta { font-size: .88rem; }
.wa-est--bono-f .wa-est__resena-link { margin-top: 12px; }
.wa-est--bono-f .wa-est__rivales .wa-est__legal { margin-top: 10px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .wa-est--f *, .wa-est--f *::before, .wa-est--f *::after { transition: none !important; }
  .wa-est--f .wa-est__cta:active { transform: none; }
}

/* Listas de puntos (ul.wa-est__pros directa, p. ej. «Puntos clave» del bono). */
.wa-est--f ul.wa-est__pros { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* «Otras casas como…» con el diseño de la tarjeta lateral (22-oct-2026). */
.wa-est--f .wa-est__otras-rejilla { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* position: relative (no static): el texto oculto de «Nota:» es absoluto y,
   sin ancestro posicionado, se escapaba del carrusel y ensanchaba la página
   en móvil (22-oct). */
.wa-est--f .wa-est__otras-card { position: relative; top: auto; height: 100%; }
.wa-est--f .wa-est__otras-card .wa-est__cta { margin-top: auto; }
.wa-est--f .wa-est__otras-nombre { margin: 0; font-family: var(--f-titulos); font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: center; }
.wa-est--f .wa-est__otras-nombre a { color: var(--f-negro); text-decoration: none; }
.wa-est--f .wa-est__otras-nombre a:hover { text-decoration: underline; }
.wa-est--f .wa-est__otras-card .wa-est__legal { font-size: .72rem; }
@media (max-width: 767.98px) {
  .wa-est--f .wa-est__otras-rejilla { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .wa-est--f .wa-est__otras-card { scroll-snap-align: start; }
}

/* Márgenes interiores (22-oct-2026, revisión de bordes):
   - «Más de…» y «Bonos parecidos…»: los estilos les ponen borde y el
     contenido quedaba pegado a él.
   - FAQ del bono: al llevar ya .casa-apuestas__content (mismo estilo de
     texto que las páginas) heredaba «body.node--type-bonus
     .casa-apuestas__content { padding: 0 }» de custom.css. */
.wa-est--bono-f > .wa-est__otros,
.wa-est--bono-f > .wa-est__rivales,
.wa-est--bono-f > .wa-est__faq.casa-apuestas__content { padding: 16px; }
@media (min-width: 768px) {
  .wa-est--bono-f > .wa-est__otros,
  .wa-est--bono-f > .wa-est__rivales,
  .wa-est--bono-f > .wa-est__faq.casa-apuestas__content { padding: 22px 24px; }
}