/* ============================================
       CAP — Tokens heredados de shared-components.css
       Solo variables específicas de CAP aquí
       ============================================ */
    :root {
      /* Manual de Marca UBA — específicos CAP */
      --uba-azul-header: #2A3B4C;
      --uba-azul-oscuro: #003366;
      --uba-granate: #8B1538;
      --uba-celeste: #0072BB;
      --uba-amarillo: #F0AE28;

      /* Área actual del CAP (cada ficha sobreescribe via <style>) */
      --proyecto: var(--area-proyecto);
      --proyecto-oscuro: #c05818;   /* WCAG AA 4.52:1 sobre blanco */
      --proyecto-claro: #fff5ef;
    }

    .contenedor {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    a { color: var(--uba-azul-oscuro); text-decoration: none; }
    a:hover { text-decoration: underline; color: var(--uba-azul-oscuro); }
    a:focus { outline: 2px solid var(--uba-azul-oscuro); outline-offset: 2px; }

    /* shared-components.css a/a:hover ya overrideados globalmente arriba.
       Links en secciones oscuras (hero, proximo-paso, footer) usan clases
       con color explícito — no necesitan override adicional. */

    /* Header: estilos canónicos en shared-components.css — no duplicar acá */

    /* BREADCRUMB BANDA BLANCA */
    .breadcrumb-bar {
      background: var(--blanco);
      border-bottom: 1px solid var(--gris-200);
      padding: 0.75rem 0;
      overflow: hidden;
    }

    .breadcrumb {
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
      overflow: hidden;
      white-space: nowrap;
      /* Override shared-components.css que agrega bg gris + padding al nav.breadcrumb */
      background: transparent;
      padding: 0;
      border-bottom: none;
    }

    .breadcrumb a {
      color: var(--gris-600);
      transition: color 0.2s;
    }

    .breadcrumb a:hover {
      color: var(--uba-azul-oscuro);
      text-decoration: none;
    }

    .breadcrumb__separator {
      color: var(--gris-400);
      font-size: 0.75rem;
    }

    .breadcrumb__current {
      color: var(--gris-800);
      font-weight: 500;
    }
    /* ── Clases reales del HTML (ol.breadcrumb-list > li.breadcrumb-item) ── */
    .breadcrumb-list {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 0;
      list-style: none;
      font-size: 0.875rem;
      margin: 0;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .breadcrumb-item {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      min-width: 0;
    }

    .breadcrumb-item a {
      color: var(--gris-600);
      text-decoration: none;
      transition: color 0.2s;
      white-space: nowrap;
    }

    .breadcrumb-item a:hover {
      color: var(--uba-azul-oscuro);
      text-decoration: none;
    }

    .breadcrumb-item:last-child {
      flex-shrink: 1;
      overflow: hidden;
    }

    .breadcrumb-separator {
      color: var(--gris-400);
      flex-shrink: 0;
      padding: 0 0.375rem;
      font-size: 0.75rem;
      user-select: none;
    }

    .breadcrumb-item[aria-current="page"] {
      color: var(--gris-800);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 60ch;
      flex-shrink: 1;
    }


    /* HERO */
    .curso-hero {
      background: linear-gradient(135deg, var(--uba-azul-oscuro) 0%, var(--uba-granate) 100%);
      color: var(--blanco);
      padding: 3rem 0 4rem;
    }

    .curso-hero__grid {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 3rem;
      align-items: end;
    }

    .curso-hero__breadcrumb {
      font-size: 0.875rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .curso-hero__breadcrumb a {
      color: var(--blanco);
      opacity: 0.8;
    }

    .curso-hero__breadcrumb a:hover { opacity: 1; text-decoration: none; }

    .curso-hero__breadcrumb-separator { opacity: 0.5; }
    .curso-hero__breadcrumb-current { opacity: 0.95; font-weight: 500; }

    .curso-hero__area {
      display: inline-block;
      background: var(--proyecto-oscuro);  /* WCAG AA: ≥4.5:1 con blanco */
      color: var(--blanco);
      padding: 0.25rem 1rem;
      border-radius: 50px;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .curso-hero__tipo {
      font-family: 'Bitter', Georgia, serif;
      color: #7dd3fc;
      font-size: 2.125rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
      display: block;
      line-height: 1.2;
    }

    .curso-hero__titulo {
      font-family: 'Bitter', Georgia, serif;
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .curso-hero__descripcion {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
      opacity: 0.95;
      line-height: 1.6;
    }

    .curso-hero__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .curso-hero__meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .curso-hero__meta-icon {
      width: 22px;
      height: 22px;
      stroke: var(--blanco);
      stroke-width: 1.5;
      fill: none;
      opacity: 0.9;
    }

    /* Charla destacada en hero izquierda */
    .curso-hero__acciones-row {
      display: flex;
      gap: 1rem;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .curso-hero__charla {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 2px;
      padding: 1rem 1.25rem;
      margin-top: 1.5rem;
    }

    .curso-hero__charla-icono {
      width: 44px;
      height: 44px;
      background: var(--uba-amarillo);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .curso-hero__charla-icono svg {
      width: 24px;
      height: 24px;
      stroke: var(--uba-azul-oscuro);
      stroke-width: 2;
      fill: none;
    }

    .curso-hero__charla-contenido {
      flex: 1;
    }

    .curso-hero__charla-titulo {
      font-weight: 600;
      font-size: 0.875rem;
      opacity: 0.85;
      margin-bottom: 0.125rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .curso-hero__charla-gratis {
      background: var(--verde-inscripcion);
      color: var(--blanco);
      font-size: 0.625rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 2px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 1;
    }

    .curso-hero__charla-fecha {
      font-weight: 700;
      font-size: 1rem;
      white-space: nowrap;
    }

    .curso-hero__charla-btn {
      background: var(--blanco);
      color: var(--uba-azul-oscuro);
      padding: 0.5rem 1rem;
      border-radius: 2px;
      font-weight: 600;
      font-size: 0.875rem;
      text-decoration: none;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .curso-hero__charla-btn:hover {
      background: var(--uba-amarillo);
      color: var(--uba-azul-oscuro);
      text-decoration: none;
    }

    .curso-hero__consulta-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 2px;
      color: var(--blanco);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .curso-hero__consulta-btn:hover {
      background: rgba(255,255,255,0.25);
      border-color: rgba(255,255,255,0.5);
    }

    .curso-hero__consulta-btn svg {
      flex-shrink: 0;
    }

    /* Dropdown calendario */
    .curso-hero__charla-acciones {
      display: flex;
      gap: 0.75rem;
      align-items: center;
    }

    .curso-hero__charla-separador {
      width: 1px;
      height: 2.5rem;
      background: rgba(255,255,255,0.25);
    }

    .calendario-dropdown {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
    }

    .calendario-dropdown__texto {
      font-size: 0.6875rem;
      color: rgba(255,255,255,0.9);
      white-space: nowrap;
      font-weight: 500;
    }

    .calendario-dropdown__btn {
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 2px;
      padding: 0.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      position: relative;
    }

    .calendario-dropdown__btn:hover {
      background: rgba(255,255,255,0.3);
      transform: scale(1.05);
    }

    .calendario-dropdown__btn:hover svg {
      animation: pulse-calendar 0.6s ease-in-out;
    }

    @keyframes pulse-calendar {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    .calendario-dropdown__btn svg {
      stroke: var(--blanco);
    }

    .calendario-dropdown__menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.5rem;
      background: var(--blanco);
      border-radius: 2px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      min-width: 180px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s;
      z-index: 100;
    }

    .calendario-dropdown.abierto .calendario-dropdown__menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .calendario-dropdown__menu a {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      color: var(--gris-700);
      font-size: 0.875rem;
      text-decoration: none;
      transition: background 0.2s;
      border-bottom: 1px solid var(--gris-100);
    }

    .calendario-dropdown__menu a:last-child {
      border-bottom: none;
    }

    .calendario-dropdown__menu a:hover {
      background: var(--gris-50);
      color: var(--gris-800);
      text-decoration: none;
    }

    .calendario-dropdown__titulo {
      padding: 0.625rem 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gris-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid var(--gris-100);
    }

    .calendario-dropdown__separador {
      height: 0;
      border-top: 1px solid var(--gris-200);
      margin: 0.25rem 0;
    }

    .calendario-dropdown__separador + a {
      border-top: none;
    }

    /* Badges del hero */
    .curso-hero__badges {
      display: flex;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }

    .curso-hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 2px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .curso-hero__badge--inscripcion {
      background: var(--verde-inscripcion);
      color: var(--blanco);
      border: none;
    }

    .curso-hero__badge-dot {
      width: 8px;
      height: 8px;
      background: var(--verde-dot);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .curso-hero__badge--express {
      background: var(--uba-amarillo);
      color: var(--uba-azul-oscuro);
    }

    .curso-hero__badge--federal {
      background: transparent;
      color: var(--uba-celeste);
      border: 1px solid var(--uba-celeste);
    }

    .curso-hero__badge--federal svg {
      stroke: var(--uba-celeste);
    }

    /* Estado: Próxima edición (fecha a confirmar) */
    .curso-hero__badge--proxima {
      background: rgba(255,255,255,0.15);
      color: var(--uba-amarillo);
      border: 1.5px solid var(--uba-amarillo);
      font-weight: 700;
    }

    /* Estado: En curso (ya arrancó, vuelve próximo cuatrimestre) */
    .curso-hero__badge--en-curso {
      background: rgba(255,255,255,0.2);
      color: var(--blanco);
      border: 1px solid rgba(255,255,255,0.4);
    }

    /* Botón "Avisame cuando abra" - CTA para cursos sin inscripción abierta */
    .btn--avisame {
      background: var(--uba-amarillo);
      color: var(--uba-azul-oscuro);
      border-color: var(--uba-amarillo);
      font-weight: 700;
    }
    .btn--avisame:hover {
      background: #d99a20;
      border-color: #d99a20;
      color: var(--uba-azul-oscuro);
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(240, 174, 40, 0.3);
    }

    /* Card destacada en hero */
    .curso-hero__card {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 2px;
      padding: 1.5rem;
      color: var(--blanco);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .curso-hero__card-badge {
      display: inline-block;
      background: var(--uba-amarillo);
      color: var(--uba-azul-oscuro);
      padding: 0.375rem 1rem;
      border-radius: 50px;
      font-size: 0.8125rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .curso-hero__card-info {
      width: 100%;
      margin-bottom: 1.25rem;
    }

    .curso-hero__card-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0.625rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      gap: 1rem;
      text-align: left;
    }

    .curso-hero__card-item:last-child {
      border-bottom: none;
    }

    .curso-hero__card-label {
      font-size: 0.875rem;
      opacity: 0.8;
      flex-shrink: 0;
      padding-top: 0.1rem;
    }

    .curso-hero__card-value {
      font-weight: 600;
      font-size: 0.9375rem;
      text-align: right;
    }

    .curso-hero__card-acciones {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .curso-hero__card-acciones .btn {
      width: 100%;
    }

    /* CONTENIDO */
    .seccion { padding: 3rem 0; }

    .curso-content {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 2rem;
      align-items: start;
    }

    .curso-main h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--proyecto);
      color: var(--gris-900);
    }

    .curso-main section { margin-bottom: 2rem; }
    .curso-main p { color: var(--gris-700); margin-bottom: 1rem; }
    .curso-main a { color: var(--proyecto-oscuro); }   /* WCAG AA */
    .curso-main a:hover { color: var(--proyecto-oscuro); }

    /* TEMARIO */
    .temario-lista {
      list-style: none;
      counter-reset: temario;
    }

    .temario-lista li {
      counter-increment: temario;
      padding: 1rem;
      background: var(--gris-50);
      border-radius: 2px;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .temario-lista li::before {
      content: counter(temario);
      background: var(--proyecto);
      color: var(--blanco);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.875rem;
      flex-shrink: 0;
    }

    /* DOCENTES */
    .docente-card {
      background: var(--gris-50);
      padding: 1.5rem;
      border-radius: 2px;
      margin-bottom: 1rem;
      border-left: 4px solid var(--proyecto);
    }

    .docente-card__nombre {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--gris-900);
      margin-bottom: 0.25rem;
    }

    .docente-card__titulo {
      font-size: 0.875rem;
      color: var(--proyecto);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .docente-card__bio {
      font-size: 0.875rem;
      color: var(--gris-600);
      margin-bottom: 0;
    }

    /* FAQ */
    .faq-section {
      background: var(--gris-50);
      padding: 1.5rem;
      border-radius: 2px;
    }

    .faq-section h2 {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 1.5rem;
    }

    .faq-item {
      background: var(--blanco);
      padding: 1rem 1.25rem;
      border-radius: 2px;
      margin-bottom: 0.5rem;
      border: 1px solid var(--gris-200);
    }

    .faq-item[open] { border-color: var(--proyecto); }

    .faq-item summary {
      font-weight: 600;
      cursor: pointer;
      color: var(--gris-800);
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary::after {
      content: '+';
      font-size: 1.25rem;
      color: var(--proyecto);
    }

    .faq-item[open] summary::after { content: '−'; }

    .faq-item p {
      margin-top: 0.875rem;
      color: var(--gris-600);
      margin-bottom: 0;
      padding-top: 0.75rem;
      border-top: 1px solid var(--gris-100);
    }

    /* SIDEBAR */
    .curso-sidebar { position: sticky; top: 80px; }

    .inscripcion-card {
      background: var(--blanco);
      border-radius: 2px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      overflow: hidden;
      border: 1px solid var(--gris-200);
      border-top: 3px solid var(--verde-inscripcion);
    }

    .inscripcion-card__header {
      background: var(--verde-inscripcion);
      color: var(--blanco);
      padding: 1.25rem 1.5rem;
      text-align: center;
      border-bottom: none;
    }

    .inscripcion-card__header h3 {
      font-size: 1.125rem;
      margin-bottom: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .inscripcion-card__header h3::before {
      content: '';
      width: 8px;
      height: 8px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      animation: pulse-white 2s infinite;
      box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    }

    .inscripcion-card__header span { font-size: 0.8125rem; color: rgba(255,255,255,0.85); }

    .inscripcion-card__body { padding: 1.5rem; }

    .inscripcion-card__arancel {
      text-align: center;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid var(--gris-100);
    }

    .inscripcion-card__arancel-titulo {
      font-size: 0.875rem;
      color: var(--gris-500);
      margin-bottom: 0.25rem;
    }

    .inscripcion-card__arancel-link {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--proyecto);
      display: block;
      margin-bottom: 0.5rem;
    }

    .inscripcion-card__arancel-link:hover {
      color: var(--proyecto-oscuro);
      text-decoration: none;
    }

    .inscripcion-card__item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--gris-100);
      font-size: 0.9375rem;
    }

    .inscripcion-card__label { color: var(--gris-500); }

    .inscripcion-card__value {
      font-weight: 600;
      color: var(--gris-800);
      text-align: right;
    }

    .inscripcion-card__icon {
      width: 18px;
      height: 18px;
      stroke: var(--proyecto);
      stroke-width: 2;
      fill: none;
      margin-right: 6px;
      vertical-align: middle;
    }

    .inscripcion-card__charla {
      background: var(--gris-50);
      padding: 1rem;
      border-radius: 2px;
      margin: 1rem 0;
      text-align: center;
    }

    .inscripcion-card__charla-titulo {
      font-weight: 600;
      margin-bottom: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .inscripcion-card__charla-fecha {
      font-size: 0.875rem;
      color: var(--gris-600);
      margin-bottom: 0.5rem;
    }

    .inscripcion-card__acciones {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .certificado-info {
      background: var(--gris-50);
      padding: 1rem;
      border-radius: 2px;
      margin-top: 1rem;
      font-size: 0.875rem;
      color: var(--gris-700);
      border-left: 3px solid var(--proyecto);
    }

    .certificado-info strong {
      display: block;
      margin-bottom: 0.25rem;
      color: var(--gris-800);
    }

    .programa-descarga {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      margin-top: 1rem;
      background: var(--gris-50);
      border: 1px solid var(--gris-200);
      border-radius: 2px;
      color: var(--proyecto);
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s;
    }

    .programa-descarga:hover {
      background: var(--proyecto);
      border-color: var(--proyecto);
      color: var(--blanco);
      text-decoration: none;
    }

    .programa-descarga svg {
      flex-shrink: 0;
    }

    .cuotas-badge {
      background: #e8f5e9;
      color: #2e7d32;
      padding: 4px 8px;
      border-radius: 2px;
      font-size: 0.75rem;
      font-weight: 600;
      display: inline-block;
      margin-top: 4px;
    }

    /* BOTONES */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 1.75rem;
      border-radius: 2px;
      font-weight: 600;
      font-size: 0.9375rem;
      text-decoration: none;
      transition: all 0.2s;
      border: 2px solid transparent;
      cursor: pointer;
      /* Override shared-components.css que fuerza uppercase en todos los .btn */
      text-transform: none;
      letter-spacing: normal;
    }

    .btn--primario {
      background: var(--verde-inscripcion);
      color: var(--blanco);
      border-color: var(--verde-inscripcion);
    }

    .btn--primario:hover {
      background: var(--verde-inscripcion-hover);
      border-color: var(--verde-inscripcion-hover);
      color: var(--blanco);
      text-decoration: none;
    }

    .btn--secundario {
      background: transparent;
      color: var(--gris-700);
      border-color: var(--gris-300);
    }

    .btn--secundario:hover {
      background: var(--gris-100);
      color: var(--gris-800);
      border-color: var(--gris-400);
      text-decoration: none;
    }

    .btn--blanco {
      background: var(--blanco);
      color: var(--gris-800);
      border-color: var(--blanco);
    }

    .btn--blanco:hover {
      background: var(--gris-100);
      color: var(--gris-800);
      text-decoration: none;
    }

    .btn--outline-blanco {
      background: transparent;
      color: var(--blanco);
      border-color: rgba(255,255,255,0.5);
    }

    .btn--outline-blanco:hover {
      background: rgba(255,255,255,0.1);
      border-color: var(--blanco);
      color: var(--blanco);
      text-decoration: none;
    }

    .btn--block { width: 100%; }
    .btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

    .btn--inscripcion {
      background: var(--verde-inscripcion);
      color: var(--blanco);
      border-color: var(--verde-inscripcion);
      position: relative;
      overflow: hidden;
    }

    .btn--inscripcion::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      animation: shimmer-inscripcion 2.5s infinite;
    }

    @keyframes shimmer-inscripcion {
      0% { left: -100%; }
      50%, 100% { left: 100%; }
    }

    .btn--inscripcion:hover {
      background: var(--verde-inscripcion-hover);
      border-color: var(--verde-inscripcion-hover);
      color: var(--blanco);
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    }

    .btn--azul {
      background: var(--uba-azul-oscuro);
      color: var(--blanco);
      border-color: var(--uba-azul-oscuro);
    }

    .btn--azul:hover {
      background: var(--uba-granate);
      border-color: var(--uba-granate);
      color: var(--blanco);
      text-decoration: none;
    }

    /* BLOQUE CTA - BORDE A BORDE */
    .proximo-paso {
      background: linear-gradient(135deg, var(--uba-azul-oscuro) 0%, var(--uba-granate) 100%);
      color: var(--blanco);
      padding: 4rem 1.5rem;
      text-align: center;
    }

    .proximo-paso__contenido {
      max-width: 800px;
      margin: 0 auto;
    }

    .proximo-paso__titulo {
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .proximo-paso__subtitulo {
      font-size: 1.25rem;
      color: var(--uba-amarillo);
      margin-bottom: 1rem;
      font-weight: 600;
    }

    .proximo-paso__texto {
      max-width: 700px;
      margin: 0 auto 1rem;
      opacity: 0.9;
    }

    .proximo-paso__destacado {
      font-weight: 600;
      margin-bottom: 1.5rem;
      opacity: 0.85;
    }

    .proximo-paso__acciones {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }

    .proximo-paso__slogan {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.15);
    }

    .proximo-paso__slogan-titulo {
      font-size: 1.125rem;
      color: var(--uba-amarillo);
      margin-bottom: 0.25rem;
      font-weight: 600;
    }

    .proximo-paso__slogan-texto {
      font-size: 0.9375rem;
      opacity: 0.8;
      font-style: italic;
    }

    /* BLOQUE FORMACIÓN EXTENSA */
    .formacion-extensa {
      background: var(--gris-50);
      padding: 3rem 0;
      text-align: center;
      border-top: 1px solid var(--gris-200);
    }

    .formacion-extensa__titulo {
      font-size: 1.5rem;
      color: var(--gris-900);
      margin-bottom: 0.75rem;
    }

    .formacion-extensa__texto {
      color: var(--gris-600);
      max-width: 700px;
      margin: 0 auto 1.5rem;
      line-height: 1.7;
    }

    .formacion-extensa__acciones {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Footer: estilos canónicos en shared-components.css */

    /* MODAL CONSULTA */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }

    .modal.activo {
      opacity: 1;
      visibility: visible;
    }

    .modal__overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
    }

    .modal__contenido {
      position: relative;
      background: var(--blanco);
      padding: 2rem;
      border-radius: 2px;
      max-width: 480px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(20px);
      transition: transform 0.3s;
    }

    .modal.activo .modal__contenido {
      transform: translateY(0);
    }

    .modal__cerrar {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gris-500);
      transition: color 0.2s;
    }

    .modal__cerrar:hover {
      color: var(--gris-800);
    }

    .modal__titulo {
      font-size: 1.25rem;
      color: var(--gris-900);
      margin-bottom: 0.25rem;
    }

    .modal__subtitulo {
      color: var(--gris-600);
      font-size: 0.875rem;
      margin-bottom: 1.5rem;
    }

    .modal__form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .modal__campo {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .modal__campo label {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gris-700);
    }

    .modal__campo input,
    .modal__campo textarea {
      padding: 0.75rem;
      border: 1px solid var(--gris-300);
      border-radius: 2px;
      font-size: 1rem;
      font-family: inherit;
      transition: border-color 0.2s;
    }

    .modal__campo input:focus,
    .modal__campo textarea:focus {
      outline: none;
      border-color: var(--proyecto);
    }

    .modal__campo textarea {
      resize: vertical;
    }

    .modal__alternativa {
      text-align: center;
      font-size: 0.875rem;
      color: var(--gris-600);
      margin-top: 1rem;
    }

    .modal__alternativa a {
      color: var(--proyecto);
      font-weight: 500;
    }

    /* RESPONSIVE */
    

/* Header + Nav + Footer: estilos canónicos en shared-components.css — no duplicar acá */

/* ============================================
   UTILIDADES GLOBALES
   ============================================ */

/* ============================================
       ACCESIBILIDAD
       ============================================ */
    .skip-link {
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--azul-uba);
        color: var(--blanco);
        padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-sm);
        z-index: 10000;
        font-weight: 700;
    }
.skip-link:focus {
        top: var(--space-4);
        color: var(--blanco);
    }
.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
.section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--azul-uba);
        margin-bottom: var(--space-6);
    }
.section-title--decorated {
        position: relative;
        padding-bottom: var(--space-3);
    }
.section-title--decorated::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 4px;
        background: var(--dorado-medio);
        border-radius: 2px;
    }
.section-subtitle {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--azul-uba);
        margin-bottom: var(--space-4);
    }


.footer-ror a {
        color: #e67e22;
        text-decoration: none;
    }


.header-logo-link-posgrado { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 6px; }


    @keyframes pulse-white {
      0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
      70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    }

@media (max-width: 1024px) {
      .curso-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
      .curso-hero__acciones-row { max-width: 100%; }
      .curso-content { grid-template-columns: 1fr; }
      .curso-sidebar { position: static; order: -1; margin-bottom: 2rem; }
    }

    @media (max-width: 768px) {
      .curso-hero__tipo { font-size: 1.625rem; }
      .curso-hero__titulo { font-size: 1.875rem; }
      .curso-hero__badges { justify-content: flex-start; }
      .curso-hero__acciones-row { flex-direction: column; }
      .curso-hero__charla { flex-direction: column; text-align: center; gap: 0.75rem; }
      .curso-hero__consulta-btn { justify-content: center; }
      .proximo-paso { padding: 2.5rem 1rem; }
      .proximo-paso__acciones { flex-direction: column; }
      .formacion-extensa__acciones { flex-direction: column; align-items: center; }
      .formacion-extensa__acciones .btn { width: 100%; max-width: 300px; }
      .modal__contenido { padding: 1.5rem; }
    }

    @media (max-width: 480px) {
      .contenedor { padding: 0 1rem; }
      .curso-hero__meta { flex-direction: column; gap: 1rem; }
      .curso-hero__badges { flex-direction: column; align-items: flex-start; }
      .btn { width: 100%; }
    }

    /* Breadcrumb duplicado removido — los estilos canónicos están arriba
       junto a .breadcrumb-bar. El HTML usa <li class="breadcrumb-separator">
       como separadores visibles, no ::before generados por CSS. */

    /* ============================================
       CONTAINER — clase base del sistema
       ============================================ */

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }

    @media (max-width: 768px) {
        .container {
            padding: 0 20px;
        }
    }

    /* Columna de contenido izquierdo del hero (primer hijo de .curso-hero__grid) */
    .curso-hero__contenido {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }


/* Comparador en dropdown - separado visualmente */
.nav-dropdown-content .nav-comparador {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 4px;
    padding-top: 12px;
}
.nav-dropdown-content .nav-comparador::before {
    content: '⚖';
    margin-right: 6px;
    font-size: 0.85em;
}

/* Botón dorado - cross-sell por área temática */
.btn--dorado {
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #c78c3c, #a06c2a);
    color: #fff;
    border: none;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn--dorado:hover { opacity: 0.9; color: #fff; text-decoration: none; }