@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    /* Bajamos la intensidad del blanco a un gris muy sutil para que el blanco puro de las cards resalte */
    background-color: #c3d2e3; /* Equivalente a bg-slate-200 de Tailwind */
}

.hero-gradient {
    background: linear-gradient(125deg, rgba(21, 31, 48, 0.9) 0%, rgba(22, 31, 47, 0.6) 100%),
        url('../images/tuxentallerlinux2.png');
    background-size: cover; 
    background-position: bottom center;
    background-attachment: fixed;
}

.card-hover:hover {
    transform: translateY(-4px);
    /* Mejoramos el contraste de la sombra al hacer hover para que "salga" de la pantalla */
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15); 
}

.mesa-debian { border-top: 6px solid #d70a53; }
.mesa-fedora { border-top: 6px solid #294172; }
.mesa-arch { border-top: 6px solid #1793d1; }

.tag {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

button, a {
    cursor: pointer;
    touch-action: manipulation;
}
.code-block {
    background: #1e293b;
    color: #38bdf8;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-family: monospace;
    font-size: 0.875rem;
    border: 1px solid #334155;
    /* Añade estas dos líneas para móviles */
    overflow-x: auto;
    white-space: nowrap;
}