/* ==========================================================================
   MAQUETA NUEVA OPCIONAL (20-oct-2026) — solo con ?maqueta=nueva en
   preprod/local (body.maqueta-nueva). Nunca se aplica por defecto.
   Neutra: solo coloca piezas (cabecera a todo el ancho, tarjeta al principio
   del sidebar, portada más ancha). Colores de la paleta de la web; los
   estilos globales (?estilo=) visten encima.
   - Reseñas y bonos (estructura F): la cabecera (hero + confianza + metadatos)
     va a todo el ancho encima de las columnas; la tarjeta lateral de la F pasa
     al principio del sidebar (sin sticky: el Top 10 de debajo conserva el
     suyo y nada lo tapa) y el contenido queda en 2 columnas.
   - Resto de páginas con sidebar: tarjeta «Bono destacado» al principio.
   - Portada: contenedor de ~1320px para rankings; texto a ancho de lectura.
   - Móvil: cabecera compacta; la tarjeta del sidebar no se pinta (ya está el
     CTA fijo .gumgum y el de la cabecera).
   ========================================================================== */

/* ---------- Cabecera a todo el ancho (reseña / bono F) ---------- */
body.maqueta-nueva .wa-maq-cabecera { margin: 0 0 16px; }
body.maqueta-nueva .wa-maq-cabecera > .wa-est--f { overflow-x: clip; }
/* Sin la columna lateral dentro del nodo: contenido en una sola columna. */
@media (min-width: 1200px) {
  body.maqueta-nueva .wa-est--f .wa-est__layout { display: block; }
}

/* ---------- Tarjeta al principio del sidebar ---------- */
body.maqueta-nueva .wa-maq-tarjeta { display: none; }
@media (min-width: 992px) {
  body.maqueta-nueva .wa-maq-tarjeta { display: block; margin: 0 0 16px; }
}
/* El sidebar estira su bloque al 100% del alto (.sidebar aside/.block/.content
   {height:100%}); con la tarjeta delante, columna flexible para que el bloque
   del Top 10 ocupe solo lo que queda y su sticky no se salga de la columna. */
@media (min-width: 992px) {
  body.maqueta-nueva .sidebar > aside.section { display: flex; flex-direction: column; }
  body.maqueta-nueva .sidebar > aside.section > .wa-maq-tarjeta { flex: 0 0 auto; }
  body.maqueta-nueva .sidebar > aside.section > .block { flex: 1 1 auto; height: auto; min-height: 0; }
  /* Contenido + sidebar en 2 columnas reales: sin esto, un elemento ancho del
     contenido (fila de chips sin salto) estira la columna y el sidebar cae
     debajo del contenido. */
  body.maqueta-nueva #main > .row > main.col { min-width: 0; }
  /* Menú de categorías del blog: que salte de línea en la columna. */
  body.maqueta-nueva ul.menu-blog { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
}

/* La de la estructura F: sin el fondo gris del envoltorio, solo la tarjeta. */
body.maqueta-nueva .wa-maq-tarjeta.wa-est--f { background: transparent; padding: 0; border-radius: 0; overflow: visible; }
body.maqueta-nueva .wa-maq-tarjeta.wa-est--f .wa-est__lateral-card { padding: 16px 14px; }
body.maqueta-nueva .wa-maq-tarjeta.wa-est--f .wa-est__lateral-card .wa-est__hero-logo { width: 150px; }

/* «Bono destacado» (listados, blog, artículos…): estilos propios y neutros. */
body.maqueta-nueva .wa-maq-dest {
  --mq-verde: #3FBF53; --mq-negro: #131313; --mq-azul-osc: #037693; --mq-linea: #E9E9E9; --mq-suave: #555;
  background: #fff; border: 1px solid var(--mq-linea); border-radius: 10px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, .08);
  padding: 16px 14px; text-align: center; font-family: Inter, system-ui, sans-serif; color: #333;
}
@media (min-width: 992px) {
  body.maqueta-nueva .wa-maq-dest { display: grid; gap: 8px; justify-items: center; }
}
body.maqueta-nueva .wa-maq-dest p { margin: 0; }
body.maqueta-nueva .wa-maq-dest__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mq-azul-osc);
}
body.maqueta-nueva .wa-maq-dest__logo { width: 150px; max-width: 100%; }
body.maqueta-nueva .wa-maq-dest__logo img { display: block; width: 100%; height: auto; border-radius: 8px; }
body.maqueta-nueva .wa-maq-dest__nombre { font-family: Poppins, Inter, sans-serif; font-weight: 700; color: var(--mq-negro); font-size: 1.1rem; }
body.maqueta-nueva .wa-maq-dest__nota { display: flex; align-items: center; gap: 8px; }
body.maqueta-nueva .wa-maq-dest__estrellas {
  --p: 0%; position: relative; display: inline-block; line-height: 1; font-size: 1rem; letter-spacing: 2px; color: var(--mq-linea);
}
body.maqueta-nueva .wa-maq-dest__estrellas::before { content: "★★★★★"; }
body.maqueta-nueva .wa-maq-dest__estrellas::after {
  content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--p); overflow: hidden; white-space: nowrap; color: var(--mq-verde);
}
body.maqueta-nueva .wa-maq-dest__nota-num { font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--mq-negro); }
body.maqueta-nueva .wa-maq-dest__nota-num small { font-size: .78rem; color: var(--mq-suave); font-weight: 600; }
body.maqueta-nueva .wa-maq-dest__bono { display: grid; gap: 2px; }
body.maqueta-nueva .wa-maq-dest__bono span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mq-suave); font-weight: 600; }
body.maqueta-nueva .wa-maq-dest__bono strong { font-family: Poppins, Inter, sans-serif; font-size: 1.1rem; color: var(--mq-negro); line-height: 1.25; }
body.maqueta-nueva .wa-maq-dest__cta {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 46px; padding: 8px 12px;
  background: var(--mq-verde); color: #fff; border: 2px solid var(--mq-verde); border-radius: 10px;
  font-family: Poppins, Inter, sans-serif; font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer; user-select: none;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
body.maqueta-nueva .wa-maq-dest__resena { color: var(--mq-azul-osc); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
body.maqueta-nueva .wa-maq-dest__legal { font-size: .72rem; color: var(--mq-suave); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  body.maqueta-nueva .wa-maq-dest__cta:hover { background: var(--mq-negro); border-color: var(--mq-negro); color: #fff; }
  body.maqueta-nueva .wa-maq-dest__resena:hover { color: var(--mq-negro); }
}
body.maqueta-nueva .wa-maq-dest :is(a, [role="link"]):focus-visible { outline: 3px solid var(--mq-azul-osc); outline-offset: 2px; }

/* ---------- Portada: más ancha y el texto a TODO el ancho ----------
 * 22-oct (Fernando): sin barra lateral, la columna de lectura de 860 px
 * dejaba hueco en blanco; el texto va al ancho de rankings y componentes. */
@media (min-width: 1200px) {
  body.maqueta-nueva.path-frontpage #main.container-md { max-width: 1320px; }
  body.maqueta-nueva.path-frontpage #content .block-system-main-block > .content > .blog-card__date { display: block; }
}

/* ---------- Móvil: cabecera compacta de la reseña ---------- */
@media (max-width: 767.98px) {
  body.maqueta-nueva .wa-maq-cabecera > .wa-est--f > * + * { margin-top: 10px; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero,
  body.maqueta-nueva .wa-maq-cabecera.wa-est--resena-f .wa-est__hero,
  body.maqueta-nueva .wa-maq-cabecera .wa-est__hero {
    padding: 14px;
  }
  /* Logo + H1 · nota + bono en una fila · CTA a todo el ancho · legal. */
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero {
    display: grid; gap: 10px 12px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo titulo" "nota bono" "botones botones" "legal legal";
    align-items: center;
  }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f :is(.wa-est__hero-id, .wa-est__hero-cuerpo, .wa-est__hero-oferta) { display: contents; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-logo { grid-area: logo; width: 84px; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__h1 { grid-area: titulo; font-size: 1.45rem; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__nota { grid-area: nota; margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-bono { grid-area: bono; justify-self: end; gap: 8px; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-bono strong { font-size: 1.1rem; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero-botones { grid-area: botones; }
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__hero > * > .wa-est__legal,
  body.maqueta-nueva .wa-maq-cabecera .wa-est--resena-f .wa-est__legal { grid-area: legal; font-size: .72rem; }
  /* Bono: importe y CTA a todo el ancho. */
  body.maqueta-nueva .wa-maq-cabecera .wa-est--bono-f .wa-est__cta,
  body.maqueta-nueva .wa-maq-cabecera.wa-est--bono-f .wa-est__cta { width: 100%; }
}

/* ---------- Banner fijo móvil (.gumgum) que cambia de sitio (21-oct-2026) ----------
 * Lo mueve el JS del final de html.html.twig (solo body.maqueta-nueva):
 *  - Arriba del todo de la página (inicio): como siempre, encima de la barra
 *    inferior, con la cabecera visible.
 *  - Bajando: la cabecera se esconde hacia arriba y el banner ocupa su sitio
 *    arriba (.is-arriba). La barra inferior queda libre.
 *  - Subiendo: vuelve la cabecera y el banner baja al borde inferior TAPANDO
 *    la barra inferior (.is-abajo), como pidió Fernando. Al volver arriba del
 *    todo o al bajar otra vez, la barra inferior reaparece.
 * Todo es position:fixed (sin CLS) y solo se animan transform/opacity. */
@media (max-width: 767px) {
  body.maqueta-nueva header#header .navbar.fixed-top {
    transition: transform .2s cubic-bezier(.23, 1, .32, 1);
  }
  body.maqueta-nueva.wa-cab-oculta header#header .navbar.fixed-top {
    transform: translateY(calc(-100% - 4px));
  }
  body.maqueta-nueva .gumgum.is-arriba,
  body.maqueta-nueva .gumgum.is-abajo {
    z-index: 1051;
    animation: wa-gum-entra-abajo .22s cubic-bezier(.23, 1, .32, 1);
  }
  body.maqueta-nueva .gumgum.is-arriba {
    top: 0;
    margin-top: 0 !important;
    bottom: auto !important;
    animation-name: wa-gum-entra-arriba;
  }
  body.maqueta-nueva .gumgum.is-abajo {
    top: auto;
    bottom: 0 !important;
  }
  /* Mientras el banner la tapa, la barra inferior baja fuera (su botón
     central sobresale y asomaría por encima del banner). */
  body.maqueta-nueva .wa-bottombar {
    transition: transform .2s cubic-bezier(.23, 1, .32, 1);
  }
  body.maqueta-nueva.wa-gum-abajo .wa-bottombar {
    transform: translateY(100%);
  }
  /* Con el menú lateral abierto el banner no se pone encima. */
  body.maqueta-nueva:has(.wa-nav.show, .wa-nav.showing) .gumgum {
    visibility: hidden;
  }
}
@keyframes wa-gum-entra-arriba {
  from { transform: translateY(-100%); opacity: .6; }
  to { transform: none; opacity: 1; }
}
@keyframes wa-gum-entra-abajo {
  from { transform: translateY(100%); opacity: .6; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.maqueta-nueva header#header .navbar.fixed-top,
  body.maqueta-nueva .wa-bottombar { transition: none !important; }
  body.maqueta-nueva .gumgum.is-arriba,
  body.maqueta-nueva .gumgum.is-abajo { animation: none !important; }
}

/* ---------- Barra fija de la reseña/bono, v2 (22-oct-2026, a prueba) ----------
 * body.wa-barra-v2 (lo pone el JS de html.html.twig salvo con ?barra=actual):
 *  - No sale mientras se ve el botón de la cabecera (ya hay un CTA a la vista).
 *  - Más baja: 70 → 56 px.
 *  - El índice en chips deja de ir fijo en móvil: quedaba tapado detrás de la
 *    barra (ocupaba sitio sin verse). El índice sigue en su sitio. */
@media (max-width: 767px) {
  body.maqueta-nueva.wa-barra-v2 .gumgum {
    height: 56px;
    padding: 4px 10px;
    align-items: center;
    gap: 10px;
    transition: transform .22s cubic-bezier(.23, 1, .32, 1), opacity .18s ease-out;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum .logocasa {
    width: 45%;
    align-items: center;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum .logocasa img {
    width: 120px;
    max-height: 44px;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum .visitarsitio {
    width: 55%;
    display: flex;
    align-items: center;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum .visitarsitio > div {
    margin: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum.is-espera {
    transform: translateY(calc(100% + 80px));
    opacity: 0;
    pointer-events: none;
    animation: none !important;
  }
  body.maqueta-nueva.wa-barra-v2 .gumgum.is-espera.is-arriba {
    transform: translateY(calc(-100% - 10px));
  }
  body.maqueta-nueva.wa-barra-v2 .wa-est--f .wa-est__indice {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.maqueta-nueva.wa-barra-v2 .gumgum { transition: none; }
}