/* Nuevas clases personalizadas para evitar conflictos */

/* Contenedor del carrusel */
#mis-servicios {
    display: flex;
    gap: 15px;
  }
  
  /* Cada servicio como item */
.service-item {
    position: relative;
    width: 300px;
    height: 400px;
    margin-bottom: 20px; /* Añadir separación entre los servicios */
    display: block; /* Asegura que el bloque se vea correctamente */
  }

  .service-item img {
    width: 100%;
    height: auto;
  }
  
  /* Estructura de la tarjeta que da el giro */
  .service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-in-out; /* Control de la animación de giro */
  }
  
  /* Al pasar el mouse sobre el servicio, la tarjeta gira */
  .service-item:hover .service-card-inner {
    transform: rotateY(180deg); /* Esto genera el giro */
  }
  
  /* Parte frontal de la tarjeta */
  .service-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la parte trasera cuando está girada */
    z-index: 2;
  }
  
  .service-card-front img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  /* Parte posterior de la tarjeta */
  .service-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la parte frontal cuando se voltea */
    transform: rotateY(180deg); /* Coloca la parte posterior volteada */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

 /* Estilo para el texto sobre la imagen */
.service-name-overlay {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 50%; /* Centra verticalmente el texto */
    left: 50%; /* Centra horizontalmente el texto */
    transform: translate(-50%, -50%); /* Ajusta la posición para que quede perfectamente centrado */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente para que el texto resalte */
    padding: 10px;
    border-radius: 5px; /* Borde suave */
    z-index: 3; /* Asegura que el texto esté por encima de la imagen */
    font-size: 16px; /* Reducir el tamaño del texto */
    top: 40%; /* Ajustar la posición para que quede mejor en móviles */
  }

  .service-name-overlay h4 {
    color: white; /* Color del texto */
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    font-size: 20px; /* Ajuste de tamaño del texto */
  }

  /* Para ajustar la posición del botón */
.service-card-back .service-text {
    padding: 20px; /* Asegúrate de que haya suficiente espacio alrededor del contenido */
  }
  
  .service-card-back .service-text .btn {
    margin-top: -20px; /* Desplaza el botón hacia arriba */
  }
  
  /* Diseño de los textos y botón en la parte posterior */
  .service-text h4 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .service-text p {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .service-text .btn {
    background-color: black; /* Fondo negro */
    color: white; /* Letra blanca */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
  }
  
  .service-text .btn:hover {
    background-color: yellow; /* Fondo amarillo al hacer hover */
    color: black; /* Letra negra en el hover */
  }
  
  @media (max-width: 768px) {
    .service-item {
      width: 100%; /* Hace que el bloque ocupe el 100% del ancho en pantallas más pequeñas */
      height: auto; /* Hace que la altura se ajuste automáticamente */
      display: block; /* Asegura que el bloque se muestre */
      margin-bottom: 15px; /* Agrega un margen inferior para separar los items */
    }
  }
  /* Ajustes para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    /* Desactivar el giro en pantallas pequeñas */
    .service-item:hover .service-card-inner {
      transform: none;
    }
  
    .service-card-inner {
      transition: none; /* Desactivar la animación de giro */
    }
  
    /* Asegurar que las imágenes se ajusten bien */
    .service-card-front img {
      object-fit: cover; /* Mantener la relación de aspecto */
    }
  
    /* Asegurarse de que las tarjetas no ocupen más del 100% */
    .service-item {
      width: 100%;
      margin-bottom: 15px; /* Añadir espacio entre las tarjetas */
    }
  }

  /* Estilo para el botón elegante */
.btn-elegante {
    background-color: #312F2D; /* Color verde como el del cheque */
    color: white; /* Texto blanco */
    font-size: 18px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita para el texto */
    padding: 12px 30px; /* Espaciado alrededor del texto */
    border-radius: 30px; /* Bordes redondeados */
    text-transform: uppercase; /* Texto en mayúsculas */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animación suave */
    text-decoration: none; /* Quitar subrayado del enlace */
    border: 2px solid #CBA95C; /* Borde dorado */
  }
  
  .btn-elegante:hover {
    background-color: #f8fbf9; /* Color verde más oscuro al pasar el mouse */
    color: #312F2D; /* Texto blanco */
    border: 2px solid #CBA95C; /* Borde dorado */
    transform: translateY(-5px); /* Efecto de levantar el botón al pasar el mouse */
  }
  
  .btn-elegante:active {
    transform: translateY(0); /* Efecto de volver al lugar original cuando se hace clic */
  }