/* =========================================================
   BLOQUE “TODOS LOS CURSOS”
   ========================================================= */

/* ── Ola superior pegada al navbar en móvil ─────────────── */
@media (max-width: 575.98px) {
    .onda-superior,
    .onda-contacto-superior,
    .onda-cursos-superior {
        position: fixed !important;
        top: 96px; /* ≈ alto del navbar móvil   */
        left: 0;
        width: 100%;
        z-index: 1018;
        pointer-events: none;
    }
}

/* ── Título de sección ──────────────────────────────────── */
.titulo-cursos {
    text-align: center !important;
    color: var(--secundario);
    font-family: "tipografia2", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin: 2rem auto 0; /* se superpone bajo la ola */
}
@media (max-width: 576px) {
    .titulo-cursos {
        margin-top: 2rem;
        font-size: 3rem;
    }
}

/* =========================================================
   TARJETA HORIZONTAL
   ========================================================= */
.curso-card-horizontal {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--primario); /* mint */
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 7px 29px #411c5acb !important;
    transition: transform 0.25s;
}
.curso-card-horizontal:hover {
    transform: translateY(-4px);
}

/* --- Columna imagen ------------------------------------- */
.curso-card-img {
    flex: 0 0 350px; /* ancho fijo en desktop   */
    min-height: 250px; /* alto mínimo móvil       */
    position: relative;
    overflow: hidden;
}
.curso-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    object-fit: cover; /* SIEMPRE llena la caja   */
}

/* --- Columna cuerpo ------------------------------------- */
.curso-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    background: #f9ffff;
    font-family: "tipografia2";
}

/* Texto principal */
.curso-card-title {
    text-align: center;
    font-family: "tipografia2", sans-serif;
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--secundario);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Insignia de horas */
.curso-card-badge {
    display: inline-block;
    margin: 0 auto 1.5rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: #3c9a9a;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}
/* Descripción dinámica */
.curso-card-text {
    flex-grow: 1;
    overflow: auto;
    margin-bottom: 1.5rem;
    font-family: "tipografia2", sans-serif;
    font-size: 1rem;
    color: var(--cuaternario);
}
/* Módulos / unidades */
.curso-card-meta {
    text-align: center;
    font-family: "tipografia2", sans-serif;
    font-size: 1rem;
    color: var(--cuaternario);
}

/* Botón */
.btn-curso {
    background: var(--secundario);
    color: var(--primario);
    border: none;
    border-radius: 1.5rem;
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    transition: background 0.25s, transform 0.2s;
}
.btn-curso:hover {
    background: var(--secundarioBis) !important;
    color: #f9f9f9;
    transform: translateY(-2px);
}

/* ── Responsive ≤ 768 px  (apila vertical) ─────────────── */
@media (max-width: 768px) {
    .curso-card-horizontal {
        flex-direction: column;
    }
    .curso-card-img {
        width: 100%;
        height: 300px;
        flex: 0 0 auto;
    }
    .curso-card-body {
        padding: 1.5rem;
    }
    .curso-card-title {
        -webkit-line-clamp: 3;
        font-size: 1.8rem;
    }
}

/*  STICKY WAVE en pantallas ≥ 992 px
   ------------------------------------------------------- */
@media (min-width: 992px) {
    /* ola que sigue al navbar */
    .onda-superior,
  .onda-cursos-superior,      /* si usas otro id/clase para esa ola */
  .onda-contacto-superior {
        /* (opcional) agrégalas todas aquí     */
        position: fixed !important;
        top: 96px; /* = altura de tu navbar en desktop          */
        left: 0;
        width: 100%;
        z-index: 1018; /* justo por debajo del navbar (1019/1020)   */
        pointer-events: none; /* no “tapa” los clics                   */
    }

    /* Compensa el espacio que ocupa la ola
     (su viewBox mide 14 px de alto ≈ 0.9 rem en Bootstrap)        */
    .cursos-section {
        padding-top: calc(0.9rem + 2rem); /* ola + tu separación      */
    }
}

/* solo cuando <body> tiene cursos-page */
.cursos-page .custom-navbar.shadow,
.cursos-page .custom-navbar.is-stuck {
    box-shadow: none !important;
}

/* 1. Sin sombra ni borde cuando el nav está fijo */
.cursos-page .navbar,
.cursos-page .navbar.is-stuck {
    box-shadow: none !important;
    border-bottom: none !important;
}

/* 2. La ola tapa cualquier sub-píxel que quede visible */
.cursos-page .onda-superior {
    display: block;
    margin-top: -1px; /* la “empuja” 1 px hacia arriba */
}