/* Fondo general de la página */
    body {
  background: url('../img/Rayosx.jpg') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: 'Istok Web', sans-serif;
    }

    /* En celulares el fondo no será fijo */
@media (max-width: 768px) {
    body {
        background-image: url('../img/Rayosx.jpg'); /* Define la imagen */
        background-repeat: no-repeat;            /* ¡Importante! Evita que la imagen se duplique */
        background-size: cover;                  /* Escala la imagen para cubrir el área, manteniendo su proporción */
        background-position: center;      /* Centra la imagen horizontal y verticalmente */
    }
}

    /* Ajuste para que las tarjetas queden debajo del encabezado/navbar */
    .main-content {
      margin-top: 140px; /* espacio debajo del navbar fijo */
      text-align: center;
    }

    /* Estilo para el título principal */
    .main-content h1 {
  color: #ffffff;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 1); /* más oscura y amplia */
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

h1:hover {
  transform: translateY(-5px); /* se mueve hacia arriba */
  text-shadow: 5px 5px 15px rgba(0, 0, 0, 1); /* sombra más intensa en hover */
}


    /* Contenedor que agrupa todas las tarjetas */
    .cards-container {
      max-width: 1400px;
      margin: auto;
      padding: 2rem;
      display: flex;
      justify-content: center;
      gap: 2rem;          
      flex-wrap: wrap;    
    }

    /* Estilo general de cada tarjeta */
    .card {
      background: rgba(255, 255, 255, 0.95); /* fondo blanco semi-transparente */
      padding: 1.5rem;    
      border-radius: 12px; 
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      flex: 1 1 250px;    
      max-width: 300px;   
      display: flex;
      flex-direction: column; 
      justify-content: space-between;
      transition: transform 0.2s ease, box-shadow 0.2s ease; 
    }

    /* Imagen dentro de las tarjetas */
    .card img {
      max-width: 100px;
      margin: 0 auto 1rem auto; 
    }

    /* Título de cada tarjeta */
    .card h3 {
      font-size: 1.2rem;
      margin-bottom: 0.75rem;
      color: #323232;
    }

    /* Texto descriptivo dentro de las tarjetas */
    .card p {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 1.2rem;
      flex-grow: 1; 
    }

    /* Efecto hover en la tarjeta */
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Botón dentro de las tarjetas */
    .btn-card {
      display: inline-block;
      background-color: #c0392b;
      color: #fff;
      padding: 0.6rem 1.2rem;
      border-radius: 6px;
      font-weight: bold;
      text-decoration: none;
      transition: background 0.2s ease;
    }

    /* Hover en botones */
    .btn-card:hover {
      background-color: #a83224;
    }
    
    /*Ajuste responsivo: en pantallas pequeñas las tarjetas se apilan en columna */ 
    @media (max-width: 768px) 
    { .cards-container { flex-direction: column; align-items: center; } 
        
    }