/**
 * Estilo «Suave con acento» (pruebas, 21-oct-2026). Solo con ?estilo=suave-acento
 * (preprod/local). Se carga ENCIMA de estilo-suave-emil.css: <html> lleva
 * data-estilo="suave-emil" y la clase .estilo-acento.
 *
 * Base: Suave (claro, plano, CTA verde como única mancha fuerte).
 * Dos detalles traídos de Impacto Mix, con mesura:
 *   1. Número de posición de los rankings en dorsal inclinado (paralelogramo):
 *      azul oscuro; el nº 1 en cian con número negro.
 *   2. Cabecera de reseñas y bonos (estructura F) en azul de la web con
 *      degradado y líneas de velocidad muy sutiles. El bono y el CTA van en
 *      una tarjeta blanca encima: el CTA verde sigue siempre sobre blanco.
 * Paleta de la web: #037693, #049EC5, #04C4F6, #131313, blanco.
 */

/* ---------- 1. Dorsal inclinado en la posición de los rankings ---------- */
html.estilo-acento[data-estilo="suave-emil"] .wa-rk-pos,
html.estilo-acento[data-estilo="suave-emil"] .wa-cmp__pos,
html.estilo-acento[data-estilo="suave-emil"] .wa-lat__pos {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: #037693;
  box-shadow: none;
  color: #fff;
  font: italic 800 14px/1 Poppins, Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

html.estilo-acento[data-estilo="suave-emil"] .is-top .wa-rk-pos,
html.estilo-acento[data-estilo="suave-emil"] .wa-cmp__fila.is-top .wa-cmp__pos,
html.estilo-acento[data-estilo="suave-emil"] .wa-lat__item.is-top .wa-lat__pos {
  background: #04c4f6;
  color: #131313;
}

/* En el lateral la posición va superpuesta: más pequeña. */
html.estilo-acento[data-estilo="suave-emil"] .wa-lat__pos {
  min-width: 26px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
}

/* ---------- 2. Cabecera de reseña y bono (estructura F) en azul ---------- */
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero {
  border: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, #03556b 0%, #037693 55%, #049ec5 100%);
  box-shadow: none;
  color: #fff;
}

/* La banda base de líneas de velocidad, más suave sobre el azul. */
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero::before {
  opacity: .35;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero :is(h1, .wa-est__h1),
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-cuerpo,
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-main,
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__nota,
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__nota-num {
  color: #fff !important;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero .wa-est__nota small,
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-main .wa-est__actualizado {
  color: rgba(255, 255, 255, .85) !important;
}

/* Logo sobre placa blanca (muchos logos son oscuros). */
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-logo {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(3, 61, 77, .25);
}

/* Bono + CTA en tarjeta blanca: el CTA verde sigue sobre blanco. */
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-oferta {
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(3, 61, 77, .22);
  color: #131313;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-oferta :is(.wa-est__legal, .wa-est__aviso, .wa-est__verificado) {
  color: #333 !important;
}

/* Lo que quede como enlace dentro del azul, en blanco legible. */
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-cuerpo a,
html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero-main a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .6);
}

html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Maqueta nueva en móvil: la maqueta deshace la caja de la oferta
   (display: contents) y el CTA quedaría sobre el azul. Se mantiene la
   tarjeta blanca como una fila propia de la rejilla (igual que Mix). */
@media (max-width: 767.98px) {
  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero,
  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera.wa-est--resena-f .wa-est__hero {
    grid-template-areas: "logo titulo" "nota nota" "oferta oferta";
  }

  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-oferta,
  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera.wa-est--resena-f .wa-est__hero-oferta {
    display: grid;
    grid-area: oferta;
    gap: 10px;
  }

  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-oferta > *,
  html.estilo-acento[data-estilo="suave-emil"] body.maqueta-nueva .wa-maq-cabecera.wa-est--resena-f .wa-est__hero-oferta > * {
    grid-area: auto;
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.estilo-acento[data-estilo="suave-emil"] .wa-est--f .wa-est__hero * {
    transition: none !important;
  }
}

/* =====================================================================
 * 3. CABECERA OSCURA como la web actual (pedido de Fernando 21-oct).
 *    Negro con una línea fina cian; vuelve el logo original (texto blanco).
 * ===================================================================== */
html.estilo-acento[data-estilo="suave-emil"] header#header .navbar.fixed-top {
  background: #131313 !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -2px 0 #04c4f6;
}

html.estilo-acento[data-estilo="suave-emil"] header#header .navbar-brand img.logo {
  content: normal;
}

html.estilo-acento[data-estilo="suave-emil"] .wa-nav-toggle__icon,
html.estilo-acento[data-estilo="suave-emil"] .wa-nav-toggle__icon::before,
html.estilo-acento[data-estilo="suave-emil"] .wa-nav-toggle__icon::after {
  background: #fff;
}

html.estilo-acento[data-estilo="suave-emil"] header#header .navbar :is(a, button, .nav-link, i, svg):not(.btn-success) {
  color: #fff;
}

html.estilo-acento[data-estilo="suave-emil"] header#header .navbar :focus-visible {
  outline: 2px solid #04c4f6;
  outline-offset: 2px;
}

/* El movimiento (antes sección 4) está en css/wa-movimiento.css, compartido con la V4. */