/* Look oscuro de qma.mx (21-oct-2026, CC con Pablo). Solo aplica con body.qma-paleta-oscura (paleta oscura activa en Astra o ?qma_skin=oscuro).
   Colores: solo de la paleta de Astra (--ast-global-color-*). Lo carga mu-plugins/qma-skin.php junto con qma-skin-oscuro.css (la capa generada).
   Aqui va lo que no es color de un componente: banners a todo lo ancho con efecto, formularios e imagenes con fondo blanco. */

/* sin barra horizontal por los banners de 100vw; clip no rompe el header pegajoso */
body.qma-paleta-oscura #page{overflow-x:clip}

/* Banners que vinieron de Slider Revolution (.qma-page-banner): de borde a borde, con Ken Burns y entrada del texto.
   El alto por jerarquia se afina despues (padre, hija, nieta). */
body.qma-paleta-oscura .qma-page-banner.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box}
body.qma-paleta-oscura .qma-page-banner{position:relative;overflow:hidden;isolation:isolate}
body.qma-paleta-oscura .qma-page-banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:inherit;background-size:cover;background-position:inherit;background-repeat:no-repeat;
  transform-origin:60% 50%;animation:qmaSkinKB 28s ease-in-out infinite alternate}
body.qma-paleta-oscura .qma-page-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ast-global-color-1),transparent);opacity:.7}
body.qma-paleta-oscura .qma-page-banner > div:not([style*="position:absolute"]){position:relative;z-index:2}
body.qma-paleta-oscura .qma-page-banner p{animation:qmaSkinSube .8s cubic-bezier(.22,1,.36,1) both}
body.qma-paleta-oscura .qma-page-banner p + p{animation-delay:.15s}
body.qma-paleta-oscura .qma-page-banner p + p + p{animation-delay:.3s}
@keyframes qmaSkinKB{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(1.2%,-1.4%,0)}}
@keyframes qmaSkinSube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Banner editorial (.qma-lfc-banner: Ley, Red Team, forensia…): el video o la imagen tambien de borde a borde (la variante --full del tema, para todos) */
body.qma-paleta-oscura .qma-lfc-banner .qma-lfc-banner-media{max-width:none}
body.qma-paleta-oscura .qma-lfc-banner .qma-lfc-banner-media video,body.qma-paleta-oscura .qma-lfc-banner .qma-lfc-banner-media img{object-fit:cover}
body.qma-paleta-oscura .qma-lfc-banner .qma-lfc-banner-overlay{padding-left:calc(max(0px,(100% - 1240px) / 2) + clamp(20px,5vw,64px));padding-right:clamp(20px,5vw,64px)}

/* Hero del Plan Nacional: la imagen trae el titulo impreso y no se puede estirar; los costados se rellenan con la misma imagen difuminada */
body.qma-paleta-oscura .qma-hero-plan-nacional{isolation:isolate}
body.qma-paleta-oscura .qma-hero-plan-nacional::before{content:"";position:absolute;inset:-60px;z-index:-1;pointer-events:none;
  background:url('https://qma.mx/wp-content/uploads/2026/02/plan-nacional-ciberseguridad-2025-2030-qma-zero-trust-banner-16x9-1.jpg') center/cover no-repeat;
  filter:blur(36px) brightness(.55) saturate(1.2);transform:scale(1.05);animation:qmaSkinKB 28s ease-in-out infinite alternate}
body.qma-paleta-oscura .qma-hero-plan-img{position:relative;box-shadow:0 0 80px 20px rgba(0,0,0,.35)}

/* Tarjeta del contador ATDT (la pinta qma-countdown-atdt.js con estilos en linea): sobre la paleta, el guinda se aclara */
body.qma-paleta-oscura .qma-countdown-section [style*="background:#fbf5f7"]{background:var(--ast-global-color-4) !important;border-color:#C2547E !important}
body.qma-paleta-oscura .qma-countdown-section [style*="color:#611232"]{color:#E07A9A !important}
body.qma-paleta-oscura .qma-countdown-section [style*="color:#5a3743"]{color:var(--ast-global-color-3) !important}

/* Bloques que quedan sueltos en paginas de ancho completo, como la trayectoria [qma_trayectoria] al final de /mssp/:
   a la misma columna de 1200 px del contenido. Las cifras van en el verde de la paleta. */
body.qma-paleta-oscura .entry-content > .qma-voz{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;box-sizing:border-box}
body.qma-paleta-oscura .qma-tray-cifra strong{color:var(--ast-global-color-1)}

/* encabezado pegajoso de la calculadora (qma-pnc.css lo pega en top:0): debajo del header nativo */
body.qma-paleta-oscura .calc-header{top:var(--ast-header-height,84px)}

/* breadcrumb de Astra: su CSS base lo pinta blanco fijo */
body.qma-paleta-oscura .main-header-bar.ast-header-breadcrumb{background-color:var(--ast-global-color-4);border-bottom-color:var(--ast-global-color-7)}

/* Portada: titulos del hero en degradado, como Exabeam, con colores de QMA: lima de los brochures, cian del hero
   y violeta claro del matiz de Purple Team (#6100FF aclarado). El degradado se desplaza lento. */
body.qma-paleta-oscura #qma-hero .qhs-title{width:fit-content;max-width:100%;
  background:linear-gradient(90deg,#CADB2A 0%,#38BDF8 50%,#A67FFF 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:qmaSkinGrad 9s ease-in-out infinite alternate}
body.qma-paleta-oscura #qma-hero .qhs-title .g,body.qma-paleta-oscura #qma-hero .qhs-title .c{-webkit-text-fill-color:transparent;color:transparent}
@keyframes qmaSkinGrad{from{background-position:0% 50%}to{background-position:100% 50%}}

/* formularios: campos sobre la paleta */
body.qma-paleta-oscura input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=range]),
body.qma-paleta-oscura textarea,body.qma-paleta-oscura select{background-color:var(--ast-global-color-5);color:var(--ast-global-color-2);border-color:var(--ast-global-color-7)}
body.qma-paleta-oscura ::placeholder{color:var(--ast-global-color-6);opacity:1}

/* imagenes con fondo blanco opaco (logos, diagramas): marco claro para que se lean como tarjeta. La clase la pone qma-skin.js */
body.qma-paleta-oscura img.qma-img-clara{background:var(--ast-global-color-2);border-radius:8px;box-shadow:0 0 0 6px var(--ast-global-color-2)}

@media (prefers-reduced-motion:reduce){body.qma-paleta-oscura .qma-page-banner::before,body.qma-paleta-oscura .qma-page-banner p,
  body.qma-paleta-oscura #qma-hero .qhs-title,body.qma-paleta-oscura .qma-hero-plan-nacional::before{animation:none}}