body {
    font-family: 'Inter', sans-serif;
    font-weight: 100 !important;
    font-size: 14px;
}
/* Font Weight  */
.bold-text{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.bold-text-500{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.bold-text-400{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.light-text{
    font-family: 'Inter', sans-serif;
    font-weight: 100 !important;
}

/* Containers color*/

.container-red{
    background-color: #E43131;
}

.container-white{
    background-color: #FFFFFF;
}

.container-black{
    background-color: #000000;
}

.container-gray{
    background-color: #F5F5F5;
}

.container-yellow{
    background-color: #FFAF00;
}

.container-blue{
    background-color: #142143;
}

.container-light-blue{
    background-color: #1A5D94;
}


/* Font colors */

.color-white{
    color: #FFFFFF;
}

.color-red{
    color: #E43131;
}

.color-yellow{
    color: #FFAF00;
}

.color-blue{
    color: #142143;
}

.color-light-blue{
    color: #1A5D94;
}


/* Font Size */
.size-140{
    font-size: 120px;
}
.size-50-number{
    font-size: 50px;
}
.size-50{
        font-size: 50px;
}

.size-80{
    font-size: 80px;
}

.size-70{
    font-size: 60px;
}

.size-40{
    font-size: 40px;
}

.size-35{
    font-size: 35px;
}

.size-30{
    font-size: 30px;
}

.size-25{
    font-size: 25px;
}

.size-20{
    font-size: 20px;
}

.size-18{
    font-size: 18px;
}

.size-16{
    font-size: 16px;
}

.size-14{
    font-size: 14px;
}

.size-12{
    font-size: 12px;
}

.size-10{
    font-size: 10px;
}

.break-email {
  word-break: break-all; /* fuerza a romper palabras largas */
}


.height-30{
    padding-bottom: 250px;
}

/* Images */

.square-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
}

/* El contenedor de la imagen ocupa la altura completa de la columna */
.img-cover {
  position: relative;
  height: 100%;
  overflow: hidden; /* oculta el recorte del object-fit */
  /* si tu clase border-radious-15 solo aplica a divs, aquí también lo respetas */
}


.cover-image{
    object-fit: cover;
}

.rectangle-image {
    width: 100%; 
    height: 250px; 
    object-fit: cover; 
}

.main-carrousel{
    height: 40rem;
    filter:brightness(0.7);
}

.carousel-image {
    height: 700px; 
    object-fit: cover; 
}

.image-transform{
    transition: transform 0.3s ease;
}

.image-transform:hover {
    transform: scale(1.01);
}

.black-background{
    filter:brightness(0.5);

}

.rectangle-image-big{
    width: 100%; 
    height: 350px; 
    object-fit: cover; 
}

.height-20{
    height: 650px;
}

.mascara{
  /* background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/Desinfeccion_patogema.png') center/cover no-repeat; */
  min-height: 550px;
  border-radius: 15px;
  display: flex;
  align-items: flex-end;
}

.control-de-plagas{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/control-de-plagas-especializado-saltillo.png') center/cover no-repeat;
}

.control-especializado{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/control-fauna-silvestre-saltillo.png') center/cover no-repeat;
}

/* .desinfeccion-patogena{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/Desinfeccion_patogema.png') center/cover no-repeat;
} */

.limpieza-superficies{
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/limpieza-de-superficies-con-hidrolavado-saltillo.png') center/cover no-repeat;
}

.content-bl{
  margin-left: 0;         /* ya está a la izquierda por defecto */
}


.sistemas-background {
    /* background: url("/img/image.jpg") no-repeat center center; */
    background: url("/img/img_home.jpg") no-repeat center center;
    /* img\Facultad Plantel\IMG_4267.jpg */
    background-size: cover;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
}

.container-content {
    background-color: rgba(255, 255, 255, 0.95);
    height: calc(100vh - 4rem); 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Custom Col */
.custom-col {
    flex: 0 0 30%; 
}

.custom-col-35 {
    flex: 0 0 32%; 
}

.custom-col-28 {
    flex: 0 0 28%; 
}

.custom-col-25 {
    flex: 0 0 24%; 
}

.custom-col-24 {
    flex: 0 0 24%; 
}

/* Buttons */

.button-yellow{
    background-color: #FFAF00;
    color: #FFFFFF;
    border: none;
    padding: 12px 22px;
    cursor: pointer;
    border-radius: 15px;
}

.button-yellow:hover{
    background-color: #142143;
    color: #FFFFFF;
}


.button-light-blue{
    background-color: #1A5D94;
    color: #FFFFFF;
    border: none;
    padding: 12px 22px;
    cursor: pointer;
    border-radius: 15px;
}

.button-light-blue:hover{
    background-color: #FFAF00;
    color: #FFFFFF;
}

.button-gray{
    background-color: #4F4F4F;
    color: #FFFFFF;
    border: none;
    padding: 12px 22px;
    /* border-radius: 5px; */
    cursor: pointer;
}

.button-gray:hover{
    background-color: #E43131;
    color: #FFFFFF;
}

/* Sidebar Map */
.sidebar-map{
    height:400;
    border:0;
}

/* Black Mask */
.image-container {
    position: relative; 
    overflow: hidden; 
}

.overlay {
    position: absolute;
    top: 0;
    width: 95%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centra el texto horizontalmente */
    align-items: center; /* Centra el texto verticalmente */
}

.plan-text {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

.image-container {
    position: relative;
}

.text-overlay {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 95%;
}

/* Logo */
.logo{
    width: 10rem;
}

/* Navbar */
.career-link:hover {
    background-color: #FFAF00!important; 
}

/* Text */
.no-display{
    display: none;
}

/* Border bottom */

.border_bottom{
    border-bottom: 2px solid #E43131;
}

.border-radious-15{
    border-radius: 15px;
}


/* Form */

label {
    font-weight: bold;
    color: #E43131; /* Rojo */
}

select, input, textarea {
    background-color: #1C1C1C;
    color: white;
    border: 1px solid #4F4F4F;
}

textarea {
    resize: none;
}

.btn-custom {
    background-color: #E43131;
    color: white;
    border: none;
    transition: 0.3s;
    border-radius: 0;

}
.btn-custom:hover {
    background-color: #000000;
    color: white;
}



/* .hero { 
  position: relative; 

   margin-bottom: auto;
} */
.hero { 

}

.hero-overlay{
  /* position: absolute; */
  /* position: relative;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: clamp(320px, 96vw, 1600px); 
  border-radius: 16px;
  padding: 32px 28px; */
  /* box-shadow: 0 20px 50px rgba(0,0,0,.35); */


    position: relative;              /* ya NO absolute */
  width: clamp(320px, 96vw, 1600px);
  border-radius: 16px;
  padding: 32px 28px;
  margin-left: auto;
  margin-right: auto;
  /* Hace que el bloque suba y se superponga un poco al carrusel en pantallas grandes */
  margin-top: clamp(-80px, -10vw, -24px);
 
}


.max-width-lg{
width: min(1600px, 100%);   
}

/* Tarjeta azul que sobresale del carrusel */
/* .hero-overlay {
  position: absolute;
  left: 50%;
  bottom: -160px;               
  transform: translateX(-50%);
  width: min(1600px, 100%);       
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  z-index: 20;                 
} */

/* Asegura contraste y que las flechas no tapen el overlay */
/* .carousel .carousel-control-prev,
.carousel .carousel-control-next { z-index: 30; } */

/* Tipografía responsiva del bloque azul */
/* .hero-overlay h4 { line-height: 1.2; }
.hero-overlay h5 { line-height: 1.45; } */

/* En pantallas chicas, que las columnas se apilen (ya está en HTML con col-12) */
/* @media (max-width: 991.98px) {
  .hero { margin-bottom: 160px; } 
} */




.width-cartas{
    height: 400px;
}

.height-testimonial{
    height:600px ;
}

@media (max-width: 995px) {

    .button-yellow{
    border-radius: 0%;
    }

    .size-20{
        font-size: 16px;
    }
    
    .size-18{
        font-size: 16px;
    }
    
    .size-16{
        font-size: 14px;
    }

    .sidebar-map{
        height:300;
    }

    .no-text-sm{
        display: none;
    }

    .size-50{
        font-size: 18px;
    }

    .size-70{
        font-size: 30px;
    }
    
    .size-140{
        font-size: 50px;
    }
    
    .main-carrousel{
        height: 18rem;

    }

    .size-40{
        font-size: 30px;
    }

    .custom-col {
    flex: 0 0 45%; 
    }
    
    .button-yellow{
    padding: 12px;
    text-align: center;
    }

    .show-1{
        display: none;
    }

     .hero-overlay{
    position: static;        /* deja de ser absoluto */
    transform: none;
    width: 90%;
    border-radius: 12px;
    box-shadow: none;
    padding: 16px;
    margin-top: 20px;
  }
  .hero{ margin-bottom: 0; }

  .mascara{
  /* background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    url('/img/Desinfeccion_patogema.png') center/cover no-repeat; */
  min-height: 350px;
  border-radius: 15px;
  display: flex;
  align-items: flex-end;
}


.height-20{
    height: auto;
    margin-top:20px;
}

.border-radious-15{
    border-radius: 0;
}


.width-cartas{
    height: auto;
    padding-bottom: 0;
}

.height-testimonial{
    height: auto;

}

}

@media (max-width: 500px) {
    .custom-col {
    flex: 0 0 90%; 
    }


    .phone-column{
        flex-direction: column;
    }

    .no-display{
        display: inline;
    }


}

























/* Contenedor con esquinas limpias */
.testimonio{
  border-radius: 8px;
  overflow: hidden;          /* para que la imagen “empate” sin bordes */
}

/* Imagen a la derecha: ocupa toda la columna, no se deforma */
.testimonio-img{
  background: url('/img/control-de-plagas-especializado-saltillo.png') center / cover no-repeat;
  min-height: 320px;         /* asegura alto en móviles */
}

/* En desktop, sube el alto para empatar visualmente con el bloque de texto */
@media (min-width: 992px){
  .testimonio-img{ min-height: 520px; } /* ajusta a tu gusto (500–560px) */
}





.height-10 {
    height: 150px;
    
}

.hover-blue:hover{
    background-color: #1A5D94;
    color: white;
}

.hover-yellow:hover{
    background-color: #FFAF00;
    color: white;
}






.service{
  position: relative;
  /* min-height: 340px; */
  border-radius: 12px;
  overflow: hidden;
}

.service .bg-cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* clave para “cover” en <img> */
  object-position: center;
  z-index: 0;
}

.service::after{
  content: "";
  position: absolute;
  inset: 0;
  /**background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 100%);**/
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75));
  z-index: 0;
}

.service .content-bl{
  position: relative;
  z-index: 1;
  padding: 1rem 1rem 1.25rem;
  margin-top: auto; /* si usas flex dentro */
}


.faq-acc{
  --faq-yellow:#FFB000;
}

.faq-acc .accordion-item{
  border:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  margin-bottom:1rem;
}

.faq-acc .accordion-button{
  background:#fff;
  color:#0F2745;              /* azul oscuro legible */
  padding:1rem 1.25rem;
}

/* Quita el chevron default de Bootstrap, usamos FA */
.faq-acc .accordion-button::after{ display:none; }

.faq-acc .accordion-button:focus{ box-shadow:none; }

.faq-acc .chev{ color:#0F2745; transition:transform .2s ease, color .2s ease; }

/* Al abrir: texto y chevron en amarillo */
.faq-acc .accordion-button[aria-expanded="true"]{
  color:var(--faq-yellow);
}
.faq-acc .accordion-button[aria-expanded="true"] .chev{
  color:var(--faq-yellow);
  transform:rotate(180deg);
}





















/* --- Slider layout --- */
.team-slider{
  position: relative;
  /* --gap: 20px;  */
}
.team-slider .cards-viewport{
  overflow: hidden;
}
.team-slider .cards-track{
  display: flex;
  gap: var(--gap);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px; /* evita que aparezca scrollbar grueso en algunos SO */
}
.team-slider .team-card-outer{
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Cards por vista (responsive) */
@media (max-width: 767.98px){
  .team-slider .team-card-outer{ width: 100%; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .team-slider .team-card-outer{ width: calc(50% - var(--gap)/2); }
}
@media (min-width: 992px){
  .team-slider .team-card-outer{ width: calc((100% - var(--gap)*2) / 3); } /* 3 por vista */
}

/* Flechas */
.team-slider .slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: #0e2744;  /* azul CPS */
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  z-index: 2;
}
.team-slider .slider-btn.prev{ left: -6px; }
.team-slider .slider-btn.next{ right: -6px; }
.team-slider.hide-arrows .slider-btn{ display: none; }

/* Opcional: oculta flechas en móvil (arrastre táctil) */
@media (max-width: 767.98px){
  /* .team-slider .slider-btn{ display: none; } */
}

/* --- (Tu CSS de flip card sigue igual) --- */






/* Contenedor con perspectiva */
.team-card{
  position: relative;
  perspective: 1000px;
  min-height: 430px;            /* ajusta a la altura que quieras */
  border-radius: 16px;
}

/* Elemento que rota */
.team-card .flip{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}

/* Caras */
.team-card .face{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  backface-visibility: hidden;
  border-radius: 16px;
  background: #0e2744;          /* azul oscuro CPS */
  color: #fff;
  /* box-shadow: 0 10px 30px rgba(0,0,0,.15); */
}

.team-card .front{
  background: #fff;             /* frente claro */
  color: #0e2744;
}

.team-card .front img{
  width: 75%;
  max-width: 260px;
  margin: 0 auto;
  object-fit: contain;
}

.team-card .back{
  transform: rotateY(180deg);
  overflow: auto;               /* por si el texto crece */
}

/* Estado volteado */
.team-card.is-flipped .flip{
  transform: rotateY(180deg);
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .team-card .flip{ transition: none; }
}

/* Opcional: alturas más compactas en móvil */
@media (max-width: 575.98px){
  .team-card{ min-height: 450px; }
}












.review-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.review-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: auto;
}