/*
Theme Name: Salud Laboral del Noroeste
Theme URI: http://bild.mx/
Description: Template para Salud Laboral
Version: 1.0
Author: Code
Author URI: http://bild.mx/
*/

  color: #1E1E1E;
  body, html{
  font-size: 18px;
  font-family: "hanken-grotesk", sans-serif;
}

:root {
  --primary-color: #265CD9;
  --grey-color: #1E1E1E;
  --light-grey-color: #f3f3f3;
}

a{
  color: unset;
}

.bg-primario{
  background-color: var(--primary-color);
}
.bg-gris{
  background: var(--grey-color);
}
.bg-light-gris{
  background: var(--light-grey-color);
}

.color-primario{
  color: var(--primary-color);
}
.color-gris{
  color: var(--grey-color);
}

.color-blanco{
  color: white !important;
}

.button{
  border-radius: 21px;
  padding:  11px 21px;
}
.btn-primary{
  background: #265CD9;
}
.hanken{
  font-family: "hanken-grotesk", sans-serif;
}

/* General */

a{
  text-decoration: none;
}

/* sizes */
.f1{
  /* */
  font-size: 4.7rem;
}
.f2{
  font-size: 3.5rem;
}
.f3{
  font-size:  2.2rem;
}
.f4{
  font-size: 1.3rem;
}
.f5{
  font-size: .8rem;
}
.big-title{
  font-size: 4.7rem
}
.description{
  font-sie: 1.6rem;
}
.vertical-center{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


#home{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 0;
}
#video-banner{
  position: relative;
  width: 100%;
  z-index: -1;
}
.text-slider-black{
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 45.81%, #000 100%);
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}

.text-slider{
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 45.81%, #FFF 100%);
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}
.content{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}
.title{
  font-size: 4.7rem;
}

.text-and-images{

  padding: 100px 0 0px;
}
.text-and-images .text-container{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.imagenes-wrapper {
  display: inline-block;
  position: relative;
  width: 350px;   /* ajusta al tamaño que quieras */
  height: 350px;
}

/* Imagen trasera */
.img-back {
  position: absolute;
  top: 0;
  left: 120px; /* mueve la imagen hacia la derecha */
  width: 230px;
  height: 260px;
  background-image: url("https://concepto.de/wp-content/uploads/2014/10/microscopio-2-e1550968251461.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* Imagen frontal */
.img-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 260px;
  background-image: url("https://ucpcdn.thyssenkrupp.com/_media/eyJrZXkiOiJfbWVkaWEvVUNQdGh5c3NlbmtydXBwQkFNYXRlcmlhbHNJQi8yMmQ1ZjIxNy0xYWY3LTRiOWMtYTYyOS04NmIzMWJhMjQ0OWQvQWRvYmVTdG9ja18xNjgwNzE2NDAuanBlZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTkyMH19fQ==");
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.services{
  padding: 100px 0;
}

.card-servicio {
  position: relative;
  width: 100%;
  height: 370px;
  padding: 30px;
  background: #f4f4f4;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
}

/* CONTENIDO */
.card-servicio .content {
  position: relative;
  z-index: 2;
}

.numero {
  font-size: 16px;
  color: #2e63ff;
  font-weight: 500;
}

.flecha {
  position: absolute;
  top: 90px;
  right: 20px;
  color: #2e63ff;
  font-size: 22px;
}

.titulo {
  font-family: "hanken-grotesk", sans-serif;
  margin-top: 110px;
  font-size: 20px;
  font-weight: 400;
}

.titulo span {
  color: #2e63ff;
}

.linea {
  width: 100%;
  height: 1px;
  background: #000;
  margin: 10px 0;
  opacity: .3;
}

.descripcion {
  font-size: 14px;
  color: #333;
  max-width: 240px;
  line-height: 1.4;
}

/* IMAGEN DE HOVER */
.bg-hover {
  position: absolute;
  inset: 0;
  background-image: url("https://img.freepik.com/foto-gratis/primer-plano-medico-que-usa-otoscopio-hacer-consulta-oido-paciente-mujer-otologa-revisando-infeccion-instrumento-otorrinolaringologia-visita-medica-pandemia-coronavirus_482257-38496.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 1;
}

/* EFECTO HOVER */
.card-servicio:hover .bg-hover {
  opacity: 1;
  transform: scale(1);
}

.card-servicio:hover .content {
  color: #fff;
  transition: .3s ease;
}

.card-servicio:hover .titulo span,
.card-servicio:hover .flecha,
.card-servicio:hover .numero {
  color: #fff;
}
.card-servicio:hover .linea, .card-servicio:hover .descripcion{
  visibility: hidden;
}
.trust{
  background: #C9C9C9;
  padding: 100px 0;
}


.marquee-container{
  padding: 100px 0;
}
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  background: white; /* opcional */
}

.marquee-track {
  display: flex;
  gap: 60px;
  animation: scroll 20s linear infinite;
}

.marquee img {
  height: 60px;        /* Ajusta el tamaño del logo */
  width: auto;
  object-fit: contain;
  filter: grayscale(0.2); /* opcional */
  transition: filter .3s;
}

.marquee img:hover {
  filter: grayscale(0);
}

/* Animación */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.normal{
  padding: 100px 0;

}

.foto{

}

.foto {
  border-radius: 10px;
  position: relative;
  width: 100%;
}


.foto::before {
  content: '';
  display: block;
  padding-top: 66%;
}

.servicios-banner{

}
.servicios-banner .text-container{
  padding: 150px 100px;
}
.servicios-banner .image-container{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

footer{
  background: #C9C9C9;
}


@media (max-width: 992px) {
  #video-banner {
    height: 80vh;
    object-fit: cover;
  }

  section, .text-and-images, .services, .trust, .normal, .text-slider, .text-slider-black{
    padding-left: 15px;
    padding-right: 15px;
  }
  .title, .f1{
    font-size: 2.7rem;
  }
  .f2{
    font-size: 2rem;
  }
  .f4{
    font-size: 1rem;
  }
  .trust .col {
    flex: auto;
    margin-bottom: 20px;
    width: 50%;
  }
  .blog .col {
    flex: auto;
    margin-bottom: 40px;
    width: 100%;
  }
  .normal{
    padding-bottom: 50px;
    padding-top: 50px;
  }
  #home{
    height: auto;
  }
  .servicios-banner .text-container{
    padding: 50px 20px;
  }
  .servicios-banner .image-container{
    height: 500px;
  }
}