/**
 * Planes — optimización de rendering al scrollear.
 *
 * NO modifica ningún valor visual (colores, blur, shadows, tamaños, animaciones).
 * Solo añade propiedades de composición/aislamiento para que el navegador:
 *  - aísle repaints dentro de cada tarjeta (`contain`).
 *  - promueva las capas con filter/box-shadow animados a la GPU
 *    (`transform: translateZ(0)` + `will-change`), de modo que el compositor
 *    no tenga que re-pintar el resto del documento cada frame.
 *  - declare las propiedades animadas con `will-change` para evitar overhead.
 *
 * Debe cargarse DESPUÉS de planes-spec.css, perma-hero.css y popular-badge.css
 * para que estas reglas tengan la última palabra cuando coincidan en cascada.
 */

/* === Sección entera: aislar layout y paint del resto del documento. === */
.section--planes.plans-section {
  contain: layout paint style;
}

/* === Tarjetas: capa GPU + paint aislado.
   `transform: translateZ(0)` promueve cada card a su propia capa de composición:
   el browser no repinta píxeles vecinos cuando hay scroll. */
.section--planes.plans-section .plan-card {
  contain: layout paint style;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* La tarjeta central (Permanente) tiene SVGs con drop-shadow apilados. Le damos
   más hints para mantener todo en una sola capa compositada. */
.section--planes.plans-section
  .plans.plans-grid:not(.plans--checkout)
  > article.plan-card.featured.plan-card--featured.perma-hero-card,
.section--planes.plans-section
  .plans.plans-grid.plans--checkout
  > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden) {
  contain: layout paint style;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* === Wrappers de iconos (mensual / denuvo): paint aislado. === */
.section--planes.plans-section .plan-icon-wrap {
  contain: paint;
}

/* === Card central «Permanente»: el icono compone 9 drop-shadows apilados
   sobre SVGs anidados + 3 capas hexagonales. Lo encapsulamos en una única
   capa GPU vía `contain: paint` + translate3d en el wrapper. Así los
   filtros se rasterizan UNA vez y la capa se cachea: el scroll solo
   recompone la imagen ya pintada en lugar de re-pintar 9 shadows. === */
.section--planes.plans-section .perma-hero-icon {
  contain: paint;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* IMPORTANTE: NO ponemos will-change ni translateZ en los SVGs/paths
   individuales (perma-shield-svg, perma-z-fill, etc.). Si lo hiciéramos
   el navegador los promovería a capas separadas y romperíamos el cacheo
   conjunto. La idea es justo lo contrario: una sola capa que contiene
   todo el icono ya rasterizado. */

/* === Badge POPULAR: tiene dos animaciones infinitas:
     - zcPopularBadgeGlow (anima box-shadow, 6 capas)
     - zcPopularBadgeSweep (anima background-position + mix-blend-mode: screen)
   Ambas son operaciones costosas que repintan el rect del badge en cada frame.
   La estrategia: ponerlo en su propia capa GPU para que el repaint quede
   confinado a los ~150x40px del badge, no a toda la card.

   `will-change: transform` es suficiente para promover la capa; declarar
   `filter` o `box-shadow` aquí es contraproducente (Chrome ya lo detecta solo
   con animaciones, y declararlo expande las capas de memoria de la GPU). */
.section--planes.plans-section
  .plans.plans-grid:not(.plans--checkout)
  > article.plan-card.featured.plan-card--featured.perma-hero-card
  .plan-card__badge.popular-badge,
.section--planes.plans-section
  .plans.plans-grid.plans--checkout
  > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden)
  .plan-card__badge.popular-badge {
  contain: layout paint style;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* === Esquinas HUD: cualitativamente estáticas, pero les añadimos contain
   para que cualquier re-flow accidental no las propague. === */
.section--planes.plans-section .plan-corner {
  contain: layout paint;
}

/* NOTA: no promovemos los pseudo-elementos ::before/::after de la card
   permanente. Crearles su propia capa GPU multiplicaría el número de capas
   sin beneficio: ya están contenidos dentro de la capa del padre `.plan-card`
   que sí promovimos arriba. */

/* === Elementos decorativos: `pointer-events: none` para que el browser no
   haga hit-testing en cada frame de scroll. Los iconos, las esquinas y los
   pseudo-elementos no necesitan responder a clicks. === */
.section--planes.plans-section .plan-icon-wrap,
.section--planes.plans-section .perma-hero-icon,
.section--planes.plans-section .perma-energy,
.section--planes.plans-section .perma-energy-left,
.section--planes.plans-section .perma-energy-right,
.section--planes.plans-section .perma-hex,
.section--planes.plans-section .perma-hex-outer,
.section--planes.plans-section .perma-hex-middle,
.section--planes.plans-section .perma-hex-inner,
.section--planes.plans-section .perma-shield-svg,
.section--planes.plans-section .plan-icon-svg,
.section--planes.plans-section .plan-card__icon-art {
  pointer-events: none;
}

/* === Pausa de animaciones cuando la sección no está en viewport.
   Lo activa planes-perf.js vía IntersectionObserver. === */
.zc-planes-offscreen
  .section--planes.plans-section
  .plans.plans-grid:not(.plans--checkout)
  > article.plan-card.featured.plan-card--featured.perma-hero-card
  .plan-card__badge.popular-badge,
.zc-planes-offscreen
  .section--planes.plans-section
  .plans.plans-grid:not(.plans--checkout)
  > article.plan-card.featured.plan-card--featured.perma-hero-card
  .plan-card__badge.popular-badge::after {
  animation-play-state: paused !important;
}

/* === Pausa de animaciones DURANTE el scroll (la optimización clave).
   Las animaciones del badge POPULAR (box-shadow con 6 capas + sweep con
   mix-blend-mode: screen) son las que más cuestan al compositor. Pausarlas
   mientras hay scroll activo elimina los repaints más caros justo cuando
   el navegador está más saturado. Al soltar el scroll (~180ms) reanudan
   automáticamente desde el mismo frame, así que es invisible para el ojo.

   Usamos un selector universal *dentro* de la sección para cubrir cualquier
   animación CSS infinita que pueda añadirse en el futuro. No afecta a
   animaciones one-shot (fadeUp, cardPremiumIn) porque éstas ya terminaron
   antes del primer scroll del usuario. */
.zc-is-scrolling .section--planes.plans-section,
.zc-is-scrolling .section--planes.plans-section *,
.zc-is-scrolling .section--planes.plans-section *::before,
.zc-is-scrolling .section--planes.plans-section *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* === Reducir motion: pause-friendly. Cuando el SO/Browser pide menos
   movimiento, también descarga las animaciones del badge popular (ya lo
   hace popular-badge.css en su propio media query; aquí solo limpiamos
   will-change para no malgastar memoria de capa). === */
@media (prefers-reduced-motion: reduce) {
  .section--planes.plans-section
    .plans.plans-grid:not(.plans--checkout)
    > article.plan-card.featured.plan-card--featured.perma-hero-card
    .plan-card__badge.popular-badge,
  .section--planes.plans-section
    .plans.plans-grid.plans--checkout
    > article.plan-card.featured.plan-card--featured.perma-hero-card.plan-card--checkout-focus:not(.plan-card--hidden)
    .plan-card__badge.popular-badge {
    will-change: auto;
  }
}