body {
    background-color: #e9e9e9; /* Color de fondo para la página */
    font-family: sans-serif; /* Usamos una fuente más estándar */
}

header{
    text-align: center;
    font-size: 40px;
}

#tarjeta {
    max-width: 800px; /* Ancho máximo para que no ocupe toda la pantalla en monitores grandes */
    margin: 40px auto; /* Centra la tarjeta horizontalmente y le da espacio arriba y abajo */
    background-color: white; /* Fondo blanco para la tarjeta */
    border-radius: 15px; /* Bordes un poco más redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra para el efecto "superpuesto" */
    padding: 20px; /* Espacio interno para que el contenido no toque los bordes */
}

#header{
    text-align: center;
    font-size: 20px;
}
.caja{
    justify-content: center;
    display: grid;
    /* Por defecto (tabletas), usamos 2 columnas de tamaño flexible */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; /* 2. Añadimos un espacio consistente entre las cajas */
    padding: 20px; /* 3. Añadimos un poco de padding al contenedor general */
}

/* Estilos para cada enlace DENTRO de .caja */
.caja a {
    display: flex; /* Usamos flexbox para centrar el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    aspect-ratio: 1 / 1; /* Hacemos que la caja sea un cuadrado perfecto (relación de aspecto 1:1) */
    text-decoration: none; /* Quitamos el subrayado */
    color: black; /* Ponemos el color del texto en negro */
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra para el efecto "superpuesto" */
    /* El 'gap' en .caja ya se encarga del espaciado, no necesitamos margen aquí */
    text-align: center;
    background-color: #f0f0f0; /* Un color de fondo suave para distinguir las cajas */
}

/* Media Query para hacer el diseño adaptable (responsive) */
@media (max-width: 768px) { /* Para móviles y tabletas en vertical */
    .caja {
        grid-template-columns: 1fr; /* En pantallas pequeñas, mostramos solo 1 columna */
    }
}

@media (min-width: 992px) { /* Para pantallas de escritorio */
    .caja {
        grid-template-columns: repeat(3, 1fr); /* En pantallas grandes, mostramos 3 columnas */
    }
}