/* ==========================================================================
   FONDOS DEL KIT para cabeceras (.cabeza) y franjas (.franja--oscura, .franja__caja)
   Se usan con una clase:  <header class="cabeza cabeza--tema fondo-cabecera-morada">
   Cada clase solo cambia una variable:
     --cabeza-fondo   lo pinta .cabeza (encima del degradado morado o lila)
     --franja-fondo   lo pinta .franja--oscura
   AÑADIR UN FONDO NUEVO (lo puede hacer cualquier agente, sin tocar base.css):
     1. Las imágenes en public_html/assets/img/<carpeta>/<nombre>-{800,1600}w.{avif,webp,jpg}
        (8:3 para cabeceras; el agente del kit las genera así).
     2. Copiar uno de los bloques de abajo cambiando el nombre de la clase y la ruta.
     3. Apuntarlo en la tabla de docs/estilo-nuevo.md («Fondos»).
   Orden de cada bloque: JPG (cualquier navegador) → AVIF/WebP con image-set si lo entiende;
   800 px en el móvil y 1600 px desde 50 rem.
   ========================================================================== */

/* Cabecera morada con onda turquesa (la de la portada en imagen) */
.fondo-cabecera-morada { --cabeza-fondo: url("../img/portada-nueva/fondo-cabecera-morada-800w.jpg"); --franja-fondo: var(--cabeza-fondo); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-cabecera-morada { --cabeza-fondo: image-set(url("../img/portada-nueva/fondo-cabecera-morada-800w.avif") type("image/avif"), url("../img/portada-nueva/fondo-cabecera-morada-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-cabecera-morada { --cabeza-fondo: url("../img/portada-nueva/fondo-cabecera-morada-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-cabecera-morada { --cabeza-fondo: image-set(url("../img/portada-nueva/fondo-cabecera-morada-1600w.avif") type("image/avif"), url("../img/portada-nueva/fondo-cabecera-morada-1600w.webp") type("image/webp")); }
  }
}

/* Franja morada oscura (comparativas) */
.fondo-franja-comparativas { --franja-fondo: url("../img/portada-nueva/fondo-franja-comparativas-800w.jpg"); --cabeza-fondo: var(--franja-fondo); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-franja-comparativas { --franja-fondo: image-set(url("../img/portada-nueva/fondo-franja-comparativas-800w.avif") type("image/avif"), url("../img/portada-nueva/fondo-franja-comparativas-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-franja-comparativas { --franja-fondo: url("../img/portada-nueva/fondo-franja-comparativas-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-franja-comparativas { --franja-fondo: image-set(url("../img/portada-nueva/fondo-franja-comparativas-1600w.avif") type("image/avif"), url("../img/portada-nueva/fondo-franja-comparativas-1600w.webp") type("image/webp")); }
  }
}

/* Lila clara con objetos a la derecha (cuentas, «Mis escenarios»): para .cabeza--clara / .cabeza--guia */
.fondo-escenarios-lila { --cabeza-fondo: url("../img/portada-nueva/fondo-escenarios-lila-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-escenarios-lila { --cabeza-fondo: image-set(url("../img/portada-nueva/fondo-escenarios-lila-800w.avif") type("image/avif"), url("../img/portada-nueva/fondo-escenarios-lila-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-escenarios-lila { --cabeza-fondo: url("../img/portada-nueva/fondo-escenarios-lila-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-escenarios-lila { --cabeza-fondo: image-set(url("../img/portada-nueva/fondo-escenarios-lila-1600w.avif") type("image/avif"), url("../img/portada-nueva/fondo-escenarios-lila-1600w.webp") type("image/webp")); }
  }
}

/* --- Aquí debajo, los fondos nuevos del kit (temas, guías, calculadoras, Pro, cuentas, analizador, 404) --- */

/* Fondos de TEMA y de GUÍA (área guías y temas): imágenes 8:3 del kit en img/fondos/ (planning/estilo-nuevo/KIT.md §fondos).
   Temas: .cabeza--tema + fondo-tema-<tono>; el tono de cada tema lo da ti_tema_visual() (templates/ayudas.php).
   morado = titular blanco; lila, crema, menta y lavanda = titular morado oscuro (la plantilla añade .tema-cabeza--clara, guias.css).
   Guías: .cabeza--guia + fondo-guia-paginas solo si la guía no trae foto (sus objetos van a la derecha, donde iría la foto). */
.fondo-tema-morado { --cabeza-fondo: url("../img/fondos/fondo-tema-morado-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-morado { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-morado-800w.avif") type("image/avif"), url("../img/fondos/fondo-tema-morado-800w.webp") type("image/webp"), url("../img/fondos/fondo-tema-morado-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-tema-morado { --cabeza-fondo: url("../img/fondos/fondo-tema-morado-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-morado { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-morado-1600w.avif") type("image/avif"), url("../img/fondos/fondo-tema-morado-1600w.webp") type("image/webp"), url("../img/fondos/fondo-tema-morado-1600w.jpg") type("image/jpeg")); } }
}
.fondo-tema-lila { --cabeza-fondo: url("../img/fondos/fondo-tema-lila-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-lila { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-lila-800w.avif") type("image/avif"), url("../img/fondos/fondo-tema-lila-800w.webp") type("image/webp"), url("../img/fondos/fondo-tema-lila-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-tema-lila { --cabeza-fondo: url("../img/fondos/fondo-tema-lila-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-lila { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-lila-1600w.avif") type("image/avif"), url("../img/fondos/fondo-tema-lila-1600w.webp") type("image/webp"), url("../img/fondos/fondo-tema-lila-1600w.jpg") type("image/jpeg")); } }
}
.fondo-tema-lavanda { --cabeza-fondo: url("../img/fondos/fondo-tema-lavanda-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-lavanda { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-lavanda-800w.avif") type("image/avif"), url("../img/fondos/fondo-tema-lavanda-800w.webp") type("image/webp"), url("../img/fondos/fondo-tema-lavanda-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-tema-lavanda { --cabeza-fondo: url("../img/fondos/fondo-tema-lavanda-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-lavanda { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-lavanda-1600w.avif") type("image/avif"), url("../img/fondos/fondo-tema-lavanda-1600w.webp") type("image/webp"), url("../img/fondos/fondo-tema-lavanda-1600w.jpg") type("image/jpeg")); } }
}
.fondo-tema-menta { --cabeza-fondo: url("../img/fondos/fondo-tema-menta-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-menta { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-menta-800w.avif") type("image/avif"), url("../img/fondos/fondo-tema-menta-800w.webp") type("image/webp"), url("../img/fondos/fondo-tema-menta-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-tema-menta { --cabeza-fondo: url("../img/fondos/fondo-tema-menta-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-menta { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-menta-1600w.avif") type("image/avif"), url("../img/fondos/fondo-tema-menta-1600w.webp") type("image/webp"), url("../img/fondos/fondo-tema-menta-1600w.jpg") type("image/jpeg")); } }
}
.fondo-tema-crema { --cabeza-fondo: url("../img/fondos/fondo-tema-crema-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-crema { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-crema-800w.avif") type("image/avif"), url("../img/fondos/fondo-tema-crema-800w.webp") type("image/webp"), url("../img/fondos/fondo-tema-crema-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-tema-crema { --cabeza-fondo: url("../img/fondos/fondo-tema-crema-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-tema-crema { --cabeza-fondo: image-set(url("../img/fondos/fondo-tema-crema-1600w.avif") type("image/avif"), url("../img/fondos/fondo-tema-crema-1600w.webp") type("image/webp"), url("../img/fondos/fondo-tema-crema-1600w.jpg") type("image/jpeg")); } }
}
.fondo-guia-paginas { --cabeza-fondo: url("../img/fondos/fondo-guia-paginas-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-guia-paginas { --cabeza-fondo: image-set(url("../img/fondos/fondo-guia-paginas-800w.avif") type("image/avif"), url("../img/fondos/fondo-guia-paginas-800w.webp") type("image/webp"), url("../img/fondos/fondo-guia-paginas-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-guia-paginas { --cabeza-fondo: url("../img/fondos/fondo-guia-paginas-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-guia-paginas { --cabeza-fondo: image-set(url("../img/fondos/fondo-guia-paginas-1600w.avif") type("image/avif"), url("../img/fondos/fondo-guia-paginas-1600w.webp") type("image/webp"), url("../img/fondos/fondo-guia-paginas-1600w.jpg") type("image/jpeg")); } }
}
.fondo-guia-libros { --cabeza-fondo: url("../img/fondos/fondo-guia-libros-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-guia-libros { --cabeza-fondo: image-set(url("../img/fondos/fondo-guia-libros-800w.avif") type("image/avif"), url("../img/fondos/fondo-guia-libros-800w.webp") type("image/webp"), url("../img/fondos/fondo-guia-libros-800w.jpg") type("image/jpeg")); } }
@media (min-width: 50rem) {
  .fondo-guia-libros { --cabeza-fondo: url("../img/fondos/fondo-guia-libros-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .fondo-guia-libros { --cabeza-fondo: image-set(url("../img/fondos/fondo-guia-libros-1600w.avif") type("image/avif"), url("../img/fondos/fondo-guia-libros-1600w.webp") type("image/webp"), url("../img/fondos/fondo-guia-libros-1600w.jpg") type("image/jpeg")); } }
}

/* ── Área 4 (cuentas, planes y analizador), 04-11-2026: fondos de planning/estilo-nuevo/KIT.md §4 ── */
/* Pro: cintas con filo dorado (titular blanco) · .cabeza--oscura de /planes/ (recambio) */
.fondo-pro-a { --cabeza-fondo: url("../img/fondos/fondo-pro-a-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-pro-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-pro-a-800w.avif") type("image/avif"), url("../img/fondos/fondo-pro-a-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-pro-a { --cabeza-fondo: url("../img/fondos/fondo-pro-a-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-pro-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-pro-a-1600w.avif") type("image/avif"), url("../img/fondos/fondo-pro-a-1600w.webp") type("image/webp")); }
  }
}

/* Pro: corona sobre pedestal (titular blanco) · .cabeza--oscura de /planes/ */
.fondo-pro-b { --cabeza-fondo: url("../img/fondos/fondo-pro-b-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-pro-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-pro-b-800w.avif") type("image/avif"), url("../img/fondos/fondo-pro-b-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-pro-b { --cabeza-fondo: url("../img/fondos/fondo-pro-b-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-pro-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-pro-b-1600w.avif") type("image/avif"), url("../img/fondos/fondo-pro-b-1600w.webp") type("image/webp")); }
  }
}

/* Cuentas: carpeta, candado y llave (titular morado oscuro) · .cabeza--clara de Mi espacio, Mis análisis, comparar */
.fondo-cuentas-a { --cabeza-fondo: url("../img/fondos/fondo-cuentas-a-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-cuentas-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-cuentas-a-800w.avif") type("image/avif"), url("../img/fondos/fondo-cuentas-a-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-cuentas-a { --cabeza-fondo: url("../img/fondos/fondo-cuentas-a-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-cuentas-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-cuentas-a-1600w.avif") type("image/avif"), url("../img/fondos/fondo-cuentas-a-1600w.webp") type("image/webp")); }
  }
}

/* Cuentas: engranaje, campana y escudo (titular morado oscuro) · .cabeza--clara de ajustes, seguridad y administración */
.fondo-cuentas-b { --cabeza-fondo: url("../img/fondos/fondo-cuentas-b-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-cuentas-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-cuentas-b-800w.avif") type("image/avif"), url("../img/fondos/fondo-cuentas-b-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-cuentas-b { --cabeza-fondo: url("../img/fondos/fondo-cuentas-b-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-cuentas-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-cuentas-b-1600w.avif") type("image/avif"), url("../img/fondos/fondo-cuentas-b-1600w.webp") type("image/webp")); }
  }
}

/* Analizador en claro (titular morado oscuro) · recambio para cabeceras claras */
.fondo-analizador-a { --cabeza-fondo: url("../img/fondos/fondo-analizador-a-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-analizador-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-analizador-a-800w.avif") type("image/avif"), url("../img/fondos/fondo-analizador-a-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-analizador-a { --cabeza-fondo: url("../img/fondos/fondo-analizador-a-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-analizador-a { --cabeza-fondo: image-set(url("../img/fondos/fondo-analizador-a-1600w.avif") type("image/avif"), url("../img/fondos/fondo-analizador-a-1600w.webp") type("image/webp")); }
  }
}

/* Analizador en oscuro (titular blanco) · .cabeza--herramienta de las pantallas del analizador */
.fondo-analizador-b { --cabeza-fondo: url("../img/fondos/fondo-analizador-b-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-analizador-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-analizador-b-800w.avif") type("image/avif"), url("../img/fondos/fondo-analizador-b-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-analizador-b { --cabeza-fondo: url("../img/fondos/fondo-analizador-b-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-analizador-b { --cabeza-fondo: image-set(url("../img/fondos/fondo-analizador-b-1600w.avif") type("image/avif"), url("../img/fondos/fondo-analizador-b-1600w.webp") type("image/webp")); }
  }
}

/* Calculadoras (área 2): calculadora 3D, monedas y barras a la derecha; titular en blanco sobre el morado (KIT.md §4) */
.fondo-calculadora-morado { --cabeza-fondo: url("../img/fondos/fondo-calculadora-morado-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-calculadora-morado { --cabeza-fondo: image-set(url("../img/fondos/fondo-calculadora-morado-800w.avif") type("image/avif"), url("../img/fondos/fondo-calculadora-morado-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-calculadora-morado { --cabeza-fondo: url("../img/fondos/fondo-calculadora-morado-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-calculadora-morado { --cabeza-fondo: image-set(url("../img/fondos/fondo-calculadora-morado-1600w.avif") type("image/avif"), url("../img/fondos/fondo-calculadora-morado-1600w.webp") type("image/webp")); }
  }
}
@media (min-width: 100rem) {
  .fondo-calculadora-morado { --cabeza-fondo: url("../img/fondos/fondo-calculadora-morado-2400w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-calculadora-morado { --cabeza-fondo: image-set(url("../img/fondos/fondo-calculadora-morado-2400w.avif") type("image/avif"), url("../img/fondos/fondo-calculadora-morado-2400w.webp") type("image/webp")); }
  }
}
/* La misma en claro (titular en morado oscuro): para .cabeza--clara */
.fondo-calculadora-lila { --cabeza-fondo: url("../img/fondos/fondo-calculadora-lila-800w.jpg"); }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .fondo-calculadora-lila { --cabeza-fondo: image-set(url("../img/fondos/fondo-calculadora-lila-800w.avif") type("image/avif"), url("../img/fondos/fondo-calculadora-lila-800w.webp") type("image/webp")); }
}
@media (min-width: 50rem) {
  .fondo-calculadora-lila { --cabeza-fondo: url("../img/fondos/fondo-calculadora-lila-1600w.jpg"); }
  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .fondo-calculadora-lila { --cabeza-fondo: image-set(url("../img/fondos/fondo-calculadora-lila-1600w.avif") type("image/avif"), url("../img/fondos/fondo-calculadora-lila-1600w.webp") type("image/webp")); }
  }
}