/* styles.css */
@media (max-width: 640px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  
  header .flex {
    flex-direction: column;
  }
  
  nav ul {
    flex-direction: column;
    width: 100%;
  }
  
  nav ul li {
    margin-top: 0.5rem;
  }
  
  #menu-btn {
    display: block;
  }

  nav ul {
    display: none;
  }

  nav ul.active {
    display: flex;
  }
}

/* Tamaño de texto responsivo */
h1 {
  text-size-adjust: 100%;
}



.service-card {
    background-color: #f9fafb; /* Fondo claro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    display: flex;
    flex-direction: column; /* Organización vertical */
    justify-content: space-between; /* Espacio distribuido */
    height: 100%; /* Altura completa para igualar tarjetas */
  }

  .service-title {
    font-size: 1.5rem; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    margin-bottom: 12px; /* Espaciado debajo del título */
  }

  .service-description {
    font-size: 1rem; /* Tamaño de fuente para descripción */
    margin-bottom: 12px; /* Espaciado debajo de la descripción */
    text-align: justify; /* Texto justificado */
  }

  .service-topics {
    list-style-type: disc; /* Estilo de lista */
    list-style-position: inside; /* Posición de viñetas */
    margin-bottom: 12px; /* Espaciado debajo de la lista */
  }

  .service-cta {
    background-color: #4f46e5; /* Color del botón */
    color: white; /* Texto blanco */
    text-align: center; /* Texto centrado */
    padding: 10px; /* Espaciado interno */
    border-radius: 6px; /* Bordes redondeados del botón */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Negrita */
    transition: background-color 0.3s; /* Transición suave */
  }

  .service-cta:hover {
    background-color: #4338ca; /* Color al pasar el mouse */
  }

.card {
    perspective: 1000px;
    width: 100%;
    height: 360px; /* Ajusta según el contenido */
    position: relative;
    cursor: pointer;
  }
  
.card-face {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
.card:hover .front {
    transform: rotateY(180deg);
}
  
.card:hover .back {
    transform: rotateY(0deg);
}
  
.back {
    transform: rotateY(180deg);
}
  
.bg-pastel-blue {
    background-color: #ebf8ff; /* Suave color pastel */
}
  
/* Estilo para el contenido de la tarjeta */
.card-content {
    padding: 20px;
}

#menu-btn {
  display: none; /* Oculta el botón de menú por defecto */
}

@media (max-width: 640px) {
  /* Solo muestra el botón del menú en pantallas pequeñas */
  #menu-btn {
    display: block;
  }
  
  /* Oculta los enlaces de navegación por defecto en pantallas pequeñas */
  nav ul {
    display: none;
  }
  
  /* Cuando se añade la clase .active, muestra los enlaces */
  nav ul.active {
    display: block;
  }
}