/* =========================================================
   TARJETA “SERVICIO”  (cuadrada, imagen arriba)
   ========================================================= */
.servicio-card {
    width: 320px;
    background: var(--primario);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 2px 2px 29px #411c5a85 !important;
    transition: transform 0.25s;

    /* ⬇️ Hace que el cuerpo crezca y tape el fondo para que no se vea la franja
       y, de paso, la tarjeta queda un poco más alta y pareja en filas flex/grid */
    display: flex;
    flex-direction: column;
}
.servicio-card:hover {
    transform: translateY(-4px);
}

/* ─ Imagen ─ */
.servicio-card img {
    width: 100%;
    height: 280px;              /* +alto que antes (220px) */
    object-fit: cover;
}

/* ─ Cuerpo ─ */
.servicio-card-body {
    background: #f9ffff;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    /* +alto base para textos más largos y que quede visualmente más alta */
    min-height: 200px;

    /* Ocupa el espacio libre si la tarjeta estira por estar en la misma fila */
    flex: 1 1 auto;
}
.servicio-card-title {
    font-family: "tipografia2", sans-serif;
    font-size: 1.6rem;
    color: var(--secundario);
    margin: 0;
}
.servicio-card-text {
    font-family: "tipografia2", sans-serif;
    font-size: 1rem;
    color: var(--cuaternario);
}

/* ─ Botón ─ */
.btn-servicio {
    align-self: center;
    background: var(--secundario);
    color: var(--primario);
    border: none;
    border-radius: 1.5rem;
    padding: 0.55rem 1.6rem;
    font-weight: 600;
    transition: background 0.25s, transform 0.2s;

    /* Empuja el botón al fondo del cuerpo para que todas queden parejas */
    margin-top: auto;
}
.btn-servicio:hover {
    background: var(--secundarioBis) !important;
    color: #f9f9f9;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.495);
    transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Se adapta automáticamente por flex-wrap; solo afinamos breakpoints */
@media (max-width: 575.98px) {
    .servicio-card {
        width: 260px;
    }
    .servicio-card img {
        height: 220px;          /* un toque más alta también en mobile */
    }
    .servicio-card-body {
        min-height: 180px;
    }
    .servicio-card-title {
        font-size: 1.4rem;
    }
}
@media (min-width: 992px) {
    /* mantiene la ola pegada al navbar como en la sección Cursos */
    .onda-superior {
        position: fixed !important;
        top: 96px;
        left: 0;
        width: 100%;
        z-index: 1018;
        pointer-events: none;
    }
    .cursos-section {
        padding-top: calc(0.9rem + 2rem);
    }
}