/* 
   BOTONES (desktop/tablet) - SOLO estilo, no afecta imagen
 */
        .btn-convocatoria {
            margin-top: clamp(60px, 16vh, 170px);
        }

        .carousel-btns {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }

        .carousel-btns .btn {
            width: 210px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            font-size: 0.92rem;
            padding: 0.65rem 1.1rem;
        }

        /* 
   BOTONES fuera del carrusel (solo móvil)
 */
        .mobile-cta {
            display: none;
            margin-top: 8px;
            /* pegados al carrusel */
            padding: 0;
        }

        .mobile-cta .mobile-cta-inner {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            padding: 0 12px;
        }

        .mobile-cta .btn {
            width: 100%;
            max-width: 280px;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            font-size: 0.85rem;
            padding: 0.55rem 0.9rem;
            margin: 0;
        }

        /* 
   SOLO MÓVIL: arreglar aire arriba + controlar altura carrusel
   (NO toca desktop)
 */
        @media (max-width: 768px) {

            /* 1) Quitar el “aire” que mete el wrapper: container-fluid p-0 mb-3 */
            .container-fluid.p-0.mb-3,
            .container-fluid.p-0.mb-3.carousel-wrap,
            .carousel-wrap {
                margin-top: 0 !important;
                padding-top: 0 !important;
                margin-bottom: 0 !important;
                /* mata mb-3 */
            }

            /* 2) Asegurar que no haya padding/margen arriba dentro del carrusel */
            .header-carousel,
            .header-carousel .owl-stage-outer,
            .header-carousel .owl-stage {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

            /* 3) Mantener carrusel visible y no exagerado en alto */
            .header-carousel .owl-carousel-item {
                height: 25vh;
                /* más compacto para que no se vea gigante */
                min-height: 240px;
                max-height: 460px;
                background: #fff;
                overflow: hidden;
                position: relative;
            }

            /* 4) Imagen completa en móvil (sin recorte) */
            .header-carousel .owl-carousel-item img {
                width: 100%;
                height: 90%;
                object-fit: contain;
                background: #fff;
                display: block;
                vertical-align: top;
            }

            /* 5) Overlay no debe “pintar” ni meter separación */
            .header-carousel .carousel-overlay {
                inset: 0 !important;
                background: transparent !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* 6) Ocultar flechas/nav en smartphones */
            .header-carousel .owl-nav,
            .header-carousel .owl-dots {
                display: none !important;
            }

            /* 7) Mostrar botones fuera SOLO en móvil */
            .mobile-cta {
                display: block;
            }
        }


           /* Ocultar CTAs móviles cuando no correspondan */
        @media (max-width: 768px) {
            .mobile-cta.is-hidden {
                display: none !important;
            }
        }