body {
    font-family: 'Montserrat', sans-serif;
  }

header {
position: relative;
background: url('/FONDO_INDEX-min.jpg') no-repeat center center/cover;
height: 100vh;
color: white;
text-align: center;
z-index: 1;
}

.navbar .styled-link {
font-family: 'Montserrat', sans-serif; /* Cambia la fuente */
font-size: 1rem; /* Ajusta el tamaño del texto */
font-weight: 500; /* Resalta el texto */
color: #555; /* Color inicial */
text-transform: uppercase; /* Convierte a mayúsculas */
letter-spacing: 0.05em; /* Espaciado entre letras */
position: relative; /* Posición relativa para pseudo-elementos */
transition: all 0.3s ease; /* Suaviza la transición */
}

.navbar .styled-link:hover {
color: #007bff; /* Cambia el color al pasar el mouse */
text-decoration: none; /* Elimina el subrayado */
}

.navbar .styled-link::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0%;
height: 2px;
background-color: #007bff; /* Línea decorativa */
transition: width 0.3s ease;
}

.navbar .styled-link:hover::after {
width: 100%; /* Expande la línea decorativa */
}


header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1); /* Ajusta el color y la transparencia */
z-index: -1;
}

.section-title {
    font-size: 2.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    background: linear-gradient(90deg, #61BCD8, #4BA2BD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
  }
  

  header .navbar {
    background: rgba(0, 0, 0, 0.7);
  }
  header h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-top: 20vh;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
  header p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  header .btn-contacto {
    background-color: #61BCD8;
    color: white;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    transition: all 0.4s ease;
  }
  
  header .btn-contacto:hover {
    background-color: #4BA2BD;
    transform: scale(1.2);
  }

 .btn-contacto {
    background-color: #61BCD8;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    color: white;
    transition: all 0.3s ease; /* Agrega una transición suave */
    }
    
    .btn-contacto:hover {
    background-color: #4BA2BD; /* Cambia el color al hacer hover */
    transform: scale(1.15); /* Aumenta ligeramente el tamaño */
    }
    
  .valores {
    padding: 8rem 2rem;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .valores h2 {
    margin-bottom: 3.5rem;
    color: #1E304C;
  }
  .valores .icono {
    font-size: 3rem;
    color: #61BCD8;
    margin-top: 5rem;
  }
  .valores p {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: #555;
  }
  footer {
    background-color: #F5F5F5;
    padding: 2rem;
    text-align: center;
  }
  footer a {
    color: #1E304C;
    text-decoration: none;
  }

  footer .btn {
font-size: 1rem;
padding: 0.5rem 1rem;
transition: all 0.3s ease;
}

footer .btn:hover {
background-color: #61BCD8;
color: white;
}

.carousel-container {
    perspective: 1000px;
    width: 100%;
    overflow: hidden;
    margin: auto;
  }
  
  .carousel {
    display: flex;
    transform-style: preserve-3d;
    animation: rotate 20s infinite linear;
    width: 100%;
    justify-content: center;
  }
  
  .carousel-item {
    width: 300px;
    height: 200px;
    margin: 0 15px;
    transform-origin: center;
    transform: rotateY(calc(var(--i) * 40deg)) translateZ(400px);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
  @keyframes rotate {
    from {
      transform: rotateY(0);
    }
    to {
      transform: rotateY(360deg);
    }
  }
  
  .card {
    position: relative; /* Necesario para posicionar el overlay */
    overflow: hidden; /* Asegura que el overlay no salga del card */
    border-radius: 8px; /* Aplica bordes redondeados */
  }
  
  .card .card-img-top {
    transition: transform 0.3s ease; /* Agrega una transición suave */
  }
  
  .card:hover .card-img-top {
    transform: scale(1); /* Aumenta ligeramente el tamaño al hacer hover */
  }
  
  .card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Capa de sombra blanca */
    opacity: 1; /* Visible por defecto */
    transition: opacity 0.3s ease; /* Transición para suavizar el cambio */
  }
  
  .card:hover::after {
    opacity: 0; /* Desaparece al hacer hover */
  }
  
  .ubicacion h2 {
    color: #1E304C;
    font-weight: bold;
  }
  
  .map-container {
    border: 2.5px solid #61BCD8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 
                0px 6px 20px rgba(0, 0, 0, 0.19); /* Sombra de relieve */
  }
  
  .ubicacion .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
  }
  
  .ubicacion .btn:hover {
    transform: scale(1.05);
  }

  .btn-waze {
    background-color: #2D89EF; /* Azul de Waze */
    color: white;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: none;
  }
  
  .btn-waze:hover {
    background-color: #1A73E8;
    transform: scale(1.05);
  }
  
  .btn-google-maps {
    background-color: #34A853; /* Verde de Google Maps */
    color: white;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: none;
  }
  
  .btn-google-maps:hover {
    background-color: #28A745;
    transform: scale(1.05);
  }
  
  .btn-waze i,
  .btn-google-maps i {
    font-size: 1.5rem;
  }
  
  /* Scroll personalizado */
::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #61BCD8, #1E304C);
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1E304C, #61BCD8);
  }
  
  ::-webkit-scrollbar-track {
    background: #DBDBDB;
    border-radius: 10px;
  }
  
  /* Botón flotante para ir al top */
  .cmn-divfloat {
    position: fixed !important;
    bottom: 45px;
    right: 15px;
    display: none;
    z-index: 1000;
  }
  
  .cmn-btncircle {
    width: 50px !important;
    height: 50px !important;
    padding: 10px 0px;
    border-radius: 25px;
    font-size: 18px;
    text-align: center;
    background: #61BCD8;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border: none;
  }
  
  .cmn-btncircle:hover {
    background: #1E304C;
    transform: scale(1.1);
  }