.elementor-3177 .elementor-element.elementor-element-26107ba{--display:flex;}.elementor-3177 .elementor-element.elementor-element-26107ba.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3177 .elementor-element.elementor-element-7c33ba0{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3177 .elementor-element.elementor-element-26107ba{--width:96.187%;}}/* Start custom CSS for html, class: .elementor-element-7c33ba0 *//* =========================================
   AJUSTES PARA MÓVIL — LANDING BSM VET
   ========================================= */
@media (max-width: 767px) {

  /* -----------------------------------------
     1. CABECERA
     ----------------------------------------- */
  header.bg-brandDark {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Logo BSM Vet de la cabecera */
  header.bg-brandDark > div > a:first-child img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    max-width: 105px !important;
    object-fit: contain !important;
  }

  /* -----------------------------------------
     2. CTA SUPERIOR
     "Reservar reunión / inicial gratuita"
     ----------------------------------------- */
  header.bg-brandDark > div > a:last-child {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;

    padding: 8px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: normal !important;
    word-break: normal !important;
  }

  /* Fuerza "inicial gratuita" a ocupar la segunda línea */
  header.bg-brandDark > div > a:last-child .cta-segunda-linea {
    display: block !important;
    white-space: nowrap !important;
  }

  /* -----------------------------------------
     3. ETIQUETA DEL HERO
     "Para propietarios de clínicas veterinarias"
     ----------------------------------------- */
  section.bg-brandDark > div.relative > span {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;

    padding: 8px 12px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* -----------------------------------------
     4. BOTÓN BAJO LA IMAGEN / INFORME
     ----------------------------------------- */
  #como-funciona .text-center.mt-12 {
    display: flex !important;
    justify-content: center !important;
  }

  #como-funciona .text-center.mt-12 a {
    text-align: center !important;
    line-height: 1.3 !important;
  }
}

/* =========================================
   ZOOM EN HOVER SOBRE LA IMAGEN DEL INFORME
   ========================================= */
#como-funciona .rounded-2xl {
  overflow: hidden !important;
}

#como-funciona .rounded-2xl img {
  transition: transform 0.4s ease !important;
  transform: scale(1) !important;
}

#como-funciona .rounded-2xl:hover img {
  transform: scale(1.07) !important;
}

/* =========================================
   CARRUSEL BSM VET — SWIPER
   ========================================= */
.bsm-carousel-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0; /* Sin padding para que no haya huecos */
}

.swiper {
    width: 100%;
    border-radius: 20px 20px 0 0; /* Solo redondeamos arriba; abajo lo hace la barra */
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    cursor: grab;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Zoom al pasar el cursor */
.swiper-slide:hover img {
    transform: scale(1.05);
}

/* Variable de color Swiper */
:root {
    --swiper-theme-color: #4ade80;
    --swiper-navigation-size: 24px;
}

/* =========================================
   BARRA DE PUNTITOS — FONDO AZUL OSCURO
   ========================================= */

/* Contenedor de los puntos */
.bsm-carousel-container .swiper-pagination {
    background: #111827 !important;   /* Azul oscuro brandDark */
    padding: 12px 0 !important;
    position: relative !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 0 20px 20px;     /* Redondeado solo abajo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Puntos inactivos */
.bsm-carousel-container .swiper-pagination-bullet {
    background: #4b5563 !important;   /* Gris oscuro visible sobre azul */
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

/* Punto activo */
.bsm-carousel-container .swiper-pagination-bullet-active {
    background: #4ade80 !important;   /* Verde BSM */
    width: 24px !important;
    border-radius: 12px !important;
}

/* Elimina sombras y bordes no deseados */
.bsm-carousel-container,
.bsm-carousel-container .swiper,
.bsm-carousel-container .swiper-wrapper,
.bsm-carousel-container .swiper-slide {
    box-shadow: none !important;
    filter: none !important;
}

/* Oculta scrollbars nativos */
.bsm-carousel-container::-webkit-scrollbar,
.bsm-carousel-container .swiper::-webkit-scrollbar {
    display: none;
}

.bsm-carousel-container,
.bsm-carousel-container .swiper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}/* End custom CSS */