/* ----------ESTILO BASE------------------ */
body {margin: 0;font-family: Arial, Helvetica, sans-serif;background: radial-gradient(circle at center,
 rgba(120, 80, 160, 0.35) 0%,rgba(60, 40, 80, 0.55) 40%,rgba(20, 20, 30, 0.85) 100%);
    background-attachment: fixed;}
/* ---------GRID PROFESIONAL (2 columnas adaptativas)------------------ */
.gridContainer {width: 100%;margin: 0 auto;padding: 20px;display: grid;gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));}
/* --------TARJETAS--------------------- */
.card {position: relative;overflow: hidden;border-radius: 8px;
    background: transparent !important;padding: 0 !important;margin: 0 !important;border: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);transition: transform 0.35s ease, box-shadow 0.35s ease;}
.card:hover {transform: scale(1.02);box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);}
/* --------IMAGENES--------------- */
.card img {width: 100%;height: 420px;display: block;object-fit: cover;object-position: center;
transition: transform 0.6s ease;}
.card:hover img {transform: scale(1);}
/* -- TOOLTIP USANDO data-title------- */
.card:hover::after {content: attr(data-title);position: absolute;top: 12px;left: 12px;
background: linear-gradient(135deg,rgba(180, 120, 255, 0.35) 0%,rgba(120, 60, 200, 0.15) 50%,
rgba(255, 255, 255, 0.05) 100%);backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);padding: 14px 22px;border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.35);box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
color: #fff;font-size: 20px;font-weight: 600;letter-spacing: 0.5px;
pointer-events: none;opacity: 0;transform: translateY(-8px);animation: fadeInTooltip 0.35s ease forwards;}
@keyframes fadeInTooltip {to {opacity: 1;transform: translateY(0);}}
/* Botón flotante sobre la imagen */
.boton-descarga {position: absolute;bottom: 14px;right: 14px;padding: 10px 18px;background-color: #007BFF;
color: white;font-weight: bold;text-decoration: none;border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
transition: background-color 0.3s ease, transform 0.2s ease;opacity: 0;transform: translateY(8px);}
/* Aparece solo al pasar el ratón */
.card:hover .boton-descarga {opacity: 1;transform: translateY(0);}
.boton-descarga:hover {background-color: #0056b3;transform: scale(1.05);}