/* Escaparate de ofertas — la parte que se ve.
 *
 * ⛔ TODO VA CON LAS VARIABLES DEL NODO (`--papel`, `--tinta`, `--deep`, `--oro`,
 * `--linea`, `--verde-txt`, `--alerta-txt`), que el generador pinta con el color
 * del arte de cada juego. Eso tiene dos consecuencias buscadas:
 *
 *   1. La ficha es parte de la página, no un recuadro pegado encima. En el otro
 *      sitio nuestro cada casa trae sus propios colores de marca en un JSON, y
 *      el resultado es que el bloque de ofertas se ve igual en cualquier sitio
 *      donde se pegue — que es justo lo que hace reconocible una red.
 *   2. La misma ficha cambia de color en cada uno de los 33 nodos, porque cambia
 *      la paleta del nodo. No hay dos páginas con el mismo bloque.
 *
 * ⛔ Contrastes: este sitio pasó una revisión de contraste medida en 39 páginas
 * × 11 anchos (V-3, 09.08) y el umbral no se relaja aquí. Los fondos de botón
 * usan las variantes de texto (`--verde-txt`, `--alerta-txt`), no las de adorno:
 * `--verde` y `--alerta` a pelo con letra blanca se quedan por debajo.
 */

/* ---------------------------------------------------------------- huecos */

/* El hueco reserva sitio ANTES de que llegue la ficha. Sin esta altura, cada
   relleno empujaría el texto hacia abajo y el desplazamiento del lector daría
   un salto — que es lo que mide Google como CLS. */
.esc-hueco {
  min-height: 12rem;
  margin: 2rem 0;
}

.esc-hueco--fija { min-height: 0; margin: 0; }
.esc-hueco:empty { min-height: 12rem; }
.esc-hueco.esc-vacio { min-height: 0; margin: 0; }

.esc-hueco__sin-js {
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--suave);
  color: var(--tinta);
}

/* ----------------------------------------------------------------- ficha */

/* ⛔ EN ESCRITORIO LA FICHA ES UNA FILA DE TRES: marca · cuerpo · acción.
   Estaba apilada en una sola columna, y a 1 110 px de ancho eso se veía como
   lo que era —el logotipo desbordando su hueco, el botón perdido abajo a la
   izquierda y media tarjeta de blanco a la derecha—. El operador lo dijo el
   14.08 sin rodeos. La lógica es la de la ficha del donante: baldosa fija a la
   izquierda, el texto llenando el medio, la acción anclada a la derecha y todo
   centrado en vertical. Lo que NO se copia es su esqueleto: aquí son
   `article` + `header` + `ul` con nombres propios, no una pila de `div` con
   BEM (anti-huella, `Vista\Ficha`). */
/* ⛔ LA FILA DE TRES DEPENDE DEL ANCHO DE LA FICHA, NO DE LA VENTANA NI DEL
   HUECO. Las dos versiones anteriores fallaron por lo mismo —preguntarle a
   quien no sabe—:

     · por media query de ventana: en el hub las fichas van de dos en dos y
       miden 567 px, y la pantalla seguía siendo de 1 280;
     · por modificador de hueco: `cierre` es «ancho» de nombre, pero el bloque
       de cierre pone TRES fichas en fila, de 410 px cada una. Salieron a tres
       columnas dentro de 410 px, con el cuerpo en 0 px y el botón encima del
       texto. Eso es lo que vio el operador el 14.08.

   El marco es el contenedor; la ficha pregunta por su propio sitio. */
.casa-marco { container-type: inline-size; }
.casa-caja {
  display: grid;
  /* ⛔ LA CABECERA AL LADO DE LA BALDOSA TAMBIÉN EN ESTRECHO (14.08). Antes la
     baldosa se comía una línea entera para ella sola y el nombre caía debajo,
     separado de su propia marca. Ahora la primera fila es «logotipo · quién
     es» y lo demás cruza la tarjeta. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "marca  cab"
    "cuerpo cuerpo"
    "accion accion"
    "hub    hub"
    "legal  legal";
  align-items: center;
  gap: .75rem .9rem;
  padding: 1.15rem 1.25rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--papel);
  color: var(--tinta);
  /* ⛔ SIN CINTA DE COLOR ARRIBA (14.08). Llevaba una franja de 3 px con el oro
     del nodo, y como ese oro cambia con el arte de cada juego, en las paletas
     lilas la ficha salía coronada por una raya malva que no pintaba nada. El
     operador la señaló y pidió quitarla de todas. Lo que ata la ficha a la
     página es su contenido, no una raya. */
  box-shadow: 0 .1rem .5rem rgba(16, 54, 60, .07);
}

.casa-baldosa { grid-area: marca; align-self: center; }
.casa-cab     { grid-area: cab; }
.casa-cuerpo  { grid-area: cuerpo; display: grid; gap: .55rem; min-width: 0; }
.casa-accion  { grid-area: accion; display: grid; justify-items: stretch; gap: .1rem; }
.casa-hub     { grid-area: hub; }
.casa-legal   { grid-area: legal; }

/* Desde 46rem de FICHA —no de ventana— cabe la fila de tres: la baldosa y la
   acción abarcan las dos filas y en medio va quién es arriba y qué ofrece
   debajo. Por debajo de eso manda la pila de la regla base. */
@container (min-width: 46rem) {
  .casa-caja {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "marca cab    accion"
      "marca cuerpo accion"
      "hub   hub    hub"
      "legal legal  legal";
    align-items: center;
    gap: .55rem 1.5rem;
  }
  /* El cuerpo arranca pegado a la cabecera: centrado, el titular se despega
     del nombre de la casa. */
  .casa-caja .casa-cuerpo { align-self: start; }
  .casa-caja .casa-cab { align-self: end; }
  /* La acción no se estira: el botón manda el ancho y la chapa se alinea. */
  .casa-caja .casa-accion { justify-items: center; }
  .casa-caja .casa-boton { display: inline-block; width: auto; min-width: 14rem; }
}

/* Ficha estrecha: el botón entero, venga de donde venga. */
@container (max-width: 45.99rem) {
  .casa-caja .casa-boton { display: block; width: 100%; min-width: 0; }
}

.casa-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .7rem;
}

/* La baldosa: hueco fijo con fondo propio, y la marca DENTRO sin deformarse.
   ⛔ `object-fit: contain` no es cosmética: sin ella una marca apaisada de
   200×36 y otra cuadrada de 100×100 se pintan a alturas distintas, y una que
   no cabe se sale de la caja —que es justo lo que se vio con Winairlines—. */
.casa-baldosa {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: .45rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tinta) 5%, var(--papel));
  overflow: hidden;
}

.casa-marca {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.casa-marca--sin {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--deep);
  color: var(--sobre);
  font-weight: 750;
  font-size: 1.3rem;
}

.casa-nombre {
  font-weight: 750;
  font-size: 1.05rem;
}

.casa-lic {
  font-size: .78rem;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .12rem .55rem;
}

/* La licencia sin comprobar se marca, no se disimula. */
.casa-lic--sin {
  color: var(--alerta-txt);
  border-color: color-mix(in srgb, var(--alerta-txt) 35%, transparent);
}

/* ⛔ La columna de identidad: nombre y licencia en una fila, el sello DEBAJO.
   Antes el sello colgaba de la fila con `margin-left:auto` y se iba al borde
   derecho de la tarjeta, a media pantalla de la casa que califica. */
.casa-quien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-width: 0;
}

.casa-quien-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .7rem;
}

.casa-sello {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--deep);
  color: var(--sobre);
  border-radius: 4px;
  padding: .2rem .5rem;
}

.casa-titular {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}

.casa-cond {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .35rem;
  font-size: .92rem;
  color: color-mix(in srgb, var(--tinta) 85%, var(--papel));
}

.casa-cond li {
  padding-left: 1.15rem;
  position: relative;
}

/* El anzuelo en vez de la viñeta: es el idioma visual de este sitio. */
.casa-cond li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .55em;
  width: .42rem;
  height: .42rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--verde-txt);
}

.casa-vivo {
  margin: 0;
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--verde-txt);
}

.casa-vivo:empty { display: none; }

.casa-ir { margin: .2rem 0 0; }

/* ⛔ NO OCUPA TODO EL ANCHO EN ESCRITORIO (corrección del operador, 14.08).
   Estaba con `width: 100%` y en una tarjeta de 1 110 px salía una barra de
   lado a lado: en un bloque así no se hace, y encima competía con la chapa de
   comparar que va justo debajo. Se dimensiona por su texto, como en la ficha
   de marca del donante. En el móvil sí va entera —ahí el dedo agradece el
   ancho completo— y eso se hace abajo, en su media query. */
.casa-boton {
  display: inline-block;
  width: auto;
  min-width: 14rem;
  text-align: center;
  padding: .78rem 1.6rem;
  border-radius: 10px;
  font-weight: 750;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}

.casa-boton:hover { filter: brightness(1.06); }
.casa-boton:active { transform: translateY(1px); }

.casa-boton:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ⛔ EL TEXTO DEL BOTÓN DE DINERO NO SALE DE LA PALETA DEL NODO. Salía de
   `--deep-2`, que cambia con el arte de cada juego, y en 7 de las 34 páginas
   caía en un verde azulado (tono 167°–199°: `keeping-it-reel` lo tenía en
   #002637) que sobre el oro se lee sucio. El contraste nunca fue el problema
   —medido, 7,4:1 en el peor caso—: el problema es que el botón que cobra
   cambiaba de color con la ilustración. Fijo mide 8,7:1 en la peor paleta de
   las 34 y es el mismo en todas. */
/* ⛔ DOS CLASES EN EL SELECTOR, Y NO ES ADORNO. Con `.casa-boton--ambar` a
   secas (0-1-0) el tema ganaba: en el hub las tarjetas van dentro de un `li`
   del `.acto`, y la regla de enlaces de texto `.acto li a` (0-1-2) teñía el
   botón de `--verde-txt` — el verde sobre ámbar que cazó el operador el
   14.08. En el nodo no pasaba porque allí la tarjeta no vive en una lista, y
   por eso la medida del 13.08 dio verde mirando solo el nodo.
   `a.casa-boton.casa-boton--ambar` (0-2-1) gana por número de clases. */
a.casa-boton.casa-boton--ambar { background: var(--oro);        color: #1a1205; }
a.casa-boton.casa-boton--verde { background: var(--verde-txt);  color: #fff; }
a.casa-boton.casa-boton--rojo  { background: var(--alerta-txt); color: #fff; }
a.casa-boton.casa-boton--azul  { background: var(--deep);       color: var(--sobre); }

/* Pie de la ficha: cruza la tarjeta entera. */
.casa-hub {
  margin: 0;
  text-align: center;
  font-size: .88rem;
}

/* ⛔ Chapa, no renglón subrayado. Debajo del botón de dinero sigue mirando
   mucha gente, y ahí un enlace de texto se confundía con la letra pequeña
   legal que va justo después. */
.casa-hub-chapa {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: .6rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--deep) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep) 8%, transparent);
  color: var(--deep);
  font-weight: 700;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}

.casa-hub-chapa:hover {
  background: color-mix(in srgb, var(--deep) 15%, transparent);
  border-color: var(--deep);
}

.casa-hub-chapa:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}



/* ⛔ SIN RAYAS ALREDEDOR DE LA CHAPA (14.08). La letra pequeña llevaba una
   línea encima y la última fila de la tabla otra debajo, así que la chapa de
   comparar quedaba encerrada entre dos rayas y parecía un cajón aparte. El
   aire ya separa: no hacen falta reglas para decir que algo se acabó. */
.casa-legal {
  margin: 0;
  padding-top: .5rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--tenue);
}

.casa-legal-mas { color: var(--deep); font-weight: 600; }

/* ---------------------------------------------------------------- cotejo */

.esc-cotejo { margin: 2rem 0; }

.casa-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}

.casa-tabla-tit {
  caption-side: top;
  text-align: left;
  font-weight: 750;
  font-size: 1.05rem;
  padding-bottom: .6rem;
  color: var(--tinta);
}

.casa-tabla th,
.casa-tabla td {
  border: 0;
  border-bottom: 1px solid var(--linea);
}

/* La última fila no cierra con raya: debajo va la chapa, y dos líneas juntas
   la dejaban enmarcada. */
.casa-tabla tbody tr:last-child th,
.casa-tabla tbody tr:last-child td {
  border-bottom: 0;
  padding: .7rem .6rem;
  text-align: left;
  vertical-align: middle;
}

/* ⛔ El tema del sitio lleva un `th { width: 40% }` para las tablas de datos de
   los nodos, y esta lo heredaba: a 390 px la casa se quedaba en 129 px de los
   322 disponibles y el nombre se salía de su celda. Aquí el ancho lo reparte el
   contenido, menos la columna del botón, que se declara aparte. */
.casa-tabla tbody th { width: auto; }

.casa-tabla thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tenue);
  border-bottom-width: 2px;
}

/* ⛔ El flex va en el envoltorio, NUNCA en el `<th>`: una celda con
   `display:flex` sale de la maquetación de la tabla y su columna se queda con
   el ancho reservado pero sin nada dentro. */
.casa-tabla-quien { font-weight: 700; }

.casa-tabla-sello {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.casa-tabla-marca { max-width: 64px; height: auto; border-radius: 5px; }
.casa-tabla-ir { width: 1%; white-space: nowrap; }
/* En la tabla el botón es una celda más: sin el mínimo de la ficha, que aquí
   ensancharía la columna hasta desbordar. */
.casa-tabla-ir .casa-boton { width: auto; min-width: 0; padding: .55rem .9rem; font-size: .9rem; }

/* En el móvil la fila de tres se pliega en columna: no hay 1 100 px que
   repartir y la baldosa al lado del texto dejaría el titular en cuatro
   palabras por línea. El botón pasa a ocupar todo el ancho —es la única acción
   de la tarjeta y es lo que espera el dedo—. Mismo corte que la ficha del
   donante, que también parte en 768 px. */
@media (max-width: 48rem) {
  .casa-baldosa { width: 76px; height: 76px; }
  .casa-caja .casa-boton { display: block; width: 100%; min-width: 0; }
  .casa-accion { margin-top: .2rem; }
}



.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* En móvil la tabla se lee por filas: cuatro columnas en 390 px son ilegibles
   y el desbordamiento horizontal está prohibido en este sitio. */
@media (max-width: 44rem) {
  .casa-tabla,
  .casa-tabla thead,
  .casa-tabla tbody,
  .casa-tabla tr,
  .casa-tabla th,
  .casa-tabla td { display: block; }

  .casa-tabla thead { display: none; }

  /* ⛔ El título también. Si se queda en `table-caption` dentro de una tabla
     que ya es un bloque, el navegador le monta una tabla anónima alrededor y
     el título se encoge a su propio contenido: medido a 390 px, 53 px de ancho
     y 236 de alto, una palabra por línea. */
  .casa-tabla-tit { display: block; }

  .casa-tabla tr {
    border: 1px solid var(--linea);
    border-radius: 12px;
    margin-bottom: .9rem;
    padding: .7rem .8rem;
  }

  /* Sin rectángulo alrededor de cada celda: la fila ya es la tarjeta, y las
     cajitas del tema dentro de ella la parten en cinco cosas sueltas. */
  .casa-tabla th,
  .casa-tabla td { border: 0; padding: .3rem 0; width: auto; }
  .casa-tabla-ir { width: auto; }
  .casa-tabla-ir .casa-boton { width: 100%; }
}

/* ---------------------------------------------------------------- cierre */

.esc-cierre { margin: 2.5rem 0 1rem; }

.esc-cierre-tit {
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

.esc-cierre-filas {
  display: grid;
  gap: 1rem;
}

@media (min-width: 60rem) {
  .esc-cierre-filas { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------- vitrina */

.esc-vitrina {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 52rem) {
  .esc-vitrina { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ barra fija */

/* ⛔ UNA FILA, NUNCA UNA REJILLA QUE CRECE (15.08).
   La versión de rejilla repartía el ancho entre texto y botón según le
   apeteciera al contenido: con «Ver condiciones del bono» a la derecha, al
   texto le quedaban 85 px y «25 giros y tope de 500 €» salía en TRES líneas,
   con el aviso legal cortado por abajo. El operador lo llamó por su nombre.

   Ahora manda la fila: la marca, el botón y el aspa NO se encogen, y el hueco
   que sobra es del texto —que vive en una sola línea y se recorta con puntos
   suspensivos antes que partirse—. Es la misma solución del escaparate
   hermano, y por el mismo motivo: en una barra de 320 px lo único que se puede
   garantizar es que nada se parta, no que todo quepa. */
.casa-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--deep-2);
  color: var(--sobre);
  box-shadow: 0 -.4rem 1.4rem rgba(0, 0, 0, .28);
}

/* El nombre y la oferta, uno debajo del otro, en la única columna elástica. */
.casa-fija-texto {
  flex: 1;
  min-width: 0;          /* ⛔ sin esto el texto largo empuja al botón fuera */
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.25;
}

/* ⛔ Solo en móvil. En escritorio hay sitio de sobra para el bloque de cierre
   y una barra fija ahí solo quita pantalla. */
@media (min-width: 48rem) {
  .casa-fija { display: none; }
}

.casa-fija-marca {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
}

/* Las dos líneas de texto: una sola cada una, y puntos suspensivos si no cabe.
   ⛔ El nombre también se recorta: «Rolling Slots» a 320 px empujaba el botón. */
.casa-fija-quien,
.casa-fija-que {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.casa-fija-quien { font-weight: 750; font-size: .9rem; }
.casa-fija-que   { font-size: .8rem; color: var(--sobre-2); }

/* ⛔ El botón no se encoge y no se parte: es el destino de la barra. Que quepa
   es cosa del texto que lleva dentro, y por eso `Datos\Pieza::TOPE` no deja
   entrar llamadas de más de 16 caracteres. */
/* ⛔ `min-width: 0` NO ES DECORACIÓN, ES EL ARREGLO (15.08). La regla base
   `.casa-boton` lleva `min-width: 14rem` —viene de la ficha de escritorio, donde
   un botón estrecho se ve pobre—. En la barra fija eso son 224 px CLAVADOS,
   pase lo que pase con el texto: a 320 px al nombre y a la oferta les quedaban
   29 px y se recortaban a «S» y «4». Y no se notaba, porque mi medida
   preguntaba «¿cabe en una línea?» y con puntos suspensivos siempre cabe.
   Declarar padding y tipo aquí no bastaba: lo que había que perder era el
   mínimo heredado, y eso solo se pierde nombrándolo. */
.casa-fija .casa-boton {
  flex: none;
  width: auto;
  min-width: 0;
  padding: .55rem .85rem;
  font-size: .84rem;
  white-space: nowrap;
}

/* ⛔ A 360 px y por debajo la fila se pelea consigo misma: con el botón a
   tamaño normal al texto le quedaban 106 px y «400 giros · tope 15.000 €» se
   recortaba hasta una letra y una cifra. Aquí todo encoge un punto —botón,
   texto, hueco entre columnas— y la baldosa baja de 38 a 32 px. Es el ancho
   del iPhone SE; por encima de 360 no cambia nada. */
@media (max-width: 22.5rem) {
  .casa-fija { gap: .45rem; padding-left: .5rem; padding-right: .5rem; }
  .casa-fija-marca { width: 32px; height: 32px; }
  .casa-fija-quien { font-size: .84rem; }
  .casa-fija-que   { font-size: .74rem; }
  .casa-fija .casa-boton { padding: .5rem .6rem; font-size: .78rem; }
}

.casa-fija-cerrar {
  position: absolute;
  top: -.85rem;
  right: .7rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  background: var(--deep-2);
  color: var(--sobre);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.casa-fija-cerrar:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

/* ⛔ El botón «volver arriba» del tema se aparta de la barra fija.
   Medido el 13.08 en 360, 390 y 430 px: el botón es `position:fixed` con
   `z-index:45` y la barra va con 40, así que flotaba encima y tapaba 44×39 px
   —el 38 %— del botón de la oferta. El centro seguía siendo pulsable, y por eso
   no se notaba: lo que se perdía era la esquina, que en un pulgar derecho es la
   parte que se toca.

   El alto lo publica `escaparate.js` en `--esc-fija-alto` porque la barra crece
   con el nombre de la casa; con una constante aquí, la primera casa de nombre
   largo vuelve a taparlo. Sin barra la variable vale 0 y todo se queda igual.

   ⛔ Y la clase va DOBLADA a propósito, no es una errata. El tema declara
   `.volver-arriba { bottom: .85rem }` con la misma especificidad que esta
   regla, y `nodo.css` se encola DESPUÉS de esta hoja: a igualdad de
   especificidad gana el último, así que la primera versión de este arreglo no
   movió el botón ni un píxel y `bottom` seguía calculando 13,6 px. Doblar la
   clase sube a (0,2,0) y deja de depender del orden de encolado, que es cosa
   del tema y puede cambiar sin que este plugin se entere. */
.volver-arriba.volver-arriba {
  bottom: calc(1.25rem + var(--esc-fija-alto, 0px));
}

@media (max-width: 46rem) {
  .volver-arriba.volver-arriba {
    bottom: calc(.85rem + var(--esc-fija-alto, 0px));
  }
}

/* ------------------------------------------------- la capa sobre la demo */

/* ⛔ POR FUERA DEL IFRAME, NO FLOTANDO ENCIMA. Los rodillos de esta serie
   ocupan el centro del juego y el panel de apuesta su pie: una capa por encima
   tapa una de las dos cosas siempre, y además el iframe es de otro dominio, así
   que ni sabemos qué hay debajo. La franja se pega al pie de la CAJA del
   reproductor, que es nuestra, y el juego se queda entero. */
/* ⛔ REESCRITA EL 13.08. Antes era una caja propia colgada BAJO el iframe, con
   su borde, su fondo negro y su aspa: leída desde fuera, un banner de tercero
   pegado al juego. Ahora es contenido de la barra que ya corona el reproductor
   —la misma que lleva «pantalla completa»—, así que no tiene ni caja, ni
   borde, ni fondo propio: los pone la barra. Sigue sin tapar el juego, que era
   lo único bueno del montaje anterior. */
.esc-capa {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--sobre);
  font-size: .9rem;
  /* Aparece sin mover nada: la barra ya tiene su altura reservada, así que
     cambiar opacidad y desplazamiento no reflota el juego bajo el dedo. */
  opacity: 0;
  transform: translateX(-.4rem);
  transition: opacity .25s ease, transform .25s ease;
}

.esc-capa--puesta { opacity: 1; transform: none; }

.esc-capa-marca {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: contain;
}

.esc-capa-texto {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.esc-capa-casa { font-weight: 700; }

.esc-capa-corto {
  color: var(--tenue-sobre, rgba(255, 255, 255, .74));
  font-size: .84rem;
}

.esc-capa-boton {
  flex: 0 0 auto;
  padding: .45rem .8rem;
  border-radius: 9px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: var(--oro);
  /* Mismo motivo que en `.casa-boton--ambar`: el texto del botón que cobra
     no puede cambiar de color con la paleta del juego. */
  color: #1a1205;
}

.esc-capa--verde .esc-capa-boton { background: var(--verde-txt);  color: #fff; }
.esc-capa--rojo  .esc-capa-boton { background: var(--alerta-txt); color: #fff; }
.esc-capa--azul  .esc-capa-boton { background: var(--deep);       color: var(--sobre); }

/* ⛔ Sin aspa. La oferta ya no se cierra: no pide una decisión sobre algo que
   nadie ha pedido ver, y no ocupa sitio que el juego necesite. */

.esc-capa-boton:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

/* En pantalla estrecha la franja se parte en dos filas: en una sola, el botón
   se come el texto de la oferta y el nombre de la casa sale cortado. */
@media (max-width: 30rem) {
  /* En la barra no cabe la línea corta de la oferta junto al botón de pantalla
     completa: se deja el nombre de la casa y el botón, que es lo accionable. */
  .esc-capa-corto { display: none; }
  .esc-capa-marca { width: 26px; height: 26px; }
  .esc-capa-boton { padding: .4rem .6rem; font-size: .82rem; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .casa-boton { transition: none; }
  .esc-capa { transition: none; }
}

/* ------------------------------------------- la oferta sobre la carátula */

/* ⛔ VIVE AQUÍ Y NO EN LA HOJA DEL NODO, y no es por el presupuesto: es de
   quién es el bloque. El esqueleto lo imprime el generador —como los huecos—
   pero lo que se ve dentro lo pone el escaparate: la casa, su línea de oferta
   y el rótulo del botón salen de `wp_bba_ofertas`. Un bloque cuyo contenido
   decide este plugin se viste con la hoja de este plugin. Que además libere
   0,9 KB del techo de `nodo.css` es consecuencia, no motivo.
   Los colores siguen saliendo de la paleta del nodo, así que la tarjeta cambia
   con el arte de cada juego igual que el resto de la ficha. */
.oferta-real { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: .75rem; width: min(30rem, 96%); margin: .7rem auto 0;
  padding: .6rem .7rem; border-radius: 12px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
  background: color-mix(in srgb, var(--deep-2) 78%, transparent);
  backdrop-filter: blur(6px); }
.oferta-real[hidden] { display: none; }
.oferta-real:hover { border-color: var(--oro);
  background: color-mix(in srgb, var(--deep-2) 88%, transparent); }
.oferta-real-icono { display: grid; place-items: center; width: 2.2rem;
  height: 2.2rem; border-radius: 50%; color: var(--deep-2);
  background: var(--oro); }
.oferta-real-icono svg { width: 1.15rem; height: 1.15rem; }
.oferta-real-txt { display: grid; gap: .1rem; min-width: 0; text-align: left; }
.oferta-real-casa { color: var(--sobre); font-size: .95rem; font-weight: 750;
  line-height: 1.2; }
.oferta-real-linea { color: var(--oro); font-size: .82rem; line-height: 1.25; }
.oferta-real-cta { padding: .5rem .8rem; border-radius: 8px; background: var(--oro);
  color: #1a1205; font-size: .85rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 30rem) {
  .oferta-real { gap: .55rem; padding: .55rem .6rem; }
  .oferta-real-cta { padding: .45rem .6rem; font-size: .8rem; }
}