.servTitles{
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  font-style: normal;
  font-size:31px;
  font-style: normal;
  line-height:39px;
  letter-spacing:0.025em;
}

/* <weight>: Use a value from 100 to 900*/

.servTexto{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
  line-height:20px;
  letter-spacing:0.025em;
  margin-bottom:12px;
  max-width:450px;
}      
      
      
      
      .serv{
        display:flex;
        width:100%;
        /*background-color:green;*/
        padding:108px 20px 123px 20px;
        gap:60px;
        flex-direction:column;
        align-items:center;
      }  
      
      .servCaja{
        display:flex;
        width:100%;
        max-width:1178px;
        justify-content:space-between;
        gap:30px;
        align-items:center;
        /*background-color:purple;*/
      }
      
      
      
      .servLinea{
        display:flex;
        width:100%;
        background-color:#E0E0E0;
        height:1.62px;
        max-width:1341px;
      }
      
      
      .servFoto{
        display:flex;
        width:609.67px;
        height:335.47px;
        /*background-color:grey;*/
        border-radius:12px;
        flex-shrink:0;
      }
      
      /*.servFoto img{
        width:100%;
        height:100%;
        object-position:center;
        object-fit:cover;
      }*/
      
      .servInfo{
        display:flex;
        flex-direction:column;
        gap:18px;
        justify-content:center;
        /*background-color:pink;*/
      }
      
      
      
a.servBoton{
  all: unset;
  position: relative;
  cursor: pointer;
  padding: 14px 19px;
  background-color: #AE864E;
  text-align: center;
  border-radius: 13px;
  width:fit-content;
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 12.7px;
  letter-spacing: 0.02em;
  transition: all 0.20s ease;
}

a.servBoton:hover{
  transform: translateY(-8px);
}
      
      
   .serv-carrusel {
      display: flex;
      align-items: center;
      gap: 20px;
      width: 100%;
      border-radius: 10px;  
      position:relative;
    }

    .serv-arrow {
      background: #000;
      position:absolute;
      color: #fff;
      border: none;
      width: 36px;
      height: 36px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0;
      top:50%;
      transform:translateY(-50%);
    }
    
    .serv-arrow.serv-left {
      z-index:3;
      left:25px;
    }
    
    .serv-arrow.serv-right {
      z-index:3;
      right:25px;
    }

    .serv-wrapper {
      overflow: hidden;
      flex: 1;
      border-radius:12px;
    }

    .serv-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .serv-card {
      flex: 0 0 100%;
      height: 335.47px;
      background-color:lightgrey;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 20px;
    }
    
    .serv-card img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      background-color:black;
    }




        @media(max-width:1000px){


            .servFoto{
              width: 400px !important;
            }

.serv-carrusel{
    width: 400px;
  }

  .serv-card{
    flex: 0 0 100%;
  }

            


        }


          @media(max-width:900px){

            .serv{
              padding:60px 20px;
              gap: 50px;
            }


            .servCaja{
              flex-direction: column ;
              max-width: 900px;
            }

            .servInfo{
              max-width: 85%;
              align-items: center;
              text-align: center;
            }

            .servTexto{
              max-width: 600px;
            }

        }



        @media(max-width:600px){


            .serv{
              gap: 47px;
            }


            .servCaja{
              flex-direction: column ;
              max-width: 900px;
              justify-content: center;
              align-items: center;
            }

            .servInfo{
              max-width: 100%;
            }
            

  .servFoto{
    width: 95% !important;   /* ahora sí respetará el % */
    height: 300px !important;
  }

  .serv-carrusel{
    width: 100%;
    height: 300px;
  }

  .serv-card{
    flex: 0 0 100%;
    height: 300px;
  }


.servTitles{
  font-size: 24px;
  line-height: 32px;
}

.servTexto{
  font-size: 14px;
  line-height: 20px;
}

.servInfo{
  gap: 18px;
}

a.servBoton{
  font-size: 14px;
  padding: 11px 15px;
}

.servTexto{
  margin-bottom: 10px;
}

        }