body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #21253a; /* Fondo oscuro profesional */
    color: #E0E0E0; /* Texto claro para mayor legibilidad */
    text-align: center;
}

h1 {
    margin: 20px 0;
    color: #FFFFFF; /* Texto claro */
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.card {
    background-color: #060606; /* Color de la tarjeta */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(43, 172, 200, 0.3); /* Sombra más sutil */
    margin: 20px;
    width: 300px;
    overflow: hidden;
    transition: transform 0.2s;
    border: 1px solid #333; /* Borde sutil */
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    width: 100%;
    height: auto;
}

.card h2 {
    color: #ECECEC; /* Texto claro en tarjetas */
    margin: 10px 0;
}

.card p {
    padding: 20px;
    color: #B0B0B0;
    margin: 0;
    flex-grow: 1;
    display: block; /* Cambiar a block para que el párrafo utilice el ancho completo */
    align-items: stretch; /* Quitar para evitar conflictos en centrar el texto */
    justify-content: flex-start; /* Cambiar a flex-start para alinear el texto a la izquierda */
    text-align: left;
    letter-spacing: 1px; /* Disminuir el espaciado de letras para mejorar la legibilidad */
    line-height: 1.5; /* Ajustar line-height para un mejor flujo de texto */
    width: 100%; /* Asegura que ocupe todo el espacio disponible */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    word-wrap: break-word; /* Permite que las palabras se dividan */
}












.card .title {
    font-weight: bold;
    margin-bottom: 2px;
    color: orange;
}

@media (min-width: 769px) {
    .card-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card {
        width: calc(50% - 10px);
    }
}





table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    text-align: left;
}

table tr {
    border-bottom: 1px solid #ddd;
}

table td {
    padding: 8px 12px;
    color: #333;
}

table tr:hover {
    background-color: #f1f1f1;
}

table a {
    color: #007bff;
    text-decoration: none;
}

table a:hover {
    text-decoration: underline;
}