/* ============================================================================
   qma-arsenal.css  v1.0.0  ·  26-ago-2026
   Piezas que faltaban para sacar las páginas de iboss y SASE de Elementor.

   Depende de qma-mssp-global.css (tokens --qma-*). Aditivo: no redefine
   ninguna clase existente. Para revertir, borrar este archivo y el
   mu-plugin qma-arsenal.php.

   Contenido
     §1  Listas con marcador (palomita y flecha)   — 133 apariciones
     §2  Tarjeta destacada                          — bloque de niveles
     §3  Menú del arsenal                           — 8 páginas
     §4  13 iconos nuevos del sistema qma-ico
   ========================================================================= */


/* ---------------------------------------------------------------------------
   §1  LISTAS CON MARCADOR

   Sustituye a los widgets icon-list de Elementor. El marcador se pinta con
   máscara SVG, así que hereda el color por variable y no mete una petición
   más. El color vive en --qma-list-marker para poder cambiarlo por bloque
   sin tocar esta hoja.
   ------------------------------------------------------------------------ */
.qma-list {
  --qma-list-marker: var(--qma-teal-600, #14B8A6);
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.qma-list > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.55;
}
.qma-list > li:last-child { margin-bottom: 0; }

.qma-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--qma-list-marker);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* palomita — el patrón más repetido del sitio */
.qma-list--check > li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E");
}

/* flecha — listas de despliegue */
.qma-list--arrow > li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
}

/* alerta — limitaciones y riesgos */
.qma-list--alert > li::before {
  background-color: var(--qma-warn, #B45309);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* dentro de tarjeta el texto baja un punto, igual que .qma-card p */
.qma-card .qma-list > li { font-size: 14.5px; }


/* ---------------------------------------------------------------------------
   §2  TARJETA DESTACADA

   El bloque de niveles pone Core y Advance lado a lado y enmarca la segunda
   para señalar el nivel recomendado. Variante de .qma-card, no reemplazo.
   ------------------------------------------------------------------------ */
.qma-card--featured {
  border: 2px solid var(--qma-navy-900, #0D1321);
  padding: 22px;
  position: relative;
}
.qma-card--featured:hover {
  border-color: var(--qma-navy-900, #0D1321);
  box-shadow: 0 10px 28px rgba(13, 19, 33, .10);
}
.qma-card__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1D62F0;
  margin: 0 0 10px;
}
.qma-card--plain .qma-card__label { color: var(--qma-slate-400, #94A3B8); }
.qma-card--plain { border-color: rgba(0, 0, 0, .12); }


/* ---------------------------------------------------------------------------
   §3  MENÚ DEL ARSENAL

   Clon del patrón .lm-family-nav del Plan Nacional de Ciberseguridad: barra
   full-bleed con tinte suave, enlaces planos y solo el activo relleno. Se
   queda pegada bajo el header de Astra al hacer scroll, igual que #lm-nav en
   el PNC (mismo top y mismo z-index, para no tapar el header del sitio).

   El acento no es el morado del PNC —eso es identidad de Purple Team— sino el
   azul profundo de la rampa del logo QMA Zero Trust.
   ------------------------------------------------------------------------ */
.qma-arsenal-nav {
  --qma-arsenal-accent: var(--qma-zt-blue, #0A6E9E);
  /* Ancho completo SIN tocar `left`: en position:sticky las propiedades
     top/left/right/bottom son los desplazamientos de anclaje, así que el
     truco de `left:50%; margin-left:-50vw` deja la barra pegada al centro.
     Con márgenes negativos calculados se rompe el contenedor igual y `left`
     queda libre para el sticky. Mismo patrón que .qma-hero--full. */
  width: auto;
  position: sticky;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  top: var(--ast-header-height, 80px);
  z-index: 35;
  background: #EAF4F1;
  border-bottom: 2px solid var(--qma-arsenal-accent);
  padding: 0.85rem 0;
  margin-bottom: 1.75rem;
}
.qma-arsenal-nav__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.qma-arsenal-nav__label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qma-arsenal-accent);
  white-space: nowrap;
  padding-right: 0.85rem;
  border-right: 1px solid rgba(0, 0, 0, .12);
  flex: none;
}
.qma-arsenal-nav__links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.qma-arsenal-nav__links::-webkit-scrollbar { display: none; }
.qma-arsenal-nav__links a {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--qma-navy, #084480);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: 1px solid transparent;
  display: inline-block;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.qma-arsenal-nav__links a:hover,
.qma-arsenal-nav__links a:focus-visible {
  background: #fff;
  border-color: rgba(10, 110, 158, .28);
  color: var(--qma-arsenal-accent);
}
.qma-arsenal-nav__links a:focus-visible {
  outline: 2px solid var(--qma-arsenal-accent);
  outline-offset: 2px;
}
.qma-arsenal-nav__links a[aria-current="page"],
.qma-arsenal-nav__links a[aria-current="page"]:hover {
  background: var(--qma-arsenal-accent);
  border-color: var(--qma-arsenal-accent);
  color: #fff;
  cursor: default;
}

@media (max-width: 640px) {
  .qma-arsenal-nav { padding: 0.65rem 0; }
  .qma-arsenal-nav__label { display: none; }
  .qma-arsenal-nav__inner { padding: 0 16px; }
  .qma-arsenal-nav__links { flex-wrap: nowrap; }
  .qma-arsenal-nav__links a { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qma-arsenal-nav__links a { transition: none; }
}


/* ---------------------------------------------------------------------------
   §4  ICONOS NUEVOS

   Mismo patrón que qma-icon-system v1: viewBox 24, trazo 1.75, máscara sobre
   currentColor. Trece que no existían y que usan estas páginas.
   ------------------------------------------------------------------------ */

/* arrow-right — listas de despliegue */
.qma-ico--arrow-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
}

/* database — protección y gobierno de datos */
.qma-ico--database {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
}

/* network-wired — arquitectura, SD-WAN */
.qma-ico--network-wired {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M5 16v-3h14v3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Cpath d='M12 8v3'/%3E%3Cpath d='M5 16v-3h14v3'/%3E%3C/svg%3E");
}

/* user-shield — ZTNA, RBI */
.qma-ico--user-shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3.5'/%3E%3Cpath d='M2.5 21v-1.5a4.5 4.5 0 0 1 4.5-4.5h3'/%3E%3Cpath d='M17.5 22s4-2 4-5v-2.6l-4-1.6-4 1.6V17c0 3 4 5 4 5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3.5'/%3E%3Cpath d='M2.5 21v-1.5a4.5 4.5 0 0 1 4.5-4.5h3'/%3E%3Cpath d='M17.5 22s4-2 4-5v-2.6l-4-1.6-4 1.6V17c0 3 4 5 4 5z'/%3E%3C/svg%3E");
}

/* user-lock — ZTNA en el hub */
.qma-ico--user-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3.5'/%3E%3Cpath d='M2.5 21v-1.5a4.5 4.5 0 0 1 4.5-4.5h4'/%3E%3Crect x='15' y='16' width='7' height='5.5' rx='1'/%3E%3Cpath d='M16.5 16v-1.75a2 2 0 0 1 4 0V16'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3.5'/%3E%3Cpath d='M2.5 21v-1.5a4.5 4.5 0 0 1 4.5-4.5h4'/%3E%3Crect x='15' y='16' width='7' height='5.5' rx='1'/%3E%3Cpath d='M16.5 16v-1.75a2 2 0 0 1 4 0V16'/%3E%3C/svg%3E");
}

/* building — vertical financiero */
.qma-ico--building {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1.5'/%3E%3Cpath d='M9 6h.01M15 6h.01M9 10h.01M15 10h.01M9 14h.01M15 14h.01'/%3E%3Cpath d='M10 22v-3.5h4V22'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1.5'/%3E%3Cpath d='M9 6h.01M15 6h.01M9 10h.01M15 10h.01M9 14h.01M15 14h.01'/%3E%3Cpath d='M10 22v-3.5h4V22'/%3E%3C/svg%3E");
}

/* credit-card — retail y comercio */
.qma-ico--credit-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='9' y2='15'/%3E%3C/svg%3E");
}

/* route — SD-WAN seguro */
.qma-ico--route {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2.5'/%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Cpath d='M8.5 19H14a4 4 0 0 0 4-4V7.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2.5'/%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Cpath d='M8.5 19H14a4 4 0 0 0 4-4V7.5'/%3E%3C/svg%3E");
}

/* file-contract — riesgo de contenido */
.qma-ico--file-contract {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6.5A1.5 1.5 0 0 0 5 3.5v17A1.5 1.5 0 0 0 6.5 22h11a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3Cpolyline points='14 2 14 7 19 7'/%3E%3Cline x1='8.5' y1='12' x2='13' y2='12'/%3E%3Cpath d='M8.5 17c1.4 0 1.4-1.4 2.75-1.4S13 17 14.4 17'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6.5A1.5 1.5 0 0 0 5 3.5v17A1.5 1.5 0 0 0 6.5 22h11a1.5 1.5 0 0 0 1.5-1.5V7z'/%3E%3Cpolyline points='14 2 14 7 19 7'/%3E%3Cline x1='8.5' y1='12' x2='13' y2='12'/%3E%3Cpath d='M8.5 17c1.4 0 1.4-1.4 2.75-1.4S13 17 14.4 17'/%3E%3C/svg%3E");
}

/* clipboard-check — cumplimiento */
.qma-ico--clipboard-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpolyline points='9 14 11 16 15 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpolyline points='9 14 11 16 15 12'/%3E%3C/svg%3E");
}

/* hospital — vertical salud */
.qma-ico--hospital {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='15' rx='1.5'/%3E%3Cpath d='M9 7V3.5h6V7'/%3E%3Cpath d='M12 11.5v5M9.5 14h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='15' rx='1.5'/%3E%3Cpath d='M9 7V3.5h6V7'/%3E%3Cpath d='M12 11.5v5M9.5 14h5'/%3E%3C/svg%3E");
}

/* school — vertical educación */
.qma-ico--school {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 1.5 8.5 12 14l10.5-5.5z'/%3E%3Cpath d='M6 11.2V16c0 1.66 2.69 3 6 3s6-1.34 6-3v-4.8'/%3E%3Cline x1='22.5' y1='8.5' x2='22.5' y2='13'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 1.5 8.5 12 14l10.5-5.5z'/%3E%3Cpath d='M6 11.2V16c0 1.66 2.69 3 6 3s6-1.34 6-3v-4.8'/%3E%3Cline x1='22.5' y1='8.5' x2='22.5' y2='13'/%3E%3C/svg%3E");
}

/* university — gobierno y sector público */
.qma-ico--university {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 2.5 8h19z'/%3E%3Cline x1='5.5' y1='11' x2='5.5' y2='18'/%3E%3Cline x1='9.8' y1='11' x2='9.8' y2='18'/%3E%3Cline x1='14.2' y1='11' x2='14.2' y2='18'/%3E%3Cline x1='18.5' y1='11' x2='18.5' y2='18'/%3E%3Cline x1='2.5' y1='21' x2='21.5' y2='21'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 2.5 8h19z'/%3E%3Cline x1='5.5' y1='11' x2='5.5' y2='18'/%3E%3Cline x1='9.8' y1='11' x2='9.8' y2='18'/%3E%3Cline x1='14.2' y1='11' x2='14.2' y2='18'/%3E%3Cline x1='18.5' y1='11' x2='18.5' y2='18'/%3E%3Cline x1='2.5' y1='21' x2='21.5' y2='21'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   §5  RAMPA QMA ZERO TRUST

   Tomada del logo QMA Zero Trust: la rampa recorre azul 200° → teal 180° →
   verde 150° → lima 60°, que es exactamente el degradado de la esfera y del
   lettering. Se aplica sobre la máscara del icono, así que el SVG se pinta
   con el degradado en vez de con un color plano.
   ------------------------------------------------------------------------ */
:root {
  --qma-zt-blue:  #0A6E9E;
  --qma-zt-teal:  #00BFC4;
  --qma-zt-green: #2BD46E;
  --qma-zt-lime:  #C6F224;
  --qma-zt-ramp: linear-gradient(135deg,
                   var(--qma-zt-blue)  0%,
                   var(--qma-zt-teal)  38%,
                   var(--qma-zt-green) 68%,
                   var(--qma-zt-lime)  100%);
}

/* icono con degradado — se combina con cualquier .qma-ico--nombre */
.qma-ico--zt {
  background-color: transparent;
  background-image: var(--qma-zt-ramp);
}

/* envoltorio oscuro para que la rampa tenga contraste */
.qma-ico-wrap--zt {
  background: var(--qma-navy-900, #0D1321);
  border: 1px solid rgba(43, 212, 110, .28);
}
.qma-ico-wrap--zt .qma-ico { background-image: var(--qma-zt-ramp); background-color: transparent; }

/* marcador de lista con la rampa */
.qma-list--zt > li::before {
  background-color: transparent;
  background-image: var(--qma-zt-ramp);
}

/* filo superior de tarjeta con la rampa, para el bloque de plataforma */
.qma-card--zt {
  border-top: 3px solid transparent;
  border-image: var(--qma-zt-ramp) 1;
  border-image-slice: 1;
}


/* ---------------------------------------------------------------------------
   §6  BLOQUE PLATAFORMA SASE

   Sustituye al slider slide-edu-iboss-1, que era el de educación duplicado a
   medias para financiero. En vez de un banner con copy pegado, una rejilla de
   las capacidades reales que además enlaza el arsenal completo.
   ------------------------------------------------------------------------ */
.qma-platform {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: linear-gradient(150deg, #060F1A 0%, #0B1B2E 46%, #0D2240 100%);
  padding: 54px 0 58px;
  margin-top: 48px;
  overflow: hidden;
}
.qma-platform__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.qma-platform__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
  background: var(--qma-zt-ramp);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.qma-platform h2 {
  color: #FFFFFF;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}
.qma-platform__lede {
  color: rgba(248, 250, 252, .72);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0 0 34px;
  max-width: 62ch;
}
.qma-platform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 14px;
}
.qma-platform__card {
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  padding: 20px 20px 22px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.qma-platform__card:hover,
.qma-platform__card:focus-visible {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(43, 212, 110, .42);
  transform: translateY(-2px);
}
.qma-platform__card:focus-visible {
  outline: 2px solid var(--qma-zt-green);
  outline-offset: 2px;
}
.qma-platform__card .qma-ico {
  width: 26px;
  height: 26px;
  background-color: transparent;
  background-image: var(--qma-zt-ramp);
  margin-bottom: 12px;
}
.qma-platform__card h3 {
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.qma-platform__card p {
  color: rgba(248, 250, 252, .62);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.qma-platform__card[aria-current="page"] {
  background: rgba(43, 212, 110, .07);
  border-color: rgba(43, 212, 110, .38);
}

@media (prefers-reduced-motion: reduce) {
  .qma-platform__card { transition: none; }
  .qma-platform__card:hover { transform: none; }
}
@media (max-width: 720px) {
  .qma-platform { padding: 40px 0 42px; }
  .qma-platform__grid { gap: 12px; }
}


/* ---------------------------------------------------------------------------
   §7  BANNER DE CIERRE

   Variante de .qma-lfc-banner para el CTA compartido que sustituye a
   rev_slider banner_contacto_1. El overlay base solo estiliza h1 y p; aquí se
   añade el h2 y los botones, que ese bloque no contemplaba.
   ------------------------------------------------------------------------ */
.qma-lfc-banner--cta { margin-top: 0; }
.qma-lfc-banner--cta .qma-lfc-banner-media { height: 340px; }
.qma-lfc-banner--cta .qma-lfc-banner-overlay-inner { max-width: 660px; }
.qma-lfc-banner--cta .qma-lfc-banner-overlay-inner h2 {
  font-size: clamp(23px, 3.2vw, 35px);
  line-height: 1.14;
  margin: 8px 0 10px;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.qma-lfc-banner--cta .qma-lfc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a:first-child {
  background: var(--qma-zt-green, #2BD46E);
  color: var(--qma-navy-900, #0D1321);
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a:first-child:hover {
  background: var(--qma-zt-lime, #C6F224);
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a + a {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #FFFFFF;
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a + a:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
}
.qma-lfc-banner--cta .qma-lfc-banner-actions a:focus-visible {
  outline: 2px solid var(--qma-zt-lime, #C6F224);
  outline-offset: 3px;
}
@media (max-width: 720px) {
  .qma-lfc-banner--cta .qma-lfc-banner-media { height: 380px; }
}


/* ---------------------------------------------------------------------------
   §8  LOGO DE MARCA JUNTO AL TEXTO  ·  ancla de sección

   El logo QMA Zero Trust acompaña a los primeros párrafos del hub. Flota a la
   derecha en escritorio y pasa a bloque centrado cuando ya no cabe, para no
   estrujar la columna de lectura.
   ------------------------------------------------------------------------ */
.qma-brandmark {
  float: right;
  width: clamp(180px, 26vw, 300px);
  margin: 0 0 20px 32px;
  shape-margin: 18px;
}
.qma-brandmark img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 780px) {
  .qma-brandmark {
    float: none;
    width: min(240px, 62%);
    margin: 8px auto 22px;
  }
}

/* el ancla compensa el header pegajoso de Astra */
.qma-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 110px;
}
