/* ============================================================
   qma-academy.css
   Theme: qma-child
   Path:  /wp-content/themes/qma-child/css/qma-academy.css
   Scope: /academia/ hub + satélites /academia/*/
   Inherits: qma-mssp-global.css (componentes base: .qma-sec,
             .qma-card, .qma-benchmark-card, .qma-grid-*, .qma-btn,
             .qma-chip, .qma-proof, .qma-table, .qma-faq, .qma-final)

   Enqueue (functions.php — agregar):
     add_action('wp_enqueue_scripts', function() {
       if (is_page('academia') || (is_page() && strpos(get_permalink(), '/academia/') !== false)) {
         wp_enqueue_style(
           'qma-academy',
           get_stylesheet_directory_uri() . '/css/qma-academy.css',
           ['qma-mssp-global'],
           '1.0.0'
         );
       }
     }, 20);

   Nota: INERTE fuera de /academia/* — sin clases .qa-acad-* en el HTML
   no aplica ningún selector.

   Fuente: generado desde qma_academy_hub_v2.html (Opus 2026-05-18)
   v1.0.0 · 2026-05-18
   ============================================================ */


/* ── Eyebrow / kicker label ──────────────────────────────── */
/* Uso: <div class="qa-acad-kicker">Academia · cohortes</div> */
.qa-acad-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qma-teal-500, #2DD4BF);
  margin-bottom: 10px;
}


/* ── Level badges — inline en tabla catálogo ─────────────── */
/* Uso: <span class="qa-acad-level qa-acad-level--fund">Fundamentals</span> */
.qa-acad-level {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}

.qa-acad-level--intro {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.qa-acad-level--fund {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.qa-acad-level--inter {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.qa-acad-level--adv {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}


/* ── Separador de sección con label centrado ─────────────── */
/* Uso: <div class="qa-acad-sep"><span>Introductorio</span></div> */
.qa-acad-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 16px;
}

.qa-acad-sep span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
  white-space: nowrap;
}

.qa-acad-sep::before,
.qa-acad-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, .10);
}


/* ── Nota informativa (borde teal izquierdo) ─────────────── */
/* Uso: <div class="qa-acad-note">Texto de aviso...</div> */
.qa-acad-note {
  background: #f8fafc;
  border-left: 3px solid var(--qma-teal-500, #2DD4BF);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}


/* ── Rol card — rutas de aprendizaje ─────────────────────── */
/* Uso: <div class="qa-acad-rol-card"> o variantes --green/--purple */
.qa-acad-rol-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  padding: 22px;
  border-top: 3px solid var(--qma-teal-500, #2DD4BF);
}

.qa-acad-rol-card--green {
  border-top-color: var(--qma-green-600, #AEBC21);
}

.qa-acad-rol-card--purple {
  border-top-color: #7c3aed;
}

.qa-acad-rol-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.qa-acad-rol-card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #555;
  max-width: none;
}

.qa-acad-rol-card ol {
  margin: 0;
  padding-left: 18px;
}

.qa-acad-rol-card ol li {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.qa-acad-rol-card ol li strong {
  color: #111;
  font-weight: 600;
}

/* em dentro de li — nota de fase */
.qa-acad-rol-card ol li em {
  font-style: normal;
  font-size: 12px;
  color: var(--qma-teal-500, #2DD4BF);
  margin-left: 4px;
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .qa-acad-note {
    font-size: 13px;
    padding: 10px 14px;
  }

  .qa-acad-rol-card {
    padding: 18px;
  }

  .qa-acad-rol-card h3 {
    font-size: 16px;
  }
}

/* ────────────────────────────────────────────────────────────
   HERO BANNER · v1.2.0 · 2026-05-19
   Full-bleed cinematic banner following the LFC / Plan Nacional
   pattern in qma-mssp-global.css. Container breaks out of the
   1140 wrap via 100vw + left:50% + margin-left:-50vw, dark navy
   gradient backdrop, max-width 1240 media container with <img>
   object-fit, absolute overlay with horizontal gradient.

   HTML shape expected:
     <div class="qma-mssp-wrap qma-mssp-wrap--academy">
       <section class="qa-acad-hero-banner qa-acad-hero-banner--csir40">
         <div class="qa-acad-hero-banner-media">
           <img src="..." alt="...">
           <div class="qa-acad-hero-banner-overlay">
             <div class="qa-acad-hero-banner-overlay-inner">
               <div class="qa-acad-kicker">...</div>
               <h1>...</h1>
               <p>...</p>
               <div class="qma-mssp-cta">...</div>
               <div class="qma-proof">...</div>
             </div>
           </div>
         </div>
       </section>
       ...
     </div>

   Variants: --hub | --csir40 | --socops
   ──────────────────────────────────────────────────────────── */

/* Full-bleed breakout of the 1140 wrap, dark navy gradient backdrop */
.qa-acad-hero-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  background: linear-gradient(115deg, #060f1a 0%, #091828 20%, #0d2240 50%, #091828 80%, #060f1a 100%);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Inner media container caps image width at 1240, height 400 */
.qa-acad-hero-banner-media {
  width: 100%;
  max-width: 1240px;
  height: 400px;
  position: relative;
}

.qa-acad-hero-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Per-variant focal point adjustments on the <img> */
.qa-acad-hero-banner--hub    .qa-acad-hero-banner-media img { object-position: center 65%; }
.qa-acad-hero-banner--csir40 .qa-acad-hero-banner-media img { object-position: center 35%; }
.qa-acad-hero-banner--socops .qa-acad-hero-banner-media img { object-position: center 50%; }

/* Overlay sits absolute over the image, default gradient */
.qa-acad-hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 15, 26, 0.78) 0%, rgba(6, 15, 26, 0.45) 45%, rgba(6, 15, 26, 0.15) 100%);
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* Variant-specific overlay tweaks (per-image legibility) */
.qa-acad-hero-banner--csir40 .qa-acad-hero-banner-overlay {
  /* IR scene has window-blind pattern on the left — slightly stronger overlay */
  background: linear-gradient(90deg, rgba(6, 15, 26, 0.86) 0%, rgba(6, 15, 26, 0.55) 45%, rgba(6, 15, 26, 0.18) 100%);
}
.qa-acad-hero-banner--socops .qa-acad-hero-banner-overlay {
  /* SOC scene left is already flat black — lighter overlay lets image breathe */
  background: linear-gradient(90deg, rgba(6, 15, 26, 0.70) 0%, rgba(6, 15, 26, 0.38) 45%, rgba(6, 15, 26, 0.10) 100%);
}

/* Inner content box, capped at 640 so text never spans full width */
.qa-acad-hero-banner-overlay-inner {
  color: #fff;
  max-width: 640px;
}

.qa-acad-hero-banner-overlay-inner .qa-acad-kicker {
  color: var(--qma-teal-500, #2DD4BF);
  margin-bottom: 8px;
}

.qa-acad-hero-banner-overlay-inner h1 {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.15;
  margin: 8px 0 10px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.qa-acad-hero-banner-overlay-inner p {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.45;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 54ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.qa-acad-hero-banner-overlay-inner .qma-mssp-cta,
.qa-acad-hero-banner-overlay-inner .qma-cta {
  margin: 14px 0 0;
}

.qa-acad-hero-banner-overlay-inner .qma-proof {
  margin: 14px 0 0;
}

.qa-acad-hero-banner-overlay-inner .qma-chip {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.qa-acad-hero-banner-overlay-inner .qma-btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.qa-acad-hero-banner-overlay-inner .qma-btn-outline:hover {
  border-color: #fff;
}

/* Chips moved out of hero overlay (decision 2026-05-19) — render as sibling
   block immediately below the banner. Inherits .qma-proof flex layout.
   Margin bumped 2026-05-19b para dar +15px de respiro al banner. */
.qa-acad-hero-chips {
  margin: 32px 0 6px;
}

/* Ruta de continuidad cards: icon header alignment (sigue patrón PNC h2). */
.qa-acad-ruta-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.qa-acad-ruta-card h3 .qma-ico-wrap {
  flex: 0 0 auto;
}

/* Defensive: WP autop sometimes injects <br> inside buttons when source has
   linebreaks; hide any stray <br> so button label stays visually centered. */
.qa-acad-hero-banner .qma-btn br { display: none; }

/* Responsive — PNC-aligned tablet step (≤1240 → 360px), mobile preserved
   (≤720/≤480 quedan en 320/280 porque overlay con copy+CTAs no cabe en
   180px de PNC; ver decision 2026-05-19). Chips ahora fuera del overlay. */
@media (max-width: 1240px) {
  .qa-acad-hero-banner-media { height: 360px; }
}

@media (max-width: 720px) {
  .qa-acad-hero-banner-media { height: 320px; }
  .qa-acad-hero-banner-overlay,
  .qa-acad-hero-banner--csir40 .qa-acad-hero-banner-overlay,
  .qa-acad-hero-banner--socops .qa-acad-hero-banner-overlay {
    background: linear-gradient(180deg, rgba(6, 15, 26, 0.30) 0%, rgba(6, 15, 26, 0.85) 100%);
    align-items: flex-end;
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .qa-acad-hero-banner-media { height: 280px; }
}

/* ════════════════════════════════════════════════════════════════════
   QMA Icon subset — inlined desde qma-icon-system.css (WPCode #46563)
   porque ese snippet no inyecta en /academia/*. Solo los iconos usados
   en Ruta de continuidad + variantes navy. 2026-05-19c.
   ════════════════════════════════════════════════════════════════════ */
.qa-acad-ruta-card .qma-ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.qa-acad-ruta-card .qma-ico-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #E8F0F9;
  color: #084480;
}
.qa-acad-ruta-card .qma-ico-wrap--navy {
  background: #E8F0F9;
  color: #084480;
}
.qa-acad-ruta-card .qma-ico-wrap--sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
}
.qa-acad-ruta-card .qma-ico-wrap--sm .qma-ico { width: 16px; height: 16px; }
.qa-acad-ruta-card .qma-ico--trending-up {
  -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%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 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%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}
.qa-acad-ruta-card .qma-ico--layers {
  -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%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 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%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}
.qa-acad-ruta-card .qma-ico--eye {
  -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='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.qa-acad-ruta-card .qma-ico--shield-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='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%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 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

/* end qma-academy.css v1.5.1 */