/* Contenedor principal */
.destacados-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
  }

  .servicio-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
  }
  
  
  /* Grid fijo de tres columnas */
  .destacados-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Siempre 3 columnas */
    gap: 20px; /* Separación entre las tarjetas */
    justify-items: center; /* Centrar tarjetas en su celda */
    align-items: start;
  }
  
  /* Diseño de las tarjetas */
  .servicio {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 15px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    text-align: center;
  }
  
  .servicio:hover {
    transform: translateY(-5px); /* Efecto al elevarse */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.9);
  }
  
  /* Títulos y texto */
  .servicio h2 {
    color: #007BFF;
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .servicio p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  
  /* Botones */
  .acciones {
    display: flex;
    justify-content: center;
    gap: 15px;
  }
  
  .btn-detalle,
  .btn-contacto {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .btn-detalle {
    background-color: #007BFF;
  }
  
  .btn-detalle:hover {
    background-color: #0056b3;
  }
  
  .btn-contacto {
    background-color: #28A745;
  }
  
  .btn-contacto:hover {
    background-color: #1e7d32;
  }
  
  /* Adaptabilidad para pantallas pequeñas */
  @media (max-width: 768px) {
    .destacados-container {
      grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablets */
    }
  }
  
  @media (max-width: 480px) {
    .destacados-container {
      grid-template-columns: 1fr; /* Una columna en móviles */
    }
  }