/* ===== HERO ===== */
    .oa-hero {
      height: clamp(200px, 28vw, 280px);
      background: linear-gradient(135deg, #0b2a6b 0%, #1558A0 45%, #2E86DE 80%, #4DABF7 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 100px;
      padding-top: 150px;
    }
    .oa-hero h1 {
      color: #fff;
      font-size: clamp(22px, 4vw, 40px);
      font-weight: 700;
      letter-spacing: 2px;
      margin: 0 0 10px;
      text-shadow: 0 2px 16px rgba(11,42,107,0.4);
    }
    .oa-hero p {
      color: #d6ecff;
      font-size: 15px;
      margin: 0;
    }

    /* ===== PESTAÑAS ===== */
    .oa-tabs-wrap {
      background: #fff;
      border-bottom: 2px solid #e0eaf5;
      position: sticky; top: 0; z-index: 100;
      /* overflow-x va en el hijo para no romper sticky en iOS */
    }
    /* Div interno: maneja el scroll horizontal sin afectar sticky */
    .oa-tabs-scroll {
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .oa-tabs-scroll::-webkit-scrollbar { display: none; }
    .oa-tabs {
      display: flex; gap: 0;
      list-style: none; margin: 0;
      padding: 0;
      width: max-content;
      min-width: 100%;
    }
    @media (max-width: 992px) {
      /* El pill del navbar compacto mide ~50px y está a top:16px → bottom: 66px */
      .oa-tabs-wrap { top: 72px; }
    }
    .oa-tabs li button {
      display: block;
      padding: 15px 22px;
      font-size: 13px; font-weight: 600;
      font-family: 'Montserrat', sans-serif;
      color: #666; background: none; border: none;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap; cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    .oa-tabs li button:hover { color: #1558A0; }
    .oa-tabs li button.active {
      background: linear-gradient(135deg, #0b2a6b 0%, #2E86DE 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      border-bottom: 2px solid transparent;
      border-image: linear-gradient(90deg, #0b2a6b, #2E86DE, #4DABF7) 1;
    }

    /* ===== SUB-PESTAÑAS ===== */
    .oa-subtabs-wrap {
      margin-bottom: 28px;
    }
    .oa-subtabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0 0 4px 0;
      margin: 0;
    }
    .oa-subtabs li button {
      padding: 6px 18px;
      font-size: 12px; font-weight: 600;
      font-family: 'Montserrat', sans-serif;
      color: #555;
      background: #f0f4f9;
      border: 1.5px solid #dce8f5;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
      white-space: nowrap;
    }
    .oa-subtabs li button:hover {
      background: #e0eaf5;
      color: #1558A0;
      border-color: #2E86DE;
    }
    .oa-subtabs li button.active {
      background: linear-gradient(135deg, #0b2a6b, #2E86DE);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 3px 10px rgba(11,42,107,0.25);
    }

    /* ===== SECCIONES ===== */
    .oa-section {
      padding: 32px 0 40px;
      display: none;
    }
    .oa-section.active { display: block; }
    .oa-section-title { display: none; }
    .oa-section-heading { display: none; }

    /* ===== TARJETAS ===== */
    .oa-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding-bottom: 40px;
    }
    @media (max-width: 720px) { .oa-grid { grid-template-columns: 1fr; } }
    .oa-card {
      background: #fff;
      border: 1px solid #E2E8F0;
      border-radius: 12px;
      padding: 13px 15px;
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none !important;
      color: inherit;
      transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
    }
    .oa-card:hover {
      box-shadow: 0 4px 18px rgba(21,88,160,0.12);
      transform: translateY(-2px);
      border-color: #BFDBFE;
      text-decoration: none !important;
      color: inherit;
    }
    .oa-card-img-placeholder {
      flex-shrink: 0;
      width: 52px; min-width: 52px; height: 52px;
      border-radius: 9px;
      display: flex;
      align-items: center; justify-content: center;
      font-size: 22px;
      color: rgba(255,255,255,0.9);
      padding: 0; gap: 0;
    }
    .oa-card-img-title { display: none; }
    .oa-card-body {
      padding: 0;
      flex: 1; min-width: 0;
      display: flex; flex-direction: column;
    }
    .oa-card-badge {
      display: block;
      font-size: 8.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1.3px;
      margin-bottom: 4px;
      background: none; padding: 0; border-radius: 0;
    }
    .badge-gerencial   { color: #1558A0; }
    .badge-calidad     { color: #2e7d32; }
    .badge-medicina    { color: #c62828; }
    .badge-medico      { color: #0d47a1; }
    .badge-enfermeria  { color: #1565c0; }
    .badge-quimico     { color: #1b5e20; }
    .badge-congreso    { color: #b71c1c; }
    .badge-enarm       { color: #e65100; }
    .badge-enlinea     { color: #1a237e; }
    .badge-docencia    { color: #6a1b9a; }
    .badge-continua    { color: #2e7b32; }
    .oa-card-title {
      font-size: 12.5px; font-weight: 700;
      color: #0F172A;
      -webkit-text-fill-color: #0F172A;
      background: none;
      line-height: 1.35;
      margin: 0;
      display: block;
    }
    .oa-card-desc { display: none; }
    .oa-card-link { display: none; }
  
    /* Flecha dropdown en navbar */
    .nav-arrow {
      font-size: 10px;
      margin-left: 3px;
      transition: transform 0.2s ease;
      vertical-align: middle;
    }
    .dropdown:hover .nav-arrow,
    .dropdown.open .nav-arrow { transform: rotate(180deg); }

    /* Logo INICIO en navbar */
    .nav-inicio-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none !important;
      margin-right: -8px;
      padding: 4px 0px 4px 4px;
      gap: 2px;
      flex-shrink: 0;
    }
    .nav-inicio-logo img {
      height: 32px;
      width: auto;
      object-fit: contain;
    }
    .nav-inicio-logo span {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #1558A0;
      text-transform: uppercase;
      line-height: 1;
    }
    .nav-inicio-logo:hover span { color: #2E86DE; }

/* ===== BARRA DE BUSQUEDA ===== */
.oa-wrap { font-family: 'Plus Jakarta Sans', sans-serif; padding: 0; }

  .oa-hero-mini { text-align: center; padding: 2rem 1rem 1.2rem; }
  .oa-hero-mini h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.9rem; font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 0.35rem; line-height: 1.15;
  }
  .oa-hero-mini h2 em { font-style: italic; color: #1558A0; }
  .oa-hero-mini p { font-size: 12.5px; color: var(--color-text-secondary); margin: 0; }

  .search-wrap {
    padding: 0 1rem 1rem;
    position: relative;
  }
  .search-icon {
    position: absolute; left: 1.9rem; top: 50%; transform: translateY(-50%);
    pointer-events: none;
  }
  .search-clear {
    position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--color-text-tertiary); padding: 4px; line-height: 1;
    border-radius: 50%; display: none;
  }
  .search-clear:hover { color: var(--color-text-primary); background: var(--color-background-secondary); }
  #search-input {
    width: 100%; box-sizing: border-box;
    padding: 11px 40px 11px 38px;
    border-radius: 100px;
    border: 1.5px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; color: var(--color-text-primary);
    outline: none; transition: border-color 0.18s;
  }
  #search-input:focus { border-color: #1558A0; }
  #search-input::placeholder { color: var(--color-text-tertiary); }

  .search-suggestions {
    position: absolute; top: calc(100% - 4px); left: 1rem; right: 1rem;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: 12px; z-index: 10; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    display: none;
  }
  .sug-item {
    padding: 9px 14px; font-size: 12.5px;
    color: var(--color-text-primary); cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--color-border-tertiary);
    transition: background 0.12s;
  }
  .sug-item:last-child { border-bottom: none; }
  .sug-item:hover { background: var(--color-background-secondary); }
  .sug-icon { font-size: 14px; flex-shrink: 0; }
  .sug-text { flex: 1; min-width: 0; }
  .sug-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sug-meta { font-size: 10.5px; color: var(--color-text-tertiary); }
  .sug-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }

  mark { background: #FFF3CD; color: inherit; border-radius: 2px; padding: 0 1px; }

  .filter-block { padding: 0 1rem; }
  .filter-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--color-text-tertiary); margin: 0 0 7px;
  }
  .pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .pill {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 13px; border-radius: 100px;
    border: 1.5px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
    cursor: pointer; transition: all 0.16s; white-space: nowrap; line-height: 1;
  }
  .pill:hover { border-color: #1558A0; color: #1558A0; background: #EEF4FF; }
  .pill.active { background: #1558A0; color: #fff; border-color: #1558A0; }
  .pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  .divider { height: 1px; background: var(--color-border-tertiary); margin: 10px 1rem 12px; }

  .sub-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .sub-pill {
    padding: 5px 12px; border-radius: 100px;
    border: 1.5px solid var(--color-border-tertiary);
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px; font-weight: 500; color: var(--color-text-secondary);
    cursor: pointer; transition: all 0.15s; white-space: nowrap; line-height: 1;
  }
  .sub-pill:hover { border-color: var(--color-border-primary); color: var(--color-text-primary); }
  .sub-pill.active { background: var(--color-text-primary); color: var(--color-background-primary); border-color: var(--color-text-primary); }

  .results-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 1rem 10px;
  }
  .prog-count { font-size: 11.5px; color: var(--color-text-tertiary); }
  .clear-filters {
    font-size: 11px; color: #1558A0; background: none; border: none;
    cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500; padding: 0; display: none;
  }
  .clear-filters:hover { text-decoration: underline; }

  .type-group { margin-bottom: 1.6rem; }
  .type-group-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--color-text-tertiary);
    padding: 0 1rem; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .type-group-label::after {
    content: ''; flex: 1; height: 1px; background: var(--color-border-tertiary);
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 12px; padding: 0 1rem;
  }

  .pc {
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    display: flex; flex-direction: column; text-decoration: none;
    color: inherit;
    animation: pcIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
  }
  .pc:hover { transform: translateY(-3px); border-color: var(--color-border-secondary); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  .pc-accent { height: 4px; width: 100%; display: block; }
  .pc-icon-wrap { padding: 13px 14px 0; display: flex; align-items: center; justify-content: space-between; }
  .pc-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
  .pc-badge { font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 20px; letter-spacing: 0.3px; text-transform: uppercase; }
  .pc-body { padding: 9px 14px 13px; flex: 1; display: flex; flex-direction: column; }
  .pc-title { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; margin: 0 0 5px; flex: 1; }
  .pc-desc { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border-tertiary); padding-top: 9px; margin-top: auto; }
  .pc-modality { font-size: 10px; color: var(--color-text-tertiary); font-weight: 500; }
  .pc-cta { font-size: 10.5px; font-weight: 600; color: #1558A0; display: flex; align-items: center; gap: 3px; }
  .pc-cta svg { transition: transform 0.15s; }
  .pc:hover .pc-cta svg { transform: translateX(3px); }

  .no-results { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-secondary); font-size: 13px; }
  .no-results span { font-size: 1.8rem; display: block; margin-bottom: 8px; }

  .cards-container { padding-bottom: 2rem; }