.hero {
            background: linear-gradient(to right, #1a1a1a, #004e92);
            color: white;
            padding: 100px 0;
        }


        .btn-contacto {
            background-color: #00c853;
            color: white;
            transition: all 0.3s ease-in-out;
        }

        .btn-contacto:hover {
            background-color: #009624;
            color: white;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }


/* Botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed !important;
    bottom: 20px;     /* distancia desde abajo */
    right: 20px;      /* distancia desde la derecha */
    z-index: 1050;    /* bien alto para que quede arriba de carruseles/alerts */
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #20b954; /* verde un poco más oscuro */
}


.ensodegradado {
    background: linear-gradient(to right, rgba(0, 36, 66, 0.9), rgba(0, 128, 0, 0.6));
    backdrop-filter: blur(2px);
    color: white;
    border-left: 5px solid #00c853; 
}

.mb-7 {
    margin-bottom: 3rem !important; /* más grande que mb-5 (3rem) y mb-6 (4.5rem) */
}




.img-zoom {
    transition: transform 0.5s ease, filter 0.3s ease;
    cursor: pointer;
}
.img-zoom:hover {
    transform: scale(1.05);   /* zoom suave */



.media-zoom {
    transition: transform 0.5s ease, filter 0.3s ease;
    cursor: pointer;
}
.media-zoom:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
}


.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    transition: transform 0.2s;
}

.social-icon:hover {
    transform: scale(1.1);
}

/* Colores específicos */
.social-icon.facebook {
    background-color: #3b5998;
}

.social-icon.instagram {
    background: radial-gradient(circle at 30% 30%, #fdf497, #fd5949, #d6249f, #285AEB);
}

.social-icon.tiktok {
    background-color: #000;
}

.social-icon.whatsapp {
    background-color: #25D366;
}

.social-icon.linkedin {
    background-color: #0077b5;
}



.social-icon.youtube {
    background-color: #FF0000;
}

  /* Contenedor con relación 2:3 para respetar 2000x3000 */
  .catalogo-img-wrap {
    aspect-ratio: 2 / 3;          /* Mantiene proporción vertical */
    width: 100%;
    max-width: 360px;             /* <- límite opcional; ajustá a gusto */
    margin-inline: auto;          /* centra en su columna */
    border-radius: 0.5rem;
    overflow: hidden;             /* para que el recorte sea limpio con cover */
  }

  .catalogo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* cover = puede recortar; contain = no recorta */
    display: block;
  }

  /* Ajustes responsivos opcionales */
  @media (min-width: 992px) {     /* lg+ */
    .catalogo-img-wrap { max-width: 420px; }
  }


  .industrias-badges .badge {
    font-size: 1.25rem; /* igual que fs-5 */
    padding: 0.6em 1.2em; /* opcional: más aire dentro de la pastilla */
}


/*
@media (max-width: 767.98px){
  .carousel-caption{
    position: static;
    background: rgba(0,0,0,.55);
    border-radius: .75rem;
    margin: 1rem;
    padding: 1rem 1.25rem;
  }
}




/* Altura de los logos fluida y consistente */
.logos-sensor {
  max-height: clamp(36px, 6vw, 72px); /* móvil -> desktop */
  width: auto;
  object-fit: contain;
  opacity: .95;
}

/* Altura mínima razonable del área del carrusel */
#carouselLogosSensores .carousel-inner {
  min-height: 120px;
}

@media (max-width: 991.98px) {
  /* Más aire entre lista y carrusel en tablet/móvil */
  #extras-sensores .row.gy-4 { row-gap: 1.25rem; }
}


 .logos-sensor {
    max-height: 90px;
    object-fit: contain;
  }


  /* Cambiar nav-pills de azul a verde */
.nav-pills .nav-link.active {
    background-color: #32ca32 !important;  /* verde ENSO */
    color: #fff !important;               /* texto blanco */
    font-weight: 600;                     /* un poco más bold */
    border-radius: 0.5rem;                /* bordes redondeados */
}

/* Hover en los demás links */
.nav-pills .nav-link:hover {
    background-color: #e9f9e9;  /* verde muy claro al pasar mouse */
    color: #198754;             /* verde bootstrap */
}

/* Links inactivos */
.nav-pills .nav-link {
    color: #198754;  /* verde */
    transition: 0.2s ease-in-out;
}


.video-wrapper {
    width: 100%;
    overflow: hidden; /* evita espacios raros */
}

.video-wrapper video {
    width: 100%;
    height: auto;         /* deja que el alto se ajuste a la proporción natural */
    max-height: 600px;    /* controla que no se haga gigante en desktop */
    object-fit: cover;    /* rellena sin franjas */
    display: block;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
    .video-wrapper video {
        max-height: 300px;  /* altura más pequeña en móvil */
    }
}