/* ============================================================
 * ma-bg3d.css — Fondo 3D scrollytelling como fondo único de la HOME.
 * El contenido de la home se superpone sobre la escena (ma-bg3d.js).
 * Se encola SOLO en la portada (is_front_page), por eso no se acota a .home.
 * ============================================================ */

/* Fondo base (visible donde las partículas son escasas y si no hay WebGL) */
body.home {
  background: radial-gradient(130% 130% at 50% 18%, #FBF8F3 0%, #EFE7DA 55%, #E7DDCD 100%) !important;
}

/* La escena 3D, fija detrás de TODO */
#ma-bg3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Contenido por encima del canvas */
body.home #page,
body.home main,
body.home .ma-main,
body.home #content {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body.home .site-header,
body.home header.ma-nav,
body.home footer,
body.home .ma-footer {
  position: relative;
  z-index: 3;
}

/* Fondos de sección transparentes: la animación se ve siempre detrás */
body.home .hero,
body.home .ma-globe-section,
body.home .ma-chart,
body.home .ma-news3,
body.home .ma-niveles,
body.home .ma-calc-home,
body.home .ma-calc,
body.home .ma-esc,
body.home .ma-metr,
body.home .cta-final {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body.home .hero::before,
body.home .hero::after,
body.home .ma-chart::before,
body.home .cta-final::before {
  display: none !important;
}

/* Tarjetas blancas: aseguran fondo sólido para legibilidad sobre las partículas.
 * (Las que ya eran blancas no cambian; se EXCLUYEN las tarjetas de escenarios
 * para conservar sus tintes verde/azul/rojo.) */
body.home .ma-plate,
body.home .ma-news3__card,
body.home .ma-niveles__panel,
body.home .ma-niveles__tabs,
body.home .ma-chart__box,
body.home .ma-chart__panel,
body.home .ma-chart__catalog-box,
body.home .ma-metr__cell,
body.home .ma-calc {
  background-color: #FFFFFF !important;
}

/* Halo claro tras el texto suelto para que se lea sobre las partículas */
body.home .hero__headline,
body.home .hero__sub,
body.home .ma-eyebrow,
body.home .ma-globe-section__title,
body.home .ma-globe-section__sub,
body.home .ma-chart__title,
body.home .ma-chart__sub,
body.home .ma-chart__insight,
body.home .ma-chart__updated,
body.home .ma-news3__head,
body.home .ma-niveles__head,
body.home .ma-esc__title,
body.home .ma-esc__sub,
body.home .ma-esc__premium-note,
body.home .ma-calc-home__title,
body.home .ma-calc-home__sub,
body.home .ma-metr__lbl,
body.home .cta-final__title,
body.home .cta-final__lede,
body.home .cta-final__note {
  text-shadow: 0 1px 10px rgba(251, 248, 243, 0.95), 0 0 4px rgba(251, 248, 243, 0.9);
}

/* MÓVIL: rendimiento (sin blur costoso) y presencia ligeramente mayor */
@media (max-width: 768px) {
  body.home .ma-plate,
  body.home .ma-news3__card,
  body.home .ma-niveles__panel,
  body.home .ma-chart__box,
  body.home .ma-metr__cell,
  body.home .ma-calc {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Accesibilidad: si el usuario pide menos movimiento, la escena se congela
 * (lo gestiona el JS); aquí solo garantizamos que nada parpadee. */
@media (prefers-reduced-motion: reduce) {
  #ma-bg3d { transition: none !important; }
}

/* P1: fondos opacos en tarjetas de escenarios para tapar partículas.
 * Pre-mezcla del tinte original (10%) sobre blanco, a 92% opacidad.
 * Los tintes verde/azul/rojo se conservan; las partículas quedan bloqueadas. */
body.home .ma-esc__card--opt  { background:rgba(232,240,235,0.92)!important; }
body.home .ma-esc__card--base { background:rgba(233,236,247,0.92)!important; }
body.home .ma-esc__card--pes  { background:rgba(245,232,232,0.92)!important; }