:root {
      --unad-blue:         #004669;
      --unad-blue-dark:    #002d44;
      --unad-blue-light:   #E6F0F5;
      --unad-orange:       #f47920;
      --unad-orange-light: #FEF0E6;
      --unad-yellow:       #f1b621;
      --unad-yellow-light: #FEF8E6;
    }

    /* ── Utilidades ── */
    .text-unad-blue   { color: var(--unad-blue)   !important; }
    .text-unad-orange { color: var(--unad-orange) !important; }
    .bg-unad-blue     { background-color: var(--unad-blue)   !important; }
    .bg-unad-orange   { background-color: var(--unad-orange) !important; }
    .bg-unad-blue-light   { background-color: var(--unad-blue-light)   !important; }
    .bg-unad-orange-light { background-color: var(--unad-orange-light) !important; }
    .bg-unad-yellow-light { background-color: var(--unad-yellow-light) !important; }

    /* ══════════════════════════════════════
       CARD INTRO (reemplaza hero)
       Va después del banner del CMS / SP PB
    ══════════════════════════════════════ */
    .intro-card {
      background-color: var(--unad-blue);
      border-radius: 1.25rem;
      padding: 2rem;
      margin-bottom: 2.5rem;
      position: relative;
      overflow: hidden;
    }
    .intro-card::before {
      content: '';
      position: absolute;
      top: -50px; right: -60px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: rgba(241,182,33,.12);
      pointer-events: none;
    }
    .intro-card::after {
      content: '';
      position: absolute;
      bottom: -40px; left: -30px;
      width: 160px; height: 160px;
      border-radius: 50%;
      background: rgba(244,121,32,.1);
      pointer-events: none;
    }
    .intro-card .ic-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.13);
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 4px 13px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.2);
      margin-bottom: .75rem;
    }
    .intro-card .ic-badge .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--unad-yellow);
      flex-shrink: 0;
    }
    .intro-card h2 {
      color: #fff;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: .5rem;
    }
    .intro-card h2 span { color: #ffd080; }
    .intro-card .ic-lead {
      line-height: 1.65;
      max-width: 540px;
      margin-bottom: 1.5rem;
    }
    .btn-ic-main {
      display: inline-block;
      background: var(--unad-orange);
      color: #fff;
      font-weight: 700;
      padding: .65rem 1.5rem;
      border-radius: 8px;
      text-decoration: none;
      border: none;
    }
    .btn-ic-main:hover { background: #d4661a; color: #fff; }
    .btn-ic-outline {
      display: inline-block;
      background: transparent;
      color: #fff;
      font-weight: 600;
      padding: .65rem 1.5rem;
      border-radius: 8px;
      text-decoration: none;
      border: 1.5px solid rgba(255,255,255,.35);
    }
    .btn-ic-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
    .ic-stats {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,.16);
    }
    .ic-stat {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 10px;
      padding: .6rem 1rem;
      text-align: center;
      flex: 1;
      min-width: 70px;
    }
    .ic-stat-n {
      display: block;
      color: #fff;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 3px;
    }
    .ic-stat-l {
      display: block;
      letter-spacing: .05em;
    }

    /* ══════════════════════════════════════
       SECTION TAG
    ══════════════════════════════════════ */
    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--unad-orange-light);
      color: var(--unad-orange);
      font-weight: 700;
      letter-spacing: .07em;
      padding: 3px 11px;
      border-radius: 4px;
      margin-bottom: .6rem;
    }
    .section-tag::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--unad-orange);
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════
       BENEFIT ROWS (características)
    ══════════════════════════════════════ */
    .benefit-row {
      display: flex;
      align-items: flex-start;
      gap: .85rem;
      background: #f8f9fa;
      border-radius: 10px;
      padding: .85rem 1rem;
      border-left: 3px solid var(--unad-blue);
      margin-bottom: .5rem;
    }
    .benefit-row.b-orange { border-left-color: var(--unad-orange); }
    .benefit-row.b-yellow { border-left-color: var(--unad-yellow); }
    .benefit-ico {
      width: 38px; height: 38px;
      border-radius: 8px;
      background: var(--unad-blue-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    .benefit-row.b-orange .benefit-ico { background: var(--unad-orange-light); }
    .benefit-row.b-yellow .benefit-ico { background: var(--unad-yellow-light); }
    .benefit-title { font-weight: 700; color: var(--unad-blue); margin-bottom: .1rem; }
    .benefit-desc  { line-height: 1.45; margin: 0; }

    /* ══════════════════════════════════════
       SKILL CARDS (con número decorativo)
    ══════════════════════════════════════ */
    .skill-card {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 12px;
      padding: 1rem .9rem;
      text-align: center;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .skill-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
    }
    .skill-card.sk-blue::before   { background: var(--unad-blue); }
    .skill-card.sk-orange::before { background: var(--unad-orange); }
    .skill-card.sk-yellow::before { background: var(--unad-yellow); }
    .skill-num {
      display: block;
      font-weight: 900;
      line-height: 1;
      margin-bottom: -.3rem;
    }
    .skill-ico   { font-size: 22px; display: block; margin-bottom: .35rem; }
    .skill-name  { font-weight: 700; color: var(--unad-blue); display: block; }
    .skill-sub   { display: block; line-height: 1.4; }

    /* ══════════════════════════════════════
       PRICE CARD (sidebar)
    ══════════════════════════════════════ */
    .price-card {
      background: var(--unad-blue);
      border-radius: 1.25rem;
      padding: 1.5rem;
      position: relative;
      overflow: hidden;
    }
    .price-card::before {
      content: '';
      position: absolute;
      top: -45px; right: -45px;
      width: 170px; height: 170px;
      border-radius: 50%;
      background: rgba(241,182,33,.14);
      pointer-events: none;
    }
    .price-card::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -25px;
      width: 120px; height: 120px;
      border-radius: 50%;
      background: rgba(244,121,32,.11);
      pointer-events: none;
    }
    .pc-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--unad-orange);
      color: #fff;
      font-weight: 700;
      padding: 3px 11px;
      border-radius: 20px;
      margin-bottom: .75rem;
    }
    .price-val  { color: var(--unad-yellow); font-weight: 900; line-height: 1; display: block; margin-bottom: .1rem; }
    .price-sub  { color: #fff; display: block; margin-bottom: 1rem; }
    .benefits-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
    .benefits-list li {
      display: flex;
      align-items: center;
      gap: .55rem;
      color: #fff;
      padding: .28rem 0;
      border-bottom: 1px solid rgba(255,255,255,.09);
      line-height: 1.4;
    }
    .benefits-list li:last-child { border: none; }
    .chk-ico {
      width: 17px; height: 17px;
      border-radius: 50%;
      background: var(--unad-orange);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-cta-full {
      display: block;
      text-align: center;
      background: var(--unad-orange);
      color: #fff;
      font-weight: 800;
      padding: .9rem;
      border-radius: 10px;
      text-decoration: none;
      border: none;
      width: 100%;
    }
    .btn-cta-full:hover { background: #d4661a; color: #fff; }

    /* Valor agregado */
    .value-card {
      border: 1px solid #b8ddb8;
      border-radius: .75rem;
      overflow: hidden;
    }
    .value-card .vc-header {
      background:var(--unad-blue);
      color: #fff;
      font-weight: 700;
      padding: .6rem 1rem;
      text-align: center;
    }
    .value-card .vc-body { background: #fff; padding: .85rem 1rem; }
    .value-item {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      padding: .42rem 0;
      border-bottom: 1px solid #f0f0f0;
      line-height: 1.45;
    }
    .value-item:last-child { border: none; }
    .vi-title { font-weight: 600; color: var(--unad-blue); margin-bottom: .1rem; }
    
    /* ══════════════════════════════════════
       STEP BOXES (inscripción)
    ══════════════════════════════════════ */
    .step-box {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 12px;
      padding: 1.1rem 1rem;
      height: 100%;
      position: relative;
    }
    .step-box .step-badge {
      position: absolute;
      top: -1px; right: -1px;
      background: var(--unad-blue);
      color: #fff;
      font-weight: 800;
      width: 30px; height: 30px;
      border-radius: 0 12px 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .step-title { font-weight: 700; color: var(--unad-blue); margin-bottom: .2rem; }
    .step-sub   { line-height: 1.5; margin: 0; }

    /* ══════════════════════════════════════
       PREP BLOCK (amarillo horizontal)
    ══════════════════════════════════════ */
    .prep-block {
      background: var(--unad-yellow-light);
      border: 1px solid rgba(241,182,33,.4);
      border-radius: .75rem;
      padding: 1.1rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 1.1rem;
      flex-wrap: wrap;
    }
    .prep-ico {
      width: 48px; height: 48px;
      border-radius: 10px;
      background: var(--unad-yellow);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .prep-title { font-weight: 700; margin-bottom: .2rem; }
    .prep-text  { line-height: 1.55; margin: 0; }
    .btn-prep {
      display: inline-block;
      background: var(--unad-blue);
      color: #fff;
      font-weight: 700;
      padding: .55rem 1.2rem;
      border-radius: 7px;
      text-decoration: none;
      border: none;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-prep:hover { background: var(--unad-blue-dark); color: #fff; }

    /* ══════════════════════════════════════
       BLOQUE NOTA / RECOMENDACIONES
       Estándar UNAD — notas y advertencias
    ══════════════════════════════════════ */
    .nota-block {
      background: var(--unad-orange-light);
      border-left: 3px solid var(--unad-orange);
      border-radius: 0 8px 8px 0;
      padding: 1rem 1.15rem;
    }
    .nota-block .nota-title {
      font-weight: 700;
      color: #7a3a08;
      margin-bottom: .55rem;
      display: flex;
      align-items: center;
      gap: .45rem;
    }
    .nota-block .nota-item {
      display: flex;
      align-items: flex-start;
      gap: .5rem;
      color: #7a3a08;
      line-height: 1.45;
      margin-bottom: .32rem;
    }
    .nota-block .nota-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--unad-orange);
      flex-shrink: 0;
      margin-top: .42em;
    }

    /* ══════════════════════════════════════
       CTA FINAL
    ══════════════════════════════════════ */
    .cta-section {
      background: var(--unad-blue);
      padding: 3rem 0;
    }
    .cta-section h2   { color: #fff; }
    .cta-section .lead { color: rgba(255,255,255,.72); }
    .btn-cta-light {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: #fff;
      color: var(--unad-blue);
      font-weight: 700;
      padding: .75rem 1.75rem;
      border-radius: 8px;
      text-decoration: none;
      border: none;
    }
    .btn-cta-light:hover { background: #e8f0f5; color: var(--unad-blue-dark); }