body {
    background: #fff;
    /* fondo general blanco */
    font-family: Arial, sans-serif;
    color: #111;
    /* texto oscuro para contraste */
    margin: 0;
    padding: 0;
}

.section {
    padding: 20px;
    text-align: center;
    background: #fff;
    /* sección blanca */
}

.section-title {
    font-size: 1.6em;
    /* tamaño mayor */
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 20px;
}

.cards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* espacio entre cards */
}

.card {
    background: #111;
    /* fondo negro SOLO en las tarjetas */
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    width: 340px;
    /* ancho definitivo para todas las cards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease;
    color: #fff;
    /* texto blanco dentro de la tarjeta */
    display: flex;
    flex-direction: column;
    /* asegura que contenido y acción se apilen */
}

.card:hover {
    transform: translateY(-5px);
    /* movimiento sutil al pasar el mouse */
}

.card-image img {
    width: 100%;
    display: block;
}

.card-content {
    flex: 1;
    /* ocupa el espacio disponible */
    padding: 15px;
    text-align: center;
    /* centra título y párrafo */
    min-height: 120px;
    /* altura mínima para nivelar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centra verticalmente */
}

.card-title {
    font-size: 1.2em;
    margin-bottom: 5px;
    color: #00c4ff;
    /* celeste institucional */
    display: block;
    text-align: center;
    word-wrap: break-word;
    /* corta títulos largos */
}

.card-content p {
    margin: 0;
    text-align: center;
    /* centra el párrafo (ej: “Busto”) */
}

.card-action {
    padding: 10px 15px;
    background: #222;
    /* gris oscuro dentro de la tarjeta */
    text-align: center;
    /* centra el enlace */
}

.card-action a {
    color: #00c4ff;
    text-decoration: none;
    font-weight: bold;
}

.card-action a:hover {
    text-decoration: underline;
}

.cards-row.fila2 {
    margin-top: 2cm;
    /* espacio entre fila 1 y fila 2 */
}

.cards-row.fila3 {
    margin-top: 2cm;
    /* espacio entre fila 2 y fila 3 */
}

.cards-row.fila4 {
    margin-top: 2cm;
    /* espacio entre fila 3 y fila 4 */
}

.cards-row.fila5 {
    margin-top: 2cm;
    /* espacio entre fila 4 y fila 5 */
}

.cards-row.fila6 {
    margin-top: 2cm;
    /* espacio entre fila 5 y fila 6 */
}

.fila6 .card-content p {
    text-align: left;
    /* alinea los textos descriptivos al margen izquierdo */
}


/* Espacio entre la primera y segunda fila de cards */
.cards-row+.cards-row {
    margin-top: 2cm;
}



/* ========================= */
/* 📱 Responsive para móviles */
/* ========================= */
@media (max-width: 768px) {
    .cards-row {
        flex-direction: column;
        /* apila las cards en una sola columna */
        align-items: center;
        /* centra las cards */
    }

    .card {
        width: 90%;
        /* ocupa casi todo el ancho en móviles */
        max-width: 400px;
        /* límite para que no se estiren demasiado */
    }
}